Paper Prototyping Wud09
Upcoming SlideShare
Loading in...5
×
 

Paper Prototyping Wud09

on

  • 1,348 views

 

Statistics

Views

Total Views
1,348
Views on SlideShare
1,311
Embed Views
37

Actions

Likes
8
Downloads
39
Comments
0

2 Embeds 37

http://www.wudmanaus.com.br 33
http://www.slideshare.net 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Paper Prototyping Wud09 Paper Prototyping Wud09 Presentation Transcript

  • Paper Prototy ping Facilitador Ferramenta pa Eric Quezado ra avaliação de usabilidade de Case de estud interfaces WUD2009 o: Nokia Widg ets
  • Paper g P rototypin Não seria interessante saber o que os usuários (e o mercado) esperam de um sistema antes do desenvolvimento?
  • Paper g P rototypin E se essa previsão do futuro puder ser feita com pouco esforço e máximo feedback?
  • Paper g P rototypin E se essa previsão permitisse desenvolver com a segurança de estar fazendo a coisa certa?
  • Paper g P rototypin Tente o Paper Prototyping
  • 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
  • Paper g P rototypin Quais tipos de interfaces podem ser avaliadas pelo Paper Prototyping?
  • Paper g P rototypin Quais as habilidades são necessárias?
  • Paper g P rototypin Passo 1 Escolhas as tarefas para serem testadas
  • Paper g P rototypin Passo 2 Tente desenhar tudo que surgirá na execução destas tarefas (telas, janelas, botões, popups, etc)
  • 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ário Facilitador “Computador” Observador
  • 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
  • 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.
  • 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.
  • Paper g P rototypin Benefícios?
  • Paper g P rototypin Conceitos e Termologias Os usuários realmente entendem o que foi proposto na tela?
  • Paper g P rototypin Navegação e Fluxo de Trabalho As telas representam e suprem as necessidades do usuário?
  • Paper g P rototypin Conteúdo O conteúdo apresentado é suficiente e adequado para as to- madas de decisões?
  • 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.
  • Paper g P rototypin Funcionalidade As funcionalidades apresentadas foram suficientes para o desempenho da tarefa?
  • 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
  • Case de Estudo
  • 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.
  • Features Centrais Procura e visualização de filmes Listagem dos filmes do cliente Netflix
  • Fluxograma/Wireframe
  • 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
  • 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”.
  • 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
  • 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.