Projeto de Interfaces: Design de Telas

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 • Cursores • Botões • Sliders • Scrollers

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

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

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)

Para se Criar Menus Pull-Down • Dicas • classificaras 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

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

Para se Criar Barras de Ferramentas • selecionar os elementos relevantespara 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)

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

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)

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

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 labelpara 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

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

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)

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

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

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

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

Quadros de Diálogo e Janelas — Erros Comuns • desconsiderar o padrão look and feeldo 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

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

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

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

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)

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.

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)

Í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

Í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

Í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.”

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)

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

Projeto de Interfaces: Design de Telas