Material 2 Engenharia de Usabilidade e Interfaces

Prévia do material em texto

Padronização de menus = melhor interatividade 
Alan Cooper (pesquisador respeitado na área de interface e autor do livro The 
Essential of the User Interface): 
 
“Os itens mais globais devem ficar à esquerda, seguidos pelos itens 
mais específicos, caminhando para a direita” 
IHC – PADRONIZAÇÃO DE MENUS 
“ Fornece dicas sobre a funcionalidade dos objetos da interface.” 
“ Quando o usuário posiciona o mouse sobre o objeto, um pequeno quadro aparece 
com a dica. “ 
“ A dica deve ser simples e objetiva. “ 
IHC – DICAS (TOOL TIPS) 
Barra de status (status bar): exibem mensagens diretas sobre... 
 estado atual da aplicação 
 item de menu selecionado 
 estado do teclado 
 hora atual 
IHC – BARRA DE STATUS 
“ utilize botões de comando para disparar ações ou para indicar e alterar estados “ 
“ não deve haver interseção entre ações disparadas por botões diferentes (vs. “OK”, 
“Salva e Fecha”) “ 
“ utilize descrições breves, consistentes e claramente distintas (vs. “Fechar”, “Cancelar”, 
“Voltar”) “ 
“ mantenha o tamanho e posicionamento consistentes “ 
“ siga as convenções do ambiente operacional “ 
 
IHC – BOTÕES DE COMANDO 
 orientações gerais: 
 - se o número de opções for muito grande, utilize lista ou tabela; 
 - se o texto de um item for grande, alinhe pelo topo; 
 - pode possuir teclas de atalho. 
 
 Botões de opção (radio buttons) 
 - opções relacionadas e mutuamente exclusivas; 
 - apenas uma opção pode estar selecionada; 
 - pode apresentar um valor default. 
 
 Botões de seleção (check boxes) 
 - opções independentes, que podem estar ligadas ou desligadas; 
 - os estados ligado/desligado devem ser opostos; 
 - pode possuir valor misto. 
 
IHC – BOTÕES DE OPÇÕES (RADIO) E SELEÇÃO 
(CKHECK BOX) 
A instalação do Visual Studio 
necessita de uma versão 
atualizada do Internet Explorer. 
 
“Se a instalação do IE é 
necessária, qual a razão de um 
botão de 2 estados? Você não 
tem escolha!” 
 
“Se não marcar a opção não é 
possível continuar ... “ 
IHC – PROBLEMAS DE INTERFACE 
# seleção simples (~ radio buttons) ou múltipla (~ check boxes) 
# utilize para um grande número de opções 
# ordene as opções segundo algum critério 
# evite barras de rolamento horizontais 
# forneça um label para identificar a lista 
# forneça teclas de atalho para acesso rápido 
# considere permitir operações de drag-and-drop (arrastar e largar) 
# seleção simples: pode utilizar combo box para poupar espaço 
IHC – LISTAS 
# forneça um label para identificar o elemento 
# forneça teclas de atalho para acesso rápido 
# valide a entrada de dados imediatamente, se possível 
# caixas de texto (text boxes) 
campo textual livre 
# spins 
valores contínuos, como volume sonoro 
faixa limitada de valores sequenciais discretos 
 
 
 
 
* Widgets são componentes de uma interface gráfica do usuário (GUI). 
IHC – OUTRO Widgets PARA ENTRADA DE DADOS 
1. Procure manter a consistência 
2. Permita que usuários frequentes utilizem atalhos 
3. Ofereça feedback informativo 
4. Projete os diálogos para garantir continuidade 
5. Ofereça prevenção e tratamento de erros 
6. Permita desfazer ações facilmente 
 * botões desfazer e refazer 
7. Mantenha o usuário no controle 
8. Reduza a carga cognitiva 
IHC – REGRAS DE OURO DO DESIGN DE 
INTERFACES (Shneiderman) 
# Utilize cores de forma conservadora e limitada (até 4 cores) 
# Assegure que código de cores corresponde à tarefa 
# Pense primeiro em preto e branco 
# Considere os problemas de pares de cores e de usuários com deficiência visual 
# Utilize cores para ajudar a formatação, aumentar a densidade de informação e sinalizar 
 mudança de estados 
# Conheça as expectativas dos usuários sobre cores 
# Utilize cores de forma consistente 
IHC – USO DE CORES (Shneiderman) 
 Objetivo 
 # apresentar mensagens explicativas (ex: de êxito) 
 
 # sinalize o tipo de mensagem 
 
 # utilize vocabulário simples e claro 
 
 # relacione a mensagem à tarefa do usuário 
 
 # nas mensagens de erro, apresente: 
descrição do erro; 
causa do erro; 
possível solução. 
IHC – QUADROS DE MENSAGEM 
# objetivo: entrada de dados 
 
# termos utilizados 
- título significativo, estilo consistente 
- terminologia, fontes, capitulação e justificação consistentes 
 
# organização 
- sequência de uso: topo-esquerda até baixo-direita 
- agrupamento e ênfase 
- layouts consistentes (proporções, margens, espaços em branco, linhas, quadros) 
- indicação de itens habilitados e desabilitados 
- valores default 
 
 # botões padronizados (OK, Cancelar) 
 
 # prevenção de erros 
IHC – QUADROS DE DIÁLOGO 
# proporções incomuns 
# estrutura excessiva: muitos quadros aninhados, um quadro para cada controle, 
 muitas linhas divisórias 
# tradução literal de metáforas, detalhes estéticos excessivos 
# pouco ou muito contraste entre áreas e elementos 
# tensão espacial: informação demais ou de menos 
# layouts arbitrários: controles de tamanho diferente, alinhamento e posicionamento 
 arbitrários, agrupamento inexistente ou inadequado 
IHC – QUADROS DE DIÁLOGO 
(Erros comuns) 
Dicas 
- analisar a organização do quadro de diálogo 
- verificar termos e abreviações utilizadas 
- analisar instruções e mensagens disponíveis 
- analisar a dinâmica do quadro de diálogo 
- analisar a correspondência entre os widgets e os tipos de dados 
- verificar pontos de prevenção e tratamento de erros 
IHC – PARA SE CRIAR QUADROS DE DIÁLOGO 
# siga orientações gerais para quadros de diálogo 
# utilize widgets* adequados para o tipo de dado 
# forneça movimento de cursor conveniente 
# marque claramente os campos opcionais e obrigatórios 
# sinalize o término do preenchimento (ex: habilitando botão de confirmação) 
# instruções e mensagens 
- instruções claras e breves (evite pronomes e referências) 
- mensagens explicativas (barra de status ou quadros de mensagem) 
 - tratamento de erros 
- correção de erros para caracteres individuais ou campos inteiros 
- prevenção de erros 
- mensagens de erro para valores inaceitáveis 
 
* Widgets são componentes de uma interface gráfica do usuário (GUI). 
 
IHC – PREENCHIMENTO DE FORMULÁRIOS 
Dicas 
# verificar se o erro poderia ter sido evitado pelo sistema 
# avaliar os termos utilizados na mensagem de erro 
# analisar o conteúdo da mensagem de erro (o que houve, por que aconteceu, 
 como contornar ou resolver) 
 
IHC – PARA SE CRIAR MENSAGENS DE ERRO 
Exemplos de mensagens de erro: 
IHC – PROBLEMAS DE INTERFACE 
Diálogo de um editor de texto em 2 línguas. 
Exemplo de mensagem de erro: 
IHC – PROBLEMAS DE INTERFACE 
Classificação 
# ícone: expressão semelhante ao conteúdo 
- conceitos palpáveis, objetos conhecidos. 
# índice: expressão indica relação com o conteúdo 
- relações de causa-efeito. 
# símbolo: expressão arbitrária com relação ao conteúdo 
- signos convencionais, utilizados com frequência ou metafóricos. 
 
IHC – ÍCONES, ÍNDICES E SÍMBOLOS 
# uso inconsistente em toda a aplicação 
# uso de bibliotecas de ícones com identidades visuais distintas 
# ícones irreconhecíveis ou sem relação com o referente 
# ícones complexos e com detalhes irrelevantes 
# elementos secundários dominantes 
# uso de ícones para representar conceitos abstratos 
# ícones com dependências culturais (já possuem uma identificação histórica) 
IHC – ÍCONES, ÍNDICES E SÍMBOLOS (Erros Comuns) 
Dicas 
- classificar e verificar a relação como conteúdo; 
- analisar a relação reconhecimento vs. memorização; 
- avaliar segundo critérios de imediatez, generalidade, sistematização e 
 caracterização; 
 - avaliar signo textual alternativo (desenho + texto). 
IHC – AVALIÇÃO DE ÍCONES, ÍNDICES E SÍMBOLOS 
# elegância e simplicidade 
- unidade, refinamento, adequação 
# escala, contraste e proporção 
- clareza, harmonia, atividade e restrições 
# organização e estrutura visual 
- agrupamento, hierarquia, relacionamento e equilíbrio 
# módulo e programa 
- foco, flexibilidade e aplicação consistente 
# imagem e representação 
- imediatez, generalidade, sistematização e caracterização 
# estilo 
- distinção, integridade, abrangência e adequação 
IHC – APRESENTAÇÃO DE DADOS