O documento discute interfaces de usuário e estilos de interação. Aborda conceitos como interface, usabilidade, comunicabilidade e perspectivas em Interação Homem-Computador. Também descreve estilos de interação como linguagem natural, de comando, menus e preenchimento de formulários.

1. Algoritmos e Programação II
Interface &
Estilos de Interação
Fábio Moura
fabio.mpereira@uesb.edu.br

2. 2
Interface
Interface e Interação
Paradigmas da Comunicação Humano- Computador e o Design de Interfaces
Usabilidade
Comunicabilidade
Perspectivas em IHC

3. 3
Interface
Conceito inicial
O hardware e o software através dos quais um humano e um computador podem se comunicar
Conceito atual
Inclui aspectos relativos ao processamento perceptual, motor, viso-motor e cognitivo do usuário

4. 4
Interface do Usuário
Tem como objetivo fornecer uma interação humano-computador o mais “amigável” possível
Fácil de ser usada pelo usuário
Fornecer seqüências simples e consistentes de interação
Mostrar claramente as alternativas disponíveis a cada passo da interação
Não confundir nem deixar o usuário inseguro
Deve passar despercebida para que o usuário possa se fixar somente no problema que deseja resolver utilizando o sistema

5. 5
Interface do Usuário
Abrange todas as partes que constituem um sistema com o qual o usuário pode interagir
É por meio da interface que se pode ter um efetivo uso da aplicação
Um bom projeto de interface é responsável por fatores como a satisfação subjetiva, a eficiência, a segurança, o custo de treinamento e o retorno do investimento

6. Interface
Interface e Interação

7. 7
Interface e Interação
Interface entre Homem e Máquina é a parte de um dispositivo que permite ao usuário administrar e supervisionar o funcionamento do referido dispositivo
Utiliza para isso dispositivos que sejam sensíveis aos seus comandos e que, ao mesmo tempo, consigam estimular a percepção do usuário

8. 8
Interface e Interação
Na relação entre usuário e sistema, a interface faz referência ao esforço conjugado de software e hardware, que atuam simultaneamente para possibilitar e descomplicar a comunicação entre o usuário e a aplicação

9. 9
Interface e Interação
Uma vez que exige do usuário uma maior capacidade cognitiva para a interpretação e expressão de informações processadas por um sistema computacional, a interface entre usuários e sistemas computacionais difere muito das interfaces de máquinas convencionais

10. Interface
Paradigmas da Comunicação Humano-Computador e o Design de Interfaces

11. 11
Paradigmas da Comunicação Humano- Computador e o Design de Interfaces
O processo de design em IHC
Envolve desde uma discussão crítica dos ciclos de vida clássicos para o desenvolvimento de software, originais da Engenharia de Software, até modelos mais específicos do ciclo de design
Em geral envolvem, além do desenvolvimento do sistema propriamente dito, um contexto mais amplo que inclui também questões de natureza social e de organização do trabalho

12. 12
Paradigmas da Comunicação Humano- Computador e o Design de Interfaces
A interface de usuário deve ser entendida como sendo a parte de um sistema computacional com a qual uma pessoa entra em contato físico, perceptiva e conceitualmente
Componente físico, percebido e manipulado pelo usuário
Componente conceitual, apenas interpretado, processado e raciocinado pelo usuário – modelo conceitual do usuário

13. 13
Paradigmas da Comunicação Humano- Computador e o Design de Interfaces
A interface é um sistema de comunicação, constituído de hardware e software
Hardware – dispositivos, que permitem ao usuário de um sistema realizar atividades motoras e perceptivas, tais como o monitor, o teclado, o mouse, etc.
Software – parte do sistema que ativa os controles de hardware por meio de sistemas computacionais

14. 14
Paradigmas da Comunicação Humano- Computador e o Design de Interfaces
A interface também pode ser caracterizada pela revelação das affordances do sistema
Propriedades percebidas e reais de um dispositivo que determinam a sua efetiva utilização
Oferecem claras indicações sobre a operação de um dispositivo
O usuário, observando um dispositivo, sabe exatamente o que fazer com ele
A affordance de um botão é ser pressionado, a affordance de um interruptor é ser comutado, etc.

15. 15
Sistema
Usuário
Processo de Interação Humano-Computador
Interface
Aplicação
Ação
Interpretação

16. Interface
Usabilidade

17. 17
Usabilidade
Qualidade da relação entre sistemas computacionais e usuários
Envolve diversos aspectos
Facilidade de aprendizado do sistema
Tempo e esforço necessários para que os usuários atinjam um determinado nível de desempenho
Facilidade de uso
Avalia o esforço físico e cognitivo do usuário durante o processo de interação
Mede a velocidade de uso e o número de erros cometidos durante a execução de uma tarefa

18. 18
Usabilidade
Satisfação do usuário
Avalia se o usuário gosta e sente prazer em trabalhar com o sistema
Flexibilidade
Avalia a possibilidade de o usuário acrescentar e modificar as funções e o ambiente iniciais do sistema
Mede também a capacidade do usuário utilizar o sistema de maneira inteligente e criativa, realizando novas tarefas não previstas pelos desenvolvedores

19. 19
Usabilidade
Produtividade
Se o uso do sistema permite ao usuário ser mais produtivo do que seria se não o utilizasse
É necessário que o projetista de sistemas (designer) determine quais dos aspectos indicados são prioritários para o sistema
É praticamente impossível cuidar de todos de modo satisfatório
São as escolhas do designer que vão determinar a maneira de usuários e sistemas interagirem

20. 20
Usabilidade
Sistemas que limitam as possibilidades de ação e decisão do usuário, impedindo que erros sejam cometidos
Anti-idiotas (idiot-proof)
Novas tecnologias apenas serão mais eficientes quando forem desenvolvidas para ampliar, e não para substituir, as capacidades dos usuários
Desafio de usabilidade
A tecnologia deve visar sempre estimular a eficiência e a inteligência das pessoas

21. 21
Usabilidade
Aplicabilidade
Além da usabilidade, faz-se necessário que os sistemas sejam úteis na solução de problemas distintos
Todo usuário é especializado em alguma área, e assim sendo o software deve ser útil à sua especialidade, funcionando como uma ferramenta a serviço do usuário, em vez de colocar o usuário a serviço da tecnologia

22. Interface
Comunicabilidade

23. 23
Comunicabilidade
Propriedade de transmitir eficaz e eficientemente ao usuário as intenções e os princípios de interação que nortearam a criação de um sistema
Tem por objetivo tornar o usuário capaz de entender o senso lógico do projetista de sistemas durante o processo de criação, por meio da interação com a aplicação

24. 24
Comunicabilidade
Busca tornar o software cada vez mais aplicável
Aumenta as chances do usuário utilizar o software de modo mais criativo, eficiente e produtivo
Exemplo de alta comunicabilidade

25. Interface
Perspectivas em IHC

26. 26
Perspectivas em IHC
Transformações dos sistemas computacionais
Princípio: usuário obrigado a aprender a “língua” do computador
Com o desenvolvimento da IA: o computador passou a ser tratado praticamente como uma “pessoa”
Transformação do computador em ferramenta de trabalho: usuário começou a utilizar os recursos de informática para desenvolver produtos
Hoje: foco voltado para o usuário e sistema em segundo plano  computador como mediador de comunicação interpessoal

27. 27
Perspectivas em IHC
Usuário como máquina
Computador como pessoa
Computador como mídia
Computador como ferramenta
=
+
=
Trabalho
ou
produto

28. 28
Perspectivas em IHC
A perspectiva que considera o computador como uma ferramenta está baseada no desenvolvimento de sistemas centrado no usuário
O desenvolvimento de software atualmente está centrado, sobretudo, na engenharia semiótica

29. Interface Homem-Máquina
Estilos de Interação

30. 30
Estilos de Interação
Linguagem Natural
Linguagem de Comando
Menus
Preenchimento de Formulários
Manipulação Direta
WIMP (Windows, Icons, Menus and Pointers)

31. 31
Estilos de Interação
Formas como usuários e sistemas computacionais se comunicam e interagem
Paradigmas de interação
Fator que também pode determinar a forma de usuários e sistemas interagirem
Responsável por indicar a seqüência em que são escolhidos e ativados pelo usuário os elementos que constituem uma operação
Pode ser ordenado dos seguintes modos: ação- objeto e objeto-ação

32. 32
Paradigmas de Interação
Modo ação-objeto
Primeiramente o usuário escolhe a operação a realizar, para, em seguida, escolher o objeto que sofrerá a ação resultante da operação
Modo objeto-ação
Inicialmente o usuário escolhe o objeto e, em seguida, indica a operação

33. Estilos de Interação
Linguagem Natural

34. 34
Linguagem Natural
A sua utilização pode ser muito interessante, sobretudo para quem tem conhecimentos restritos de computação
Sistemas de consulta a informações
Sistemas baseados em conhecimento
Somente a linguagem natural tem a capacidade de expressar com certa naturalidade o raciocínio marcadamente artificial de um software ou sistema

35. 35
Linguagem Natural
As aplicações muitas vezes são obrigadas a interpretar construções vagas, ambíguas, e até incorretas do ponto de vista semântico e gramatical
Alguns sistemas especialistas têm obtido algum sucesso na utilização da linguagem natural
Pré-ajustamento de frases em linguagem natural no sistema para evitar erros de interpretação

36. 36
Linguagem Natural
Tem como meta principal tornar a aplicação mais próxima do usuário, privilegiando desse modo a forma dele se comunicar
Linguagens de comando são utilizadas no sentido contrário – aproximar o usuário dos sistemas de computação

37. Estilos de Interação
Linguagem de Comando

38. 38
Linguagem de Comando
Tem como objetivo principal possibilitar ao usuário o envio direto de instruções ao sistema
Teclas de funções, um único caractere, abreviações curtas, palavras inteiras ou uma combinação de teclas e caracteres
Os comandos que utilizam caracteres e teclas de funções são acionados mais facilmente, mas são mais fáceis de esquecer

39. 39
Linguagem de Comando
Recomenda-se, portanto, o uso de comandos que utilizam palavras ou abreviações, pois desde que estas sejam bem escolhidas, dificilmente o comando é esquecido pelo usuário
São consideradas mais eficientes do que interfaces de outros tipos – acesso direto ao sistema

40. 40
Linguagem de Comando
Asseguram ao usuário maior liberdade de iniciativa e flexibilidade para criar comandos por meio da variação de parâmetros e da conjugação de palavras e sentenças
Para usuários iniciantes, tanto poder e flexibilidade implicam uma maior dificuldade de aprendizado
Domínio insuficiente da sintaxe da linguagem e dos comandos, erros de digitação, falta de padronização entre os sistemas, etc.

41. 41
Linguagem de Comando
Usuários experientes têm um maior controle sobre o sistema e conseguem obter um maior rendimento dele
Menus indicativos de diversos comandos e de como devem ser acionados pelo usuário podem ser úteis para alguns tipos de interfaces baseadas em comandos
Ex.: PINE, uma ferramenta de gerenciamento de correio eletrônico

42. 42
Interface no Estilo de Linguagem de Comando

43. 43
Interface Baseada em Comandos Auxiliada por Menus

44. 44
Vantagens
Flexível
Atrativa para usuários especialistas
Oferece suporte à criação de “scripts” e macros definidos pelo usuário
É satisfatório para interação com computadores em rede mesmo em baixa velocidade

45. 45
Desvantagens
A retenção de comandos é geralmente muito pobre
Difícil aprendizagem dos comandos
Taxas de erro muito altas
Difícil fornecer mensagens de erro e assistência
Diversidade de possibilidades
Mapeamento complexo entre a tarefa e os conceitos e sintaxe da interface
Não atrativa para usuários que não são especialistas

46. Estilos de Interação
Menus

47. 47
Menus
Conjunto de opções apresentadas na tela de um sistema computacional, a partir das quais é possível interferir no funcionamento de uma interface
Basta ao usuário apenas reconhecer o item que deseja
Os itens nele contidos devem ser auto- explicativos, a fim de que seja assegurada a eficiência de funcionamento do menu

48. 48
Menus
Uma das desvantagens da interação do usuário com o sistema via menus é o excessivo espaço que eles ocupam na tela do computador
Há varias formas de agrupamento e apresentação de opções de menu, a mais utilizada é a categorização hierárquica de opções
Tipos de menus
Pull-down
Popup

49. 49
Menus
seleção de menu
páginas web são geralmente
baseadas na seleção de menus

50. 50
Vantagens
Ideal para usuários novatos ou intermitentes
Pode ser atrativo para usuários especialistas se os mecanismos de apresentação e seleção são rápidos e “teclas de atalho” apropriadas são implementadas
Proporciona exploração
Usuários podem “olhar ao redor” dos menus para encontrar o comando apropriado, diferentemente de ter que lembrar o nome de um comando e sua ortografia quando usando linguagem de comando

51. 51
Vantagens
Estrutura a tomada de decisão
Permite fácil suporte à manipulação de erros
A entrada do usuário não deve ser analisada gramaticalmente (parsing), como na linguagem de comando

52. 52
Desvantagens
Muitos menus pode levar à sobrecarga de informação ou a uma complexidade de proporções desencorajadoras
Pode ser lenta para usuários freqüentes
Pode não ser compatível com dispositivos gráficos pequenos

53. Estilos de Interação
Preenchimento de Formulários

54. 54
Preenchimento de Formulários
Lembram formulários em papel, contendo campos que o usuário deve preencher
Formulários são de operação e aprendizado bastante simples
Projetado para que usuários lidem com grande volume de informações de entrada
As interfaces que emulam formulários têm sido cada vez mais utilizadas em páginas web

55. 55
Preenchimento de Formulários
estilo clássico
estilo mais moderno

56. 56
Vantagens
Simplifica a entrada de dados
Encurta o aprendizado
Campos são predefinidos e precisam apenas ser “reconhecidos”
Guia o usuário via regras predefinidas

57. 57
Desvantagens
Consome espaço na tela
Geralmente define o cenário para formalização rígida de processos do negócio

58. Estilos de Interação
Manipulação Direta

59. 59
Manipulação Direta
Interfaces que, sem a utilização de comandos de uma linguagem específica, possibilitam ao usuário atuar diretamente sobre os objetos de uma aplicação, ao contrário das interfaces por linguagens de comandos, onde o usuário interage de forma indireta

60. 60
Manipulação Direta
As interfaces gráficas que utilizam uma metáfora de desktop oferecem ao usuário a possibilidade de interação com o gerenciador de arquivos do sistema operacional, pela manipulação, especialmente via mouse, de ícones que representam arquivos, diretórios, discos e demais componentes do computador

61. 61
Manipulação Direta
Windows File Explorer, onde arquivos são
arrastados e soltos

62. 62
Manipulação Direta
MacPaint

63. 63
Vantagens
Apresenta visualmente o conceito de tarefa
Fácil aprendizado
Erros podem ser evitados mais facilmente
Encoraja a exploração
Satisfação subjetiva alta
Memória de reconhecimento

64. 64
Desvantagens
Pode ser mais difícil de programar
Incompatível com dispositivos gráficos pequenos
Representação visual e espacial nem sempre é a preferível
Metáforas podem ser enganosas
“A essência de uma metáfora é entender e experimentar um tipo de coisa em temos de outra” (Lakoff e Johnson, 1983), o que, por definição, torna a metáfora diferente do que ela representa ou aponta
Notações compactas podem se enquadrar melhor a usuários especialistas

65. Estilos de Interação
WIMP (Windows, Icons, Menus and Pointers)

66. 66
WIMP (Windows, Icons, Menus and Pointers)
Implementada por meio da tecnologia desenvolvida para interfaces gráficas
É possível desenhar as janelas e controlar nelas a entrada de dados via dispositivos de hardware, como teclado e mouse
É possível construir ícones que permitem a interação por meio do mouse
Permite que estilos variados sejam utilizados, tais como menus, manipulação direta, preenchimento de formulários e linguagem de comandos

67. 67
29/11/2014 09:36
Interação Humano-Computador – Interface & Estilos de Interação
Tela de Uma Aplicação no Estilo WIMP

68. Estilos de Interação
Novos Estilos de Interação

69. 69
Novos Estilos de Interação
WIMPs
Saída
Entrada
Figuras, gráficos, objetos de interação
Apontador 2D
arrastar e soltar
Graphical
User Interface
WIMPs +
Interfaces Multimídia
Mistura de mídias dinâmicas e estáticas
Entrada: som e imagem
Pós-WIMPs
Futuro I: (multimodal, multimídia, virtual)
Ambientes simulados
Realidade aumentada
RV multimídia
Comandos:
- voz
- gestos
- movimento dos olhos
- biosinais
- manipulação de
objetos
físicos

70. Interface / Estilos de Interação
FIM