O documento apresenta um protótipo de papel para uma interface de aluguel de filmes da Netflix para celulares Nokia. O protótipo inclui telas para login, pesquisa de filmes, detalhes do filme, adicionar filmes à fila e visualizar a fila de filmes do usuário. O objetivo é testar a usabilidade da interface antes do desenvolvimento para identificar problemas.

1. Paper Prototy
ping
Facilitador
Ferramenta pa
Eric Quezado
ra avaliação de
usabilidade de
Case de estud interfaces WUD2009
o: Nokia Widg
ets

2. Paper
g
P rototypin
Não seria interessante saber o que os usuários (e o mercado)
esperam de um sistema antes do desenvolvimento?

3. Paper
g
P rototypin
E se essa previsão do futuro puder ser feita com pouco esforço
e máximo feedback?

4. Paper
g
P rototypin
E se essa previsão permitisse desenvolver com a segurança de
estar fazendo a coisa certa?

5. Paper
g
P rototypin
Tente o
Paper Prototyping

6. Paper
g
P rototypin
“Paper Prototyping é uma variação do teste de usabilidade
onde usuário realizam tarefas realisticas interagindo com uma
versão de papel de uma interface que é manipulada por uma
pessoa “atuando como computador”
Carolyn Snynder

7. Paper
g
P rototypin
Quais tipos de interfaces podem ser avaliadas pelo Paper
Prototyping?

8. Paper
g
P rototypin
Quais as habilidades são necessárias?

9. Paper
g
P rototypin
Passo 1
Escolhas as tarefas para serem testadas

10. Paper
g
P rototypin
Passo 2
Tente desenhar tudo que surgirá na execução destas tarefas
(telas, janelas, botões, popups, etc)

11. Paper
g
P rototypin
Passo 3
Colete os usuários

12. Paper
g
P rototypin
Passo 4
Teste

13. Paper
g
P rototypin

14. Paper
g
P rototypin

15. Paper
g
P rototypin

16. Paper
g
P rototypin

17. Paper
g
P rototypin

18. Paper
g
P rototypin

19. Paper
g
P rototypin

20. Paper
g
P rototypin

21. Paper
g
P rototypin
Envolvidos
Usuário
Facilitador “Computador”
Observador

22. Paper
g
P rototypin
Usuário
Manipula a tela de papel como se fosse a tela do computador,
usando o dedo como mouse, descrevendo suas ações, senti-
mentos, dúvidas

23. Paper
g
P rototypin
Facilitador
Apresenta o teste ao usuário, o cenário e procedimentos. Atua
como “computador”, trocando as telas quando “clicadas” e
auxiliando o usuário. Nunca deve explicar como a interface
funciona. Incentiva o usuário a descrever os processos.

24. Paper
g
P rototypin
Observador
Um membro ou dois membros do desenvolvimento que
tomam nota de todas as ações e comentários do usuário.

25. Paper
g
P rototypin
Benefícios?

26. Paper
g
P rototypin
Conceitos e Termologias
Os usuários realmente entendem o que foi proposto na tela?

27. Paper
g
P rototypin
Navegação e Fluxo de Trabalho
As telas representam e suprem as necessidades do usuário?

28. Paper
g
P rototypin
Conteúdo
O conteúdo apresentado é suficiente e adequado para as to-
madas de decisões?

29. Paper
g
P rototypin
Layout
Mesmo sem a obrigação de visual agradável é possível extrair
se a disposição e até a existência de alguns elementos é in-
teressante ou não.

30. Paper
g
P rototypin
Funcionalidade
As funcionalidades apresentadas foram suficientes para o
desempenho da tarefa?

31. Paper
g
P rototypin
Mais Benefícios?
Mockup funcional rápido e barato
Eliminação de problemas mais óbvios
Refinamento da interface antes do desenvolvimento
Morte ao achismo e Viva aos dados coletados

32. Case de Estudo

33. Briefing
A maior locadora de DVDs americana, Netflix.com, queria uma
parceria com a Nokia para que o cliente da locadora pudesse
alugar e acompanhar a sua lista de filmes pelo celular.

34. Features Centrais
Procura e visualização de filmes
Listagem dos filmes do cliente Netflix

35. Fluxograma/Wireframe

36. LOGO
01
Sign in
user
pass N
continue add dvd add instant
Login error alert or
Not a member? Visit Netflix.com to in dvd queue in instant queue
sign up.
or
add all save
Queued Movies
options exit
Search Result / Movie Detais
LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO
11 10 09 08 02 03 04 05 06
Title Film D Your Queue Your Queue Your Queue 1 - 10 of about N results for ‘X’ Title Film A Title Film A Title Film A
Title Film Line 2 Search Title Film Line 2 Title Film Line 2 Title Film Line 2
Current Film position
Instant (24) At home (3) Instant (24) At home (3) Instant (24) At home (3) Title Film A Year / MPAA has been added to your has been moved to your
1 - 10 of N Queued DVDs 1 - 10 of N Queued DVDs 1 - 10 of N Queued DVDs Title Film Line 2 DVD Queue at position N. DVD Queue at position 1.
go Year / MPAA
Title Film A Title Film B Title Film A
move to top 01 Title Film Line 2
REMOVE 01 Title Film Line 2
REMOVE 01 Title Film Line 2
REMOVE
add dvd move to top your queue
Title Film C MOVE REMOVE Title Film A MOVE REMOVE Title Film B MOVE REMOVE your queue Title Film B
remove from queue 02 02 02 Title Film Line 2 see preview your queue Other movies you might enjoy
Title Film Line 2 TOP Title Film Line 2 TOP Title Film Line 2 TOP
Year / MPAA
see preview Title Film D MOVE REMOVE Title Film C MOVE REMOVE Title Film C MOVE REMOVE Starring: Lena Headey, Gerard Butler Other movies you might enjoy Title Film A
03 Title Film Line 2 TOP
03 Title Film Line 2 TOP
03 Title Film Line 2 TOP Director: Zack Snyder Title Film Line 2
Starring: Lena Headey, Gerard Butler Genre: Action & Adventure Title Film A Year / MPAA
Title Film E MOVE REMOVE Title Film D MOVE REMOVE Title Film D MOVE REMOVE Title Film C Language: English Title Film Line 2
Director: Zack Snyder 04 04 04 Title Film Line 2
Genre: Action & Adventure Title Film Line 2 TOP Title Film Line 2 TOP Title Film Line 2 TOP Subtitles: English Year / MPAA
Year / MPAA
Language: English Title Film F MOVE REMOVE Title Film E MOVE REMOVE Title Film E MOVE REMOVE options exit Title Film B
Subtitles: English 05 Title Film Line 2 TOP
05 Title Film Line 2 TOP
05 Title Film Line 2 TOP Zack Snyder directs this faithful Title Film Line 2
Title Film D adaptation of Frank Miller's (Sin City) Title Film B Year / MPAA
Zack Snyder directs this faithful 06
Title Film G MOVE REMOVE
06
Title Film F MOVE REMOVE
06
Title Film F MOVE REMOVE
Title Film Line 2 graphic novel about the storied Title Film Line 2
adaptation of Frank Miller's (Sin City) Title Film Line 2 TOP Title Film Line 2 TOP Title Film Line 2 TOP Battle of Thermopylae, a conflict that Year / MPAA
Year / MPAA
graphic novel about the storied Title Film H MOVE REMOVE Title Film G MOVE REMOVE Title Film G MOVE REMOVE
pitted the ancient Greeks against the Title Film C
Battle of Thermopylae, a conflict that 07 Title Film Line 2 TOP
07 Title Film Line 2 TOP
07 Title Film Line 2 TOP
Persians in 480 B.C. The film, which Title Film Line 2
pitted the ancient Greeks against the blends live-action shots with virtual Title Film C Year / MPAA
Title Film E backgrounds to capture Miller's
Persians in 480 B.C. The film, which
08
Title Film I MOVE REMOVE
08
Title Film H MOVE REMOVE
08
Title Film H MOVE REMOVE
Title Film Line 2 Title Film Line 2
blends live-action shots with virtual Title Film Line 2 TOP Title Film Line 2 TOP Title Film Line 2 TOP original vision, co-stars Gerard Butler,
Year / MPAA
backgrounds to capture Miller's Year / MPAA Lena Headey, David Wenham, Vincent
Title Film J MOVE REMOVE Title Film I MOVE REMOVE Title Film I MOVE REMOVE Regan, Rodrigo Santoro and Dominic
Title Film D
original vision, co-stars Gerard Butler, 09 Title Film Line 2 TOP
09 Title Film Line 2 TOP
09 Title Film Line 2 TOP Title Film Line 2
Lena Headey, David Wenham, Vincent West.
Title Film F Title Film D Year / MPAA
Regan, Rodrigo Santoro and Dominic Title Film K MOVE REMOVE Title Film J MOVE REMOVE Title Film J MOVE REMOVE Title Film Line 2
West. 10 10 10 Title Film Line 2
Title Film Line 2 TOP Title Film Line 2 TOP Title Film Line 2 TOP Search go Year / MPAA
Year / MPAA
Title Film E
Search go previous next previous next previous next options back Title Film Line 2
Title Film G Title Film E Year / MPAA
options back
Title Film Line 2 Title Film Line 2
Search go Search go Search go
Year / MPAA
Year / MPAA
options back options back options back Search go
Title Film H Search go options
Title Film Line 2
Year / MPAA options back
07
Title Film I
LOGO LOGO LOGO
13 14 15 Title Film Line 2
Your Queue Your Queue Your Queue Year / MPAA
Instant (24) At home (3) DVD (N) Instant (24) DVD (N) At home (3)
Deleting confirmation
1 - 10 of N Queued DVDs 1 - 3 of 3 Movies at home 1 - 10 of 24 Queued Instants Title Film J
Title Film Line 2
Title Film D Title Film X Title Film A Year / MPAA
01 Title Film Line 2
REMOVE 01 01 Title Film Line 2
REMOVE
Title Film Line 2
Title Film A MOVE REMOVE Title Film Y Title Film C MOVE REMOVE
02 02 02
Title Film Line 2 TOP Title Film Line 2 Title Film Line 2 TOP previous next
Title Film C MOVE REMOVE Title Film E MOVE REMOVE options back
Title Film Z
03 Title Film Line 2 TOP
03 03 Title Film Line 2 TOP
Title Film Line 2 Search go
Title Film E MOVE REMOVE Title Film G MOVE REMOVE
04 Title Film Line 2 TOP
previous next 04 Title Film Line 2 TOP options back
Title Film F MOVE REMOVE Title Film I MOVE REMOVE
05 Title Film Line 2 TOP Search go 05 Title Film Line 2 TOP
Title Film G MOVE REMOVE options back Title Film K MOVE REMOVE
06 Title Film Line 2 TOP
06 Title Film Line 2 TOP
Title Film H MOVE REMOVE Title Film M MOVE REMOVE
07 Title Film Line 2 TOP
07 Title Film Line 2 TOP
LOGO
12 08
Title Film I MOVE REMOVE
08
Title Film O MOVE REMOVE
Your Queue Title Film Line 2 TOP Title Film Line 2 TOP
Instant (24) At home (3) Title Film J MOVE REMOVE Title Film Q MOVE REMOVE
09 Title Film Line 2 TOP
09 Title Film Line 2 TOP
1 - 10 of N Queued DVDs
Title Film K MOVE REMOVE Title Film S MOVE REMOVE
Title Film A 10 10
01 Title Film Line 2
REMOVE Title Film Line 2 TOP Title Film Line 2 TOP
Title Film C MOVE REMOVE previous next previous next
02 Title Film Line 2 TOP
03
Title Film E MOVE REMOVE Search go Search go
Title Film Line 2 TOP
04
Title Film F MOVE REMOVE
options back options back
01 - Sign in Screen
Title Film Line 2 TOP
02 - Landing Screen
Title Film G MOVE REMOVE
05 Title Film Line 2 TOP 03 - Search Results Screen
06
Title Film H MOVE REMOVE 04 - Movie Detail Screen
Title Film Line 2 TOP
05 - Con rmation “Add to Queue” Screen
Title Film I MOVE REMOVE
07 Title Film Line 2 TOP
06 - Con rmation “Movie Moved to Top” Screen
Title Film J MOVE REMOVE 07 - Preview Movie Screen
08 Title Film Line 2 TOP 08 - Your Queue “DVD list” Screen
09
Title Film K MOVE REMOVE
Title Film Line 2 TOP
09 - Your Queue “DVD list” Screen - Film B moved to top
Title Film L MOVE REMOVE
10 - Your Queue “DVD list” Screen - Film B removed
10 Title Film Line 2 TOP 11 - Movie Detail Screen - Film D from queue
previous next 12 - Your Queue “DVD list” Screen - Film D removed
13 - Your Queue “DVD list” Screen - Film D moved to top
Search go 14 - Your Queue “DVD at home” Screen
options back 15 - Your Queue “Instant Movie” Screen

37. Paper Prototyping
Tarefa: Supondo a já existência de um Login X e uma Senha Y,
logar no sistema e procurar detalhes do filme “Star Wars”.

44. Paper
g
P rototypin
Preparando um Cenário de Teste
Tomando como exemplo o comunicador MSN, desenhar todas
as telas necessárias para iniciar um chat.
Caixa de Login
Tela de usuários com 5 usuários online
Tela de Conversa sobre a Tela de Usuários

45. Paper
g
P rototypin
Tarefa do Usuário
Você foi convidado para testar um novo comunicador estílo
MSN. Você deve locar no sistema usando a conta Teste e senha
123. Uma vez on-line, você encontrará 5 amigos. Deverá ini-
ciar a conversa com um deles.