Introduction to prototyping for user interface design, including how prototyping fits into an overall design thinking process. Presented at University of Iowa's Dev/Iowa Bootcamp, June 2014 (http://www.iowajpec.org/entrepreneur-support/deviowa/). Recommended reading: http://www.amazon.com/Paper-Prototyping-Interfaces-Interactive-Technologies/dp/1558608702/ http://rosenfeldmedia.com/books/prototyping/ http://rosenfeldmedia.com/books/see-what-i-mean/

1. prototyping
!
David Sturtz
david@davidsturtz.com
twitter: @sturtz

2. [Explaining prototyping
to a five-year-old.]

3. Frozen storyboard image. (Walt Disney Pictures) via NPR
http://www.wbur.org/npr/247209372/for-top-flight-animators-the-gag-is-an-art-all-its-own

4. Prototypes
tell a story.

5. We prototype
to think.

6. We prototype
to learn.

7. We prototype
to decide.

8. Design Thinking
“a human-centered, creative, iterative,
and practical approach to finding the best
ideas and ultimate solutions.”
— Tim Brown, IDEO

13. Empathize
Observe
Engage
Immerse

14. INTERVIEWS + ETHNOGRAPHY
Tools
Telephone
Skype / Video Chat
Web conferencing/screen
sharing applications
Digital photos
Blogs, notebooks, diaries
!
empathize
What is it?
An open-ended conversation
with users about your area of
interest.
!
Why do it?
The best bang-for-your-buck as
a first step in getting to know
your users.
Allow these conversations to
snowball using affinity
diagramming and mental models.
!
Pay attention to tasks and goals.

15. EMPATHY MAP
empathize

16. PARTICIPATORY DESIGN
Tools
Paper, scissors, glue
YUI Design Stencils
Other images
empathize
What is it?
A tangible representation of a
system
!
Why do it?
Fun for everyone. Allows
participants to express needs
in a different format. We’re not interested in the actual
prototypes as much as the
conversations about the reasons
behind them.

17. PARTICIPATORY DESIGN
empathize

18. PARTICIPATORY DESIGN
empathize

19. Define
[USER] needs to [USER’s NEED]
because [SURPRISING INSIGHT].
Analogy
Design Principles

20. Ideate
1. Defer judgment
2. Encourage wild ideas
3. Build on the ideas of others
4. Stay focused on the topic
6. Be visual
7. Go for quantity

21. Prototype
If a picture is worth a thousand words,
a prototype is worth a thousand pictures.

22. “Prototypes should only command as much
time, effort, and investment as are needed to
generate useful feedback and evolve an idea.”
— Tim Brown, IDEO
http://www.ideo.com/images/uploads/thoughts/IDEO_HBR_Design_Thinking.pdf

23. SKETCHBOARDS
getting organized

24. USER FLOWS
prototyping

25. CUSTOMER JOURNEY MAPS
prototyping

26. STORYBOARDS / COMICS
prototyping

27. PAPER PROTOTYPES
prototyping

28. WIZARD OF OZ
prototyping

29. PAPER + POWERPOINT
prototyping

30. BALSAMIQ MOCKUPS
prototyping
Balsamiq Mockups

31. AXURE
prototyping
Axure RP

32. HTML / BOOTSTRAP / ETC.
prototyping
getbootstrap.com
getclank.com
foundation.zurb.com
!
jetstrap.com
easel.io
!
framerjs.com

33. WEB-BASED TOOLS
Tools
Mockflow
Proto.io
ProtoShare
HotGloo
FluidUI
InvisionApp
... etc.
prototyping

34. ADOBE EDGE REFLOW
prototyping

35. PATTERN LIBRARIES
prototyping

36. Recommended…
Design Thinking
http://dschool.stanford.edu/use-our-methods/
http://www.ideo.com/images/uploads/thoughts/IDEO_HBR_Design_Thinking.pdf
!
Customer Journey Mapping
http://www.servicedesigntools.org/
http://mappingexperiences.com
!
Comics
http://kevnull.com/creating-concepts-through-comics
http://alistapart.com/article/see-what-i-mean
designcomics.org
!
Design Pattern Libraries
http://ui-patterns.com/
https://ux.mailchimp.com/patterns/
https://developer.yahoo.com/ypatterns/about/libraries.html
!

37. Recommended…

38. prototyping
!
David Sturtz
david@davidsturtz.com
twitter: @sturtz

39. Photo Credits
"Shaping" by Becky Wetherington
https://www.flickr.com/photos/macbeck/3949856872
"Tea Anyone?" by Manish Bansal
https://www.flickr.com/photos/bansal98/2318035539
"Lauri at the Wheel" by kellinahandbasket
https://www.flickr.com/photos/kellinahandbasket/
2183799236
"Trimmed Bowls" by Martin Cathrae
https://www.flickr.com/photos/suckamc/2829328496