week 3 ideation: sketching, storyboards, paper prototypes
TRANSCRIPT
Ideation
• Coming up with ideas for design• Starting point is divergent … storming
– Create many ideas– Explore very different possibilities– Fast and avoid critique– Collaborative
• Later convergent … critiquing– Compare what has been created– Evaluate it and identify best elements in each design– Potentially combine elements from different designs
Buxton, B. (2010). Sketching user experiences: getting the design right and the right design: getting the design right and the right design. Morgan Kaufmann.>1100 Google Scholar citations
Sketching
• Sketches are not prototypes to refine a design
• Sketches are for exploring design ideas and expanding them
• Buxton: think of difference:– Sketch of a mobile phone design– Sketch of the experience of using it
Copyright MKP. All rights reserved. 7
Sketching
• Sketching is essential to ideation and design– When you are designing, you must be
sketching
• Adds “cognitive supercharging”
Copyright MKP. All rights reserved. 9
Use language of sketching
• The vocabulary of lines– Freehand “open” gestures– Roughed in, not connected precisely– Overlap, often extending a bit beyond corner– Sometimes they “miss” intersecting
Copyright MKP. All rights reserved. 10
Use language of sketching
• Sketches are deliberately ambiguous • Sketches are abstract, leaving “holes” for
interpretation, imagination
Buxton’s defining characteristics
• Everyone can sketch; you do not have to be artistic
• Most ideas are conveyed more effectively with a sketch than with words
• Sketches are quick and inexpensive to create; they do not inhibit early exploration
• Sketches are disposable; there is no real investment in sketch itself
Copyright MKP. All rights reserved. 13
Buxton’s defining characteristics
• Sketches are timely– Can be made just-in-time– Done in-the-moment
• Sketches should be plentiful– Entertain large number of ideas– Make multiple sketches of each idea
• Textual annotations play essential support role
Copyright MKP. All rights reserved. 14
In-class exercise
• Startup– Form a team of 2-3 people sitting near each
other.– Each person writes down your special
approach for the
Web-based interface that is expressly designed to support “young adults” in learning more effectively about some aspects of health.
Web-based interface that is expressly designed to support “young adults” in learning more effectively about some aspects of health.
• Select a special approach. Also, consider:• Add just a small number of self-test questions, at
the start and at the end of the page
• Select the topic – ideally one your group is tackling but also consider:– Reducing consumption of soft drinks and alcohol– Eating more vegetables– Achieving healthy levels of activity– Avoiding unhealthy levels of inactivity– Doing weight training to improve posture
Note:
• Keep all your results from this exercise• Use it as the basis of your homework• We do a second activity later in the class• It also contributes to the homework
Web-based interface that is expressly designed to support “young adults” in learning more effectively about some aspects of health.
• Ideation sketching– Everyone in turn, start throwing out ideas for
discussion. – Then, in parallel, each make sketches
simultaneously (flowing the description of sketching in the book). Remember that a sketch is not just a picture; it’s a conversation.
– No critiquing for 5 minutes – or while ideas flow.
– No idea is too far out.– When that well starts running dry, switch to
critiquing and evaluate the ideas, winnowing out the most promising ones.
Storyboards • Sequence of visual “frames” • Illustrating interplay between user and
envisioned system• Brings design to life in graphical “movie
clips”• Freeze-frame sketches of stories of how
people will work with system.• Visual design scenarios, envisioned
interaction design solutions
Copyright MKP. All rights reserved. 20
Storyboards
• “Comic-book” style illustration of scenario– Actors– Screens– Interaction– Dialogue showing sequences of flow from
frame to frame
Copyright MKP. All rights reserved. 21
Include things like these in your storyboards
• Hand-sketched pictures annotated with a few words
• All work practice that is part of task, not just interaction with system– Example, include telephone conversations
with agents outside system
• Sketches of devices and screens
Copyright MKP. All rights reserved. 22
Include things like these in your storyboards
• Any connections with system internals, for example, flow to and from a database
• Physical user actions• Cognitive user actions in “thought
balloons” • Extra-system activities, such as talking
with a friend about what ticket to buy
Copyright MKP. All rights reserved. 23
We sketched around for some time and picked certain view layouts, dismissing ugly and clumsy ones. That’s an easy start, took us 15 minutes.
Christian TietzePrototypes for Calendar Paste.
http://christiantietze.de/posts/2013/04/paper-prototype-calendar-paste/
… we took pictures of every view with our iPhones and determined which views were connected to one another in a little flow chart… then assembled a Keynote presentation with the appropriate dimensions and included the pictures I took… https://popapp.in/ compose shots of your paper prototype into an interactive picture prototype.
Importance of between-frame transitions
• Storyboard frames– Individual states – Static screenshots
• Frame-to-frame progression of interaction over time
Copyright MKP. All rights reserved. 30
Importance of between-frame transitions
• The dynamics in transitions between frames is where user experience lives
• Transitions are where users think• Cognitive affordances in your design earn their
keep• Help users think about what to do next• Where most problems for users, challenges for
designers
Copyright MKP. All rights reserved. 31
Importance of between-frame transitions
• Make actions between frames part of what is sketched
• How?– Add frames that show circumstances that lead to
transitions– User thought bubbles, gestures, reactions
Copyright MKP. All rights reserved. 32
Example, storyboard transition frame
• Thought bubble explaining state change
Copyright MKP. All rights reserved. 33
Example, storyboard transition frame
• Thought bubble explaining state change
Copyright MKP. All rights reserved. 34
Example, storyboard transition frame
• Thought bubble explaining state change
Copyright MKP. All rights reserved. 35
In-class exercise
• Now build on those earlier sketches• This time draw storyboards• Same problem as before – based on
Web-based interface that is expressly designed to support “young adults” in learning more effectively about some aspects of health.
Web-based interface that is expressly designed to support “young adults” in learning more effectively about some aspects of health.
• Storyboard– Select one approach each from earlier
• The most promising ones• Diverse ones so you explore a broader space
– Create storyboards for these for the user interaction
• Bring all these to class