1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom.
1
Projeto da Interface do Usuário
Baseado no material de Fred NiedermanCapítulos 10 & 11 do livro de Dennis &
Wixom.
2
Definições A interface do usuário define como
o sistema irá interagir com entidades externas
As interfaces do sistema definem como o sistema troca informações com outros sistemas
3
Definições O mecanismo de navegação oferece a
maneira que os usuários dizem ao sistema o que deve ser feito
O mecanismo de entrada define a maneira que o sistema captura as informações
O mecanismo de saída define a maneira que o sistema oferece informações aos usuários ou a outros sistemas
A interface gráfica do usuário (GUI) é provavelmente o tipo mais comum de interface.
4
Princípios para o Projeto da Interface do Usuário Layout Atenção ao conteúdo Estética Experiência do usuário Consistência Minimização do esforço do usuário
5
Conceitos de Layout A tela é geralmente dividida em três
partes Área de navegação (topo) Área de status (baixo) Área de trabalho (meio)
Informações podem ser apresentadas em múltiplas áreas
Como áreas devem ser agrupadas juntas?
6
Conceitos de Layout Áreas e informações devem
minimizar o movimento do usuário de uma para outra
Levar em consideração Tamanho Forma Localização da entrada de dados Como relatar os dados recuperados
7
Layout: Exemplo 1
8
Layout: Exemplo 2
9
Layout: Exemplo 3
10
Atenção ao Conteúdo Todas as interfaces devem ter títulos Menus devem mostrar
onde você está de onde você veio
Deve estar claro qual informação está dentro de cada área
Campos e rótulos dos campos devem ser selecionados com cuidado
Use datas e números de versões para auxiliar usuários do sistema
11
Estética Interfaces precisarm ser funcionais e
convidativas para o uso Evite colocar informações em excesso,
particularmente para usuários novatos Projete texto com cuidado
Esteja consciente do fonte e do tamanho Evite o uso de todas as letras maiúsculas
12
Estética Cores e padrões devem ser usados com
cuidado Teste a qualidade de cores, mas também
veja a interface num monitor preto/branco Use cores para separar ou categorizar itens
13
Experiência do Usuário O sistema é fácil de aprender? O sistema é fácil de usar para os
especialistas? Considere adição de atalhos para
especialistas Quando a rotatividade de funionários for
pequena o treinamento pode diminuir o impacto da imprecisão de interfaces
14
Consistência Permite que os usuários saibam
antecipadamente o que irá acontecer Reduz a curva de aprendizagem Considera itens dentro de uma
aplicação e através de aplicações Mantém para muitos níveis diferentes
Controles de navegação Terminologia Projeto de formulário e relatório
15
Minimize o Esforço Regra três cliques
Usuários devem ser capazes de ir do começo ou do menu principal de um sistema para a informação ou ação que eles quiserem com não mais que três cliques no mouse ou três teclas
16
Processo de Projeto da Interface do Usuário: cinco passos
17
Desenvolvimento do Cenário de Uso Um resumo dos passos para realizar
o trabalho Apresentado numa simples
narrativa Documenta os casos mais comuns
de forma que o projeto da interface de usuário seja adequado para estas situações
18
Diagrama da Estrutura da Interface Mostra como todas as telas, formulários e
relatórios são relacionados Mostra como o usuário move de um para outro Usa caixas e linhas Caixas denotam telas Linhas mostram movimentos de uma para
outra
19
Exemplo de Diagrama da Estrutura da Interface
20
Padrões de Projeto de Interface
Os elementos básicos que são comuns nas telas, nos formulários e nos relatórios da aplicação
Metáfora da interface Desktop, carrinho de compras
Objetos de interface Ações de interface Ícones de interface Templates de interface
21
Protótipo do Projeto de Interface Uma simulação de tela, formulário
ou relatório Métodos comuns incluem
Papel Narrar estórias HTML Linguagem
22
Exemplo de Storyboard
23
Métodos de Avaliação de Interface Avaliação heurística
Use lista de checagem para avaliar projetos Avaliação através de caminhos (Walkthrough)
A equipe de projeto apresenta o protótipo aos usuários e navegam através de várias partes da interface
Avaliação interativa Usuários tentam usar o sistema
Teste formal de usabilidade Caro, uso detalhado de laboratório teste
24
Componentes do Projeto de Interface do Usuário
Projeto de Navegação Projeto de Entradas Projeto de Saídas
25
Projeto de Navegação: Princípios Básicos
Assume que os usuários Não lêem o manual Não têm treinamento Não têm ajuda disponível
Todos os controles devem estar claros e entendíveis e colocados num local intuitivo da tela.
26
Projeto de Navegação: Princípios Básicos
Prevenção de erros Limite as escolhas Nunca exiba comandos que não
possam ser usados (ou “desabilite”) Confirme ações que seja difíceis ou
impossíveis de serem desfeitas Simplifique a recuperação de erros Use uma ordem gramatical
consistente (ex. objeto-ação)
27
Tipos de Controle de Navegação
Linguagens Linguagem de comandos Linguagem natural
Menus Geralmente visam um menu amplo com pouca
profundidade Considere o uso de “teclas de atalho”
Manipulação Direta Usada com ícones para começar programas Usada para dar forma e tamanho a objetos Pode não ser intuitiva para todos os comandos
28
Um Menu Tradicional no Sistema UNIX
29
Tipos Comuns de Menus
30
Exemplo de Mapa de Imagem
31
Tipos de Menus
Tipos de Menus
Menu barDrop-down menuPop-up menuTab menuToolbarImage map
Quando você usariacada um destestipos de Menu?
32
Dicas de Mensagens Devem ser claras, concisas e
completas Devem ser gramaticamente
corretas e livres de abreviações e jargões (a menos que sejam os do usuário)
Evite mensagens negativas e humoristas
33
Tipos de Mensagens
Tipos de Mensagens
Error messageConfirmation messageAcknowledgment messageDelay messageHelp message
Quando você usariacada um destestipos de Mensagens?
34
Projeto de Entradas: Princípios Básicos Use adequadamente o
processamento On-line e Batch Capture dados na fonte Minimize o número de teclas
digitadas
35
Uso adequado do processamento Online e Batch
Processamento online imediatamente grava a transação na base de dados apropriada
Processamente Batch coleciona entradas durante um período
Processamento batch simplifica comunicações de dados e outros processos, mas por ex. ö “estoque” e outros “relatórios”podem não estar consistentes em tempo real
36
Capture Dados na Fonte Reduz a duplicação de trabalho Reduz tempo de processamento Diminui o custo Diminui a probabilidade de erros
37
Minimize o número de teclas digitadas O sistema nunca deve pedir
informações que podem ser obtidas de outra forma (ex. Recuperando da base de dados ou realizando um cálculo)
Um sistema não deve requerer que um usuário digite informações que podem ser selecionadas de uma lista
Use valores padrões
38
Tipos de Entradas Itens de dados ligados a campos Texto Números Caixas de seleção
39
Tipos de Formulários de Entrada
40
Tipos de Caixas de Seleção
Tipos de Caixas
Check boxRadio buttonOn-screen list boxDrop-down list boxCombo boxSlider
Quando você usariacada um destestipos de Caixas?
41
Tipos de Validação de Entrada
Tipos de Validação
Completeness checkFormat checkRange checkCheck digit checkConsistency checkDatabase checks
Quando você usariacada um destesmétodos de Validação?
42
Projeto de Saídas: Princípios Básicos Entenda o uso de relatório
Referência ou início a fim? Freqüência? Relatórios em tempo real ou batch?
Gerencie informações carregadas Todas as informações necessárias, não mais
Minimize a tendência (ex. entradas que aparecem na lista primeiro pode receber maior atenção)
43
Tendência em Gráficos
44
Tipos de Relatórios
Tipos de Relatórios
Detail reportsSummary reportTurnaround document (ex. credit card bills)Graphs
Quando você usariacada um destestipos de Relatórios?