Design da Interface (Parte I) Estilos de Interação Representação da Interface com Usuários

Transcrição

1 Interface Homem/Máquina Aula 16 Professor Leandro Augusto Frata Fernandes Material disponível em Roteiro da Aula de Hoje Design da Interface (Parte I) Estilos de Interação Representação da Interface com Usuários Conteúdo baseado em Barbosa e Silva (2010), Capítulo 7 TCC Interface Homem/Máquina (2011.1) 2 1

2 Estilos de Interação TCC Interface Homem/Máquina (2011.1) 3 Estilos de Interação A definição da interface inicia com a escolha dos estilos de interação do sistema Classificação dos estilos Linguagem de comando Menus Formulário Manipulação direta WIMP (Windows, Icons, Menus, and Pointers) TCC Interface Homem/Máquina (2011.1) 4 2

3 Linguagem de Comando TCC Interface Homem/Máquina (2011.1) 5 Linguagem de Comando Interação executada por meios de comandos digitados pelo usuários Requer memorização dos comandos A gramática da linguagem de interação deve refletir o vocabulário dos usuários Tipos de comandos Comandos simples, e.g., DIR Comando mais parâmetros, e.g., COPY origem destino Comandos seguidos de opções e argumentos, e.g., COPY /V origem destino TCC Interface Homem/Máquina (2011.1) 6 3

4 Recomendações para Design de Linguagem de Comando Os parâmetros devem ser ordenados de forma consistente As opções devem der representadas por palavras-chave ao invés de símbolos arbitrários Os comandos devem ser hierárquicos Os resultados devem ser exibidos de modo formatado TCC Interface Homem/Máquina (2011.1) 7 Menu TCC Interface Homem/Máquina (2011.1) 8 4

5 Menu O sistema oferece opções dentre as quais o usuário deve selecionar a que lhe interessa A estrutura da tarefa deve guiar a escolha da estrutura de menus Linear Hierárquica Acíclica Cíclica TCC Interface Homem/Máquina (2011.1) 9 Recomendações para Design de Menus Sempre decidir uma ordem de apresentação Deve refletir a estrutura da tarefa ou conceito embutido no sistema Exemplos: alfabética, cronológica, numérica, itens mais freqüentes, mais recentes ou mais importantes Criar grupos de itens logicamente semelhantes Utilizar terminologia familiar ao usuário Itens curtos, iniciados por palavras-chave Usar menos largos e rasos, ao invés de estreitos e profundos TCC Interface Homem/Máquina (2011.1) 10 5

6 Formulário TCC Interface Homem/Máquina (2011.1) 11 Formulário O sistema solicita dados do usuário através de campos que precisam ser preenchidos Apresenta desafios interessantes para prevenção e recuperação de erros de preenchimento TCC Interface Homem/Máquina (2011.1) 12 6

7 Recomendações para Design de Formulários Criar grupos de itens relacionados Ordenar campos de forma lógica Utilizar terminologia familiar aos usuários Fornecer atalhos para localizar, selecionar e preencher um item Apresentar instruções inteligíveis TCC Interface Homem/Máquina (2011.1) 13 Manipulação Direta TCC Interface Homem/Máquina (2011.1) 14 7

8 Manipulação Direta Aproxima a interação da manipulação no mundo real Objetos do mundo real têm uma representação na interface Manipulações sobre esses objetos são mapeadas para operações do mouse Vantagens Reduz a taxa de erros O usuário aprende rápido e relembra com maior facilidade Ocorre engajamento e motivação para explorar o sistema Complexa para grande quantidade de objetos TCC Interface Homem/Máquina (2011.1) 15 Recomendações para Design de Manipulação Direta Mantenha a simplicidade das ações As ações devem ser rápidas, incrementais e reversíveis Os resultados devem ser apresentado imediatamente TCC Interface Homem/Máquina (2011.1) 16 8

9 WIMP Windows, Icons, Menus, and Pointers TCC Interface Homem/Máquina (2011.1) 17 WIMP Windows, Icons, Menus, and Pointers Combina diferentes estilos de interação Adotado nos ambientes baseados em janelas Aproveita os benefícios e contorna limitações de cada estilo de interação individual TCC Interface Homem/Máquina (2011.1) 18 9

10 Representação da Interface com Usuários TCC Interface Homem/Máquina (2011.1) 19 Formas Básicas de Representação Classificadas conforme o grau de fidelidade Informal, através de um esboço Estruturada, apoiada por ferramentas Protótipos funcionais TCC Interface Homem/Máquina (2011.1) 20 10

11 Esboço Baixa fidelidade na representação Define o agrupamento e as características dos elementos da interface É uma representação informal, barata e de modelagem simples Utilizada nas etapas iniciais do design da interface Imagem extraída de TCC Interface Homem/Máquina (2011.1) 21 Representação Apoiada por Ferramentas O uso de ferramentas auxilia no desenvolvimento de protótipos Exemplo: Balsamic Mockups Exemplo: (veja o vídeo em Baixa fidelidade na representação Mesmas vantagens do esboço, mas sem requerer a mesma habilidade artística Imagem extraída de TCC Interface Homem/Máquina (2011.1) 22 11

12 Protótipo Funcional Alta fidelidade na representação Apresenta o desenho completo da interface Costuma incorporar decisões sobre Tamanhos Posições Cores Fontes, etc. Pode incorporar algumas implementações Eventualmente é melhorado até se tornar a interface final TCC Interface Homem/Máquina (2011.1) 23 12