week 3 ideation: sketching, storyboards, paper prototypes

38
Week 3 Ideation: sketching, storyboards, paper prototypes

Upload: eileen-fowler

Post on 28-Dec-2015

225 views

Category:

Documents


2 download

TRANSCRIPT

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.

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

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.

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

Summary

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