1 / 30

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

marny-cain
Download Presentation

Projeto de Interfaces: Design de Telas

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Projeto de Interfaces: Design de Telas

  2. 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

  3. Menus — Tipos Menus pull-down e pop-up Toolbars e palettes 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 • 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

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

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

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

  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

More Related