Ideation & Sketching HCDE 518 Winter 2011 Hand outs: syllabus, A1, R1, Group form With credit to Jake Wobbrock, Dave Hendry, Andy Ko, Jennifer Turns, & Mark Zachry

Agenda Break – 10 mins Announcements, Hand in assignments Mid-Quarter Evaluation Sketching Critiques Lecture - Ideation Break – 10 mins Lecture – Sketching Activity – Filtering P2 Description Next Class Break – 10 mins Group Project Work Time - Ideation

Announcements R4 returned today A2 returned today

Sketching Critiques – Travel & Transportation Break into groups of about 4 people Take turns showing off and explaining your 3 sketches with each other Each critic should offer advice and feedback about the idea Strengths, Weaknesses, Originality, Feasibility Sketcher: take notes about what feedback was offered Critic: be critical, but constructive and courteous! Each critic should sign the page after the sketches and date it with today’s date

lecture – ideation

Ideation How to come up with lots of ideas? How to come up with the big ideas? How to refine those ideas? How to organize those ideas?

Within the Design Process

Idea Oscillation

Idea Oscillation

Creativity

How to inspire creativity? What do you currently do?

How to inspire creativity? Immerse yourself in the world for which you’re designing Generate ideas constantly Keep a book, you never know when you’re going to be inspired Sketch your vague ideas to think through them more clearly

How to inspire creativity? Explain your ideas to others regularly Feedback from others can inspire new ideas But make sure you don’t get stifled by it Take an outsider’s perspective on something you know Take an insider’s perspective on something you don’t know Take risks! Early in the design process, it won’t hurt

Think of the Children Children are creative because they don’t know the rules, and thus break them all the time Children don’t know the consequences, and thus are more likely to take risks

Other ideas Take things from one domain and try them in another Talk with other creative people Leave your comfort zone Be passionate about the topic Consider posting sketches around your workspace for inspiration and feedback Read science fiction

More ideas (Mountford 1990) New uses of the design Adapt the design to be like something else Modify the design for a new purpose Magnify—add to the design Minimize—subtract from the design Substitute within the design Rearrange the design Reverse or transpose the design Combine the design in an ensemble

Possible Futures Look to current trends and extrapolate future possibilities. The trends can be human, or technology, or both. Think sci-fi! Current trends Distributed, social, community-driven, bottomup, sensors, networks, ambient, invisible, mobile, reconfigurable, fashion, adaptive…

Roleplaying

Roleplaying Features Script Director Actors Audience Setting Performance or rehearsal? Props

Roles to Adopt The Explorer The Artist The Judge The Warrior gathers information and research The Artist generates new ideas in the early phases The Judge evaluates and filters the generated ideas The Warrior champions one idea and sets the course forward

Brainstorming Working in groups is essential to design Brainstorming can be fun and fruitful Keep the results of your user research handy during the process E.g., personas, scenarios, lists of design requirements

Rules for Brainstorming 1. Be visual 2. Defer judgment 3. Encourage wild ideas 4. Build on the ideas of others 5. Go for quantity 6. One conversation at a time 7. Stay focused on the topic

7 Brainstorming “Dos” (Tischler, Fast Company, 2001) 1. Sharpen the focus 2. Write playful rules 3. Number your ideas 4. Build and jump 5. Make the space remember 6. Stretch your mental muscles 7. Get physical

6 Brainstorming “Don’ts” (Tischler, Fast Company, 2001) 1. Let the boss speak first 2. Give everybody a turn 3. Ask the experts only 4. Go off-site 5. No silly stuff 6. Write down everything

Break – 10 minutes

lecture – sketching

Sketching - Overview What is sketching? Why do sketching? Sketching properties What is and is not a sketch? Sketching vs. prototyping

Sketching Definition A process that enables you to think through ideas and convey design ideas to others very early in the design phase

Why is sketching useful? Early ideation Think through ideas Force you to visualize how things come together Communicate ideas to others to inspire new designs Active brainstorming

Sketch as a dialog with the mind (new knowledge) Sketch (representation) (seeing that) (seeing as) Buxton, pp. 114

Buxton’s Sketch Properties Quick Timely Inexpensive Disposable Plentiful Clear vocabulary Distinct gesture Minimal detail Appropriate degree of refinement Suggest and explore rather than confirm Ambiguity

Quick A sketch is quick to make, or at least gives that impression

Timely A sketch can be provided when needed

Inexpensive Cost must not inhibit the ability to explore a concept, especially early in design

Disposable If you can’t afford to throw it away, it’s not a sketch Investment is in the process, not the physical sketch However, not “worthless”

Plentiful They don’t exist in isolation Meaning & relevance is in the context of a collection or series

Clear vocabulary The way it’s rendered (e.g., style, form, signals) makes it distinctive that it is a sketch Could be the way that a line extends through endpoints

Distinct Gesture Fluidity of sketches gives them a sense of openness and freedom Opposite of engineering drawing, which is tight and precise Vs.

Minimal Detail Include only what is required to render the intended purpose or concept

Appropriate Degree of Refinement Make the sketch be as refined as the idea If you have a solid idea, make the sketch look more defined If you have a hazy idea, the sketch will look much rougher and less defined

Suggest and explore rather than confirm Sketch should act as a catalyst to the desired and appropriate behaviors, conversations, and interactions

Ambiguity Intentionally ambiguous Value comes from being able to be interpreted in different ways, even by the person who created them

Sketch vs. Prototype Sketch Prototype Invite Attend Suggest Describe Explore Refine Question Answer Propose Test Provoke Resolve Tentative, non committal Specific Depiction The primary differences are in the intent

Is this a sketch? Why or why not?

Is this a sketch? Why or why not?

Is this a sketch? Why or why not?

Is this a sketch? Why or why not?

Is this a sketch? Why or why not?

Is this a sketch? Why or why not?

Is this a sketch? Why or why not?

Forms of Sketching? Note that the properties Buxton describes doesn’t mention anything about form factor Can be pencil/pen drawing on paper Something scraped together in Photoshop Traced photos Quick-and-dirty prototyping Magazine cut-outs Modifications to existing objects UI Tools

Paper Sketches Advantages Drawbacks support brainstorming do not require specification of details designers feel comfortable sketching can be created when/where needed back of the napkin Drawbacks do not evolve easily poor support for annotations force manual translation to computer do not allow end-user interaction

Tracing Photos Tracing over a photo to make it look “sketchy” Useful for people who can’t draw well Example: Open a photo in Illustrator and then trace over it Especially useful for hands

UI Tools Software tools like Balsamiq, Axure, or Visual Studio Drawbacks Require specification of details give specific instance of a general idea e.g., exact widgets, fonts, alignments, colors designers focus on unimportant details evaluators focus on wrong issues Take too much time to use Poor support for iterative design Used more for prototyping We’ll get to this in Prototyping lecture

Sketching Critiques Reflection on the process so far?

Why it’s important Ideas are both good and bad Both are useful in design By making clear what’s a bad design, we can avoid actually implementing it Collectively, feedback can turn a good idea into a great idea Filtering Brainstorming generates too many ideas to actually implement

Filtering: How to do it? Talk about the strengths of the idea Talk about the weaknesses Discuss the feasibility of it Discuss the originality of it Sort into piles of good, okay, and not possible

P2 – Ideation & Sketching Due next week As a team, conduct a brainstorming session where you generate at least 4 ideas per person (e.g., 20 total ideas for a 4 person team) FEEL FREE TO GO FOR MORE More is better! As a team, filter down the ideas by discussing their strengths and weaknesses and pick the best three Resketch these 3 ideas more neatly and provide written justification for why they’re the best

Activity: Filtering Practice Sketches generated from a brainstorm session with my directed research group Topic: Technology that could support healthy sleep behaviors

Break – 10 minutes

Readings Discussion Buxton, W. (2007) Selections from Sketching User Experiences. San Francisco: Morgan Kaufmann, pp. 104-141. Buxton, W. (2007) It was a dark and stormy night. Sketching User Experiences. San Francisco: Morgan Kaufmann, pp. 261-271. Moggridge, B. (2007) Futures and alternative nows. Ch. 9 in Designing Interactions. Cambridge, MA: The M.I.T. Press, pp. 587-611. Tischler, L. (2001) Seven secrets to good brainstorming. Fast Company Magazine, Feb. 2001.http://www.fastcompany.com/articles/2001/03/kelley.html Tischler, L. (2001) Six surefire ways to kill a brainstorm. Fast Company Magazine, Feb. 2001.http://www.fastcompany.com/articles/2001/03/kelley2.html

Next Class Tuesday, February 15th Due Next Week Prototyping P2 – Ideation Reflection 6 Sketching, Week 5 3 sketches relating to “Education” class lectures, assignment turn-ins, elementary school, improving HCDE 518, etc.

Group Project Meet Time - ideation