Upload
marny-cain
View
23
Download
2
Embed Size (px)
DESCRIPTION
Projeto de Interfaces: Design de Telas. Permitem ao usuário interagir Disponíveis em bibliotecas Podem ser agrupados Precisam ser associados à funcionalidade e aos objetos da aplicação Exemplos:. Componentes Visuais Interativos ( Widgets ). Janelas Menus (pull-down, pop-up) Ícones - PowerPoint PPT Presentation
Citation preview
2
Janelas Menus (pull-down, pop-up) Ícones Cursores Botões Sliders Scrollers
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:
3
Menus — Tipos
Toolbars e palettes
Menus pull-down e pop-up
Seleção simples: radio buttons
Seleção múltipla: check boxes
4
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
• 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
• 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
Listas
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