Projeto de Interfaces:

Apresentação em tema: "Projeto de Interfaces:"— Transcrição da apresentação:

1 Projeto de Interfaces:
Design de Telas

2 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

3 Menus — Tipos Menus pull-down e pop-up Toolbars e palettes
Seleção simples: radio buttons Seleção múltipla: check boxes

4 Projeto de Interface de Usuários
Mai-98 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 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) 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
Projeto de Interface de Usuários Mai-98 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
Projeto de Interface de Usuários Mai-98 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)
Projeto de Interface de Usuários Mai-98 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 Projeto de Interface de Usuários
Mai-98 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
Projeto de Interface de Usuários Mai-98 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 Projeto de Interface de Usuários
Mai-98 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)
Projeto de Interface de Usuários Mai-98 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)
Projeto de Interface de Usuários Mai-98 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 Projeto de Interface de Usuários
Mai-98 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 Projeto de Interface de Usuários
Mai-98 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
Projeto de Interface de Usuários Mai-98 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
Projeto de Interface de Usuários Mai-98 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
Projeto de Interface de Usuários Mai-98 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
Projeto de Interface de Usuários Mai-98 Í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
Projeto de Interface de Usuários Mai-98 Í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)
Projeto de Interface de Usuários Mai-98 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