User interface prototyping techniquesHans Põldoja
This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this licen...
Process•   Following the design patterns / interface guidelines•   Creating separate prototype(s) for each    functionalit...
Design patterns,guidelines & grids
http://developer.yahoo.com/ypatterns/
http://developer.apple.com/library/ios/
http://developer.android.com/guide/practices/ui_guidelines/
http://lessframework.com
http://960.gs
From user stories to  paper prototypes
Initial user story
Improved user story
Redesigning existing    interfaces
Testing paper prototypes
Preparation•   Creating tasks based on the scenarios•   Creating related interview questions
Designing the right tasks“Years ago, we helped with a study of Ikea.com, looking at how people foundproducts on the site.W...
What to focus on?•   Terminology. Do they understand the terms in the    UI?•   Navigation. Does the flow match what users ...
Testing session•   Test person•   “Paper computer”•   Facilitator
Prototyping software
Balsamiq Mockups
OmniGraffle
OmniGraffle
http://developer.yahoo.com/ypatterns/about/stencils/
OmniGraffle
Pencil
Prototyping software•   Balsamiq Mockups: http://www.balsamiq.com/    products/mockups•   OmniGraffle: http://www.omnigroup...
References• Ginsburg, S. (2009). An agile approach to iPhone design: Paper prototyping +  user testing. http://www.slidesh...
Thank You!•   hans.poldoja@tlu.ee•   http://imkedesign.wordpress.com
User interface prototyping techniques
User interface prototyping techniques
User interface prototyping techniques
User interface prototyping techniques
User interface prototyping techniques
Upcoming SlideShare
Loading in …5
×

User interface prototyping techniques

1,749 views

Published on

Presentations in Interface and Interaction Design course, IMKE master programme, Tallinn University.

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,749
On SlideShare
0
From Embeds
0
Number of Embeds
54
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

User interface prototyping techniques

  1. 1. User interface prototyping techniquesHans Põldoja
  2. 2. This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to CreativeCommons, 171 Second Street, Suite 300, San Francisco, California,94105, USA.
  3. 3. Process• Following the design patterns / interface guidelines• Creating separate prototype(s) for each functionality (user story)• Making changes in the user story, if needed• Putting the pieces together• Taking photos of the process (paper prototyping)• Finding missing stories / prototypes
  4. 4. Design patterns,guidelines & grids
  5. 5. http://developer.yahoo.com/ypatterns/
  6. 6. http://developer.apple.com/library/ios/
  7. 7. http://developer.android.com/guide/practices/ui_guidelines/
  8. 8. http://lessframework.com
  9. 9. http://960.gs
  10. 10. From user stories to paper prototypes
  11. 11. Initial user story
  12. 12. Improved user story
  13. 13. Redesigning existing interfaces
  14. 14. Testing paper prototypes
  15. 15. Preparation• Creating tasks based on the scenarios• Creating related interview questions
  16. 16. Designing the right tasks“Years ago, we helped with a study of Ikea.com, looking at how people foundproducts on the site.When we got there, theyd already started the testing processand were using tasks like "Find a bookcase." Interestingly, every participant didexactly the same thing: they went to the search box and typed "bookcase".Upon our suggestion, the team made a subtle change to the instructions they weregiving their participants: "You have 200+ books in your fiction collection, currentlyin boxes strewn around your living room. Find a way to organize them."We instantly saw a change in how the participants behaved with the design. Mostclicked through the various categories, looking for some sort of storage solution.Few used Search, typing in phrases like "Shelves" and "Storage Systems". And,nobody searched on "bookcase".” (Jared M. Spool) (Spool, 2005)
  17. 17. What to focus on?• Terminology. Do they understand the terms in the UI?• Navigation. Does the flow match what users expect?• Content. Does it provide the right level of information?• Page layout. Is content organized as users expect?• Functionality. What additional features are desired? (Ginsburg, 2009)
  18. 18. Testing session• Test person• “Paper computer”• Facilitator
  19. 19. Prototyping software
  20. 20. Balsamiq Mockups
  21. 21. OmniGraffle
  22. 22. OmniGraffle
  23. 23. http://developer.yahoo.com/ypatterns/about/stencils/
  24. 24. OmniGraffle
  25. 25. Pencil
  26. 26. Prototyping software• Balsamiq Mockups: http://www.balsamiq.com/ products/mockups• OmniGraffle: http://www.omnigroup.com/ products/omnigraffle/• Pencil: http://pencil.evolus.vn
  27. 27. References• Ginsburg, S. (2009). An agile approach to iPhone design: Paper prototyping + user testing. http://www.slideshare.net/ginsburgdesign/an-agile-approach-to- iphone-design-paper-prototyping-user-testing• Spool, J.M. (2005). Seven Common Usability Testing Mistakes. http:// www.uie.com/articles/usability_testing_mistakes/
  28. 28. Thank You!• hans.poldoja@tlu.ee• http://imkedesign.wordpress.com

×