Projeto de Interfaces: Design de Telas 1
Componentes Visuais Interativos (Widgets) Permitem ao usuário interagir Disponíveis em bibliotecas Podem ser agrupados Precisam ser associados à funcionalidade e aos objetos da aplicação Exemplos: Janelas Menus (pull-down, pop-up) Ícones Cursores Botões Sliders Scrollers 2
Menus Tipos Menus pull-down e pop-up Toolbars e palettes Seleção simples: radio buttons Seleção múltipla: check boxes 3
Menus Pull-Down Organização e agrupamento Considere os objetos e ações relacionados às tarefas do usuário Escolha um dos seguintes paradigmas: objeto ação (ex: Tabela Ordenar) ação objeto (ex: Inserir Figura) Considere a ordem das tarefas (ex: Incluir antes de Excluir) Mantenha o nível de abstração dos elementos de uma categorização Desabilite os itens de menu que não estejam disponíveis Evite introduzir erros de interação para o usuário 4
Menus Pull-Down Terminologia Familiar (vs. jargão computacional), consistente e concisa Itens Diferentes (vs. Opções, Preferências) Tempo de resposta Teclas de atalho: Ctrl+S, Shift+Ctrl+S Mensagens diretas Descrição mais extensa de cada item (na barra de status) No html, temos os atributos title Siga as convenções do ambiente operacional 5
Menus no Windows Menus padronizados (File, Edit, View, Window, Help) Tipos de itens de menu acionamento de comando comando imediato (Save) comando que precisa de mais input (Save As...) mudança de estado opções independentes (Estilo de fonte: Bold, Italic) opções interdependentes (Alinhamento: Left,Right,Justified) 6
Para se Criar Menus Pull-Down Dicas Classificar as tarefas, os objetos e as ações do usuário Selecionar um paradigma (objeto+ação ou ação+objeto) Selecionar termos precisos e relevantes para o domínio Prever quando os itens de menu devem estar desabilitados Seguir o padrão do ambiente operacional 7
Barras de Ferramenta e de Status Barra de ferramentas (toolbar) Inclua elementos de uso freqüente: evite incluir controles que não estão disponíveis de outra forma Forneça tooltips Caso haja múltiplas toolbars, forneça ao usuário o controle de visibilidade analise adequação de representações gráficas Barra de status (status bar): Mensagens diretas sobre... Estado atual da aplicação Item de menu selecionado Estado do teclado Hora atual 8
Para se Criar Barras de Ferramentas Selecionar os elementos relevantes para a barra de ferramentas da aplicação Dicas Verificar que elementos do menu... Possuem uso freqüente Possuem representação gráfica de fácil compreensão Observação caso haja um elemento que não pertença ao menu, certifique-se de que ele vai aparecer em algum quadro de diálogo (ex: combo box para escolha do tipo ou tamanho de fonte) 9
Botões de Comando 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. Fecha, Cancela, Volta ) Mantenha o tamanho e posicionamento consistentes Siga as convenções do ambiente operacional 10
Botões de Comando no Windows Acionamento imediato e contextualizado Em toolbar: executa ação associada Em janela secundária: inicia uma transação dentro da janela aplica uma transação e fecha a janela Tipos Dispara ação imediatamente Necessita de mais input (...) Expande uma janela (>>) Reflete um estado (pressionado / não, habilitado / não) 11
Botões de Opção (Radio) e Seleção (Check box) 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 12
Listas seleção simples (~ radio buttons) ou múltipla (~ check boxes) utilize para um grande número de opções exiba entre três e oito 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 seleção simples: pode utilizar combo box para poupar espaço 13
Outros Widgets para Entrada de dados 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 faixa limitada de valores seqüenciais discretos sliders valores contínuos, como volume sonoro 14
Janelas Janelas Primárias janelas de contextualização, com menus, barras de ferramentas e de status represente nelas os objetos principais da aplicação limite o número de janelas simultâneas mantenha a aparência consistente Janelas Secundárias output de mensagens (quadros de mensagem) input de informações adicionais (quadros de diálogo, formulários) 15
Regras de Ouro do Design de Interfaces (Shneiderman 98) 1. procure manter a consistência 2. permita que usuários freqüentes 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 7. mantenha o usuário no controle 8. reduza a carga cognitiva 16
Uso de Cores (Shneiderman 98) 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 17
Quadros de Mensagem objetivo apresentar mensagens explicativas, de erro e etc. sinalize o tipo de mensagem (ex: ícones das janelas de mensagem do Windows 95) 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 18
Quadros de Diálogo objetivo: entrada de dados termos utilizados título significativo, estilo consistente terminologia, fontes, capitulação e justificação consistentes organização seqüência de uso: topo-esquerda a baixo-direita agrupamento e ênfase layouts consistentes (proporções, margens, grid, espaços em branco, linhas, quadros) indicação de itens habilitados e desabilitados valores default botões padronizados (OK, Cancela) prevenção de erros 19
Quadros de Diálogo e Janelas Erros Comuns desconsiderar o padrão look and feel do ambiente operacional 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 20
Preenchimento de Formulários 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 21
Formulários Erros Comuns uso inadequado do formato de formulário vs. planilha apresentação de informações internas ao sistema e irrelevantes para o usuário instruções excessivas, com texto redundante instruções para o preenchimento dos campos em locais privilegiados (vs. barra de status) excesso de quadros de mensagens que interferem na tarefa do usuário 22
Para se Criar Quadros de Diálogo 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 23
Mensagens de Erro sempre que possível, o sistema não deve permitir que ocorram erros causas de erros: falta de conhecimento, noções incorretas lapsos (slips) 24
Mensagens de Erro Como Redigir o que houve, por que aconteceu, como contornar ou resolver especificidade DADO INVÁLIDO vs. Digite um valor numérico de 1 a 10. orientação construtiva (indicação de como resolver o problema) COMANDO INVÁLIDO vs. Verifique a sintaxe do comando. formato físico apropriado CAIXA ALTA PARA ERROS DE POUCA IMPORTÂNCIA desenvolvimento de mensagens eficazes ERRO Xbc345! vs. Data inválida: o formato correto é dd/mm/aaaa. 25
Para se Criar Mensagens de Erro 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) 26
Ícones, Índices e Símbolos 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 (planilha) símbolo: expressão arbitrária com relação ao conteúdo signos convencionais, utilizados com freqüência ou metafóricos abstraia detalhes; se possível, contrate um profissional especializado 27
Ícones, Índices e Símbolos Critérios de Avaliação imediatez percebidos sem esforço e involuntariamente generalidade representação de classe de artefatos (vs. instância) alto grau de abstração (vs. realismo) sistematização qualidades formais das imagens são reconhecidas facilmente, como parte de um sistema maior caracterização foco em características distintivas comunicabilidade contexto compartilhado entre emissor e receptor 28
Ícones, Índices e Símbolos Erros Comuns 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) Uma imagem bem projetada não precisa ser desmembrada para ser compreendida. 29
Avaliação de Ícones, Índices e Símbolos dicas classificar e verificar a relação com o 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) 30
Apresentação de Dados (Mullet and Sano 95) 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 31