Projeto de Interface do

Usurio
Prof. Ivan Correia Filagrana

Projeto da Interface do
Usurio

Baseado no material de Fred Niederman

Captulos 10 & 11 do livro de Dennis & Wixom.

Definies
A interface do usurio define como o
sistema ir interagir com entidades
externas
As interfaces do sistema definem como
o sistema troca informaes com outros
sistemas

Definies
O mecanismo de navegao oferece a maneira
que os usurios dizem ao sistema o que deve ser
feito
O mecanismo de entrada define a maneira que o
sistema captura as informaes
O mecanismo de sada define a maneira que o
sistema oferece informaes aos usurios ou a
outros sistemas
A interface grfica do usurio (GUI)
provavelmente o tipo mais comum de interface.
4

Princpios para o Projeto da

Interface do Usurio
Layout
Ateno ao contedo
Esttica
Experincia do usurio
Consistncia
Minimizao do esforo do usurio

Conceitos de Layout
A tela geralmente dividida em trs partes
rea de navegao (topo)
rea de status (baixo)
rea de trabalho (meio)
Informaes podem ser apresentadas em
mltiplas reas
Como reas devem ser agrupadas juntas?

Conceitos de Layout
reas e informaes devem minimizar o
movimento do usurio de uma para
outra
Levar em considerao
Tamanho
Forma
Localizao da entrada de dados
Como relatar os dados recuperados
7

Layout: Exemplo 1

Layout: Exemplo 2

Layout: Exemplo 3

10

Ateno ao Contedo
Todas as interfaces devem ter ttulos
Menus devem mostrar
onde voc est
de onde voc veio
Deve estar claro qual informao est dentro de cada rea
Campos e rtulos dos campos devem ser selecionados com
cuidado
Use datas e nmeros de verses para auxiliar usurios do
sistema

11

Esttica
Interfaces precisarm ser funcionais e
convidativas para o uso
Evite colocar informaes em excesso,
particularmente para usurios novatos
Projete texto com cuidado
Esteja consciente do fonte e do tamanho
Evite o uso de todas as letras maisculas
12

Esttica
Cores e padres devem ser usados com
cuidado
Teste a qualidade de cores, mas tambm veja a
interface num monitor preto/branco
Use cores para separar ou categorizar itens

13

Experincia do Usurio
O sistema fcil de aprender?
O sistema fcil de usar para os
especialistas?
Considere adio de atalhos para
especialistas
Quando a rotatividade de funionrios for
pequena o treinamento pode diminuir o
impacto da impreciso de interfaces
14

Consistncia
Permite que os usurios saibam
antecipadamente o que ir acontecer
Reduz a curva de aprendizagem
Considera itens dentro de uma aplicao e
atravs de aplicaes
Mantm para muitos nveis diferentes
Controles de navegao
Terminologia
Projeto de formulrio e relatrio
15

Minimize o Esforo
Regra trs cliques
Usurios devem ser capazes de ir do comeo ou
do menu principal de um sistema para a
informao ou ao que eles quiserem com no
mais que trs cliques no mouse ou trs teclas

16

Processo de Projeto da Interface

do Usurio: cinco passos

17

Desenvolvimento do Cenrio
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
usurio seja adequado para estas
situaes
18

Diagrama da Estrutura da
Interface
Mostra como todas as telas, formulrios e relatrios
so relacionados
Mostra como o usurio 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

Padres de Projeto de Interface

Os elementos bsicos que so comuns nas
telas, nos formulrios e nos relatrios da
aplicao
Metfora da interface
Desktop, carrinho de compras
Objetos de interface
Aes de interface
cones de interface
Templates de interface
21

Prottipo do Projeto de
Interface
Uma simulao de tela, formulrio ou
relatrio
Mtodos comuns incluem
Papel
Narrar estrias
HTML
Linguagem
22

Exemplo de Storyboard

23

Mtodos de Avaliao de
Interface
Avaliao heurstica
Use lista de checagem para avaliar projetos
Avaliao atravs de caminhos (Walkthrough)
A equipe de projeto apresenta o prottipo aos
usurios e navegam atravs de vrias partes da
interface
Avaliao interativa
Usurios tentam usar o sistema
Teste formal de usabilidade
Caro, uso detalhado de laboratrio teste
24

Componentes do Projeto de
Interface do Usurio
Projeto de Navegao
Projeto de Entradas
Projeto de Sadas

25

Projeto de Navegao:
Princpios Bsicos
Assume que os usurios
No lem o manual
No tm treinamento
No tm ajuda disponvel
Todos os controles devem estar claros e
entendveis e colocados num local intuitivo da
tela.

26

Projeto de Navegao:
Princpios Bsicos
Preveno de erros
Limite as escolhas
Nunca exiba comandos que no possam ser
usados (ou desabilite)
Confirme aes que seja difceis ou
impossveis de serem desfeitas

Simplifique a recuperao de erros

Use uma ordem gramatical consistente
(ex. objeto-ao)
27

Tipos de Controle de
Navegao
Linguagens
Linguagem de comandos
Linguagem natural
Menus
Geralmente visam um menu amplo com pouca profundidade
Considere o uso de teclas de atalho
Manipulao Direta
Usada com cones para comear programas
Usada para dar forma e tamanho a objetos
Pode no 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 bar
Drop-down menu
Pop-up menu
Tab menu
Toolbar
Image map

Quando
voc usaria
cada um
destes
tipos de
Menu?

32

Dicas de Mensagens
Devem ser claras, concisas e completas
Devem ser gramaticamente corretas e
livres de abreviaes e jarges (a
menos que sejam os do usurio)
Evite mensagens negativas e
humoristas

33

Tipos de Mensagens
Tipos de Mensagens

Error message
Confirmation message
Acknowledgment message
Delay message
Help message

Quando
voc usaria
cada um
destes
tipos de
Mensagens?

34

Projeto de Entradas:
Princpios Bsicos
Use adequadamente o processamento
On-line e Batch
Capture dados na fonte
Minimize o nmero de teclas digitadas

35

Uso adequado do processamento

Online e Batch
Processamento online imediatamente grava a
transao na base de dados apropriada
Processamente Batch coleciona entradas
durante um perodo
Processamento batch simplifica comunicaes
de dados e outros processos, mas por ex.
estoque e outros relatriospodem no
estar consistentes em tempo real

36

Capture Dados na Fonte

Reduz a duplicao de trabalho
Reduz tempo de processamento
Diminui o custo
Diminui a probabilidade de erros

37

Minimize o nmero de teclas

digitadas
O sistema nunca deve pedir
informaes que podem ser obtidas de
outra forma (ex. Recuperando da base
de dados ou realizando um clculo)
Um sistema no deve requerer que um
usurio digite informaes que podem
ser selecionadas de uma lista
Use valores padres
38

Tipos de Entradas
Itens de dados ligados a campos
Texto
Nmeros
Caixas de seleo

39

Tipos de Formulrios de
Entrada

40

Tipos de Caixas de Seleo

Tipos de Caixas
Check box
Radio button
On-screen list box
Drop-down list box
Combo box
Slider

Quando
voc usaria
cada um
destes
tipos de
Caixas?

41

Tipos de Validao de Entrada

Tipos de Validao
Completeness check
Format check
Range check
Check digit check
Consistency check
Database checks

Quando
voc usaria
cada um
destes
mtodos de
Validao?

42

Projeto de Sadas:
Princpios Bsicos
Entenda o uso de relatrio
Referncia ou incio a fim?
Freqncia?
Relatrios em tempo real ou batch?
Gerencie informaes carregadas
Todas as informaes necessrias, no mais
Minimize a tendncia (ex. entradas que aparecem na
lista primeiro pode receber maior ateno)

43

Tendncia em Grficos

44

Tipos de Relatrios
Tipos de Relatrios

Detail reports
Summary report
Turnaround document
(ex. credit card bills)
Graphs

Quando
voc usaria
cada um
destes
tipos de
Relatrios?

45