USABILIDADE E

PRINCPIOS DE DESIGN

Profa. Dra. Renata de Freitas Gis

Usabilidade ..

Usabilidade uma
forma de mensurao e
melhoria das interfaces
visando facilitar sua
utilizao pelo usurio
final.

Usabilidade ..

A usabilidade geralmente definida por 5 principais

componentes de qualidade:
Aprendizado: Quo simples para o usurio realizar tarefas simples na
plataforma a primeira vez que se depara com o design e arquitetura de
informao?
Eficincia: Uma vez que os usurios j se acostumaram com o design e arquitetura,
quo rpida a realizao de tarefas?
Memorabilidade: Quando os usurios retornam plataforma aps ficar um tempo
sem us-la, qual o tempo para reestabelecer a proficincia de uso?
Erros: Quantos erros o usurio comete,qual a severidade deles, e qual a facilidade
de recuperao do sistema?
Satisfao: O design agradvel? Quanto?

Usabilidade na WEB

Na web, usabilidade uma condio essencial para sobrevivncia. Se

algum website difcil de navegar, a tendncia o abandono. Se a home
falha ao descrever as ofertas e possibilidades de produtos e servios da
organizao, pior que abandono, dificuldade de gerar leads e reter
clientes.

Sair da pgina a primeira reao do usurio, afinal, existem tantos

outros sites atualmente, que qual o propsito de perder tempo
procurando informaes em um?
Em um e-commerce, a preocupao com a usabilidade ainda maior, j
que mais visvel que se o usurio no encontrar um determinado produto
significa perder dinheiro.
Para intranets, usabilidade significa produtividade dos colaboradores, e
tempo perdido na plataforma dinheiro perdido, pois eles poderiam estar
atuando em alguma demanda.

Usabilidade e princpios de design

Generalizar abstraes destinadas a orientar os

designers a pensar sobre os aspectos diferentes
de seus designs

Orientar os designers o que utilizar e o que evitar

em uma interface
Derivado de um conjunto de conhecimentos
baseados em um conjunto de teorias, experincia e
senso comum

Visibilidade

Este um painel de controle de um elevador.

Como ele funciona?
Aperta-se o boto correspondente ao andar que
voc deseja?
Nada acontece. Aperta-se qualquer outro boto?
Ainda nada! O que ns devemos fazer?
No explicito o que devemos fazer!

www.baddesigns.com

Visibilidade
voc deve inserir o seu crach com cdigo de barras ou
tarja magntica para que o elevador funcione!

Como podemos tornar isso mais visvel?

tornar a leitora mais bvia

utilizar uma mensagem de alerta, a qual indica o que
fazer (em qual linguagem?)
disponibilizar uma etiqueta com cores de alerta com
instrues de como utilizar o crach para acionar o
elevador

Tornar as partes mais relevantes visveis

Tornar bvio o que deve ser feito

Feedback

Retornar ao usurio a informao do que foi

executado
Inclui sons, brilhos, animaes e a combinao de
todos esses elementos

exemplo: quando o boto clicado ele retorna um som

ou apresenta uma borda vermelha ao redor:
ccclichhk

Restries

Restries que permitem apena que alguns tipos

de aes possam ser executadas
Ajuda para previnir que o usurio selecione
opes incorretas
3 tipos de restries
fsica
cultural
lgica

Restries fsicas

Refere-se como os objetos ou formas que

restringem o movimento

Exemplo: apenas um lado correto para inserir um

disquete no drive ou um dispositivo na porta USB

Quantas formas possveis ns temos para inserir

um CD ou um DVD no respectivo drive no
computador?
Qual a restrio fsica que existe?
Qual a diferena entre o drive de CD e o disquete
quanto s formas de inserir a mdia?

Design lgico ou ambguo?

Dependem do senso comum dos indivduos a

respeito das aes e suas conseqncias.
Dependem do entendimento que as pessoas tem
sobre a maneira que o mundo funciona

Onde conectar o mouse?

Onde conectar o teclado?
Conector de cima ou o
debaixo?
O cones coloridos
ajudam?

Como melhorar???
(A) Mapeamento direto entre a
legenda e o conector

(B) Cores so utilizadas para

associar os conectores com as
respectivas legendas

Restries culturais

Aprendemos
convenes
arbitrrias como por exemplo,
um tringulo vermelho para
alertas e avisos.
Podem ser universais
culturalmente especficas.

ou

Mapeamento

Relao entre os controles, suas aes e o

resultado no mundo real
Por qu o mapeamento dos botes abaixo
pobre?

Mapeamento

Por qu o mapeamento abaixo melhor?

Os botes esto mapeados de acordo com a

sequncia de aes

Mapeamento
Quais

botes correspondem a quais queimadores?

Por qu o design abaixo melhor?

Consistncia

Projete interfaces para ter operaes similares e

utilizar elementos similares para tarefas similares
Por exemplo:

ctrl+C, ctrl+S, ctrl+O

O maior benefcio que as interfaces tornam-se

fceis de se aprender de de se utilizar.

Quando a consistncia quebrada

O que acontece se houver mais de um comando

comeando com a mesma letra?

exemplo: save, spelling, select, style

Temos que encontrar outras iniciais ou quebrar a

consistncia encontrando outras combinaes de
teclas.

Exemplo: ctrl+S, ctrl+Sp, ctrl+shift+L

Consistncia

(a) telefones e
controles remotos

(b) calculadoras e
teclados de computador

8
0

Consistncia

Affordances

Refere-se ao atributo de um objeto que permite s pessoas

saber como utiliz-lo

exemplo: o boto do mouse convida a clicar, o trinco da porta

convida a ser rotacionado, etc.

Norman (1988) definiu o termo como dar uma pista e

introduziu o termo para falar sobre o design de objetos de
uso dirio
Desde ento, o conceito foi muito popularizado, sendo
utilizado para descrever como objetos de interface
deveriam ser projetados de maneira a tornar bvio o que
se pode fazer com eles

exemplo: scrollbars, cones, etc.

Affordance

Affordance

Affordance
Affordance

virtual

Esses objetos tem affordance?

E se voc for um usurio novato?
Voc saberia como utiliz-los?

Como projetar o sistema ?

Prtotipos de Baixa Fidelidade

Como projetar o sistema ?

Prtotipos de BaixaAlta Fidelidade

28

Ler

o Captulo 1 do livro do Preece : (pag 42-pag52)