![Page 1: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/1.jpg)
1
Projeto da Interface do Usuário
Baseado no material de Fred NiedermanCapítulos 10 & 11 do livro de Dennis &
Wixom.
![Page 2: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/2.jpg)
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
![Page 3: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/3.jpg)
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.
![Page 4: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/4.jpg)
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
![Page 5: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/5.jpg)
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?
![Page 6: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/6.jpg)
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
![Page 7: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/7.jpg)
7
Layout: Exemplo 1
![Page 8: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/8.jpg)
8
Layout: Exemplo 2
![Page 9: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/9.jpg)
9
Layout: Exemplo 3
![Page 10: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/10.jpg)
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
![Page 11: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/11.jpg)
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
![Page 12: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/12.jpg)
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
![Page 13: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/13.jpg)
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
![Page 14: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/14.jpg)
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
![Page 15: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/15.jpg)
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
![Page 16: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/16.jpg)
16
Processo de Projeto da Interface do Usuário: cinco passos
![Page 17: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/17.jpg)
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
![Page 18: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/18.jpg)
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
![Page 19: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/19.jpg)
19
Exemplo de Diagrama da Estrutura da Interface
![Page 20: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/20.jpg)
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
![Page 21: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/21.jpg)
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
![Page 22: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/22.jpg)
22
Exemplo de Storyboard
![Page 23: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/23.jpg)
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
![Page 24: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/24.jpg)
24
Componentes do Projeto de Interface do Usuário
Projeto de Navegação Projeto de Entradas Projeto de Saídas
![Page 25: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/25.jpg)
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.
![Page 26: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/26.jpg)
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)
![Page 27: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/27.jpg)
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
![Page 28: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/28.jpg)
28
Um Menu Tradicional no Sistema UNIX
![Page 29: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/29.jpg)
29
Tipos Comuns de Menus
![Page 30: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/30.jpg)
30
Exemplo de Mapa de Imagem
![Page 31: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/31.jpg)
31
Tipos de Menus
Tipos de Menus
Menu barDrop-down menuPop-up menuTab menuToolbarImage map
Quando você usariacada um destestipos de Menu?
![Page 32: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/32.jpg)
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
![Page 33: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/33.jpg)
33
Tipos de Mensagens
Tipos de Mensagens
Error messageConfirmation messageAcknowledgment messageDelay messageHelp message
Quando você usariacada um destestipos de Mensagens?
![Page 34: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/34.jpg)
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
![Page 35: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/35.jpg)
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
![Page 36: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/36.jpg)
36
Capture Dados na Fonte Reduz a duplicação de trabalho Reduz tempo de processamento Diminui o custo Diminui a probabilidade de erros
![Page 37: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/37.jpg)
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
![Page 38: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/38.jpg)
38
Tipos de Entradas Itens de dados ligados a campos Texto Números Caixas de seleção
![Page 39: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/39.jpg)
39
Tipos de Formulários de Entrada
![Page 40: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/40.jpg)
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?
![Page 41: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/41.jpg)
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?
![Page 42: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/42.jpg)
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)
![Page 43: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/43.jpg)
43
Tendência em Gráficos
![Page 44: 1 Projeto da Interface do Usuário Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom](https://reader031.vdocuments.com.br/reader031/viewer/2022013116/570638421a28abb8238f176e/html5/thumbnails/44.jpg)
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?