Sketching the User Experience

a workshop for Civic Design Camp (http://civicdesigncamp.org/) on April 12, 2014

Transcript

1. sketching the 
 user experience civic design camp 04.12.14! @tchu88
2. 2.00: hellos 2.05: what is a sketch? 2.15: the anatomy of a sketch 2.20: four sketching exercises 2.55: share
3. before we begin 1. Draw a picture of yourself as a robot. 2. Write your name on it. 3. Map yourself on this matrix over here >>
4. what is a sketch? and what is not?
5. sketch [skech] a simply or hastily executed freehand drawing, that is not intended as a finished work. Especially a preliminary one, giving essential features without the details. –Merriam-Webster this is not a sketch. http://images1.fanpop.com/images/photos/2500000/Edward-Bella-Drawing- twilight-series-2587122-1076-833.jpg
6. a few types of ‘user experience sketches’
7. 1 visual recording / sketchnotes http://s3files.core77.com/blog/images/2011/06/sketchnotes-kleon.jp
8. 2 concept diagrams http://www.agilemodeling.com/images/models/classDiagramSketch.JPG
9. 3 storyboards http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg
10. 4 UI sketches http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg
11. “wiggly wireframes” - not a sketch?
12. Jack Dorsey twttr sketch, March 24, 2006 Bill Buxton, Sketching the User Experience
13. Sketches do not have to be pretty, beautiful, or even immediately understandable by others. However, you should be able to explain your sketches and ideas when anyone asks about them. ! >> Sketching User Experiences: The Workbook (Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt, Bill Buxton)
14. why sketch? "Words are powerful, but sometimes they don't cut it. We can try to describe what we are imagining, but a diagram often gets us to a common ground quicker.” >> Jared Spool
15. when sketching can be used prettier sketches live meeting sketches on-the-fly sketches
16. anatomy of a sketch.
17. Jason Mesut and Sam Smith, RMA-Consulting
18. Jason Mesut and Sam Smith, RMA-Consulting
19. Jason Mesut and Sam Smith, RMA-Consulting
20. Jason Mesut and Sam Smith, RMA-Consulting
21. exercise 1 Parallel lines Intersecting lines Boxes; boxes in boxes with different line weights Circles
22. elements of the user experience.
23. Jason Mesut and Sam Smith, RMA-Consulting
24. a few common UX objects Buttons Comment / Tool tip Arrows Menus
25. Hands Jason Mesut and Sam Smith, RMA-Consulting
27. highlighting a sketch http://culturedcode.com/things/iphone/makingof/ http://dribbble.com/shots/192999--O-Folhetim-sketches
29. using color Jason Mesut and Sam Smith, RMA-Consulting
30. adding depth http://www.uxbooth.com/blog/tools-for-sketching-user-experiences/ early ember sketches early vimeo sketches
31. http://www.youtube.com/watch?v=TuQbzTwYHTA
32. exercise 3 Reverse wireframe: quickly sketch an existing wireframe. To see and better understand the structure of the UI To develop sketching skills in isolation from solving design problems
34. sketching storyboards 
 to convey experiences
35. Start with thumbnails (low pressure!) Avoid detail Think of use of space, organization, navigation, orientation Think of storyboards as thumbnails Baskinger: Interactions Magazine, April 08
37. Storyboard by Continuum
38. mattress instruction manual, IKEA
39. Jason Mesut and Sam Smith, RMA-Consulting
40. Jason Mesut and Sam Smith, RMA-Consulting
41. Jason Mesut and Sam Smith, RMA-Consulting
43. exercise 4 What is your favorite non-digital user interface experience? 1. Take 2 min to sketch a 3-panel storyboard of you using it. 2. Can your partner tell what it is? 3. Explain your sketch and thought process.
45. http://uxpin.com/web-kit.html (analog) tools of the trade http://www.adaptivepath.com/ideas/essays/
 archives/001072.php
46. here are more resources • SarahBloomer | Sketching 2012 • Smashing Magazine: The Messy Art of UX Sketching • Jackson Fox’s “Sketching 101” • Aaron Irizarry’s “A Sketch is Worth a Thousand Words” • Jason Mesut + Sam Smith’s “The art of sketching interfaces” + special thanks to Sarah Bloomer for inspiring this workshop.
47. Every creator painfully experiences the chasm between his inner vision and its ultimate expression. ! >> Isaac Bashevis Singer