Week 3 Ideation: sketching, storyboards, paper prototypes.

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


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”


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


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


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


Example, freehand sketches for Ticket Kiosk System


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


• 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


Storyboards

• “Comic-book” style illustration of scenario– Actors– Screens– Interaction– Dialogue showing sequences of flow from

frame to frame


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


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


Example: Interaction perspective storyboard sketches






https://www.pinterest.com/pin/478929741593985713/

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.

https://popapp.in/

https://popapp.in/

Importance of between-frame transitions

• Storyboard frames– Individual states – Static screenshots

• Frame-to-frame progression of interaction over time



• 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



• Make actions between frames part of what is sketched

• How?– Add frames that show circumstances that lead to

transitions– User thought bubbles, gestures, reactions


Example, storyboard transition frame

• Thought bubble explaining state change








In-class exercise

• Now build on those earlier sketches• This time draw storyboards• Same problem as before – based on



• 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

Week 3 Ideation: sketching, storyboards, paper prototypes.

Documents

design right

right design

design ideas

sketch itselfcopyright

itcopyright mkp

intersectingcopyright

ambiguous sketches

freehand sketches