Paper Prototyping Wud09

  • 743 views
Uploaded on

 

More in: Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
743
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
40
Comments
0
Likes
8

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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”.
  • 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. 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.