paper prototyping wud09

of 45 /45
Paper Prototyping Ferramenta para avaliação de usabilidade de interfaces Case de estudo: Nokia Widgets Eric Quezado Facilitador WUD2009

Upload: robson-santos

Post on 03-Sep-2014

1.397 views

Category:

Business


5 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Paper Prototyping Wud09

Paper PrototypingFerramenta para avaliação de usabilidade de interfaces Case de estudo: Nokia Widgets

Eric QuezadoFacilitador

WUD2009

Page 2: Paper Prototyping Wud09

PaperPrototyping

Não seria interessante saber o que os usuários (e o mercado) esperam de um sistema antes do desenvolvimento?

Page 3: Paper Prototyping Wud09

PaperPrototyping

E se essa previsão do futuro puder ser feita com pouco esforço e máximo feedback?

Page 4: Paper Prototyping Wud09

PaperPrototyping

E se essa previsão permitisse desenvolver com a segurança de estar fazendo a coisa certa?

Page 5: Paper Prototyping Wud09

PaperPrototyping

Tente o Paper Prototyping

Page 6: Paper Prototyping Wud09

PaperPrototyping

“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

Page 7: Paper Prototyping Wud09

PaperPrototyping

Quais tipos de interfaces podem ser avaliadas pelo PaperPrototyping?

Page 8: Paper Prototyping Wud09

PaperPrototyping

Quais as habilidades são necessárias?

Page 9: Paper Prototyping Wud09

PaperPrototyping

Passo 1Escolhas as tarefas para serem testadas

Page 10: Paper Prototyping Wud09

PaperPrototyping

Passo 2Tente desenhar tudo que surgirá na execução destas tarefas

(telas, janelas, botões, popups, etc)

Page 11: Paper Prototyping Wud09

PaperPrototyping

Passo 3Colete os usuários

Page 12: Paper Prototyping Wud09

PaperPrototyping

Passo 4Teste

Page 13: Paper Prototyping Wud09

PaperPrototyping

Page 14: Paper Prototyping Wud09

PaperPrototyping

Page 15: Paper Prototyping Wud09

PaperPrototyping

Page 16: Paper Prototyping Wud09

PaperPrototyping

Page 17: Paper Prototyping Wud09

PaperPrototyping

Page 18: Paper Prototyping Wud09

PaperPrototyping

Page 19: Paper Prototyping Wud09

PaperPrototyping

Page 20: Paper Prototyping Wud09

PaperPrototyping

Page 21: Paper Prototyping Wud09

PaperPrototyping

EnvolvidosUsuário

Facilitador “Computador” Observador

Page 22: Paper Prototyping Wud09

PaperPrototyping

UsuárioManipula a tela de papel como se fosse a tela do computador, usando o dedo como mouse, descrevendo suas ações, senti-

mentos, dúvidas

Page 23: Paper Prototyping Wud09

PaperPrototyping

FacilitadorApresenta 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.

Page 24: Paper Prototyping Wud09

PaperPrototyping

ObservadorUm membro ou dois membros do desenvolvimento que

tomam nota de todas as ações e comentários do usuário.

Page 25: Paper Prototyping Wud09

PaperPrototyping

Benefícios?

Page 26: Paper Prototyping Wud09

PaperPrototyping

Conceitos e TermologiasOs usuários realmente entendem o que foi proposto na tela?

Page 27: Paper Prototyping Wud09

PaperPrototyping

Navegação e Fluxo de TrabalhoAs telas representam e suprem as necessidades do usuário?

Page 28: Paper Prototyping Wud09

PaperPrototyping

ConteúdoO conteúdo apresentado é suficiente e adequado para as to-

madas de decisões?

Page 29: Paper Prototyping Wud09

PaperPrototyping

LayoutMesmo 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.

Page 30: Paper Prototyping Wud09

PaperPrototyping

FuncionalidadeAs funcionalidades apresentadas foram suficientes para o

desempenho da tarefa?

Page 31: Paper Prototyping Wud09

PaperPrototyping

Mais Benefícios?Mockup funcional rápido e barato

Eliminação de problemas mais óbviosRefinamento da interface antes do desenvolvimento

Morte ao achismo e Viva aos dados coletados

Page 32: Paper Prototyping Wud09

Case de Estudo

Page 33: Paper Prototyping Wud09

BriefingA 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.

Page 34: Paper Prototyping Wud09

Features CentraisProcura e visualização de filmes

Listagem dos filmes do cliente Netflix

Page 35: Paper Prototyping Wud09

Fluxograma/Wireframe

Page 36: Paper Prototyping Wud09

options exit

LOGO

user

pass

continue

Sign in

Not a member? Visit Netflix.com to sign up.

Login error alert

N

options exit

LOGO

go

Search

your queue

LOGO

options back

goSearch

1 - 10 of about N results for ‘X’

Title Film ATitle Film Line 2Year / MPAA

Title Film ITitle Film Line 2Year / MPAA

Title Film BTitle Film Line 2Year / MPAA

Title Film CTitle Film Line 2Year / MPAA

Title Film JTitle Film Line 2Year / MPAA

Title Film HTitle Film Line 2Year / MPAA

Title Film DTitle Film Line 2Year / MPAA

Title Film ETitle Film Line 2Year / MPAA

Title Film FTitle Film Line 2Year / MPAA

Title Film GTitle Film Line 2Year / MPAA

previous next

LOGO

options back

goSearch

Title Film ATitle Film Line 2Year / MPAA

add dvd

see preview

Starring: Lena Headey, Gerard ButlerDirector: Zack SnyderGenre: Action & AdventureLanguage: EnglishSubtitles: English

Zack Snyder directs this faithfuladaptation of Frank Miller's (Sin City)graphic novel about the storiedBattle of Thermopylae, a conflict thatpitted the ancient Greeks against thePersians in 480 B.C. The film, whichblends live-action shots with virtualbackgrounds to capture Miller'soriginal vision, co-stars Gerard Butler,Lena Headey, David Wenham, VincentRegan, Rodrigo Santoro and DominicWest.

LOGO

options back

goSearch

Title Film ATitle Film Line 2has been added to yourDVD Queue at position N.

your queue

move to top

Other movies you might enjoy

Title Film ATitle Film Line 2Year / MPAA

Title Film BTitle Film Line 2Year / MPAA

Title Film CTitle Film Line 2Year / MPAA

Title Film DTitle Film Line 2Year / MPAA

Title Film ETitle Film Line 2Year / MPAA

LOGO

options

goSearch

Title Film ATitle Film Line 2has been moved to yourDVD Queue at position 1.

your queue

Other movies you might enjoy

Title Film ATitle Film Line 2Year / MPAA

Title Film BTitle Film Line 2Year / MPAA

Title Film CTitle Film Line 2Year / MPAA

Title Film DTitle Film Line 2Year / MPAA

Title Film ETitle Film Line 2Year / MPAA

options back

LOGO

options back

goSearch

1 - 10 of N Queued DVDs

previous next

Your QueueInstant (24) At home (3)

01 Title Film ATitle Film Line 2

REMOVE

02 Title Film BTitle Film Line 2

MOVETOP

REMOVE

03 Title Film CTitle Film Line 2

MOVETOP

REMOVE

04 Title Film DTitle Film Line 2

MOVETOP

REMOVE

05 Title Film ETitle Film Line 2

MOVETOP

REMOVE

06 Title Film FTitle Film Line 2

MOVETOP

REMOVE

07 Title Film GTitle Film Line 2

MOVETOP

REMOVE

08 Title Film HTitle Film Line 2

MOVETOP

REMOVE

09 Title Film ITitle Film Line 2

MOVETOP

REMOVE

10 Title Film JTitle Film Line 2

MOVETOP

REMOVE

LOGO

options back

goSearch

1 - 10 of N Queued DVDs

previous next

Your QueueInstant (24) At home (3)

01 Title Film BTitle Film Line 2

REMOVE

02 Title Film ATitle Film Line 2

MOVETOP

REMOVE

03 Title Film CTitle Film Line 2

MOVETOP

REMOVE

04 Title Film DTitle Film Line 2

MOVETOP

REMOVE

05 Title Film ETitle Film Line 2

MOVETOP

REMOVE

06 Title Film FTitle Film Line 2

MOVETOP

REMOVE

07 Title Film GTitle Film Line 2

MOVETOP

REMOVE

08 Title Film HTitle Film Line 2

MOVETOP

REMOVE

09 Title Film ITitle Film Line 2

MOVETOP

REMOVE

10 Title Film JTitle Film Line 2

MOVETOP

REMOVE

LOGO

options back

goSearch

1 - 10 of N Queued DVDs

previous next

Your QueueInstant (24) At home (3)

01 Title Film ATitle Film Line 2

REMOVE

02 Title Film CTitle Film Line 2

MOVETOP

REMOVE

03 Title Film DTitle Film Line 2

MOVETOP

REMOVE

04 Title Film ETitle Film Line 2

MOVETOP

REMOVE

05 Title Film FTitle Film Line 2

MOVETOP

REMOVE

06 Title Film GTitle Film Line 2

MOVETOP

REMOVE

07 Title Film HTitle Film Line 2

MOVETOP

REMOVE

08 Title Film ITitle Film Line 2

MOVETOP

REMOVE

09 Title Film JTitle Film Line 2

MOVETOP

REMOVE

10 Title Film KTitle Film Line 2

MOVETOP

REMOVE

LOGOTitle Film DTitle Film Line 2Current Film position

move to top

remove from queue

options back

goSearch

see preview

Starring: Lena Headey, Gerard ButlerDirector: Zack SnyderGenre: Action & AdventureLanguage: EnglishSubtitles: English

Zack Snyder directs this faithfuladaptation of Frank Miller's (Sin City)graphic novel about the storiedBattle of Thermopylae, a conflict thatpitted the ancient Greeks against thePersians in 480 B.C. The film, whichblends live-action shots with virtualbackgrounds to capture Miller'soriginal vision, co-stars Gerard Butler,Lena Headey, David Wenham, VincentRegan, Rodrigo Santoro and DominicWest.

LOGO

options back

goSearch

1 - 10 of N Queued DVDs

previous next

Your QueueInstant (24) At home (3)

01 Title Film DTitle Film Line 2

REMOVE

02 Title Film ATitle Film Line 2

MOVETOP

REMOVE

03 Title Film CTitle Film Line 2

MOVETOP

REMOVE

04 Title Film ETitle Film Line 2

MOVETOP

REMOVE

05 Title Film FTitle Film Line 2

MOVETOP

REMOVE

06 Title Film GTitle Film Line 2

MOVETOP

REMOVE

07 Title Film HTitle Film Line 2

MOVETOP

REMOVE

08 Title Film ITitle Film Line 2

MOVETOP

REMOVE

09 Title Film JTitle Film Line 2

MOVETOP

REMOVE

10 Title Film KTitle Film Line 2

MOVETOP

REMOVE

LOGO

options back

goSearch

1 - 10 of 24 Queued Instants

previous next

Your QueueDVD (N) At home (3)

01 Title Film ATitle Film Line 2

02 Title Film CTitle Film Line 2

03 Title Film ETitle Film Line 2

04 Title Film GTitle Film Line 2

05 Title Film ITitle Film Line 2

06 Title Film KTitle Film Line 2

07 Title Film MTitle Film Line 2

08 Title Film OTitle Film Line 2

09 Title Film QTitle Film Line 2

10 Title Film STitle Film Line 2

LOGO

options back

goSearch

1 - 3 of 3 Movies at home

previous next

Your QueueDVD (N) Instant (24)

01 Title Film XTitle Film Line 2

02 Title Film YTitle Film Line 2

03 Title Film ZTitle Film Line 2

LOGO

options back

goSearch

1 - 10 of N Queued DVDs

previous next

Your QueueInstant (24) At home (3)

01 Title Film ATitle Film Line 2

REMOVE

02 Title Film CTitle Film Line 2

MOVETOP

REMOVE

03 Title Film ETitle Film Line 2

MOVETOP

REMOVE

04 Title Film FTitle Film Line 2

MOVETOP

REMOVE

05 Title Film GTitle Film Line 2

MOVETOP

REMOVE

06 Title Film HTitle Film Line 2

MOVETOP

REMOVE

07 Title Film ITitle Film Line 2

MOVETOP

REMOVE

08 Title Film JTitle Film Line 2

MOVETOP

REMOVE

09 Title Film KTitle Film Line 2

MOVETOP

REMOVE

10 Title Film LTitle Film Line 2

MOVETOP

REMOVE

01

02 03 04 05 06

07

08091011

12

13 14 15

01 - Sign in Screen02 - Landing Screen03 - Search Results Screen04 - Movie Detail Screen05 - Con�rmation “Add to Queue” Screen06 - Con�rmation “Movie Moved to Top” Screen07 - Preview Movie Screen08 - Your Queue “DVD list” Screen09 - Your Queue “DVD list” Screen - Film B moved to top10 - Your Queue “DVD list” Screen - Film B removed11 - Movie Detail Screen - Film D from queue12 - Your Queue “DVD list” Screen - Film D removed13 - Your Queue “DVD list” Screen - Film D moved to top14 - Your Queue “DVD at home” Screen15 - Your Queue “Instant Movie” Screen

Search Result / Movie Detais

Queued Movies

add dvd add instant

in dvd queue in instant queue

add all save

or

or

Deleting confirmation

REMOVE

MOVETOP

REMOVE

MOVETOP

REMOVE

MOVETOP

REMOVE

MOVETOP

REMOVE

MOVETOP

REMOVE

MOVETOP

REMOVE

MOVETOP

REMOVE

MOVETOP

REMOVE

MOVETOP

REMOVE

Page 37: Paper Prototyping Wud09

Paper PrototypingTarefa: Supondo a já existência de um Login X e uma Senha Y,

logar no sistema e procurar detalhes do filme “Star Wars”.

Page 38: Paper Prototyping Wud09
Page 39: Paper Prototyping Wud09
Page 40: Paper Prototyping Wud09
Page 41: Paper Prototyping Wud09
Page 42: Paper Prototyping Wud09
Page 43: Paper Prototyping Wud09
Page 44: Paper Prototyping Wud09

PaperPrototyping

Preparando um Cenário de TesteTomando 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 onlineTela de Conversa sobre a Tela de Usuários

Page 45: Paper Prototyping Wud09

PaperPrototyping

Tarefa do UsuárioVocê 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.