UFCD 8846

D e s i g n d e I nte ra ç ã o e
Usabilidade
25 horas
S o b r e o q u e v a m o s falar?
 Experiência d o uti lizador
• Interação h u m a n o - computador
• Fatores h u m a n o s aplicados ao design
• Elementos d a experiência do uti lizador

 D e s i g n d e interação
• Diferentes abordagens
• D e s i g n centrado no uti lizador
• Tecnologias d a interação

 Princípios e padrões d e d e s i g n d e interação

• Heurísti cas
• Padrões de desig n de interação
S o b r e o q u e v a m o s falar?
 D e s i g n d e interfaces
• Requisitos
• Personas
• Modelo mental
• Cenários
• D e s i g n visual

 Usabilidade
• Usabilidade vs ergonomia
• Usabilidade e m diferentes interfaces
• Testes de usabilidade
A Experiência do uti lizador

Interação humano-computador

Fatores humanos aplicados ao design

Elementos da experiência do uti lizador

Interação h u m a n o -
computador
O q u e é a I n t e ra ç ã o h u m a n o -
computador

• A IHC estuda a interação entre pessoas e

computadores, assim co m o as teorias e
técnicas de projeto uti lizadas para tornar
u m sistema interativo.
O q u e é a I n t e ra ç ã o h u m a n o -
computador

© Fonte: htt ps://aelaschool.com/

O q u e é a I n t e ra ç ã o h u m a n o -
computador

• A IHC é baseada tanto no conhecimento da

máquina quanto no lado humano.

• A relação entre esses componentes é

extremamente relevante, já que os
computadores têm uti lizações quase infi nitas
e existem inúmeras possibilidades de
“diálogo” entre uti lizadores e computadores.
O q u e é a I n t e ra ç ã o h u m a n o -
computador

• Ao analisar a comunicação entre o uti lizador

e a interface, as empresas p o d e m fornecer
produtos digitais mais efi cientes e acessíveis,
de acordo c o m seus consumidores.
O lado H u m a n o

• Quando hu m a no s interagem c o m
computadores, toda a sua trajetória,
aprendizagem e experiência de vida
infl uenciam essa interação, pelo que os
designers devem ter isso e m mente ao criar
interfaces ou produtos.
O lado H u m a n o
• Fatores a considerar n a Interação H u m a n o -
Computador:
• Desejos e necessidades dos uti lizadores;
• Habilidades ou possíveis limitações fí sicas do uti lizador;
• C o m o funciona o sistema d e perceção do uti lizador —
pistas q u e o nosso sistema perceti vo capta do
ambiente e que nos levam a u m a ação;
• o q u e os uti lizadores a c h a m
atrati vo ou agradável ao interagir
c o m computadores.
O lado Computador
• As informações q u e u m co m p u ta d o r c o nté m e as
operações q u e ele realiza são representadas d e u m a
forma q u e não p o d e m o s observar diretamente:
dígitos binários codifi cados.

• O q u e u m co m p u ta d o r mostra externamente
não refl ete naturalmente o q u e se está a passar
internamente.
O lado Computador

• Qualquer feedback
que o uti lizador
possa precisar deve
ser explicitamente
planeado e
programado.
A s i n te ra ç õ e s
• As interações entre uti lizadores e com p uta dore s
a c o n t e c e m n a interface, portanto, o d e s i g n d e u m a
interface te m i m pac to direto n a efi ciência dessas
interações.

• O m o d o c o m o o uti lizador interage c o m a interface

é o n d e a ciência comportamental, a ciência d a
c o m p u ta ç ã o e outros c a m p o s d e estudo se cruzam.
A s i n te ra ç õ e s

• O objeti vo é minimizar o custo de

interação — i.e., a quanti dade de esforço
fí sico e mental que u m uti lizador deve
exercer ao usar a tecnologia — e tornar as
interações mais humanas.
E m suma…

I nte r fa c e e i nte ra ç ã o s ã o c o n c e i t o s q u e n ã o
p o d e m ser estabelecidos ou analisados
independentemente
A á re a d e I H C

Te m c o m o objeti vos:

• Produzir sistemas uti lizáveis, seguros e funcionais

• Desenvolver ou melhorar a segurança, a uti lidade e

a U S A B I L I DA D E dos sistemas computacionais
A á re a d e I H C
P ro fi s s i o n ai s envolvidos:

• D e s i g n e r s d a i nte r a çã o - pessoas envolvidas n o d e s i g n d e

todos os aspetos interati vos d e u m produto

• E n g e n h e i r o s d e u s a b i l i d a d e - pessoas cujo foco é

avaliar produtos, u s a n d o m é t o d o s e princípios d e
usabilidade

• W e b d e s i g n e r - pessoas q u e d e s e nvo l ve m e c r i a m o
d e s i g n visual d e websites, c o m o layouts
A á re a d e I H C

Profi ssionais envolvidos:

• A r q u i teto s d a I n f o r m a ç ã o - p e s s o a s q u e d e s e nv o l v e m ideias
d e c o m o planejar e estruturar p ro d u to s interati vos

• D e s i g n e r s d a ex p e r i ê n c i a d o uti lizador - p e s s o a s q u e fa ze m
to d a s a s outras f u n çõ e s m a s q u e t a m b é m t ra ze m
c o n h e c i m e n t o d e outras áreas d e e st u d o q u e s u b s i d i e m o
d e s i g n d e p rod u tos
Conhecimentos usados e m IHC
Designer:
• D e s i g n visual e auditi vo
• C o n h e c i m e n t o sobre o proc e s so d e d e s i g n e s u a s m e to d o l o g i a s
P ro g ra m a d o r :
• Sistemas, toolkits e l i n g u a g e n s
• Té c n i ca s d e E n g e n h a r i a d e Soft ware
I n ve sti ga d o r / P e s q u i s a
• Teorias e princípios cogniti vos
• Té c n i ca s experimentais
Fatores h u m a n o s a plica do s a o d e s i g n
C a t e g o r i a s d e U ti l i za d o re s e d i fe r e n ç a s
individuais

Expert no tema

E x p e r t n o s iste m a

Exp e rt
Iniciante e m c o m p u ta d o re s
e m c o m p u ta d o re s

Iniciante n o s iste m a

Iniciante n o t e m a
C o m p r e e n d e r o s uti l i za do r p o r q u e …
• A interação c o m a tecnologia é cogniti va

H á q u e ter e m consideração os processos cogniti vos

envolvidos e as limitações cogniti vas dos uti lizadores

• É impor tante conhe ce r bem o que pode, ou não,

ser esperado dos uti lizadores
C o m p r e e n d e r o s uti l i za do r p o r q u e …
• Identi fi car e explicar a natureza e causas dos
problemas encontrados pelos uti lizadores

• Poderemos aplicar teorias, ferramentas de

prototi pagem, guias e métodos q ue p os s a m
conduzir a projetos de melhores produtos interati vos
Fa t o r e s h u m a n o s e m I H C

• Aspetos Cogniti vos Centrais

• Modelo de Processador H u m a n o

• Engenharia Cogniti va
A s p e t o s C o g n i ti v o s C e n t ra i s

• Perceção e U s a d o s para:
reconhecimento
• Ler, falar, ouvir..
• At e n ç ã o • Resolver p ro b le m a s, planear,
• Memória raciocinar, t o m a r decisões, a p re n d e r

Pe rc e çã o é a fo rm a c o m o a info rm a çã o é assimilada e
transformada e m experiência – é u m processo c o m p l e xo e
envolve os restantes aspetos, c o m o a te n çã o e a m e m ó r i a e
os S E N T I D O S !
P e r c e ç ã o – D e s a fi o 1
P e r c e ç ã o – D e s a fi o 2

Confl ito! O lado direito d o cérebro te nta dizer a cor, m a s

o lado e s q u e rd o t e i m a e m ler a palavra.
A p e r c e ç ã o e o s s e n ti d o s
C o m o p e rc e b e m o s o m u n d o à nossa volta?

• Através de S E N S A Ç Õ E S (resultam do exercício dos

senti dos!)

• As sensações variam de acordo c o m o esti mulo,

ambiente, estado emocional, etc.

O uti lizador deve ''perceber'' a informação

apresentada na interface, através do s sinais q u e
a consti tuem.
A p e r c e ç ã o e o s s e n ti d o s

Ei s u m vídeo interessante sobre este t e m a (do 32:11 ao 36:50…

m a s to d o o vídeo é interessante!)
htt p://youtu.be/sk0rPAGoJcs7t=32m9s
A p e r c e ç ã o n a teoria co n st r u ti v i sta
A i n f o r m a ç ã o q u e c a p t a m o s é "construída" → e nvo l ve
p r o c e s s o s c o g n i ti vo s
• A p e rc e çã o envolve a inter venção d e r e p r e s e n t a ç õ e s e
memorias.
• O q u e se vê n ã o é u m a réplica d o m u n d o c o m o u m a
fotografi a
• O s i st e m a visual constrói u m m o d e l o d o m u n d o através d e
transformações, acréscimos, distorções e d e s ca rta n d o
info rm a çã o
• A habilida de d e pe rc e be r objetos n u m ecrã - textos, gráfi cos,
representações bi o u tri-d i m e n s i o n a i s - é resultado d e nosso
c o n h e c i m e n t o anterior e d a s expectati vas d o q u e deveria
aparecer
A perceção e reconhecimento e m IHC
A i m p l i ca çã o óbvia é projetar representações q u e s e j a m
fac ilme nte percetí veis, por exemplo:
- O texto d eve ser legível
- O s ícone s d e v e m ser fáceis d e se disti nguir e ler
A atenção

htt ps://www.youtube.com/watch?v=FzeXeXR9cCs
A atenção
• S eleção d e coisas para se conc e ntrar d e entre várias ao nosso
redor, n u m d e te r m i n a d o m o m e n t o
• M e c a n i s m o q u e p e r m i te a fi xação d e a l g u n s e stí m u los e a
o rga n i za çã o d a s i nfor m a çõe s para o proc e s so d e t o m a d a d e
decisão.
• É infl uenciada pelas necessidades, moti vações, interesses,
personalidade, cultura, objeti vo, prazer, medo...
• P o d e ser F O C A D A – q u a n d o n o s c o n c e n t ra m o s
n u m d e te r m i n a d o evento, q u a n d o ex i ste m várias
coisas e m s i mu l tâ n e o
• O U D I V I D I D A - q u a n d o se tenta ate nde r a m a i s d e u m a
situação m e s m o t e m p o (ex.: co n d u z i r e conversar c o m o “pendura”
A a t e n ç ã o n o d e s i g n d e i n te r fa c e s
• A s infor m a çõe s d e u m a interface d e v e m ser estruturadas para
captar a ate n çã o d o uti lizador, por exe m p l o u s a n d o fronteiras
percetí veis (janelas), cor, vídeo, s o m e luzes intermitentes…
• A i nfo r m a çã o d e ser fácil d e ser n av e ga d a
• D e v e apresentar-se a i nfo r m a çã o n a m e d i d a certa: n e m m u i t a e
n e m pouca
• D e v e a g r u p a r- se e ordenar- se a
informação e m partes signifi cati vas
A t e n ç ã o e m M u l ti t a s k i n g e I n t e r r u p ç ã o
• O “ m o d o multi task ing ” pe rmite - n o s executar u m a série d e
tarefas a l te r n a d a m e nte d u ra nte u m m e s m o período d e t e m p o
• I n c o n s c i e n t e m e n t e d i v i d i m o - las e m tarefas p r i már i as e
secundárias
• n e c e s s i t a m o s d e a j u d a s co g n i ti va s p a ra s a b e r o n d e
re c o m e ç a r

• A s interfaces d e v e m ser projetadas para s i ste m ati ca me nte

fornecer i nfo r m a çã o sobre o status d e u m a d e te r m i n a d a
ati vidade/tarefa
(Ex: “o s e u a r q u i v o a i n d a n ã o foi salvo”)
Memória
• Envol ve co d i fi ca r e re co rd a r o c o n h e c i m e n t o
e agir a p ro p r i a d a m e nte
• N ó s n ã o n o s l e m b r a m o s d e t u d o – exe rc e m o s
fi ltragem e p ro c e s s a m e nto
• O contexto é i m p o r ta nte para n o s s a m e m ó r i a
• N o s s a c a p a c i d a d e d e identi fi car coisas é m u i t o m a i o r d o q u e a
c a p a c i d a d e d e l e m b ra r coisas
• O que, e m I H C se t ra d u z n o a u m e n t o d o u s o d e interfaces G UI
(Graphical Use r Interface) b a s e a d a s e m c o m a n d o

• E m a i s fácil l e m b r a r d e i m a g e n s d o q u e d e p a l a v r a s
• - O u s o d e í c o n e s e m v ez d e n o m e s t a m b é m a j u d a
“Quantas” me mórias temos?
M e m ó r i a d e I n f o r m a ç ã o S e n sori al
• É a "fotografi a d o mundo", c o m o ele é recebido pelos nossos
ó rgã o s d o s senti dos
Memória de Curta Duração
• A i nfo r m a çã o reti da n ã o é u m a i m a g e m c o m p l e t a d e eventos,
m a s a interpretação i m e d i ata deles
Memória de L o n ga Duração
• É a q u e fi ca… são 10 m i l m i l h õ e s d e neurônios c a p a ze s d e
a r m a ze n a r i nfo r m a çõ e s ...

Q u e m se lembra do q u e al mo ço u no s ábado passado?

A m e m ó r i a e a s I nte r fa c e s
A m e m ó r i a e a s I nte r fa c e s
Limitações da memória
• A m e m ó r i a está envolvida e m todas as n o s s a s ati vidades (da
m e s m a fo r m a q u e p e rc e çã o e atenção)
• S e m m e m ó r i a n ã o co n s e gu i r í a mo s , por exemplo, lavar os
de ntes
• O s i ste m a d e m e m ó r i a h u m a n o é m u i t o versáti l - p o d e
a r m a ze n a r proc e dime ntos , d a d o s sensoriais, relações,
senti mentos, experiências, etc. - M A S N Ã O É I N FA L Í V E L !
• A extensão d o q u a n t o é re l e m b ra d o d e p e n d e d o q u a n t o é
signifi cati vo
• Teoria d o nível d e p ro c e s s a m e nto : a p ro f u n d i d a d e a q u e u m a
i n fo r m a çã o é p ro c e s s a d a d e t e r m i n a a facilidade c o m q u e é
l e m b ra d a
Limitações da memória
• A m e m ó r i a está envolvida e m todas as n o s s a s ati vidades (da
m e s m a fo r m a q u e p e rc e çã o e atenção)
• S e m m e m ó r i a n ã o co n s e gu i r í a mo s , por exemplo, lavar os
de ntes
• O s i ste m a d e m e m ó r i a h u m a n o é m u i t o versáti l - p o d e
a r m a ze n a r proc e dime ntos , d a d o s sensoriais, relações,
senti mentos, experiências, etc. - M A S N Ã O É I N FA L Í V E L !
• A extensão d o q u a n t o é re l e m b ra d o d e p e n d e d o q u a n t o é
signifi cati vo
• Teoria d o nível d e p ro c e s s a m e nto : a p ro f u n d i d a d e a q u e u m a
i n fo r m a çã o é p ro c e s s a d a d e t e r m i n a a facilidade c o m q u e é
l e m b ra d a
Memória vs Reconhecimento
• R e c o n h e c e r é m u i t o m a i s efeti vo q u e l e m b ra r
• Po r isso, d e ve reduzir-se n a interface o n ú m e r o d e
c o m p o n e n t e s q u e t e m q u e ser l e m b ra d o s
M o d e l o s M e ntais
• Te n d o c o m o b a s e os aspetos cogniti vos centrais, os uti lizadores
d e s e nv o l v e m a c o m p r e e n s ã o d e u m s i ste m a através d o seu
e st u d o e d a s u a uti lização
• O c o n h e c i m e n t o é f re q u e nte m e n te descrito c o m o u m modelo:
• c o m o u s ar o s i ste m a (o q u e fazer depois)
• o q u e fazer d i a nte d e s i ste m a s n ã o familiares o u e m situações
i n e s p e ra d a s e d e s c o n h e c i d a s ( c o m o os s i ste m a s f u n c i o n a m )

• A s pe ss oa s f a ze m i n fe rê n c i a s u ti l i za n d o m o d e l o s m e n t a i s d e
c o m o realizar tarefas
• Assim, os d e s i g n e rs d e v e m desenvolver interfaces q u e a j u d e m
o uti lizador a construir Modelos Mentais a d e q u a d o s à sua
interação c o m o s i ste m a
E l e m e n t o s d a experiência d o
uti lizador
 www.iefp.pt
INSTITUTO DO EMPREGO E FORMA AO
PROFISSIONAL,IP
P r o c e s s a r a s ex p e r i ê n c i a s
Pa ra D o n N o r m a n , f u n d a d o r d a Nielsen N o r m a n G ro u p a
experiência d o uti lizador a co nt e c e e m três níveis cogniti vos e
emocionais:
• Visceral: é o nível m a i s i m e d i ato d e p ro ce s s a m e nto. O uti lizador
re a g e a o a s p eto visual, auditi vo o u tátil, a i n d a a nte s d e interagir.
É a “primeira impressão”!
• C o m p o r t a m e n t a l : é a re a çã o d o uti lizador a o interagir c o m o
produto, s i st e m a o u serviço, d e a co rd o c o m s u a s expectati vas e
os m o d e l o s mentais.
• Refl exivo: o uti lizador faz co n s id e ra çõ e s co n s c ie nte s e refl exões
sobre expe riências anteriores a o interagir c o m o produto, s iste m a
o u serviço. C a s o ele t e n h a ti do u m a expe riência m á n o passado,
por exe m p lo, p rovave l m e nte n ã o irá desejar u m p ro d u to similar.
Elementos e m UX
• B o a s expe riências d e uti lizador, t ê m
por b a s e o s u c e s s o e co n s e q u e nt e
sati sfação / felicidade d o uti lizador.
• Isso signifi ca que, a nte s q u e d e
desenvolver a interface, as
e m p r e s a s d e v e m ter u m
e n t e n d i m e n t o claro sobre as
n e c e s s i d a d e s e prioridades d o
s e u público.
• O autor Pe te r Morville c o n c e b e u
u m m o d e l o d e colmeia, c o m o
intuito d e m o st ra r q u e o processo
d e U X é m u lti - dime nsional, e m vez
d e linear
Elementos e m UX
Va m o s considerar c o m o e xe m p l o u m site d e u m banco, para
e n t e n d a c o m o estes e l e m e nt o s s e r i a m a p lica d os n a práti ca:
• Úti l (Useful): O site disponibiliza serviços c o m o co n s u lta d e
m o v i m e n t o s d e co nta e p a ga m e nt o s .
• Uti lizável (Usable): Q u a n d o v is u a liza m os os m o v i m e n t o s d a
conta, a info r m a çã o é o rga n i za d a e p o d e ser pesquisada,
p e r m i ti n d o rever dé bitos e créditos recentes. O u seja, funciona
d a m a n e i ra q u e e s p e ra m o s e d e fo r m a constante.
• D e s e j á v e l (Desirable): A interface torna a g e stã o d a co nta m a i s
fácil d o q u e i n d o a u m a agência.
• A c e s s í v e l ( A c c e s s i bl e ) : O site co nta c o m recursos d e
acessibilidade, c o m o f u n çõ e s p a ra invisuais o u outras limitações.
Elementos e m UX
• C o n fi áv e l (Credible): O a c e s s o é co n s id e ra d o seguro, a s s i m
c o m o outras f u n cio n a lid a d e s d e s e g u ra n ça , c o m o validação d e
op e ra çõ e s o u l o g o u t a u t o m áti c o a o fi m d e x t e m p o d e
inati vadade.
• Intuiti vo (Findable): Q u a n d o q u e re m o s , por exe m p l o u m novo
cartão d e crédito, é fácil e n co ntra r ofertas e solicitá-lo online.
• Va l i o s o (Valuable): A s f u n cio n a lid a d e s self-service n o site
d i m i n u e m os c u sto s d o a t e n d i m e n t o e m e l h o r a m a sati sfação
d o s uti lizadores, cria n d o u m a expe riência q u e vale a p e n a para
clientes, b e m c o m o u m b o m inve sti m e nto p a ra os negócios.
D e s i g n d e I n te ra ç ã o
Diferentes a b o r d a g e n s
D e s i g n c e nt ra d o n o uti lizador
Te c n o l o g i a s d a interação
4 A b o r d a g e n s a o D e s i g n d e I n te ra ç ã o
D u ra n t e a exe c u ç ã o d e u m projeto d e D e s i g n d a Interação são
possíveis q u at ro a b o r d a g e n s disti ntas:
• C e n t r a d o n o s uti lizadores: c o m foco n a s n e c e s s i d a d e s e
objeti vos d o s uti lizadores;
• C e n t r a d o e m Ati v i da de s : c o m foco n a s ati vidades e tarefas q u e
p r e c i s a m d e ser realizadas;
• C e n t r a d o n o s S i s te m a s : c o m foco n o s c o m p o n e n t e s d o sistema;
• C e n t r a d o n o D e s i g n e r (Génios): to ta lm e nte a s s e nta n a s
c o m p e t ê n c i a s e c o n h e c i m e n t o d o d e s i g n e r p a ra fazer produtos.
Existe u m a a b o r d a g e m ideal? Não. Existe a q u e l a q u e m e l h o r se
a d e q u a à realidade d o projeto e à fo r m a c o m o ele será executado.
D e s i g n C e n t r a d o n o Uti lizador
• A fi losofi a por trás d o d e s i g n c e nt ra d o n o uti lizador é simples: os
uti lizadores s a b e m melhor. A s p e s s o a s q u e uti lizarão o p rod u to
o u serviço s a b e m m e l h o r q u e n i n g u é m q u a i s são s u a s
necessidade s, objeti vos, preferências… c a b e a o d e s i g n e r
identi fi ca-las.
• A m e t o d o l o g i a d o d e s i g n c e nt ra d o n o uti lizador coloca o
uti lizador n o n ú c l e o d o p ro ce s s o d e d e s i g n d e interação
• S e g u n d o a n o r m a I S O 9241-210 o co n ce ito vai a i n d a m a i s alé e é
c h a m a d o d e H u m a n - C e n t e r e d D e s i g n , caracterizando- se pelo
e nvolv im e nto ati vo d o s uti lizadores e n u m claro e nt e n d i m e nt o
sobre estes, a s tarefas e os requisitos;
Princípios do D C U
D o n N o r m a n , d o já referido Nielsen N o r m a n Group, identi fi ca os
princípios c o m u n s a os projetos “ b e m co n s e g u id o s ” d e d e s i g n
c e nt ra d o n o uti lizador:
• S i m p l i fi c a m a e st r u t u ra d a s ta refa s d e fo r m a a q u e a s a çõe s
possíveis a q u a l q u e r m o m e n t o s e j a m intuiti vas.
• To r n a m a s c o i s a s visíveis, in c lu in d o o m o d e l o c o n c e p t u a l d o
sistema, ações, resultados d e a çõ e s e feedback.
• F a z e m u m exausti vo m a p e a m e n t o e n t r e o s re s u l t a d o s
p r e t e n d i d o s e a s a ç õ e s ne c e s s á ri a s .
• A b o r d a m d i re ta m e nt e e
e x p l o r a m a s re st r i ç õ e s d o s s i ste m a s .
Modelos e abo rdagens do D C U
O d e s i g n c e nt ra d o n o uti lizador é inspirado n o s s e g u i nt e s modelos:
• D e s i g n c o o p e ra ti v o o u C o - d e s i n g : e nvo lve n d o d e s i g n e rs e
uti lizadores e m p é d e ig u a ld a d e . E st e é o m o d e l o e s ca n d i n avo d e
d e s i g n d e dispositi vos d e TI e t e m v in d o a evoluir d e s d e 1970.
• D e s i g n Pa r ti c i p a ti v o (DP): é o e r m o norte-a m e r i c a n o p a ra o
m e s m o conceito, inspirado n o D e s i g n Cooperati vo, c o m foco n a
parti cipação d o s uti lizadores.
• D e s i g n co ntex t u a l : p a rti n d o d o d e s i g n parti cipati vo, incorpora
m é t o d o s etnográfi cos p a ra reunir d a d o s relevantes p a ra o
p rod u to
A s m e t a s d o D e s i g n d e I n te ra ç ã o
• C o m b i n a m metas de
u s a b ilid a d e c o m
m e t a s d e experiência
d e uti lizador
O processo de D C U
Te c n o l o g i a s d a Interação
A i n te ra ç ã o e m f u n ç ã o d e …
R E L A Ç Ã O H OMEM - MÁQUINA

• Re a ti va - O s uti lizadores t ê m controlo reser vado sobre a

info rm a çã o d o a m b i e n t e gráfi co, o u seja, o s i st e m a controla a
a ç ã o d o s uti lizadores, q u e a p e n a s re a ge m .
• C o a ti v a - O s uti lizadores t ê m controlo d o esti lo, ritm o e d a
s e q u ê n c i a d o a m b i e n t e gráfi co.
• P ro a ti va - O s uti lizadores co nt ro l a m to ta lm e nte a estrutura e o
c o n t e ú d o d o a m b i e n t e virtual, o u seja, co nt ro l a m o s e u
desenvolvimento.
A i n te ra ç ã o e m f u n ç ã o d e …
AÇÃO SENSORIAL

• B a i x a - N o nível d e interação baixa, a p e s a r d e a l g u n s senti dos d o

uti lizador e sta re m a ser esti mulados, este n ã o se s e nte d e todo
parte d o a m b i e n t e virtual.
• M é d i a - N o nível d e interação m é d i a a p e n a s a l g u n s senti dos d o
uti lizador estão a ser e sti m u l a d o s fa ze n d o c o m q u e exista u m
controlo limitado por parte d o m e s m o . A interação c o m os j o g o s é
u m e xe m p l o d e ste ti po d e interação.
• E l e v a d a - O nível d e interação e levada consiste n u m a m b i e n t e e m
q u e o uti lizador está c o m p l e t a m e n t e im e rs o n o a m b i e n t e gráfi co
e todos os s e u s senti dos s ã o esti mulados. S ã o uti lizados
s im u la d o re s d e m o d o a a p rox im a r o a m b i e n t e gráfi co c o m a
realidade.
T i p o s d e I nte rati v i d a d e - Re a ti va
L i n e a r - A s e q u e n c i a d a s a çõ e s esta predefi nida pelo sistema, o
uti lizador p o d e a p e n a s decidir o senti do, este ti po d e interati vidade
desenvolve- se d e fo r m a reacti va. - ver u m vídeo, por exemplo..

D e s u p o r t e - O uti lizador re c e b e p e q u e n a s m e n s a ge n s /co m e ntá r i o s

a c e rca d o s e u d e s e m p e n h o . E st e ti po d e interati vidade desenvolve-
se d e fo r m a reacti va. Po r exemplo.

H i e rá rq u i c a - O uti lizador seleciona u m trajeto c o m b a s e e m

defi nições predefi nidas a p re s e nta d a s pelo sistema.

S o b r e o b j et o s - O uti lizador a c io n a objetos através d e u m

dispositi vo d e m o d o a obter u m a resposta d o sistema.
T i p o s d e I nte rati v i d a d e - P ro ati va
• Re fl ex i va - O s i ste m a faz p e r g u n t a s a o uti lizador. O uti lizador p o d e
c o m p a r a r a s s u a s respostas c o m d e outros uti lizadores o u até c o m as
d e especialista d e m o d o a refl eti r s obre o s e u d e s e m p e n h o .
• D e h i p e r l i g a ç ã o - O uti lizador p o s s u i u m c o n j u nto d e hiperligações
q u e p o d e selecionar, to m a n d o, assim, r u m o s diferentes.
• D e a t u a l i z a ç ã o - O s i ste m a atualiza-s e à m e d i d a q u e o uti lizador faz
alterações.
• C o n s t r u ti v a - E ste ti po d e interati vidade é u m a ex te n s ã o d a
interati vidade d e atualização.
• C o n t e x t u a l - C o m b i n a os outros ti pos d e interati vidade c r i a n d o u m
a m b i e n t e virtual s e m e l h a n t e à realidade.
• C o n t e x t u a l G l o b a l - Projeta o uti lizador p a ra u m a m b i e n t e criado
p el o c o m p u t a d o r e e m q u e o p r o g r a m a r e s p o n d e à s a ç õ e s d o
uti lizador.
T i p o l o g i a s d e I n te ra ç ã o
U m a d a s áreas-c h av e d e interesse d a disciplina d o H C I ( H u m a n
C o m p u t e r Interacti on) é a análise d a s c a p a c i d a d e s d e interação e m
soft ware e dispositi vos. H á c i n co ti pologias d e interação, o rga n i za d a s
e m três g ra n d e s grupos:
• E sti l o s l i n g u í sti c o s
S ã o a q u e le s e m q u e a int ro d u çã o d e d a d o s é feita u s a n d o o teclado
alfanumérico. B a s e i a m - se n a l i n g u a g e m natural, e m b o r a u s e m
re g ra s sintáti cas e s e m â n ti c a s m u i t o rigorosas. N e ste g r u p o h á dois
ti pos;
a) L i n g u a g e m d e c o m a n d o

b) L i n g u a g e m natural
(via texto o u voz)
T i p o l o g i a s d e I n te ra ç ã o
T i p o l o g i a s d e I n te ra ç ã o
• E sti l o s c o n tex t u a i s
S ã o a q u e le s q u e t ê m por referência a situação o u contexto d o
uti lizador d e nt ro d o sistema. D e nt ro d o s esti los contextuais, temos:
a) J a n e l a s d e diálogo

b) M e n u s

c) Formulários
T i p o l o g i a s d e I n te ra ç ã o
• M a n i p u l a ç ã o direta

Pe r m i t e ao uti lizador executar tarefas e

processos c o m p l exo s s e m ter d e investi r
d e m a s i a d o t e m p o n o processo d e
a p re n d i za ge m . Uti lizando recursos d e
r e c o n h e c i m e n t o visual, p e r m i t e m q u e o
uti lizador ocasional se l e m b r e facilmente
d e c o m o agi r dentro d o sistema.

Po r outro lado, a reversibilidade das

o p çõ e s resulta n u m a bai xa f requênci a d e
erros. D e nt ro d o s esti los d e m a n i p u l a ç ã o
direta, t ê m especial d e s t a q u e os gráfi cos
o u G UI - "Graphical User Interface"
(Interface Gráfi ca d e Uti lizador)
- Linguagem de Comando
• É o esti lo m a i s a nti g o d e interação, u m a vez q u e era o ú n ico
possível n o s primeiros c o m p u t a d o r e s (o s i st e m a D O S , por exemplo,
uti liza u m a interface comandos).
• C on s iste n u m n ú m e r o limitado o u c o m a n d o s
• B a s e ia - se e m c o m a n d o s verbais q u e d e v e m ser m e m o r i za d o s , o
q u e i m p l i ca u m t e m p o d e a p r e n d i z a g e m elevado.
• U m a vez q u e o uti lizador t e n h a a p re n d i d o a l i n g u a g e m , p o d e ser
u m d o s s i ste m a s d e interação m a i s rápidos.
• Te m u m elevado nível d e f u n cio n a lid a d e e fl exibilidade, a o m e s m o
t e m p o q u e p e r m i t e m ú lti p la s c o m b i n a ç õ e s d e c o m a n d o s e chaves.
• D e p e n d e d a c a p a c i d a d e d o uti lizador d e se l e m b ra r d o s co m a n d o s .
- Janelas de Diálogo
A s janelas d e d iá lo go são janelas n a s q u a i s o s i st e m a apresenta
alternati vas a o uti lizador e solicita respostas. E n v o l v e m u m a
c o m b i n a ç ã o d e característi cas d e m e n u e formulário. E x i s t e m três
ti pos d e janelas d e diálogo:
1. Modais. S u s p e n d e m te m p o ra r i a m e n te todas as a çõe s e fo rça m o
uti lizador para responder à p e r g u n t a co l o ca d a n a janela. S ó
d e s a p a r e c e m q u a n d o o uti lizador escol he u m a d a s o p çõ e s q u e
a p re s e n ta m

2. N ã o Modais. To r n a m a interação fl exível, u m a vez q u e o uti lizador t e m

as o p ç õ e s d e janela à s u a di sposi ção s e m ter d e deixar o resto das
tarefas

3. J a n e l a s d e Alerta. R e p o r t a m situações p rob l emáti ca s e p o d e m ser

tanto d e erro (alertar sobre u m erro d o s i ste m a o u d o uti lizador) c o m o
d e aviso (alertar o uti lizador sobre os potenciais p ro b l e m a s decorrentes
d e u m a ação).
- Menus
O s m e n u s a p r e s e n t a m listas d e i te n s s e l e c i o n áve i s . E ste s
e l e m e n t o s p o d e m ser d e três ti pos:

• C o m a n d o s - Ati v a m a çõ e s específi cas (abrir, cortar, copiar,

colar, etc.)
• Atributos - P e r m i t e m aplicar o p ç õ e s relacionadas c o m as
característi cas d o e l e m e n t o se le c io n a d o pelo uti lizador
(fonte, cor d e p re e n c h i m e nto, etc.)
• E st a d o s - P e r m i t e m ati var o u desati var o p ç õ e s relacionadas
c o m a co n fi g u ra çã o d o s i ste m a (ver grelha, re g ra s d e
exibição, etc.).
- Menus
O s m e n u s p o d e m ser:
• S u s p e n s o s : A p a r e c e m a sso c ia d a s a u m co n c e i to genérico,
p re se nte n u m a B a rra d e Menu. D e n t ro d a s opções, p o d e m o s
e n co nt rar m e n u s h i e rá rq u i c o s o u e m c a s c a ta , q u e
c o n s i s t e m e m s u b m e n u s q u e a p a r e c e m a o selecionar u m a
d a s o p ç õ e s principais d o m e n u .
• C o n tex t u a i s : A p a r e c e m c l i ca n d o n u m e l e m e n t o d e ecrã.
C o nve n c i o n a l m e nte , o a p a re c i m e n t o d o m e n u d e contexto
está a sso c ia d o a o c liq u e direito d o rato. O s m e n u s d e
co ntex to f u n c i o n a m f re q u e n t e m e n t e c o m o atalhos para
o p ç õ e s d e m e n u s suspensos.
•
- Menus
• J a n e l a s d e s el eção : C o n t ê m o p ç õ e s selecionáveis através
d e e l e m e n t o s como:
• C a i xa s d e verifi cação - n o ca s o d e o p çõ e s q u e p o s s a m ser ati vadas ou
desati vadas

• Botõ es d e radiais (radio butt ons), e m ca s o d e o p çõ e s d e autoexclusão.

- Fo rmulário s
P e r m i t e m a o uti lizador introduzir d a d o s d e fo r m a estruturada.
C a i x a s d e tex to - E ste s sã o c a m p o s e m q u e o uti lizador p o d e
introduzir texto u s a n d o o tec lad o (o n ú m e r o d e caracteres
p o d e ser limitado pelo sistema)
O p ç õ e s s e l e c i o n áve i s
a) Caixas. C o n t ê m o p ç õ e s q u e p o d e m ser l i ga d a s o u
desligadas, e sã o i n d e p e n d e n t e s u m a s d a s outras.
b) B o t õ e s radiais. C o n t ê m o p ç õ e s autoexcluídas. S ã o u s a d o s
q u a n d o n ú m e r o d e o p ç õ e s é limitado
c) M e n u s suspenso. C o n t é m o p ç õ e s d e autoexclusão. U s a d o
q u a n d o h á m u i t a s opções.
- M a n i p u l a çã o Direta
• A m a n i p u l a ç ã o direta i m p l i ca q u e os objetos n o e crã s e j a m
selecionados e m a n i p u l a d o s d i re ta m e nt e u s a n d o o ponteiro (o
m a i s uti lizado é o rato).
• O s itens n o e crã d e v e m representar objetos n o m u n d o real, e as
a çõ e s t a m b é m c o r r e s p o n d e m a a çõ e s reais.
• To d a s a s a çõ e s t ê m resposta im e d iata
• O uti lizador p o d e i m e d i ata m e nt e
ver se a s s u a s a çõ e s são a d e q u a d a s
a os s e u s objeti vos e corrigi-las se
necessário.
• A m a n i p u l a ç ã o direta re d u z a
a n s i e d a d e d o uti lizador inexperiente
e é a l ta m e nt e moti vadora.
Tarefa 1 – P r i m e i ra a n á l i s e d e u m
We b s i t e
E s c o l h a u m We b s i t e /A p p d e q u e g o s t e e/ou q u e uti lize
r e g u l a r m e n t e e an al i s e - o r e s p o n d e n d o à s s e g u i n t e s
q u e stõ e s :
• Q u a l o principal objeti vo d o We b s i t e e o s e u p ú b lico- alvo?
• Q u e ti pos d e c o n t e ú d o s e q u e formatos e n co ntra ?
• Q u e f u n cio n a lid a d e s disponibiliza (i.e., q u e tarefas se
p o d e m realizar)?
• C o n s i d e ra a estrutura d a info r m a çã o e n a v e g a ç ã o
adequadas?
• Q u e fo r m a s d e interação e n co nt ra ? S ã o a d e q u a d a s ?
• O que, e m s u a opinião, pode ria e n riq u e ce r e
m e lh ora r a expe riência d e uti lização n e s s e website?
• Alteraria a l g u m a coisa? D e i xe a s
s u a s sugestões, se a s s i m o e nte n d e r
• C o m o aprecia g l o b a l m e n t e o we bs ite
/ app?
Princípios e padrões de design de
i n te ra ç ã o
Heurísti cas
O q u e s ã o h e u r í s ti c a s ?
O q u e s ã o a s 10 H e u r í sti c a s d e N i e l s e n ?

“As heurísti cas sã o 10 princípios ge ra is p a ra o design.

C h a m a m - se “heurísti cas” p o r q u e sã o re g ra s b á s i ca s e n ã o
diretrizes específi cas d e usabilidade.”

- J a ko b Nielsen

Refe re m - se a
F O R M A S D E AVA L I A R
O DESIGN D E INTERAÇÃO
L E R A R T I G O (ENG)
H e u r í s ti c a s d e N i e l s e n

Fonte: A d a p t a d o d e “Usability I n s p e c ti o n Methods”, J a k o b Nielsen, 1994

1. V i s i b i l i d a d e d o E s t a d o d o S i s t e m a

O d e s i g n d e v e s e m p r e m a n t e r os uti lizadores info rm a d o s

sobre o q u e está a acontecer, d a n d o - lhe o fe e d b a c k
apropriado, d e nt ro d e u m p eríodo d e t e m p o razoável.
1. V i s i b i l i d a d e d o E s t a d o d o S i s t e m a
PORQUÊ?
- O s uti lizadores a p r e n d e m o processo
- O s uti lizadores g e r e m expe ctati vas e d e t e r m i n a m p a s s os
s e g u i nte s
- S a b e r c o m o q u e p o d e co nta r g e ra co nfi a n ça n a m a r c a /
p rod u to

SUGESTÕES?
- C o m u n i q u e q u a l o e sta d o d o s i st e m a d e fo r m a clara - n ã o deve
h ave r a çõ e s d o s uti lizadores s e m informação.
- A p re s e nte fe e d b a c k a o uti lizador o m a i s rápido possível (de
preferência, imediatamente).
- Crie co nfi a n ça por m e i o d e u m a c o m u n i c a ç ã o aberta e
co ntí n u a .
2. C o r r e s p o n d ê n c i a e nt re o s i s t e m a
e o m u n d o real

Falar a l i n g u a g e m d o s uti lizadores.

Usar palavras, frases e co n c e ito s familiares a o uti lizador
S e g u i r a s c o nv e n ç õ e s d o m u n d o real, p a ra q u e as
i nfo r m a çõ e s s u r j a m n u m a o r d e m natural e lógica.
2. C o r r e s p o n d ê n c i a e nt re o
s i s t e m a e o m u n d o real
PORQUÊ?
- A a ç ã o torna-se m a i s fa c ilm e nte entendível
- N e m t u d o é óbvio
- Facilita a a p r e n d i z a g e m e m e m o r i z a ç ã o d o p ro c e s s o →
experiência intuiti va

SUGESTÕES?
- U s e termos, conceitos, í co n e s e i m a g e n s q u e os uti lizadores
p o s s a m e nte n d e r s e m t e r e m d e p roc urar o signifi cado.
- N u n c a p re s u m i r q u e os uti lizadores p e r c e b e m p o r q u e n ó s
p e rc e b e m o s .
- Ter estabelec ido u m P E R S O N A facilita este processo.
3. C o n t r o l o e L i b e r d a d e d o Uti lizador

O s uti lizadores
e n g a n a m - se!
E precisam de u m a
"saída d e e m e rgê n c i a "
clara, visível e
i n e q u í vo ca p a ra deixar
a ação indesejada s e m
ter q u e p a ss a r p or u m
p ro c e s s o extenso.
3. C o n t r o l o e L i b e r d a d e d o Uti lizador
PORQUÊ?
- Facilitar a desistênc ia d e u m processo, re c u o o u saída
p r o m o v e a s e n s a ç ã o d e liberdade e d e confi ança.
- Evita e m i n i m i z a o s e n ti m e n t o d e frustração c a u s a d o pelo
e n g a n o / insucesso.

SUGESTÕES?
- A l é m d a saída, possibilitar o retroceder à eta p a anterior.
- Usar b o tõ e s s i m p l e s e s i m b o l o s c o m o “x” p a ra fechar
- Certi fi que-se d e q u e a saída está c l a ra m e n t e identi fi cada e
visível.
4. C o n s i s t ê n c i a e S t a n d a r d s
O s uti lizadores u s a m outros
websites... Até d e concorrentes!
A s experiências d o s uti lizadores
e m outros We b s i te s d e fi n e m as
expectati vas a o usar o seu.
Portanto, s i ga a s c o nv e n ç õ e s e os
sta n d a rd s d a p latafor m a e d o s e u
m e rca d o .
A co n sistên c ia interna t a m b é m é
importante!... u s e s e m p r e as
m e s m a s ordens, lógicas,
símbolos… a o l o n g o d o website
4. C o n s i s t ê n c i a e S t a n d a r d s
PORQUÊ?
- Facilita a a p r e n d i z a g e m e m e m o r i z a ç ã o d o p ro ce s s o →
experiência intuiti va
- Us a r s i m b o l o g i a s variadas o u ser m u i t o diferente d o e s p e rad o
o b r i ga a u m esforço adicional por parte d o uti lizador,
d e s e n co ra j a n d o - o.

SUGESTÕES?
- Manter p a d rõ e s d e cores p a ra a s m e s m a s funcionalidades
- Manter co e rê n cia n a localização d e botões, atalhos, o r d e m lóg ica
d a s informações, etc.
- O m e s m o c o m a n d o o u a ç ã o d e ve ter s e m p r e o m e s m o resultado
5. P r e v e n ç ã o d e er ro s
É i m p o r ta nte ter u m a b o a
m e n s a g e m d e erro…
... m a s o m e l h o r é evitá-
los!
I n s p e c i o n e e faça u m l eva nta m e nto
d a s susceti bilidades e probabilidades
d e erro e elimine- a s / m i n i m i ze - as
5. P r e v e n ç ã o d e er ro s
PORQUÊ?
- E n g a n o s e erros são u m a realidade.
- E n g a n o s são erros i nconsci entes c a u s a d o s por falhas d e atenção.
- O s erros são resultado d e u m a i n co mp ati b i l i d a d e entre o m o d e l o
m e n t a l d o uti lizador e o design.

SUGESTÕES?
- O m a i s i m p o r ta nt e primeiro: evite erros d e alto c u sto primeiro e,
depois, a s p e q u e n a s frustrações.
- Prev in a e n g a n o s d o uti lizador, fo r n e ce n d o in d ica çõ e s úteis e
s e g u i n d o os sta n d a rd s e convenções.
- Pe r m i ti n d o “undo” e uti lize alertas
6. R e c o n h e c i m e n t o e m v e z d e
memorização

A m e m ó r i a h u m a n a é limitada!

É m a i s efi caz re co n h e c e r e senti r-se

“e m c a s a a fazer algo” d o q u e ter d e se
l e m b ra r d o processo, d a localização, d a
ação, d o resultado...
6. R e c o n h e c i m e n t o e m v e z d e
memorização
PORQUÊ?
- P ro m o v e r o re c o n h e c i m e n t o re d u z a q u a n ti d a d e d e esforço
ex ig id o a o uti lizador
- Torna-se confortável p a ra o uti lizador, q u e terá t e n d ê n c i a a
voltar.

SUGESTÕES?
- Pe r m i t a q u e os uti lizadores r e c o n h e ç a m a s informações, e m vez
d e t e re m d e se l e m b ra r (ou “relembrar ”), u s a n d o símbolos, ícones,
etc.
- Disponibilize a j u d a contextual, por op os içã o a tutoriais ou
m a n u a i s d o uti lizador.
- R e d u z a a o m í n i m o a s info r m a çõ e s d e q u e os uti lizadores
p r e c i s a m d e se lembrar.
7. F l ex i b i l i d a d e e efi c i ê n c i a d e u s o
O uti lizador d e v e ter u m a
experiência “sua” e o m a i s
p erson alizada possível, a j u sta d a ao
q u e re a l m e nte necessita.
7. F l ex i b i l i d a d e e efi c i ê n c i a d e u s o
PORQUÊ?
- O s atalhos p e r m i t e m acelerar a interação
- Pe rs on a liza çã o d a s a çõ e s fre quentes confere u m senti do d e
fi delização e d e p e r t e n ç a a o uti lizador
- A fl exibilidade p a ra realizar a m e s m a a ç ã o d e várias form as
p e r m i t e q u e o uti lizador e s colh a o m é t o d o q u e m e l h o r funciona
n o s e u caso.

SUGESTÕES?
- Disponibilizar atalhos d e te clado e “touch”.
- Disponibilizar m e c a n i s m o s d e pe rsonalização a j u sta n d o o
c o n t e ú d o e a s f u n cio n a lid a d e s p a ra uti lizadores individuais.
8. M i n i m a l i s m o e e s té ti c a n o d e s i g n
A s i nfo r m a çõ e s irrelevantes o u ra ra m e nte necessárias só
c a u s a m ruído!
C a d a b lo co extra d e i n fo r m a çã o n u m we bsite c o m p e t e c o m
os b lo co s relevantes, e d i m i n u i s u a visibilidade relati va.
8. M i n i m a l i s m o e e s té ti c a n o d e s i g n
PORQUÊ?
- U m d e s i g n s i m p l e s ga ra n te q u e o uti lizador se foq u e n o
c o n t e ú d o essencial.
- O s e l e m e nto s visuais q u e reforçam os objeti vos principais d o
uti lizador p o t e n c i a m a conversão.

SUGESTÕES?
- Manter o c o n t e ú d o e os e l e m e nto s visuais focados n o
essencial.
- N ã o permiti r q u e e l e m e nto s desnecessários d e sv i e m a
ate n çã o d o s uti lizadores daquilo q u e re a l m e nte precisam.
- Priorizar o c o n t e ú d o e os recursos pa ra potenciar os objeti vos
principais e só de pois os secundários.
9. A j u d a p a ra r e c o n h e c e r,
d i a g n o s ti c a r e r e c u p e ra r d e erros
A s m e n s a g e n s d e erro d e v e m ser ex p re s s a s e m l i n g u a g e m s im p le s
( s e m c ó d i g o s d e erro!), i n d i c a n d o c o m clareza o p r o b l e m a e
s u g e r i n d o u m a s olu çã o d e fo r m a construti va.
9. A j u d a p a ra r e c o n h e c e r,
d i a g n o s ti c a r e r e c u p e ra r d e erros
PORQUÊ?
- S a b e r c o m o resolver o erro evita a frustração e a desistência
p or parte d o uti lizador

SUGESTÕES?
- Usar u m visual sta n d a rd / tradicional , c o m o texto e m
v e r m e l h o o u b o l d e s í m b o l o s d e alerta.
- Informar os uti lizadores d a razão d o p r o b l e m a evitando
expressões d e m a s i a d o técnicas.
- Disponibilizar u m a so lu çã o u m a solução, c o m o u m atalho
q u e p o d e resolver o erro i m e d i ata m e nte , o u u m a
alternati va.
10. A j u d a e D o c u m e n t a ç ã o
É m e l h o r se o serviço / website n ã o precisar d e n e n h u m a
explicação adicional. Po ré m , p o d e ser necessário fornecer
d o c u m e n t a ç ã o para ajudar os uti lizadores a e nte n d e r c o m o
concluir s u a s tarefas.
10. A j u d a e D o c u m e n t a ç ã o
PORQUÊ?
- A j u d a o uti lizador a a lca n ça r o s e u objeti vo e transmite
co nfi an ça

SUGESTÕES?
- D e v e ser fácil d e p e s q u i s a r e fo ca d o n a tarefa d o
uti lizador.
- D e v e ser co n c i s o e estar o rga n i za d o d e fo r m a ló g ica
- D e v e listar a s eta p a s co n c reta s q u e p r e c i s a m ser
executadas.
- S e m p r e q u e possível, d e v e apresentar a d o c u m e n t a ç ã o e m
contexto, n o m o m e n t o e m q u e o uti lizador n ec essita dela.
Tarefa 2 – A n á l i s e d e U s a b i l i d a d e W e b
• E m g ru p o s, e s c o l h a m u m website
q u e p r e t e n d a m analisar.
• Te n d o por b a s e a m at r iz / te m p la te
d e Análise Heurísti ca d e We b s i te s fornecida, p r o c e d a m à
análise d e s s e website:
• Pa ra c a d a alínea, re s p o n d e r S i m / N ã o / N ã o Aplicável (N/A)
• C o m e n t a r c a d a u m d o s p o nto s s e m p r e q u e considere
necessário – c o m sugestões, melhorias, alterações, correções,
etc.

D e p o s i ta r o d o c u m e n t o n o Te a m s, e m Tarefas → U F C D 8 8 4 6 - Tarefa
2: …
( b a sta q u e u m d o s e l e m e n t o s d o g r u p o d e p o s i te o trabalho, m a s to d o s d e v e m clicar
e m “entregar ”)
Princípios e padrões de design de
i n te ra ç ã o
Acessibilidade W e b
Acessibilidade We b
 Falar d e acessibilidade W e b é falar d e a c e s s o u n i ve rs a l à
We b , i n d e p e n d e n t e d o ti po d e soft ware, hardware,
infraestruturas d e rede, idioma, cultura, localização
g e o g rá fi c a e c a p a c i d a d e d o s Uti lizadores.
 O a c e s s o feito por q u a l q u e r p e s s o a i n d e p e n d e n t e m e n t e d a
s u a in cap ac id a d e, é u m a s p eto essencial. O u seja, a W e b
d e v e ser acessível a to d o s os uti lizadores
i n d e p e n d e n t e m e n t e d a s c irc u n stâ n c ia s e
d o s dispositi vos uti lizados.
 A s p á g i n a s W e b d e v e m ser acessíveis tanto
p a ra u m a p e s s o a c o m defi ciência, c o m o
p a ra u m a p e s s o a q u e se e n co nt re s o b
c irc u n stâ n c ia s ex tern as q u e d ifi c ultem o
a c e s s o à informação.
Acessibilidade We b
 O W e b C o n t e n t A c c e s s i b i l i t y G u i d e l i n e s fornece u m
c o n j u nto d e diretrizes internacionais d esenvolvid as pela
Wo r l d W i d e W e b C o n s o r ti u m (W3C), q u e sã o a b a s e d a
maioria d a s leis d e acessibilidade Web.
 E sta s direti vas v i s a m permiti r q u e to d o s p o s s a m ter a c e sso
a o s websites, i n d e p e n d e n t e m e n t e d e p o s s u í re m
defi ciências o u não.
 A b o r d a m d e s d e o ti po d e fonte a ser usado,
b e m c o m o o s e u t a m a n h o e cor, d e a co rd o
c o m a s n e c e s s i d a d e s d o uti lizador,
até à s r e c o m e n d a ç õ e s relati vas a o c ó d i g o
(HTML, CSS).
Acessibilidade We b
 O W 3 C defi ne q u at ro princípios q u e d e v e m ser a p l i ca d o s n a
c o n st r u ç ã o d e u m site:
 Pe rc e tí v e l - o c o n t e ú d o d e u m site d e v e ser a p r e s e nta d o d e fo r m a
a ser c o m p r e e n d i d o p o r q u a l q u e r pessoa;
 O p e rá v e l - os e l e m e n t o s d e interface p re s e nte s n u m site d e v e m
ser fáceis d e efetuar p o r q u a l q u e r pessoa, o u seja, o site d eve
facilitar a n a v e g a ç ã o e a orientação através d o c o n t e ú d o d o
mesmo;
 I nte l i g í ve l - o site d e v e ser a u to ev i d e nte e
n ã o colocar n e n h u m o bstá c u l o a uti lizadores
m e n o s ex pe rie nte s o u c o m d i fi c u l d a d e s d e
acesso;
 R o b u s t o - o site d e v e u s ar te c n o l o g i a s q u e
m a x i m i z e m a c o m p a ti b i l i d a d e d a s u a
estrutura c o m n av e ga d o r e s atuais e futuros,
te c n o l o g i a s d e aces s ib il i dad e e outros
p ro g ra m a s .
Acessibilidade We b

 T E S TA R a acessibilidade d e u m website:

▶ htt ps://accessmonitor.acessibilidade.gov.pt/
▶ htt ps://wave.webaim.org /
Ati v i d a d e s
• Explorar a s fe r ra m e nta s d e Teste d e Usabilidade
• Explorar os recursos e c o nt e ú d o s e m
htt ps://www.acessibilidade.gov.pt/
• Explorar os recursos e c o nt e ú d o s e m
htt ps://www.w3.org /Translati ons/WCAG20-pt-P T/ W C A G 2 0 -pt-P T-
20141024/
• L e r o arti go d e Neil Patt e l -
htt ps://neilpatel.com/br/blog /acessibilidade-n a -web/
Usabilidade
• U sa b ilid a d e vs e r g o n o m i a
• Testes d e usabilidade
Usabilidade e Ergonomia

 Us a b ilid a d e e E r g o n o m i a são dois t e r m o s q u e d e v e m estar

a lin h a d o s n o d e s e nvo l v i m e nto d e sistemas, fo ca n d o- se a m b o s
n o s p ro c e d i m e nt o s realizados pelo uti lizador p a ra ati ngir s e u
objeti vo ge ra l inicial.
 A n o r m a I S O 9241-11 e stabe lece claras diretrizes p a ra s iste m a s
co m p u ta cio n a is , a fi m d e permiti r q u e o uti lizador ati nja o s e u
objeti vo e a sati sfação d e s u a n e c e s s i d a d e n u m d e te r m i n a d o
contexto.
Usabilidade vs Ergonomia
Cri téri o s E r g o n ó m i c o s d e U s a b i l i d a d e
C o n s i s t ê n c i a a ç ã o - efeito
Dis p on ib ilid a d e d o s i st e m a p a ra a inserção d e d a d o s o u a c i o n a m e nt o
d e funções, e o status d a s m e s m a s , c o m info r m a çã o d e a j u d a e form as
d e acesso. Visa favorecer p r i n c i p a l m e nt e a a p r e n d i z a g e m e a uti lização
d o s i ste m a por uti lizadores inexperientes.
E xe m p l i fi c a n d o :
• l e g e n d a s p a ra os ti pos d e informações;
• existência d e pistas p a ra t a m a n h o s d o s c a m p o s disponíveis;
• tí tulos p a ra a s janelas/écrãs;
• m o d e l o s p a ra e nt ra d a d e d a d o s (dd/mm/yy);
• fe e d b a c k im e d iato
Cri téri o s E r g o n ó m i c o s d e U s a b i l i d a d e
A c a r g a d e t rab al h o
Refere-se a o t e m p o ga s t o pelo uti lizador p a ra m e m o r i z a ç ã o /
c o m p r e e n s ã o d e a çõ e s d e nt ro d e u m sistema.
A q u i d e ve co n ce ntra r- se o m a i o r esforço d o U X De s ig n e r, p a ra reduzir a
carga, e deixar o s i st e m a intuiti vo – p a ra q u e o uti lizador a p re n d a u m a
a ç ã o e c o n s i ga replicá-la.
O s i ste m a c o m o u m to d o deve rá exigir o m í n i m o d e esforço possível,
evitando a s s i m solicitar d a d o s q u e já fo ra m p re e n c h i d o s o u p o d e m ser
d e d u z i d o s pelo s i st e m a – q u e d e ve fornecer valores d e fa u l t (dados,
listas, c h e c k b ox , etc.), b u s c a n d o o m in im a lis m o .
Q u a n t o m a i o r a c a r g a d e t ra b a l h o m a i o r a i n c i d ê n c i a d e erro;. A
m e m ó r i a d e cu rta d u ra ç ã o t e m c a p a c i d a d e limitada
Cri téri o s E r g o n ó m i c o s d e U s a b i l i d a d e
A c a r g a d e t rab al h o
A m e m ó r i a d e cu rta d u ra ç ã o t e m c a p a c i d a d e limitada,
c o n s e q u e nt e m e nt e , q u a n t o m a i s s u c inta s a s m e n s a g e n s m a i s rápida a
leitura e assimilação.
U m a i nte r fa c e mi ni m a l i sta :
• A p res e nta s o m e n t e os itens q u e estão relacionados c o m a tarefa (o restante
d e ve ser remov i d o d o ecran);
• N ã o força os uti lizadores a transportar m e n t a l m e n t e d a d o s d e u m e c ra n para
outro;
• N ã o força os uti lizadores a realizar p ro c e d i m e n to s comp l i ca d os , c o m o a
t ransformação d e u n i d a d e s d e medi da;
• N ã o col oca os uti lizadores perante tarefas cog ni ti vas compl exas, c o m o as d e
especi fi cação d e p e s q u i s a s avançadas.
Cri téri o s E r g o n ó m i c o s d e U s a b i l i d a d e
A g r u p a m e n t o e d i s ti n ç ã o p o r fo r m a to
Refere-se à o rga n i za ç ã o g ráfi ca d o s c o m p o n e n t e s d a interface.
C on s iste e m verifi car a forma, cor e ta m a n h o, q u e a j u d a m a disti nguir
e l e m e nt o s e q u e i n d i c a m se eles p e r t e n c e m a u m a d e t e r m i n a d a classe
o u grupo.
E xe m p l i fi c a n d o : Clara disti nção visual d e áreas, c a m p o s e l e g e n d a q u e
t e n h a m diferentes funções.
Cri téri o s E r g o n ó m i c o s d e U s a b i l i d a d e
A g r u p a m e n t o e d i s ti n ç ã o p o r l o c a l i za ç ã o
É o p o s i c i o n a m e nt o relati vo d o s itens d e nt ro d e u m grupo.
Possibilita a o uti lizador p e rce b e r ra p i d a m e n t e os g r u p a m e n t o s a parti r
d a localização d a s info r m a çõ e s n a s interfaces.
E xe m p l i fi c a n d o :
• Apresentar os c a m p o s d e u m formulário e m s e q u ê n c i a l ó g i ca ( e m f u n ç ã o d a
o r d e m d a tarefa, d a s u a i m p o r tâ n c i a o u d a f requênci a d e uso);
• Separar e aprox i mar itens e g r u p o s n o ecran, c o n fo r m e as relações lógicas
q u e se e s ta b e l e c e m entre eles.
• Apresentar g r u p o s e o p çõ e s d e m e n u defi nidos l o g i c a m e n t e ( e m f u n ç ã o dos
objetos e d a s a çõe s q u e a eles se aplicam);
Cri téri o s E r g o n ó m i c o s d e U s a b i l i d a d e
Legibilidade
Refere-se à s característi cas q u e p o s s a m difi cultar o u facilitar a leitura
d a s info rm a çõ e s textuais (brilho d o s caracteres, contraste letra/fundo,
t a m a n h o d a fonte, e s p a ç a m e n t o entre palavras, e s p a ç a m e n t o entre
linhas, e s p a ç a m e n t o d e parágrafos, c o m p r i m e n t o d a linha etc.)
É u m a q u a l i d a d e e m p r e g a d a p e n s a n d o n o b e m estar d e todos, m a s
p a rti cu la rm e nte d e idosos e p e s s o a s c o m p ro b l e m a s d e visão.
Cri téri o s E r g o n ó m i c o s d e U s a b i l i d a d e
S e r C o nv i d a ti vo
Refere-se à s info r m a çõ e s q u e p e r m i t e m a o uti lizador identi fi car o
e sta d o o u o co ntex to n o q u a l se e n co nt ra n a interação, q u a i s a s a çõe s
alternati vas, b e m c o m o a s fe r ra m e nta s d e a j u d a e o m o d o d e acesso.
U m a interface convidati va apresentará:
• tí tulos claros para os écrans, janelas e caixas d e diálogo;

• i nformações claras sobre o estado (disponível, selecionado, entre outros)

d o s c o m p o n e n t e s d o si stema

• i nformações sobre o p r e e n c h i m e n t o d e u m formulário, sobre as entradas

esperadas, c o m o s e u n o m e , s u a descrição, s e u formato e as u n i d a d e s d e
medi da;

• o p çõ e s d e a j u d a c l a ra m e nte indicadas.
Cri téri o s E r g o n ó m i c o s d e U s a b i l i d a d e
F e e d b a c k Imediato
Possibilitando q u e o uti lizador t e n h a u m m e l h o r e n t e n d i m e n t o a ce rca
d o f u n c i o n a m e n t o d o produto/sistema, e sta b e l e c e n d o a s s i m sati sfação
e confi ança.
E xe m p l i fi c a n d o :
Cri téri o s E r g o n ó m i c o s d e U s a b i l i d a d e
C o n t ro l o E x p l i c i to
Q u a n d o os uti lizadores d e fi n e m explicitamente
a s s u a s inserções, e q u a n d o estas estão sob
controle, os erros e a s a m b i g u i d a d e s são
limitados.
A relação entre o p ro c e s s a m e n t o e a s a çõ e s d o uti lizador, d e ve ter u m
resultado lóg ico e claro:
• n ã o d e ve colocar-se perante o uti lizador c o m a n d o s d e d u p l a repercussão
(por exempl o, salvar + fechar);

• o uti lizador d e encont rar as o p çõ e s para c o m a n d a r o avanço, o recuo, a

interrupção, a reto m a o u a fi nalização d e u m a interação sequancial;

• o uti lizador d e ve encont rar as o p çõ e s para c o m a n d a r a interrupção, a

r e t o m a d a o u a fi nalização d e p ro c e d i m e n to s demorados;
Cri téri o s E r g o n ó m i c o s d e U s a b i l i d a d e
F l ex i b i l i d a d e / A d p t a b i l i d a d e
Pa ra n ã o s e g m e n t a r o p ú b lico q u a n d o o m e s m o é vasto e variado, é
preciso criar expe riências personalizadas, q u e se a d e q u e m às
preferências individuais, p e r m i ti n d o a c u s t o m i za ç ã o d e valores Default.
U m a interface e str u t u ra lm e nte fl exível fornece aos uti lizadores:
• diferentes m a n e i ra s d e inserir d a d o s (por digitação, por seleção, por
m a n i p u l a ç ã o direta);

• diferentes c a m i n h o s para c h e g a r a u m a f unci onal i dade f req u e ntemente

uti lizada ( u m í con e n a barra d e ferramentas, u m a o p ç ã o n u m painel d e
m e n u , u m atalho d e teclado);

• diferentes o p çõ e s d e formato d e arquivos e d e

u n i d a d e s para os d a d os
Cri téri o s E r g o n ó m i c o s d e U s a b i l i d a d e
C o n s i d e r a ç ã o d a E x p e r i ê n c i a d o Uti lizador
L e v a e m co n s id e ra çã o a expe riência d o uti lizador, p e r m i ti n d o tanto a
o p ç ã o d e f u n çõ e s av a n ç a d a s p a ra uti lizadores c o m experiência q u a nt o
p a s s o- a-p a s s o p a ra uti lizadores iniciantes.
E xe m p l i fi c a n d o :
Possibilidade d e criar atalhos; O u possibilidade d e interações c o m dois
níveis d e exibição d e d eta lh e s d a informação; o u a possibilidade d e uso
d e experiências anteriores.
Cri téri o s E r g o n ó m i c o s d e U s a b i l i d a d e
P r o t e ç ã o d e Erro s
S ã o m é t o d o s d e p re ve n çã o o u re d u ç ã o d e erros e
fo r m a s d e re c u p e ra çã o q u a n d o eles ocorrerem.
E xe m p l i fi c a n d o :
• Avisos d e possíveis erros.

• Alertas c o m a cor vermel ha

• I nforma çã o sobre o risco d e p e rd a d e d a d o s n ã o - g rava d o s ao fi nal d e u m a

sessão d e trabalho;

• Detetar os erros n o m o m e n t o d a inserção d e dados, e m vez d e fazê-lo a p e n a s

n o m o m e n t o d a validação d o formulário inteiro.
Cri téri o s E r g o n ó m i c o s d e U s a b i l i d a d e
P r o t e ç ã o d e Erro s
Fo r m a s d e medir a qualidade d a prevenção:
• t e m u m t o m neutro, n ã o - reprovador o u humorí sti co
• i n d i ca ao uti lizador a razão o u a nat ureza d o erro cometi do, o q u e fez d e
errado, o q u e deveria ter feito e o q u e d e ve fazer para sair d a si t uação d e erro;
• é orientada para a tarefa, e m p r e g a te r m o s específi cos e é breve;

C o r r e ç ã o d e erros:
• f u n çã o d e desfazer e refazer;
• fornece a possibilidade d e o uti lizador refazer a p e n a s a parte errada d e u m a
interação (indica o d a d o errado e m u m formulário, m a n t e n d o todos os outros
intactos);
• fornece l i ga çã o direta entre o relatório d e erro e o local o n d e ele se produz.
Cri téri o s E r g o n ó m i c o s d e U s a b i l i d a d e
Consistência
Defi nir u m p a d rã o e s e g u i - lo p a ra a çõ e s repeti das m a s q u e se diferem
e m p á g i n a s disti ntas.
A falta d e co n s istê n cia é u m a i m p o r ta nte razão p a ra rejeição dos
uti lizadores.
S i g n i fi c a d o d e d e n o m i n a ç õ e s ( C ó d i g o s )
Qualifi ca a relação entre o t e r m o e/ou
ico n e e aquilo a q u e se refere.
Cri téri o s E r g o n ó m i c o s d e U s a b i l i d a d e
C o m p a ti b i l i d a d e
A s característi cas d o s i st e m a d e v e m ser co m p atí ve is c o m a s d o
uti lizador e m t e r m o s co g n iti vos (memória, percepção), d e m o g ráfi co s
(idade, sexo), culturais (hábitos), d e c o m p e t ê n c i a s ( c o n h e c i m e n t o e
d e s e m p e n h o ) , a s s i m c o m o c o m s u a s expectati vas.
A efi ciência é m a i o r q u a n d o os p ro c e d i m e nt o s necessários ao
c u m p r i m e n t o d a tarefa são co m p atí ve i s c o m a s característi cas
ps icológ ica s d o uti lizador, favorece tanto a a p r e n d i z a g e m c o m o a
uti lização efi ciente d o s i st e m a por uti lizadores m a i s experientes.
Cri téri o s E r g o n ó m i c o s d e U s a b i l i d a d e
Ajuda / Documentação
N e ste critério, defi nido por Nielsen, co n sta que, a i n d a q u e o s iste m a seja
m u i t o b o m p a ra ser u s a d o s e m d o c u m e nt a ç ã o, é necessário q u e exista
u m recurso d e a j u d a / d o c u m e nt a ç ã o . Tais info r m a çõ e s d e ve r i a m ser
fáceis d e procurar, foca d a s n a tarefa d o uti lizador, e c o m lista d e p a s s o s a
s e r e m realizados d e fo r m a co n c is a (Nielsen, 1993).

N a v e g a ç ã o Visível ( Tra c k State)

S e g u n d o To g Tognazzini, autor d e ste critério, m u i t o s uti lizadores são
i n ca p a ze s d e elaborar m a p a s m e n t a i s d a estrutura d o
sistema, e p o d e m senti r-se c a n s a d o s o u p e rd id o s n a
tentati va d e visualizá-lo. O autor a co n s e l h a a evitar a
n a v e g a ç ã o invisível. Pista s e in d ica çã o d o s c a m i n h o s
p o d e m a ju d a r o uti lizador e agilizar s u a p róx i m a visita.
Testes d e Usabilidade
O q u e s ã o Te s t e s d e U s a b i l i d a d e ?
• O Teste d e u sab ilid a d e é u m m é t o d o d e ve r i fi c a ç ã o d e
f u n c i o n a l i d a d e s d a interface d e u m a p lataforma digital.
• É e m p r e g u e e m websites, aplicações e outras ferramentas,
l eva n d o uti lizadores reais à e xe c u ç ã o d e d e te r m i n a d a s
tarefas. A p ó s s u a realização, é realizada u m a análise d e
u sa b ilid a d e e d a s principais difi culdades.
• O o b j eti vo fi nal d e u m te s te d e u s a b i l i d a d e é realizar
m e l h o r i a s n a p latafo rm a , p ro p o rc i o n a n d o u m a m e l h o r
experiência a o uti lizador.
• A ideia é q u e to d a s a s a çõ e s d e s e j a d a s s e j a m fi nalizadas s e m
m a i o re s problemas.
O s te s te s d e u s a b i l i l i d a d e
• A p e s a r d e ex i st e m diferentes formatos ( qua nti tati vo s e
qualitati vo s ) d e testes d e usabilidade, todos t ê m c o m u m o facto
d e con s isti re m n a obs e r va çã o d e uti lizadores d u ra nt e a “uti lização
d a coisa”.
• O s testes qualitati vos d o ti po “faça-você- m e s m o ”, fo r n e c e m valiosos
in sig ht s sobre a uti lização real, por uti lizadores reais, e p e r m i t e m
introduzir m e lh o r ia s e correções n a interface e m análise.
• Po r outro lado, t o r n a m - se m u i t o m a i s informais e p e r m i t e m
recorrer a u m m e n o r n ú m e r o d e parti cipantes e, inclusivamente,
introduzir ligeiras alterações n o próprio teste, d e u m parti cipante
p a ra o outro.
O s te s te s d e u s a b i l i d a d e
• J a ko b Nielsen (do já referido Nielsen N o r m a n G roup) d efe n d e que,
p a ra obter os m e l h o re s resultados, n ã o s ã o n e c e s s á r i o s m a i s d e 5
uti lizadores , p a ra realizar u m teste qualitati vo d e usabilidade.
• A fi gura abaixo, ilustra e sse facto, d e m o n s t r a n d o q u e os quatro
primeiros uti lizadores q u e t e s t a m a a p lica çã o c o n s e g u e m detetar
ce rca d e 75% d o s p ro b l e m a s e falhas d e usabilidade.
Porquê e Quando?
• A nt e s d e t o m a r q u a i s q u e r d e cis õ e s sobre o d e s i g n
• Q u a n d o p re c i s a m o s d e m a i s insights, a m e i o d o p roce s s o d e
d e s e nvo lv im e nto
• Q u a n d o ex i st e m opiniões confl ituosas sobre o d e s i g n
• Q u a n d o p re c i s a m o s avaliar coisas a p ó s o l a n ç a m e n t o
C o m o f u n c i o n a m o s Te s t e s d e U s a b i l i d a d e ?
• D e u m m o d o geral, re c o l h e m - se i nfo r m a çõ e s o b s e r v a n d o
a s a ti v i d a d e s d o i n d i v í d u o n a plataforma.
• N o entanto, o fe e d b a c k d e u m teste d e u sa b ilid a d e p o d e vir
d i re ta m e nte d o parti cipante, p or m e i o d e formulários e
p e r g u n t a s abertas.
• Pa ra facilitar a co m p re e n s ã o, v a m o s a u m exemplo:
• I m a g i n e q u e t e m u m site e u m blog, a m b o s c o m fi nalidades voltadas
ao m a r ke ti n g para u m a loja virtual.
• Assim, d e c i d e realizar u m teste d e usabi l i dade para c o m p r e e n d e r o
c o m p o r t a m e n t o d o uti lçizador di ante d a interface.
• S ã o sel eci onados 10 parti cipantes para a ati vidade.
• D u ra n t e o processo, h á m e c a n i s m o s a u to m ati za d o s q u e irão recolher
dados, e n q u a n t o as tarefas são executadas.
C o m o f u n c i o n a m o s Te s t e s d e U s a b i l i d a d e ?
• N o primeiro desafi o, os parti cipantes t ê m q u e colocar dois itens
específi cos n o carrinho d e c o m p r a s e fi nalizar o pedido.
• N o s e g u n d o, entrar e m contato c o m o suporte.
• E, por fi m, p r e c i s a m s i m p l e s m e n t e n av e ga r pelo b l o g
naturalmente.
• O relatório revela q u e a p e n a s 10% d o s parti cipantes
c o n s e g u i ra m encont rar os itens s u ge r i d o s e fi nalizar a c o m p r a
e m m e n o s d e 5 minutos.
• E s s e é u m m a u resultado, q u e i n d i ca a existência d e u m grave
problema.
• Provavelmente, será preciso alterar as confi g u ra çõe s d o m e c a n i s m o d e
p e s q u i s a d a loja, o u identi fi car os fatores responsáveis por m e i o do
fe e d b a c k d o s parti cipantes.
• Pa ra entrar e m contato c o m o suporte, o relatório revela q u e a mai or
parte d a s pessoas uti liza u m botão n o ro d a p é e i g n o ra c o m p l e t a m e n t e
o g r a n d e botão ve r m e l h o inserido n a barra lateral.
C o m o f u n c i o n a m o s Te s t e s d e U s a b i l i d a d e ?
• O u seja, talvez seja u m a b o a ideia remover esse item.
• J á d u ra nte a n av e ga ç ã o d o blog, vários d o s i ntegrantes d o est udo
relataram di fi cul dades d e navegação.
• N e s s e caso, provavelmente, h á q u e reformular os links e os p l u g i n s d e
s u g e s t ã o d e conteúdo.

E m s u m a , e s s a é a f u n ç ã o d o te s te d e u s a b i l i d a d e : evitar a p e r d a d e
clientes/visitantes/uti lizadores.
O b j e ti v o s d o s Te s t e s d e U s a b i l i d a d e
1. D e s c o b e r t a d e p r o b l e m a s
E s s e é o m o d e l o d e teste d e usabi l i dade m a i s c o m u m – o s e u objeti vo é
identi fi car e corrigir eventuai s p ro b l e m a s existentes n a plataforma.
F re q u e nte m e nte , esse m é t o d o é c h a m a d o d e e s t u d o formati vo , d a d a a sua
s e m e l h a n ç a c o m testes realizados n a área d a educação, q u e a p o n t a m
p ro b l e m a s d e a p r e n d i z a g e m d e u m aluno.
N ã o é n e n h u m exa gero c o m p a ra r os uti lizadores a alunos, já q u e estão a
a p ren d er a lidar c o m u m a pl ataforma q u e lhes foi apresentada.
N o entanto, n ã o p o d e m o s n o s e s q u e c e r q u e ex i ste m uti lizadores m a i s
a c o s t u m a d o s a d e te r m i n a d o s padrões d a web, a s s i m c o m o c o m vícios e
habitos. - obvi amente, eles são levados e m consi deração ao formular a
aplicação.
N o s testes d e descoberta d e probl emas, p o d e m o s averi guar q u a i s são os
obstácul os para a fl uida uti lização d o sistema.
O b j e ti v o s d o s Te s t e s d e U s a b i l i d a d e
2. B e n c h m a r k
O s testes d e u s a b ilid a d e d e b e n c h m a r k são e m p r e g u e s para
estabelecer p a râ m e t ro s d e c o m p a r a ç ã o entre diferentes versões d e
a l g u m a plataforma.
Isso p e r m i t e u m a análise c o m p l e t a sobre dois e l e m e nt o s diferentes e
a experiência d o uti lizador e m c a d a u m deles.
S u a principal f u n çã o é realizar escolhas
q u e b e n efi c i e m u m a m e l h o r uti lização.
O b j e ti v o s d o s Te s t e s d e U s a b i l i d a d e
3. Te s t e C o m p e ti ti v o
E n q u a n t o o b e n c h m a r k co n s id e ra d u a s versões d e u m a m e s m a
plataforma, o teste co m p eti ti vo c o m p a r a d u a s p lataform a s disti ntas.
O u seja, é m u i t o relevante se q u i s e r m o s traçar u m paralelo entre u m
p ro d u to e u m concorrente.
E s s e form ato t e m m u i t o s u c e s s o q u a n d o uti lizado c o m interfaces d e
s u c e s s o n o m e rca d o.
Q u a n d o a s versões são equiparadas, p o d e m
detetar-se possíveis m e lh oria s q u e p o d e m
transformar- se e m v a n t a g e n s competi ti vas.
O b j e ti v o s d o s Te s t e s d e U s a b i l i d a d e
4. E a t M a p s e Ey e - Tr a c k i n g
O s h e a t m a p s são fe r ra m e nta s q u e a n a l i s a m o m o v i m e n t o d o m o u s e
d o uti lizador, s e n d o m u i t o uti lizados e m vários d o s m é t o d o s a s e g u ir
descritos.
N e s s e caso, eles c r i a m m a p a s d e calor, q u e i n d i c a m por o n d e os
parti cipante s d o s testes p a s s a ra m o cursor.
N o entanto, e sse p ro ce s s o p o d e aprese ntar a l g u m a s falhas - p o rq u e
n e m s e m p r e o m o u s e a c o m p a n h a o m o v i m e n t o d o s olhos.
Pa ra resolver e sse p ro b le m a , existe o ey e - tracking.
S ã o aparelhos m a i s c o m p l exo s e caros, m a s m u i t o
efi cazes.
Ava l i a m a m o v i m e n t a ç ã o ocular d o uti lizador e,
assim, reve l a m info r m a çõ e s i m p o r ta nte s sobre a
usabilidade.
O b j e ti v o s d o s Te s t e s d e U s a b i l i d a d e
5. Te s t e s d e A p r e n d i z a g e m
O s testes d e a p r e n d i z a g e m a p r e s e n t a m u m a estrutura u m tanto
q u a n t o diferente.
O m a i s c o m u m e m testes d e u s a b ilid a d e é a ex p e r i m e nta ç ã o por
m e i o d e u m a p e s s o a q u e lida c o m a fe r ra m e nta pe la primeira vez.
O u seja, p a ra realizar u m a tarefa específi ca, a p e s s o a terá q u e c o m e ç a r
d o zero.
Entretanto, e m a l g u n s casos, o realizador d o teste p o d e desejar u m
p ú b lico q u e já lidou c o m a p lataform a - Isso signifi ca q u e o
c o n h e c i m e n t o e m p í r i co p a s s a a ser considerado.
Assim, o uti lizador terá q u e realizar a m e s m a tarefa diversas veze s e,
c o m isso, avaliza-se a c u r va d e a p re n d i za ge m .
T i p o s d e Te s t e s d e U s a b i l i d a d e
Te s t e d e U s a b i l i d a d e In-P e r s o n o u In-H o u s e
O s testes d e u s a b ilid a d e in-p e r s o n (pessoalme nte ) o u in-h o u s e ( e m
casa), ge ra lm e nte , são realizados e m locais específi cos p a ra a
pesquisa.
S ã o a c o m p a n h a d o s por m o d e ra d o re s e pesquisadores.
A l g u m a s té c n ica s m u i t o c o m u n s n e s s e for m ato são:
• E y e Tracking , o u ra st re a m e nto d e olhos — p a ra verifi car p a ra o n d e
os parti cipantes estão a olhar n u m a ú n i c a p á g i n a
• Verifi cação d e cartões, o u C a r d S o r ti n g — ó ti m o p a ra co n st r u çã o d e
estruturas e n a v e g a ç ã o o u criação d e rótulos
• Testes A/B— ideal p a ra c o m p a ra r dois
designs
T i p o s d e Te s t e s d e U s a b i l i d a d e
Te s t e s R e m o t o s N ã o M o d e ra d o s d e U s a b i l i d a d e
• E s s e ti po d e teste d e u s a b i l i d a d e n ã o é n e m n o local e n e m m o d e r a d o
p o r p es q uisadore s, p a ra e li mi n ar q u a i s q u e r p r o b l e m a s q u e p o d e m
aparecer.
• C o m este méto d o, p o d e m o s uti lizar fe r ra m e nta s próprias online e
a l ca n ça r tantos p ar ti cipantes q u a n t o s fo re m necessários. N ã o a p e n a s
p o d e m o s c o n s e g u i r resultados m a i s ra p i d a m e nte , c o m o e sses testes
t a m b é m serão o m a i s c o nv e n i e nte s p a ra os parti cipantes.
• E x i s t e m m u i t o s serviços online q u e possibilitam c o n d u z i r tais testes.
Pa r a eye-tracking , t e m o s c o m o e xe m p l o s o G a ze p o i nt o u RealEye, q u e
p o d e m coletar d a d o s d o q u e a s p e s s o a s v ê e m através d e w e b c a m s .
• Pa r a testes d o ti po c a r d sorti ng, existe o O p ti m a l Wo r ks h o p, q u e p o d e
ser u s a d o p a ra a p re n d e r c o m o os p ar ti ci pantes o r g a n i z a m o s e u
co nte ú d o . E p a ra testes A/B, vo c ê p o d e tentar re curs os c o m o C o nve r t e
V W O p a ra g e re n c i a r a availação.
T i p o s d e Te s t e s d e U s a b i l i d a d e
Te s t e s R e m o t o s M o d e ra d o s d e U s a b i l i d a d e
• E ste ti po d e teste d e u s a b i l i d a d e é a l g o q u e s e p o s i c i o n a entre os
m o d e l o s d e testes in-p e rs o n e testes re m o to s n ã o mo d e rad o s .
• O s benefí cios d e c o n d u z i r este ti po d e teste s ão o facto d e p o d e r m o s
obter d e s c o b e r ta s d e alta q ual id ade , ra p i d a m e nte , e n q u a n t o
m a n t e m o s os p ar ti cipantes confortáveis.
• S e v o c ê n ã o ti ve r mo s a s m e l h o r e s fe r ra m e nta s p a ra avaliações remotas,
p o s s i v e l m e nte a c a b a r e m o s p o r obter resultados i n co n c l u s i vo s para
certos pontos. Po r outro lado, os testes realizados p e s s o a l m e n t e p o d e m
levar m a i s t e m p o p a ra obter resultados.
• Pa r a este ti po d e testes d e usabilidade, p o d e m o s u s ar o L o o k b a c k o u o
m a i s a v a n ç a d o Userlyti cs.
E t a p a s d e u m Teste d e Usabilidade
1. D e t e r m i n a r o s obj eti vos
• C o m o p o nt o d e parti da, h á q u e defi nir d e m a n e i ra clara o q u e se
p re t e n d e a lca n ça r c o m os testes, e q u e parte d o website/app é o
alvo d a ação.
• Po r exe m p lo, p o d e m o s a p e n a s quere r s a b e r c o m o os uti lizadores
p o d e m reservar u m a p a s s a g e m aérea d e m a n e i ra b e m sucedida…
O u descobrir c o m o u m a m u d a n ç a n o d e s i g n p o d e ajudar a
experiência d o uti lizador…
• E n q u a n t o é s e m p r e r e c o m e n d a d o p ro m o ve r u m teste d e c a d a vez,
a coisa m a i s i m p o r ta nte é defi nir o objeti vo d e m a n e i ra clara para
q u e se p o s s a m e n s u ra r o s e u teste d a m a n e i ra m a i s a d e q u ad a .
2. Identi fi car o Melhor M éto d o
• O m é t o d o q u e se u s a p a ra testar a u s a b ilid a d e é crucial.
• S e q u e r e m o s fazer u m a série d e testes e nvo lve n d o a s m e s m a s
pessoas, p o d e m o s p ro m o ve r u m a avaliação in-p e rs o n e n o local.
• Mas, se o objeti vo é ter resultados ra p i d a m e n t e a o m e s m o t e m p o
e m q u e se m a n t é m a alta q u a l i d a d e c o m parti cipantes
diversifi cados, é possível u s a r testes re m o to s m o d e ra d o s d e
usabilidade.
• Po r exemplo, c o m o L o o k b a c k , é possível criar u m link p a ra os
parti cipantes a c e d e re m . E pedir-lhes, por exe m p lo, p a ra instalarem
a a p p p a ra c o m e ç a r os testes.
3. Cr iar u m C e n á r i o d e Ta refa e
C o n fi g u ra r a Ta x a d e S u c e s s o
• O cenário d e tarefa é a a ç ã o q u e p r e t e n d e m o s q u e seja testada,
c o m o por e xe m p l o tentar reservar o voo só d e ida m a i s barato n u m
d e t e r m i n a d o dia.
• A s s i m q u e ti ver defi nido o cenário, h á q u e d e t e r m i n a r a taxa d e
s u c e s s o aceitável n a realização d a tarefa.
• Va m o s i m a g i n a r q u e q u e r e m o s incluir c o m o u m indicador a
facilidade d e e n co ntra r a p á g i n a correta p a ra c o m p ra r a p a s s a g e m .
P o d e d ete r m in a r- se se todos os c a m p o s d e v e m ser p re e n ch id os
co r reta m e nte e m to d a s a s tentati vas, o u se p o d e m tolerar-se erros
e m a l g u n s d o s ca m p o s .
• A d icion a lm e nte , é possível incluir limites d e t e m p o
p a ra o p ro ce s s o d e reserva, c o m o u m indicador
d e sucesso.
4. Re c r u ta r / S e l e c i o n a r o s Pa r ti c i p a n te s
• O teste d e u s a b ilid a d e d e ve ser efeti vo e efi ciente. É por isso q u e
e n contra r os parti cipantes certos é u m fator m u i t o importante.
• E m b o r a e m m u i t o s ca s o s b a s t e m 5 parti cipantes, os e stá g ios d e
d e s e nvo l v i m e nto e o m é t o d o d e testes d e t e r m i n a m q u a nto s
parti cipantes re a l m e nt e são necessários.
• Pa ra e stá g io s iniciais d e de senvolvimento, d e ve usar-se o m é t o d o
Hallway, o n d e se e s colh e p e s s o a s aleatórias p a ra testar u m
website/app. C o m esse m étod o, evita-se a n e c e s s i d a d e d e estudar
o uti lizador ideal anteriormente.
• Po r outro lado, n o s m o m e n t o s fi nais d e de senvolvimento, escolher
os parti cipantes q u e estão p róx i m o s d a user p e rs o n a p o d e gerar
resultados m a i s precisos. U m a user p e rs o n a é a q u e l a q u e refl ete os
uti lizadores reais, in clu in d o a s s u a s característi cas, n e c e s s i d a d e s e
objeti vos..
5. C o n d u z i r o Te ste
• A p e s a r d e se p o d e r usar parti cipantes aleatórios, n ã o d e v e m
uti lizar-se té c n ica s aleatórias p a ra u m a sessão.
• Assim, a o co n d u z i r o teste, p o d e m o s torná-lo consistente e m
te r m o s d a tarefa e d o p e d i d o – m e s m o p a ra uti lizadores re m otos
n ã o m od e ra d o s . Transmiti r info r m a çõ e s claras e co n c i s a s p a ra os
parti cipantes é a l g o q u e a j u d a bastante.
• P o d e informar-se o q u ã o l o n g o será o teste, c o m o é q u e os
uti lizadores d e v e m c o m e n t a r sobre a s s u a s descobertas, o u q u a l é
o objeti vo d a avaliação.
6. A n a l i s a r re s u l t a d o s e p ro d u z i r relatórios
de descobertas
• D e p e n d e n d o d o ti po d e teste, p o d e m resumir-se a s d e s co b e rta s e
orga n iza r os relatórios d e a co rd o c o m os objeti vos. P o d e m o s avaliar
a s d e s co b e r ta s u s a n d o análises t e m áti ca s o u correlacionais.
• P o d e m t a m b é m ser u s a d a s planilhas p a ra cate gorizar coisas c o m o
prós e contras, q u e stõ e s m a i o re s e m e n ore s , p ro b l e m a s n o r m a i s e
críti cos, etc. Isso vai tornar m a i s fácil p la n e a r q u a i s q u e r melhorias
n o website/app.
E xe m p l o :
O p e ra c i o n a l i z a r u m te s te “In-P e r s o n ”
• E m te r m o s d e operacionalização, trata-se u m m é t o d o d e avaliação q u e
consiste e m ter u m facilitador q u e se senta n u m a sala c o m o parti cipante,
lhe d á a l g u m a s tarefas para realizar, e lhe pede, por exempl o, q u e “pense
alto” (técnica t h i n k al oud ) e n q u a n t o realiza essas tarefas.

• N ã o existe u m a recolha si stemati zada d e d a d o s – pelo contrário - a p e n a s

são ti radas a l g u m a s notas pel a e q u i p a q u e obser va a realização d o teste
(preferencialmente, a parti r d e outra sala, através d e u m ecrã), e s e g u e - se
u m a sessão d e de br i efi ng para d i s c u s s ã o d e s s a s notas e d o s eventuais
p ro b l e m a s a resolver.

• O facilitador s e g u e u m g u i ã o d e orientação que, habi t ual mente, se divide

e m três partes principais:
• q u e stõ e s informati vas s o bre o parti cipante;
• q u e stõ e s para aferir o s e u nível d e experiência e
c o n h e c i m e n t o d a tecnologia;
• e q u e stõ e s relacionadas c o m as ati vidades / tarefas
exe c u ta d a s d u ra nte o teste.
Ati v i d a d e s
• Visualização d o vídeo
htt ps://w w w.youtube.com/watch? v=vk2hvacAdFk (50 m in u tos )
• L e r o G u i a d e Testes Us a b ilid a d e s T I C A p p – C e nt ro d e
C o m p e t ê n c i a s Dig ita is d a A d m i n i st ra ç ã o P ú b l i c a d a A g ê n c i a para
a Mod e rn iza çã o Administrati va, disponibilizado n a p a sta d e
Materiais C o m p l e m e nta re s .