Projeto de Interfaces: Design de Telas

30
1 Projeto de Interfaces: Design de Telas

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

Transcript of Projeto de Interfaces: Design de Telas

1

Projeto de Interfaces:

Design de Telas

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