visual thinking: working with pictures
TRANSCRIPT
Visual Thinking
Working with Pictures
Christina Wodtke
Why draw?Think of a chair
1. Communic
ate
2. Problem Solving
3. Listening
and Remember
ing
Who Draws?
Zaha Hadid
Chefs Jason Chan and Grant Achitz
Don’t Worry
Pareidolia
Warm Up
Draw together
What can we make?Let’s start with story….
MIND MAPS
Gather your Thoughts
I feel like drawing slows me down to give me thinking time.
-Andrew Reid
ANDREW REID, GAME DESIGNER
MIND MAPS FOR GAME DESIGN
01WORLD IA DAY 2017
HEADER
OF THIS
PAGE
From Rolf Faste’s MindMapping article
The basic principles of mind mapping are:
1 Create a Center Statement.
2 Develop ideas radially outward.
3 Capture ideas quickly.
4 Use lines to show connections.
5 Create train-of-thought structures.
6 Follow an idea as far as it will go.
7 Work from the known to the unknown.
8 Return to the center when ideas are exhausted.
9 Increase density to create richness.
10 Avoid being judgmental.
11 Have fun with the form.
HOW I FEED MYSELF
5 Minutes
STORY
1o minutes: Using your drawing skills, Tell your story
Lunch
1o minutes: Using your drawing skills, Tell your story
One minute pitch.
Dotmocracy
Dan roam
MODEL EVERYTHING!
Five SIX models for making sense
Scott Bernatino
01WORLD IA DAY 2017
•Maps, Models,
Canvases
“VISUAL MODELS ARE ALL ABOUT MEANING THROUGH SPATIAL
ARRANGEMENT”- STEPHEN P ANDERSON
01WORLD IA DAY 2017
DAVE GRAY
ILLUSTRATION MODEL
SYSTEM MODELS
Map the System
Microwave system model
http://sce.uhcl.edu/whiteta/sdp/createSystemModel.html
BBC Weather
Sitemap http://www.bbc.co.uk/blogs/bbcinternet/2011/11/b
bc_weather_design_refresh.html
From Stone Librande’s One Page Designs
MENTAL MODELS
Understand the Customer’s
Point of View
01WORLD IA DAY 2017
Center for research on Environmental Decisions
http://guide.cred.columbia.edu/guide/sec1.html
A mental model represents a person’s thought process for how something works (i.e., A person’s understanding of the surrounding world). Mental models, which are based on often-incomplete facts, past experiences, and even intuitive perceptions, help shape actions and behavior, influence what people pay attention to in complicated situations, and define how people approach and solve problems.
Draw Toast
“Draw a picture of how to make toast. That is, darkened crispy
bread.
Use no words in your diagram.
Try to illustrate the important actions to someone who has never made toast before.”
CONCEPT MODELS
Visual Explanations
01WORLD IA DAY 2017
Sunni Brown
Doodle Revolution
ELEMENTS & RELATIONSHIPS
(Systems, a la Brown)
Chris Crawford explains different kinds of playhttp://www.scottkim.com.previewc40.carrierzone.com/thinkinggames/whatisapuzzle/index.html
http://www.erasmatazz.com/library/the-journal-of-computer/jcgd-volume-4/my-definition-of-game.html
Don Norman, Drawn by me.
Dan Roam
Drawn by me, @cwodtke
Freelist all the Elements of a Performance Review
5 minutes
PROCESSES
Today Team explains their offering
Innoenergy Process
Andrew Reid
How to Poach an egg,
by @cwodtke
Draw the process of a performance
review,
Five minutes
ShareHow should it be?
WireFlowsSimple thumbnails to represent the flow of the experience
Wireflow
• Shows how the product works. Screens are sketchy.
• Nodes and Connectors
Draw a flow….5 minutes
One minute pitch.
Dotmocracy
Key ScreenUpsell page, or key value moment
Landing page OR Page demonstrating key value.
Draw the Box
• What’s it called?
• Who’s it for?
• What’s its tagline or slogan?
• What are its most compelling features? Benefits?
• What imagery would make it stand out to you?
DRAW: Key Screen or Box5 minutes
One minute pitch.
Dotmocracy
COMPARISONS
Exploring why
different services
suck in their own
special way. https://medium.com/@cwo
dtke/a-theory-of-form-for-
digital-products-
f5f605adae84#.51ie4d1vq
Uncovering the Secrets of Mammoth Island
Understanding
Comics
Scott McCloud
01WORLD IA DAY 2017
2x2’s are ALL about
comparisons!
Drawing Ideas
Separately, Silently Draw a comparison5 minutes
Share Out
CONCEPT MODELSFOR WORK
Kitten Farming concept by Daniel Cook, CCO of SpryfoxFor thinking
Robin Hunicke
01WORLD IA DAY 2017
For Communicating
• Conceptual Blueprint by
Andrew Hinton of The
Understanding Group
Stone Librande
Stone Librande
HOW FANCY SHOULD THEY BE?
Stephen p anderson
Bill Verplank
01WORLD IA DAY 2017
A simple model you
can draw on a
whiteboard becomes a
meme.
Is this why Lean
Startup is huge?
01WORLD IA DAY 2017
Determine the GOAL: how will the model be used, by whom? What is the job of the model? To change minds, explain a concept, simplify complexity?
INVENTORY THE CONCEPTS: brainstorm many parts of your concept. Keep adding more in the margins as you go.
INSPECT THE CONCEPTS: are there many concepts hiding in one? Do you really understand each idea?
Determine the RELATIONSHIPS: how do the concepts interact?
Decision point: do i understand the ideas and what i’m trying to communicate?
Test: ask yourself if the model “feels” right.
If yes, then continue.
ITERATE with words and pictures: talk to yourself and draw it out!
EVALUATE with yourself/the client: keep making sure the drawings match the ideas you wish to communicate. Don’t punk out early! Rest if you need to!
Decision point: does my audience understand the ideas and what i’m trying to communicate?
Test: can my audience answer key questions with the model?
If yes, then continue.
REFINE: use color, type, line weight, and labels to make sure you are communicating clearly.
01WORLD IA DAY 2017Dave gray
What should I draw?
• Consider the elements
01WORLD IA DAY 2017Dave gray | http://www.xplaner.com/visual-thinking-school/
What should I draw?
Consider the purpose
PARTICIPATORYCONCEPT MAPS?!?
Dave gray
01WORLD IA DAY 2017
MIND MAPS, to gather your thoughts
CONCEPT MAPS, to organize your understanding
SYSTEM MAPS, to map the system (a tautology, but an accurate one)
MENTAL MODELS, to understand and communicate your user’s understanding
CONCEPT MODELS, to message a way to think about a complex system
And Canvases!
01WORLD IA DAY 2017
Thank you.
Questions?
For workshops & Other inquires:
Christina Wodtke
@Cwodtke
Cwodtke.comArt by Amelie Wodtke Sarrazin
http://evalotta.pancakeapps.com/