1

Seleção de Menus, Preenchimento de Formulários e Caixas de Diálogo

• Introdução• Organização por Tarefas• Sequência de Apresentação de Itens• Tempo de Resposta e Ritmo de Apresentação• Movimento Rápido por Menus• Disposição de Menus• Preenchimento de Formulários• Caixas de Diálogo

2

O que é consistência?

• Utilizar os mesmos critérios para o desenvolvimento de toda a aplicação– Política de apresentação (layout)– Cores– Vocabulário para ações– Mensagens

3

Consistência através de Gramáticas

• Ter em mente que o usuário deverá aprender tudo que o sistema mostra

• Estudos mostram que quanto maior o vocabulário utilizado, mais difícil é o aprendizado do sistema

• Exemplos de inconsistências

Consistente Inconsistente A Inconsistente B

deleta/insere caracter deleta/insere caracter deleta/insere caracter

deleta/insere palavra remove/adiciona palavra remove/insere palavra

deleta/insere linha destroi/cria linha deleta/insere linha

deleta/insere parágrafo elimina/constrói parágrafo deleta/insere parágrafo

4

Uma gramática pode eliminar inconsistências

• Exemplo de ações:move-cursor-um-caracter-parafrente [Direção: frente, Unidade: Caracter]

move-cursor-um-caracter-paratrás [Direção: trás, Unidade: Caracter]

move-cursor-uma-palavra-parafrente [Direção: frente, Unidade: Palavra]

move-cursor-uma-palavra-paratrás [Direção: trás, Unidade: Palavra]

• A gramática:Tarefa [Direção, Unidade] -> símbolo [Direção] + letra [Unidade]

símbolo [Direção: frente] -> “CTRL”

símbolo [Direção: trás] -> “ESC”

letra [Unidade: Palavra] -> “P”

letra[Unidade: Caracter] -> “C”

5

Uma gramática pode eliminar inconsistências

• A gramática anterior irá gerar a seguinte sintaxe consistente para as ações:

Move cursor um caracter para frente: CTRL-C

Move cursor um caracter para trás: ESC-C

Move cursor uma palavra para frente: CTRL-P

Move cursor uma palavra para trás: ESC-P

6

Organização por Tarefas

– O primeiro objetivo para quem desenha menus, formulários ou caixas de diálogo é criar uma organização sensata, compreensível, fácil de memorizar e conveniente que seja relevante para os usuários.

Menus simples Sequências linearesEstrutura em árvore invertida

7

Organização por Tarefas

– Menus simples• Menus binários

– Abreviações– Botões de rádio– Ícones ou botões de escolha múltipla

• Menus com vários itens• Menus de seleção múltipla ou “check boxes”• Menus “pull-down” e “pop-up”• Menus de “scrolling” ou de duas dimensões• Hyperlinks• Menus com ícones, “toolbars” e paletes

– Sequências lineares e Menus múltiplos• Guiam os usuários através de processos de decisão

complexos, por exemplo, “cue cards” (wizards)

Fotos são indexadas por filmeP – Preto e BrancoC – Colorido

Tecle uma letra para sua opção:

8

Organização por Tarefas– Menus estruturados em árvore

• Exemplos familiares» Sexo: Masculino, feminino» Grupo: Animal, vegetal, mineral» Fonte: Tipos de letra, tamanho, estilo, espaçamento

• O Problema da Largura vs. Profundidade» 8x2 (um dos melhores),» 4x3,» 4x1 + 16x1,» 16x1+4x1,» 2x6 (pior resultado)

– Geralmente a largura é melhor do que a profundidade…– Sugestão de Landauer e Nachbar

» T=k+c*log b, em que k e c são constantes determinadas empiricamente para varrer a tela e escolher uma opção. Assim o tempo total para percorrer o menu é dado por D=log b.N, em que N é o nº total de items no menu, e b é a largura em cada nível.

» Exemplo: com N=4096 items, factor de ramificação b=16 e profundidade D=3, o tempo total é 3*(k+c*log 16).

9

Organização por Tarefas

– Menus estruturados em árvore (cont.)• Agrupamento Associado às Tarefas

– Criar grupos de itens logicamente similares» Por exemplo: Paises, Estados ou Províncias e Cidades

– Formar grupos que cobrem todas as possibilidades» Por exemplo: idades de 0-9, 10-18, 19-35 e >35

– Ter a certeza que os itens não se sobrepõem» Por exemplo: “Divertimento e Eventos” e uma má escolha

quando comparado com “Concertos e Esporte”– Utilizar terminologia familiar, mas assegurar que os itens são

distintos uns dos outros» Por exemplo: “Dia e Noite” vs. “Antes das 18:00” e “Depois

das 18:00”

• Mapas de menus– Permitem aos usuários terem uma idéia geral da organização dos

menus, evitando a desorientação

10

Organização por Tarefas

Rede Acíclica Rede Cíclica

– Redes Cíclicas e Acíclicas• Exemplos

– Relações sociais– Roteamento de transporte– Citações em artigos

• Devem ser utilizadas com cuidado porque podem gerar confusão

11

Seqüência de Apresentação de Items

• A ordem dos itens no menu é importante e deve seguir a seqüência natural sempre que possível:

– Tempo - ordem cronológica– Ordem numérica - ascendente ou descendente– Propriedades físicas - comprimento, área, volume, temperatura, peso, velocidade,

etc.

• Em muitos casos não existe ordem relacionada com a tarefa e torna-se necessário escolher outras possibilidades:

– Seqüência alfabética de termos– Agrupamento de itens relacionados– Freqüência de utilização– Por grau de importância

• Exemplo de Card (1998) para 18 comandos de edição de texto– Estratégia de sequenciamento Tempo– Alfabética 0,81s– Funcional 1,28s– Aleatória 3,23s

12

Tempo de Resposta e Ritmo de Apresentação

• A velocidade a que um usuário se move nos menus pode determinar a sua atratividade como um mecanismo de interface.– Tempo de Resposta - o tempo que demora um sistema

a mostrar informação em resposta a uma seleção do usuário;

– Ritmo de Apresentação - a velocidade com que os menus são apresentados;

• O desempenho dos usuários e as preferências mostram que menus “largos” e “pouco profundos” são preferíveis.

13

Movimento Rápido por Menus

• Menus com “typeahead” são importantes quando:• Os menus são familiares• O tempo de resposta e o ritmo de apresentação são lentos

– A aproximação CACC (“Consulta Apartamento no Centro ce Curitiba”)

• Menus de uma única letra com “typeahead” que levam à concatenação de seleções de menus em mnemônicas.

– Nomes de menus e favoritos para acesso direto• Esquemas simples de nomeação permitem aos usuários aceder

diretamente a páginas• São úteis apenas quando um número pequeno de destinos são

possíveis - fáceis de recordar• Os browsers fornecem favoritos para acesso rápido a páginas

específicas

14

Disposição de Menus

• Títulos– Para menus simples utilizar um título descritivo simples– Para menus em árvore, utilizar exatamente as mesmas palavras

nos itens de nível mais alto e nos títulos dos níveis seguintes.• Por exemplo: se um item de menu tem a designação “Business and

Financial Services” a tela seguinte deve ter essa frase como título

• Escrita de Itens de Menus– Utilizar terminologia familiar e consistente;– Assegurar que os itens são distintos entre si;– Utilizar escrita concisa e consistente;– Passar a palavra-chave para a esquerda;

15

Disposição de Menus

• Layout e Design Gráfico de Menus– Títulos centrados (ou ajustados à esquerda);– Itens justificados à esquerda (com numeração), utilizar

linhas brancas para separar grupos, no caso de múltiplas colunas utilizar uma numeração consistente;

– As instruções devem ser idênticas em cada menu e colocadas na mesma posição;

– As mensagens de erro devem aparecer numa posição coerente e deve utilizar sintaxe e terminologia consistentes;

– Os relatórios de estado devem ter um estrutura consistente e numa posição pré-determinada;

16

Disposição de Menus

• Recomendações– Utilizar a semântica das tarefas para organizar os menus

– Simples, seqüência linear, árvore e redes cíclicas ou acíclicas

– Preferir largo-pouco profundo a estreito-profundo– Mostrar o item através de gráficos, números ou títulos– Utilizar os nomes dos menus como sub-títulos das sub-árvores– Agrupar e sequenciar itens de forma coerente– Utilizar itens breves, começando por uma palavra-chave– Utilizar terminologia, layout e gramática consistentes– Permitir “typeahead”, “jump ahead” e outros atalhos– Permitir saltos para o menu anterior e principal– Considerar ajuda online, novos mecanismos de seleção e

otimizar o tempo de resposta, ritmo de apresentação e tamanho da tela.

17

Preenchimento de Formulários

• Apropriado quando muitos campos de dados devem ser introduzidos– A informação está totalmente visível ao usuário– A tela é semelhante aos formulários em papel– Poucas instruções são necessárias

• Os usuários devem estar familiarizados com:– Teclados– Utilização da tecla “TAB” e do movimento do cursor e mouse– Métodos de correção de erros (backspace, delete, insert, etc.)– Significado das etiquetas– Permissões de edição dos campos– Utilização das teclas “ENTER” e “RETURN”

18

Preenchimento de Formulários

• Recomendações– Título intuitivo– Instruções compreensíveis– Agrupamento lógico dos campos– Layout agradável– Labels familiares– Terminologia consistente e abreviações– Espaço visível e suficiente para campos de entrada– Movimento conveniente do cursor– Correção individual para caracteres e campos de entrada– Prevenção de erro– Mensagens de erro e valores inaceitáveis– Campos opcionais claramente marcados– Mensagens de explicação para os campos– Feedback de processamento correto do formulário

19

Preenchimento de Formulários

• Listas e combo boxes• Campos Codificados

• Números de Telefone• Documentos em geral• Horas• Datas• Símbolos de moedas

20

Caixas de Diálogo

• Combinação de técnicas de menus e preenchimento de formulários– Relacionada com uma tarefa específica.

• Premissas sobre o layout interno: • Título intuitivo, estilo consistente• Sequenciamento do canto superior esquerdo ao canto inferior

direito• Agrupar e destacar informação• Layouts consistentes (margens, grid, área em branco, linhas,

caixas)• Metodologia consistente, fontes, maiúsculo/minúsculo, justificação• Botões Standard (OK, Cancela)• Prevenção de erro por manipulação direta

21

Caixas de Diálogo

• Premissas sobre o layout externo• Aparição sem tomar muito espaço, sem esconder informações úteis• Bordas pequenas mas perceptíveis• Evitar problemas de overlap (cores de fundo)• Fácil de fazer desaparecer• Indicação clara de como completar ou cancelar a tarefa

22

Exercício

• Faça uma análise dos menus do Microsoft Word levando em consideração os seguintes critérios vistos na aula:– Consistência– Organização– Tempo de resposta e apresentação dos itens– Disposição dos menus

• A análise deve conter exemplos dos critérios utilizados pelo Word