O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
IxDworks 
From Ideas to Paper Prototypes: 
Hands-on Approaches for Early Stage Projects 
Valeria Gasik, Darja Tokranova
Valeria Gasik 
M.Sc (HCI) 
Interaction Designer 
Finland 
Presenting today 
Darja Tokranova 
M.Sc (HCI) 
Freelance designe...
Today
User-Centered Design 
Interaction Design
Idea Users 
Context 
Concept 
1st prototype Reflection
Idea Users 
Context 
Concept 
1st prototype Reflection
We are here
We are here Heading here
We are here Heading here
Goal today 
To find and understand the need 
and to outline the basic behavior.
Need? 
Goals? 
Behavior?
Interaction designers 
shape digital things 
for people’s use
Bret Victor - http://worrydream.com/ABriefRantOnTheFutureOfInteractionDesign/
Fits the problem 
poorly 
= don’t do this 
Fits the user 
poorly
A tool 
amplifies 
capabilities 
Fits the problem 
(very) well 
Fits the user 
(very) well
Interaction designers 
shape digital things 
for people’s use
Fundamentally 
different 
in their complexity 
when something 
is shown here
Doing things easily and with pleasure.
Useful Usable Desirable 
Doing things easily and with pleasure. 
Product 
User-Centered Design
Behavior 
Doing things easily and with pleasure. 
Optimizing design based on how users 
can, want or need to use a solutio...
Something 
in between
Need? 
Goals? 
Behavior?
Vision
Reality
For whom? 
Users (≠ segments), sharing 
For what purpose? 
Needs, goals, abilities 
What? 
Idea, concept, prototype, produ...
Where to start?
UCD 
Example approaches 
Research 
Personas 
Scenarios 
Use Cases 
Requirements 
Design 
Concept 
Rapid prototypes 
Wirefr...
Learning about 
users, tasks and 
product 
Solving key 
problems through 
design 
Testing and 
improving the 
product 
Res...
Research 
Personas 
Scenarios 
Use Cases 
Requirements 
Design 
Concept 
Paper prototypes 
Wireframes 
Hi-fi prototypes 
E...
Personas
We can’t ask users to be with 
us all the time, thus we make 
informed generalizations. 
Zzz.
Is it logical? 
Is it fun? 
Bob would not like 
that because... 
He’s not Bob IRL
Persona 
1-2 personas is 
usually enough! 
• Describes imaginative users archetypes. 
• Is based on the real research and ...
“Bob”
Fake persona 
• Stereotype or a caricature 
• Can’t be backed up 
• Factoids 
• Fun is fun, but often useless
Resources 
Primary Secondary 
Personal know-how 
Stakeholders 
Online discussions 
Domain experts 
Informed guesses 
Feedb...
What needs are we addressing? 
Lets make a persona together!
What user wants to achieve (do-goal)? 
Why (be-goal)? 
What is the current situation? 
Which frustrations are there at the...
Example template 
Background Bio 
Name, (age), (role), occupation, education 
Photo(s) 
Description 
E.g. use environment ...
Scenarios
What is happening?
Scenarios 
• Stories that help understand interactions 
• A cheap way to illustrate design solution 
from user’s (persona’...
Watching a movie 
Bob selects a 
movie, inserts it 
in the device and 
sees it begin. 
Bob selects a movie and 
inserts it...
Watching a movie 
Bob grabs a controller and logs out of another 
person’s profile. He selects his account and sees 
vario...
Scenarios 
• Vary in level of details 
• Can be used use cases, user stories, testing... 
• Great for considering common a...
Scenarios 
• without your solution present-based 
• Focus is set on current practices that illustrate 
‘state of the art’ ...
Future based 
...At the practice, Lisa starts 
the timer. Right after the 
game, she summarizes the 
score and adds extra ...
How will the new solution work? 
Lets think of a high-level scenario
• In what settings will the product be used? 
• Is the persona frequently interrupted? 
• With what other products will it...
Next 
From scenarios to paper prototypes
Resources 
• Cooper, Alan, Reimann, R & Cronin, D. (2007) About Face 3: The essentials of interaction design. Wiley; ISBN:...
Images 
• Men on a bench https://www.flickr.com/photos/scottrsmith/6194527237/sizes/l 
• Woman at ATM https://www.flickr.c...
Próximos SlideShares
Carregando em…5
×

IxD Works Miniworkshop: Introduction

Ixdworks.com from ideas to paper prototypes workshop.

  • Seja o primeiro a comentar

IxD Works Miniworkshop: Introduction

  1. 1. IxDworks From Ideas to Paper Prototypes: Hands-on Approaches for Early Stage Projects Valeria Gasik, Darja Tokranova
  2. 2. Valeria Gasik M.Sc (HCI) Interaction Designer Finland Presenting today Darja Tokranova M.Sc (HCI) Freelance designer Estonia Katri Tammsaar Erasmus academic coordinator Estonia
  3. 3. Today
  4. 4. User-Centered Design Interaction Design
  5. 5. Idea Users Context Concept 1st prototype Reflection
  6. 6. Idea Users Context Concept 1st prototype Reflection
  7. 7. We are here
  8. 8. We are here Heading here
  9. 9. We are here Heading here
  10. 10. Goal today To find and understand the need and to outline the basic behavior.
  11. 11. Need? Goals? Behavior?
  12. 12. Interaction designers shape digital things for people’s use
  13. 13. Bret Victor - http://worrydream.com/ABriefRantOnTheFutureOfInteractionDesign/
  14. 14. Fits the problem poorly = don’t do this Fits the user poorly
  15. 15. A tool amplifies capabilities Fits the problem (very) well Fits the user (very) well
  16. 16. Interaction designers shape digital things for people’s use
  17. 17. Fundamentally different in their complexity when something is shown here
  18. 18. Doing things easily and with pleasure.
  19. 19. Useful Usable Desirable Doing things easily and with pleasure. Product User-Centered Design
  20. 20. Behavior Doing things easily and with pleasure. Optimizing design based on how users can, want or need to use a solution.
  21. 21. Something in between
  22. 22. Need? Goals? Behavior?
  23. 23. Vision
  24. 24. Reality
  25. 25. For whom? Users (≠ segments), sharing For what purpose? Needs, goals, abilities What? Idea, concept, prototype, product How? Brainstorming, designing, evaluating... Scope? Time, budget, team, effects... Product’s behavior User’s behavior Context
  26. 26. Where to start?
  27. 27. UCD Example approaches Research Personas Scenarios Use Cases Requirements Design Concept Rapid prototypes Wireframes Interactive demos Evaluation Testing Task analysis Feedback Heuristics
  28. 28. Learning about users, tasks and product Solving key problems through design Testing and improving the product Research Personas Scenarios Use Cases Requirements Design Concept Paper prototypes Wireframes Hi-fi prototypes Evaluation Testing Task analysis Feedback Heuristics Example approaches
  29. 29. Research Personas Scenarios Use Cases Requirements Design Concept Paper prototypes Wireframes Hi-fi prototypes Evaluation Testing Task analysis Feedback Heuristics Example approaches
  30. 30. Personas
  31. 31. We can’t ask users to be with us all the time, thus we make informed generalizations. Zzz.
  32. 32. Is it logical? Is it fun? Bob would not like that because... He’s not Bob IRL
  33. 33. Persona 1-2 personas is usually enough! • Describes imaginative users archetypes. • Is based on the real research and observation. • Shows user goals and their behavior patterns • Helps to crack “what” and “why” questions
  34. 34. “Bob”
  35. 35. Fake persona • Stereotype or a caricature • Can’t be backed up • Factoids • Fun is fun, but often useless
  36. 36. Resources Primary Secondary Personal know-how Stakeholders Online discussions Domain experts Informed guesses Feedback Surveys Talking to people directly, Observing their behavior
  37. 37. What needs are we addressing? Lets make a persona together!
  38. 38. What user wants to achieve (do-goal)? Why (be-goal)? What is the current situation? Which frustrations are there at the moment? Is there only one user or many? Where and when the activity is taking place? Is the need or the activity reoccurring?
  39. 39. Example template Background Bio Name, (age), (role), occupation, education Photo(s) Description E.g. use environment or context, where the problem occurs and current solutions and frustrations. Goals • What are the user’s end goals (e.g. “get a car”) • 1-3 end goals Mapping E.g. computer skills, necessity vs fun, quality vs price.
  40. 40. Scenarios
  41. 41. What is happening?
  42. 42. Scenarios • Stories that help understand interactions • A cheap way to illustrate design solution from user’s (persona’s) point of view • Tell user’s goals, motivations and actions • At first – lacks technical jargon
  43. 43. Watching a movie Bob selects a movie, inserts it in the device and sees it begin. Bob selects a movie and inserts it in the device. Advertisements appear, followed by settings. Bob selects movie to start.
  44. 44. Watching a movie Bob grabs a controller and logs out of another person’s profile. He selects his account and sees various usage options. He opts for a movie application and sees a bookshelf-like selection of various titles. He picks a movie and sees detailed description. With his controller Bob makes the movie to begin.
  45. 45. Scenarios • Vary in level of details • Can be used use cases, user stories, testing... • Great for considering common and alternative situations as well as accessibility issues “What should this product do?” “If the user has no wi-fi, then ... “ “...while doing, user is interrupted”
  46. 46. Scenarios • without your solution present-based • Focus is set on current practices that illustrate ‘state of the art’ and the problem context • with your solution future-based • Focus on how problems could be addressed (without diving into much details).
  47. 47. Future based ...At the practice, Lisa starts the timer. Right after the game, she summarizes the score and adds extra training for two players...
  48. 48. How will the new solution work? Lets think of a high-level scenario
  49. 49. • In what settings will the product be used? • Is the persona frequently interrupted? • With what other products will it be used? • What primary activities does the persona need to perform to meet her goals? • What is the expected end result of using the product? etc.
  50. 50. Next From scenarios to paper prototypes
  51. 51. Resources • Cooper, Alan, Reimann, R & Cronin, D. (2007) About Face 3: The essentials of interaction design. Wiley; ISBN: 0470084111 • Hinton, Andrew. Personas and the Role of Documentation. (2008) http://boxesandarrows.com/personas-and-the- role-of-design-documentation/ • Accessibility in User-Centered Design http://www.uiaccess.com/accessucd/personas.html • Hassenzahl, M. (2008). User Experience (UX): Towards and experiential perspective on product quality. http:// www.researchgate.net/publication/ 238472807_User_experience_(UX)_Towards_an_experiential_perspective_on_product_quality/file/ 60b7d51bf4873231da.pdf • What research methods could I use to create personas? http://ux.stackexchange.com/questions/21891/what-research- methods-can-i-use-to-create-personas • Personas http://wiki.fluidproject.org/display/fluid/Persona+Categories • Mike Cohn. http://www.mountaingoatsoftware.com/articles?tag=user%20stories • Stellman & Green. Building better software. http://www.stellman-greene.com/2009/05/03/requirements-101- user-stories-vs-use-cases/
  52. 52. Images • Men on a bench https://www.flickr.com/photos/scottrsmith/6194527237/sizes/l • Woman at ATM https://www.flickr.com/photos/betsssssy/435300495/sizes/l • User Case Map http://www.batimes.com/articles/user-stories-and-use-cases-dont-use-both.html • Her-movie http://www.jcpe.tv/wp-content/uploads/2014/01/her_xlg.jpg • Woman screaming http://www.pcrescuewirral.co.uk/uploads/images/mad-pc-user.jpg • Girl using phone http://timebusinessblog.files.wordpress.com/2012/09/145670133.jpg?w=360&h=240&crop=1 • Obama girls http://media4.onsugar.com/files/2013/05/22/859/n/1922398/1a491e72c356ad1a_159848172.xxxlarge_2x/i/Malia-Sasha-Obama-got-silly-selfie-while-sitting.jpg • Soccer practice http://whstherebellion.com/wp-content/uploads/2009/09/652346968_afbhm-l.jpg • Woman on the bench: http://2.bp.blogspot.com/-dyncCTqpICs/T_XBEzgGf_I/AAAAAAAAEg8/MjOgjFJwT2Y/s1600/Blog+July+11th+2012+ABC+Zoom+in.JPG • Statue http://cbsnews1.cbsistatic.com/hub/i/r/2012/01/20/Corporate_Failure.jpg 0b64e26d-a644-11e2-a3f0-029118418759/thumbnail/620x350/5e3ed089979959e4be8a197144e564db/

    Seja o primeiro a comentar

    Entre para ver os comentários

  • vfowler

    Oct. 22, 2016

Ixdworks.com from ideas to paper prototypes workshop.

Vistos

Vistos totais

693

No Slideshare

0

De incorporações

0

Número de incorporações

59

Ações

Baixados

9

Compartilhados

0

Comentários

0

Curtir

1

×