Week 3 Ideation: sketching, storyboards, paper prototypes

Introduction Copyright MKP. All rights reserved. 2

Ideation Methods Brainstorming Sketching Storyboards

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 Embodied cognition – mind + drawing action

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

Example, a sketch to think about a design 8

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

Example, free-hand sketch of Ticket Kiosk System design

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

Example, freehand sketches for Ticket Kiosk System Copyright MKP. All rights reserved. 15

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.

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

Example: Interaction perspective storyboard sketches Copyright MKP. All rights reserved. 24

Example: Interaction perspective storyboard sketches Copyright MKP. All rights reserved. 25

Example: Interaction perspective storyboard sketches Copyright MKP. All rights reserved. 26

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 Tietze Prototypes for Calendar Paste.

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

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

Summary Ideation Brainstorming Sketching Storyboards Benefits, arguments to do it Limitations Timing in the design process