Your SlideShare is downloading. ×
0
Paper Prototy
              ping
                                                            Facilitador

Ferramenta pa
  ...
Paper
                                                                  g
                                                ...
Paper
                                                                   g
                                               ...
Paper
                                                                 g
                                                 ...
Paper
                                g
                    P rototypin




     Tente o
Paper Prototyping
Paper
                                                                   g
                                               ...
Paper
                                                               g
                                                   ...
Paper
                                                    g
                                        P rototypin




Quais ...
Paper
                                                      g
                                          P rototypin




  ...
Paper
                                                                g
                                                  ...
Paper
                                 g
                     P rototypin




     Passo 3
Colete os usuários
Paper
                      g
          P rototypin




Passo 4
 Teste
Paper
            g
P rototypin
Paper
            g
P rototypin
Paper
            g
P rototypin
Paper
            g
P rototypin
Paper
            g
P rototypin
Paper
            g
P rototypin
Paper
            g
P rototypin
Paper
            g
P rototypin
Paper
                                       g
                           P rototypin




        Envolvidos
          Usu...
Paper
                                                                 g
                                                 ...
Paper
                                                                  g
                                                ...
Paper
                                                             g
                                                 P ro...
Paper
                          g
              P rototypin




Benefícios?
Paper
                                                                g
                                                  ...
Paper
                                                                 g
                                                 ...
Paper
                                                                g
                                                  ...
Paper
                                                                  g
                                                ...
Paper
                                                               g
                                                   ...
Paper
                                                           g
                                               P rototy...
Case de Estudo
Briefing
A maior locadora de DVDs americana, Netflix.com, queria uma
parceria com a Nokia para que o cliente da locadora p...
Features Centrais
   Procura e visualização de filmes
Listagem dos filmes do cliente Netflix
Fluxograma/Wireframe
LOGO
                                                                                                                     ...
Paper Prototyping
Tarefa: Supondo a já existência de um Login X e uma Senha Y,
 logar no sistema e procurar detalhes do fi...
Paper
                                                                                g
                                  ...
Paper
                                                                 g
                                                 ...
Paper Prototyping Wud09
Paper Prototyping Wud09
Paper Prototyping Wud09
Paper Prototyping Wud09
Paper Prototyping Wud09
Paper Prototyping Wud09
Upcoming SlideShare
Loading in...5
×

Paper Prototyping Wud09

821

Published on

Published in: Business, Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
821
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
51
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "Paper Prototyping Wud09"

  1. 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. 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. 3. Paper g P rototypin E se essa previsão do futuro puder ser feita com pouco esforço e máximo feedback?
  4. 4. Paper g P rototypin E se essa previsão permitisse desenvolver com a segurança de estar fazendo a coisa certa?
  5. 5. Paper g P rototypin Tente o Paper Prototyping
  6. 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. 7. Paper g P rototypin Quais tipos de interfaces podem ser avaliadas pelo Paper Prototyping?
  8. 8. Paper g P rototypin Quais as habilidades são necessárias?
  9. 9. Paper g P rototypin Passo 1 Escolhas as tarefas para serem testadas
  10. 10. Paper g P rototypin Passo 2 Tente desenhar tudo que surgirá na execução destas tarefas (telas, janelas, botões, popups, etc)
  11. 11. Paper g P rototypin Passo 3 Colete os usuários
  12. 12. Paper g P rototypin Passo 4 Teste
  13. 13. Paper g P rototypin
  14. 14. Paper g P rototypin
  15. 15. Paper g P rototypin
  16. 16. Paper g P rototypin
  17. 17. Paper g P rototypin
  18. 18. Paper g P rototypin
  19. 19. Paper g P rototypin
  20. 20. Paper g P rototypin
  21. 21. Paper g P rototypin Envolvidos Usuário Facilitador “Computador” Observador
  22. 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. 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. 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. 25. Paper g P rototypin Benefícios?
  26. 26. Paper g P rototypin Conceitos e Termologias Os usuários realmente entendem o que foi proposto na tela?
  27. 27. Paper g P rototypin Navegação e Fluxo de Trabalho As telas representam e suprem as necessidades do usuário?
  28. 28. Paper g P rototypin Conteúdo O conteúdo apresentado é suficiente e adequado para as to- madas de decisões?
  29. 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. 30. Paper g P rototypin Funcionalidade As funcionalidades apresentadas foram suficientes para o desempenho da tarefa?
  31. 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. 32. Case de Estudo
  33. 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. 34. Features Centrais Procura e visualização de filmes Listagem dos filmes do cliente Netflix
  35. 35. Fluxograma/Wireframe
  36. 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. 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”.
  38. 38. 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
  39. 39. 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×