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

Apresentação em tema: "Seleção de Menus, Preenchimento de Formulários e Caixas de Diálogo"— Transcrição da apresentação:

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 palavra remove/adiciona palavra remove/insere palavra deleta/insere linha destroi/cria linha deleta/insere parágrafo elimina/constrói 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. Estrutura em árvore invertida Menus simples Sequências lineares

7 Organização por Tarefas
Fotos são indexadas por filme P – Preto e Branco C – Colorido Tecle uma letra para sua opção: 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)

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, 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
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 Rede Acíclica Rede Cíclica

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 ,81s Funcional ,28s Aleatória ,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 Escrita de Itens de Menus
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