Ixdworks.com from ideas to paper prototypes workshop.

1. IxDworks
From Ideas to Paper Prototypes:
Hands-on Approaches for Early Stage Projects
Valeria Gasik, Darja Tokranova

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

4. User-Centered Design
Interaction Design

5. Idea Users
Context
Concept
1st prototype Reflection

6. Idea Users
Context
Concept
1st prototype Reflection

7. We are here

8. We are here Heading here

9. We are here Heading here

10. Goal today
To find and understand the need
and to outline the basic behavior.

11. Need?
Goals?
Behavior?

12. Interaction designers
shape digital things
for people’s use

13. Bret Victor - http://worrydream.com/ABriefRantOnTheFutureOfInteractionDesign/

14. Fits the problem
poorly
= don’t do this
Fits the user
poorly

15. A tool
amplifies
capabilities
Fits the problem
(very) well
Fits the user
(very) well

16. Interaction designers
shape digital things
for people’s use

17. Fundamentally
different
in their complexity
when something
is shown here

18. Doing things easily and with pleasure.

19. Useful Usable Desirable
Doing things easily and with pleasure.
Product
User-Centered Design

20. Behavior
Doing things easily and with pleasure.
Optimizing design based on how users
can, want or need to use a solution.

21. Something
in between

22. Need?
Goals?
Behavior?

23. Vision

24. Reality

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. Where to start?

27. UCD
Example approaches
Research
Personas
Scenarios
Use Cases
Requirements
Design
Concept
Rapid prototypes
Wireframes
Interactive demos
Evaluation
Testing
Task analysis
Feedback
Heuristics

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. Research
Personas
Scenarios
Use Cases
Requirements
Design
Concept
Paper prototypes
Wireframes
Hi-fi prototypes
Evaluation
Testing
Task analysis
Feedback
Heuristics
Example approaches

30. Personas

31. We can’t ask users to be with
us all the time, thus we make
informed generalizations.
Zzz.

32. Is it logical?
Is it fun?
Bob would not like
that because...
He’s not Bob IRL

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. “Bob”

35. Fake persona
• Stereotype or a caricature
• Can’t be backed up
• Factoids
• Fun is fun, but often useless

36. Resources
Primary Secondary
Personal know-how
Stakeholders
Online discussions
Domain experts
Informed guesses
Feedback
Surveys
Talking to people directly,
Observing their behavior

37. What needs are we addressing?
Lets make a persona together!

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

41. What is happening?

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. 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. 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. 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. 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. 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. How will the new solution work?
Lets think of a high-level scenario

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. Next
From scenarios to paper prototypes

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