Usabilidade Web Alberane

Slides* sobre Usabilidade na Web


*Slides encontrados na internet de autoria de Roberto Romani.

1. Usabilidade na WEB

Roberto Romani
UNICAMP- Universidade Estadual de Campinas

2. Usabilidadena WEB

Tópicos Principais
CA
O que é usabilidade?

Por que usabilidade na Web
7 regras básicas de usabilidade na Web
Inspegao de usabilidade

Avaliagao Heurística

3. Usabilidade na WEB

O que é usabilidade?

ABILIDADE SOCIAL

ACEITABILIDADE > [UTILIDADE!
DE . Fácil de aprender
SISTEMAS USEFULNESS Encicnle
| > SERDENERS >| il de lembrar
| USABILIDADE

ACEITABILIDADE
PRÁTICA

Custo
Compatibilidade
Confiabilidade
Etc

| >

4. Usabilidade na WEB

O que é usabilidade?
A

Usabilidade refere-se ao grau com que o usuário
consegue realizar uma tarefa

Funcionalidade correta
Eficiéncia de uso

Facilidade de Aprendizagem
Facilidade de relembrar
Tolerante a erro do usuário

Satisfaçäo subjetiva

5. Usabilidade na WEB

Por que usabilidade na WEB?
CA

em 1998 cerca de 3 bilhôes de dólares
deixaram de ser ganhos na WEB norte-

americana por causa de designs mal feitos

com a enorme oferta de alternativas usuários
tem uma notável impaciéncia e insisténcia
em gratificacáo imediata

6. Usabilidade na WEB
Por que usabilidade na

WEB?
SA

A usabilidade governa a Web

Se o cliente nao encontrar o produto, ele nao o
comprara

O poder do cliente
Quem clica no mouse decide tudo.

- E tao facil ir a outro lugar; todos os concorrente
do mundo estao a um simples clique do mouse

7. Usabilidade na WEB

Por que usabilidade da WEB?
CA

usabilidade assume uma importáncia impar na
economia da Internet

no design de produtos e de software tradicionais,
usuários pagam antes e experimentam a
usabilidade depois

na WEB experimentam a usabilidade antes e
pagam depois

A má usabilidade equivale a nenhum cliente

8. Usabilidade na WEB

7 Regras Basicas
CA

1. Clareza na arquitetura da informacáo
- essencial que o usuário consiga discernir o que é

prioritário e o que é secundário no site.
bom arranjo da informaçäo

- Usuários sempre teráo dificuldades em encontrar o
que procuram portanto devem ser ajudados

prover um senso de como a informagäo esta
estruturada e localizada.

Por exemplo mapa do site

9. Usabilidade na WEB

7 Regras Basicas
A

2. Facilidade de navegacáo

O usuário deveria conseguir acessar a
informagao desejada no maximo em trés cliques
3. Simplicidade
- Quem navega quer encontrar o mais rapidamente
possível o objetivo da busca.
- À pirotecnia deve ser evitada, dando ao usuario

paz e tranquilidade para que possa analisar a
informagáo

10. Usabilidade na WEB

7 Regras Basicas
A

4. A relevancia do conteúdo

Sempre que questionados sobre sites, usuários se
referem a qualidade e releváncia do conteúdo

- Um bom texto para essa midia
- O mais conciso e objetivo possível
- náo promocional ou publicitário
- leitores online imprimem textos

necessitam páginas bem curtas
informagao secundaria deixada para páginas de suporte

11. Usabilidade na WEB

7 Regras Basicas
A

5. Manter a consisténcia

Quando as coisas acontecem sempre do mesmo

jeito, os usuários náo precisam se preocupar a
respeito do que irá acontecer

- um Website deve ser gerenciado como um
projeto único de interface com o usuário

12. Usabilidade na WEB

7 Regras Basicas
A

6. Tempo suportável
tempo de carga das páginas deve ser curto

10 segundos é o máximo de tempo antes que as
pessoas percam o interesse

na Web os usuários já tem uma baixa expectativa

limite pode aumentar para 15 segundos

7. Foco nos usuários

'sair do caminho'

para que o usuário possa fazer o que quer da maneira
mais rápida possível.

13. Usabilidade na WEB

7 Regras Basicas (Resumo)

. Clareza na arquitetura da informacáo
. Facilidade de navegacáo

. Simplicidade

. A relevancia do conteudo

. Manter a consisténcia

. Tempo suportavel

. Foco nos usuarios

14. Usabilidade na WEB

Inspecáo de Usabilidade
CA

conjunto de métodos baseados em se ter
avaliadores inspecionando ou examinando

aspectos de uma interface de usuário
relacionados a usabilidade

Eficiéncia de uso

Facilidade de Aprendizagem

Facilidade de relembrar

Tolerante a erro

Satisfaçäo subjetiva

15. Usabilidade na WEB
Inspecao de Usabilidade —
Métodos

AA
Avaliacáo Heurística
Revisáo de Guidelines

Percurso Pluralístico

Inspegöes de Consisténcia
Inspecöes de Padrôes (Standards)
Percurso Cognitivo

16. Usabilidade na WEB

Avaliacäo Heuristica — Introducäo
CA
fácil
pode ser ensinada em 4horas

rápido
1 dia
barato

17. Usabilidade na WEB
Avaliacäo Heuristica - Como

conduzir
eee

parte do processo de design interativo

pequeno conjunto de avaliadores (3 a 5)
examinando a interface e analisando o
atendimento as heuristicas de usabilidade

18. Usabilidade na WEB
Avaliacäo Heuristica - Como

conduzir
eee

com a presenca de um observador
duracáo de uma sessáo de avaliacáo -

~2horas

durante a sessáo de avaliacáo o avaliador
percorre a interface diversas vezes
inspecionando as diferentes componentes do
diálogo e comparando-as com a lista de
heuristicas (principios) de usabilidade
O avaliador decide como conduzir a avaliacáo
percorrer a interface pelo menos duas vezes

19. Usabilidade na WEB

Avaliacäo Heuristica — As

Heuristicas
eee

1. Visibilidade do status do sistema

sistema precisa manter os usuários informados sobre o que
está acontecendo, fornecendo um feedback adequado

dentro de um tempo razoável

2. Compatibilidade do sistema com o mundo real
Sistema precisa falar a linguagem do usuário, com
palavras, frases e conceitos familiares ao usuário, ao invés
de termos orientados ao sistema. Seguir convençôes do
mundo real, fazendo com que a informagáo apareca numa
ordem natural e lógica

20. Usabilidade na WEB

Avaliacäo Heuristica — As

Heuristicas
eee

3. Controle do usuario e liberdade

usuários frequentemente escolhem por engano funçôes do
sistema e precisam ter claras saidas de emergéncia para

sair do estado indesejado sem ter que percorrer um
extenso diálogo. Prover funçôes desfazer e refazer

4. Consisténcia e padrôes
usuários náo precisam adivinhar que diferentes palavras,
situaçôes ou acóes significam a mesma coisa. Seguir

convencóes de plataforma computacional (de acordo com o
público alvo)

21. Usabilidade na WEB

Avaliacäo Heuristica — As

Heuristicas
eee

5. Prevencáo de erros

melhor que uma boa mensagem de erro é um design
cuidadoso o qual previne o erro antes que aconteça

6. Reconhecimento ao invés de relembranca
tornar objetos, agdes e opgées visiveis. O usuario nao deve
ter que lembrar informaçäo de uma para outra parte do
diálogo. Instrugdes para uso do sistema devem estar
visiveis e facilmente recuperáveis quando necessário

22. Usabilidade na WEB

Avaliacäo Heuristica — As

Heuristicas
eee

7. Flexibilidade e eficiéncia de uso

usuários novatos se tornam peritos com o uso. Prover
aceleradores de forma a aumentar a velocidade da

interacáo. Permitir a usuários experientes "cortar caminho"
em acöes freqüentes

8. Estética e design minimalista
diálogos nao devem conter informaçäo irrelevante ou
raramente necessária. Qualquer unidade de informaçäo
extra no diálogo irá competir com unidades relevantes de
informacáo e diminuir sua visibilidade relativa

23. Usabilidade na WEB
Avaliacäo Heuristica — As
Heuristicas

9. Ajudar os usuarios a reconhecer, diagnosticar e

corrigir erros
mensagens de erro devem ser expressas em linguagem

clara (sem códigos) indicando precisamente o problema e
construtivamente sugerindo uma soluçäo

10. Help e documentacáo
Embora seja melhor um sistema que possa ser usado sem
documentacáo, é necessário prover help e documentacáo.
Essas informaçôes devem ser fáceis de encontrar,
focalizadas na tarefa do usuário e náo muito extensas.

24. Usabilidade na WEB

Avaliacao Heuristica — Resultado
da Avaliacáo
CA

lista de problemas de usabilidade da interface
com referéncia aos princípios de usabilidade

que foram violados
avaliacáo heurística nao objetiva prover meios
de corrigir os problemas em um redesign e
náo levanta os aspectos positivos do design
podem ser anotados os aspectos positivos
para que náo se altere o que está bom

25. Usabilidade na WEB

Avaliacäo Heuristica — Graus de

Severidade
eee

Combinagao de 3 fatores
frequéncia

Comum ou raro ?
impacto

Facil ou dificil para o usuario supera-lo ?
persisténcia

Problema de uma única vez que o usuario pode superar
desde que saiba que ele existe ou os usuarios serao
repetidamente incomodados por ele ?

26. Usabilidade na WEB

Avaliacäo Heuristica — Graus de
Severidade
Qe

eu nao concordo que isso é um problema de
usabilidade ( 1)

é um problema “cosmético” somente ( 2 )

precisa ser corrigido somente se sobrar algum tempo no
projeto

problema de usabilidade menor (3 )

corrigi-lo deve ter prioridade baixa
problema de usabilidade grave (4 )

importante corrigi-lo, deve ser dada alta prioridade
catástrofe de usabilidade (5)

a sua corregäo é imperativa antes do produto ser liberado

27. Usabilidade na WEB

Avaliacao Heuristica - Caracteristicas
dos Problemas
Qe

Problemas de usabilidade em um diálogo
podem ser localizados de 4 maneiras:

em um único local da interface

em dois ou mais locais que devem ser
comparadas para se dectetar o problema

como um problema da estrutura geral da interface
como algo que precisa ser incluido na interface

28. Usabilidade na WEB

Avaliacáo Heurística - Exemplos
A

[Asistente para Adicionar Novo Hardware

D Windows rd procutar agora o seu novo hardhıe.
AVISO. Isso pode levar alguns minutos e pode fazer com
que sua máquina pare de responder. Feche todos os
pregrames abeitos artes de iniciar detec,

Enquanto a deleopäo estiver senda execulada, vacé verá.
um indicador de andamento. Se esse indicador parar
Haan Se

Para continua, clique em ‘Avancat

Visibilidade e
Status do sistema

ajudar os us s a reconhecer,
diagnosticar e corrigir erros

29. Usabilidade na WEB

Avaliacáo Heurística - Exemplos

Vital Forum

termos técnicos

Se vocé nao conseguir ver a

animagáo , O seu plugin é o
de flash 3 ou

botáo abaixo pi

El Abi página ps 2 com Eke pape au ed, Diane

BfinicianÎTé Dis de Criançe 202 -...pMerosol Photo Eater (Si) WIRE 064

Compatibilidade do sistema com o mundo real

30. Usabilidade na WEB

Receltanet

ece
Sistema de entrega de declaraçôes via internet
versao 2001-04!

Bem-vindo a0 programa de insalacdo do
Hecel

E akamente recomendavel que vocé saia de todos os
programas do Windows antes de executar este programa de

SR leche todos os

réximo" pata

[Próximos Cancelar |

Consisténcia e padräo; prevengäo de erros

31. Usabilidade na WEB
Avaliacáo Heuristica - Exemplos

E

x) No é possivel excluir lixol: Acesso hegado.

Certifique-8 de que o disco náo esteja cheio ou protegido contra
gravaçäo e que o arquivo nao esteja sendo usado.

OK

Ajudar os usuarios a reconhecer, diagnosticar e corrigir erros

32. Usabilidade na WEB

Avaliacáo Heurística - Exemplos
PPP

smart is beautiful

altgista SEARCH

Estética e design minimalista

33. Usabilidade na WEB

Avaliacáo Heurística - Exemplos

Ele Edt View Insert Properties
New Web Browser
New Doëument Cu >

Browse Document

Open Location. \
“Ley Open File. CD
Flexibilidade e Save Cuks
Save As.

eficiéncia de uso | Publish

\

New Mai Message... CtlM
Mail Document,

Page Setup.

Print.

Print Preview

Close Cube
Exit

34. _ Elle Eut View Go Bookmarks Tools Window Help
O, Q Q (6%) Q [E titte:tuniw.vivo-sp.com br/consumidor/aten_web_pre.sht |
2/8, @Mall 43 Home @ Radio Bi] Netscape Q, Search| Bookmarks © Web Calendar
I Vivo | je]
Sa
Comunidades ; A Vivo | Servigos de Dados | Loja Virtual : Sala de Imprensa TETE =] E
Vocé pode acessar os seguintes servicos:
sta sado
| | Alterado de ras sereta-mal
li N Clea paraa
Servigas pela Web
A
Produtos
?
Bac
Servico de Dados
Pisos de Serigos Poo: Pago =
Se

© © À HD tratara data fiom wre vivorsp com br

35. Pe

File Edit View Go Bookmarks Tools Window Help

G9 Q e) (9 [8 ntps online vivo-sp.com br/webselfeare/login_pre.asp

2/5, (Mail 4 Home QD Radio [My Netscape Q Search Buokmarks % Web Calendar

(afro l

[E [JavaScript Application]

A. Digite o número do celular!

[Comunidades | A Vivo ; Sexvigo de Dados | LI

VIVO Pré

36. pl

RTE

= Elle Edit View Go Bookmarks Tools Window Help

[A Search ]

O, 6) (6) (6%) © [E tittes:vontine.vivo-sp.com briwebselfcare/login_pre.asp

E,\ (Mail 4% Home (2 Radio [iy] Netscape Q Search (Bookmarks Y Web Calendar

E ]

El

~

W>
¡Comunidades | A Vivo! Servico de Dados ı Loja Virtual | Sala de Imprensa | Fale Conosco
VIVO Pré SAI

IDENTIFICAGÄO
Bus

© © À HD Docment Done (9317 sen) E

37. Usabilidade na WEB

Avaliacáo Heuristica — conclusöes
AA

3 a 5 avaliadores trabalhando individualmente
sem que um influencie o outro
avaliadores devem percorrer a interface pelo menos duas
vezes
na primeira focalizar no fluxo e na segunda nas componentes individuais
do diálogo
inspecionar a interface com base na lista de principios de
usabilidade
justificar e detalhar ao máximo todos os problemas detetados
reuniáo de concenso
combinar os problemas encontrados pelos em um unico relatório
coletar graus de severidade

38. Usabilidade na WEB

Avaliacäo Heurística — resumo

. Visibilidade do status do sistema

. Compatibilidade do sistema com o mundo real
. Controle do usuário e liberdade

. Consisténcia e padróes

. Reconhecimento ao invés de relembrança

. Flexibilidade e eficiéncia de uso

. Estética e design minimalista

. Ajudar os usuários a reconhecer, diagnosticar e corrigir erros

1
2
3
4
5. Prevencáo de erros
6
7
8
8
10. Help e documentaçäo

39. Usabilidade na WEB

Medidas de Satisfacao Subjetiva
CA

Questionário

Por favor indique o grau com o qual vocé concorda ou
nao com as seguintes afirmagöes sobre o sistema:

É muito fácil aprender como se usa esse sistema

Usar este sistema foi uma experiéncia muito frustante

Eu sinto que esse sistema irá me permitir conseguir uma alta
produtividade

Eu me preocupo que muitas das coisas que fago com esse sistema
podem estar erradas

Este sistema pode fazer todas as coisas que eu poderia precisar

É muito agradável trabalhar com esse sistema

40. Usabilidade na WEB

Medidas de Satisfacao Subjetiva
CA

Escala semántica Diferencial

Por favor marque as posicöes que melhor refletem suas
impressóes sobre o sistema

Agradável Irritante
Completo Incompleto
- Cooperativo Náo Cooperativo
Simples Complicado
Rápido de Usar Lento para usar
Inseguro

41. Usabilidade na WEB

Toques Finais

Principais razôes para visitarem seu

site
— Conteúdo de alta qualidade
— Atualizaçôes constantes

- Tempo de download mínimo
— Facilidade de uso

42. Usabilidade na WEB

Referéncias
A

Livros
- Projetando websites
— Jakob Nielsen — Campus
Design e avaliacáo de interfaces humano-computador
Heloisa Rocha e Maria Cecilia Baranauskas — E.C. 2000
Usability for the web
Brinck; Gergle; Wood — MK
Sites
- http://www.useit.com
http://usableweb.com/
http://www.webpagesthatsuck.com/suckframe.htm