pie bellies, colonoscopies and the doorway of forgetfulness - structuring user experience to embrace...

Pie-bellies, Colonoscopies

and the Doorway of Forgetfulness

Corinne Erly BrownWeb Manager, Sr. Information

ArchitectSeattle Public Utilities

The mechanics

1. Start with ease.

2. The best journeys are hard.

3. Create a satisfying ending.

4. Protect memory. It’s fragile.

Web experience in four acts

We like complicated.

Everything is a story

The machinery of experience

© Katherine B. Turner/UW Admissions

Story arc – three acts

Web experience – four acts

The beginning – ease

System 1 – Things are easy

Go with the gut

Cognitive ease

Being happy helps

sleep mail switch

salt deep foam

Feels good

seasalt deep foam

A bat and ball cost $1.10. The bat costs one dollar more than the ball.How much does the ball cost?

Is overconfident

$1.05 (ball)$1.05 (bat)$1.10 (total)

$1.10 (ball)$1.10 (bat)$1.20 (total)

Is good at…

Less

More

The halo effect

Try not. Do, or do not.

There is no try.

Root for the hero

Private Henry E. Crouch, Company D, 45 th Massachusetts Infantry.

(CDV Courtesy Don Ryberg Collection).

A hero is one person

Priming

The body temperature of a chicken...

The illusion of the familiar

… is 102 – 103 degrees Fahrenheit.

The illusion of the familiar

Emotion = intensity, not numbers

How much would you pay?

Average donations were:• $80 to save 2,000•$78 to save 20,000 •$88 to save 200,000

A massive flood somewhere in North America next year, in which more than 1,000 people drown.

Or…

An earthquake in California sometime next year, causing a flood in which more than 1,000 people drown.

Prefers plausible over probable

Some drawbacks

Ice cream

We are more gullible

If our mind is otherwise engaged.

8 Ways – System 1

The middle – The best journeys are hard

Pie-bellies

Microtension

System 2 - Things get difficult

prefrontal

cortex

Increased cognitive load

The path of least resistance

System 2 is lazy.

jQuery(document).ready(function () { jQuery('#awesome-graph').tufteBar({ data: [ // First element is the y-value // Other elements are arbitary - they are not used by the lib // but are passed back into callback functions [1.0, {label: 'Dog'}], [1.3, {label: 'Raccoon'}], // etc... // For stacked graphs, pass an array of non-cumulative y values [[1.5, 1.0, 0.51], {label: '2005'}] ], // Any of the following properties can be either static values // or a function that will be called for each data point. // For functions, 'this' will be set to the current data element, // just like jQuery's $.each // Bar width in arbitrary units, 1.0 means the bars will be snuggled // up next to each other barWidth: 0.8, // The label on top of the bar - can contain HTML // formatNumber inserts commas as thousands separators in a number barLabel: function(index) { return $.tufteBar.formatNumber(this[0]) + 'x' }, // The label on the x-axis - can contain HTML axisLabel: function(index) { return this[1].label }, // The color of the bar color: function(index) { return ['#E57536', '#82293B'][index % 2] }, // Stacked graphs also pass a stackedIndex parameter color: function(index, stackedIndex) { return ['#E57536', '#82293B'][stackedIndex % 2] }, // Alternatively, you can just override the default colors and keep // the built in color functions colors: ['#82293B', '#E57536', '#FFBE33'], // Legend is optional legend: { // Data can be an array of any type of object, but the default // formatter works with strings data: ["North", "East", "West"], // By default, the colors of the graph are used color: function(index) { return ['#E57536', '#82293B'][index % 2] }, // You can customize the element label - can contain HTML label: function(index) { return this } } }); });

Relative happiness of rabbits

How do we use System 2?

How do we use System 2?

How do we use System 2?

• tongue • authority • likeness• stout• freckled • lozenges

Memory - depth of processing

• tongue • authority • likeness• stout• freckled • lozenges

Depth of processing

Definition of TONGUE1a : a fleshy movable muscular process of the floor of the mouths of most vertebrates that bears sensory end organs and small glands and functions especially in taking and swallowing food and in humans as a speech organ b : a part of various invertebrate animals that is analogous to the tongue 2: the flesh of a tongue (as of the ox or sheep) used as food 3: the power of communication through speech

Depth of processing

Mention money

1. Tempt with something new 2. Reduce legibility 3. Eliminate photos and graphics 4. Mention money 5. Create a sense of progress with

small rewards

5 ways to create microtension

The call to action - triumph

Colonoscopies

Peak – End Averaging

Which one would you do again?

60 secondsor 90 seconds?

Importing Bookmarks - Chrome

A big reward

2 ways – Satisfying ending

Memory

The Doorway of Forgetfulness

I know I came in here for

something…

Cuing - Getting information into

long-term memory

The doorway offorgetfulness

Preventionattempt

Where are the cues?

Enlist the senses – dual coding

Enlist the senses – dual coding

Repetition increases importance

Emotion trumps repetition

4 ways -Doorway of Forgetfulness

44% - shipping and handling too high41% - not ready to purchase27% - wanted to compare prices25% - price higher than expected21% - want to save for later

Top 5 reasons aren’t usability issues.

Checkout fail

A shopping cart redesign

1. Start with ease. Create trust.

2. The best journeys are hard. Use microtension and small rewards.

3. Create a satisfying ending. Peak – end averaging.

4. Protect memory. It’s fragile. Beware the doorway of forgetfulness.

The experience

“The world makes much less sense than you think. The coherence comes mostly from the way your mind works.”

– Daniel Kahneman, Winner of the Nobel Prize in Economics

Questions?

corinne.brown@seattle.gov

• Kahneman, Daniel. Thinking, Fast and Slow. New York: Farrar, Straus and Giroux, 2011.

• Thaler, Richard H. and Cass S. Sunstein. Nudge. New York: Penguin, 2009.

• Forrester Resesarch: North American Technographics’ Retail Online Survey, Q3 2009 (US)

• Quarterly Journal of Experimental Psychology. [Gabriel A. Radvansky, Sabine A. Krawietz, and Andrea K. Tamplin, "Walking through doorways causes forgetting: Further explorations.”]http://www.nd.edu/%7Ememory/Reprints/Radvansky%20Krawietz%20&%20Tamplin%202011%20%28QJEP%29.pdf

• Duhigg, Charles. Habits: How They Form And How To Break Them. http://www.npr.org/2012/03/05/147192599/habits-how-they-form-and-how-to-break-them

References and Credits

• Running girls with snowballs: Katherine B. Turner, UW Admissions• Molly Moon’s photo:

http://seattle-daily-photo.blogspot.com• Story arc image ref: http://www.musik-therapie.at/PederHill/Structure&Plot.htm• http://www.sony.com/spider-man/• The Hyiades and Pleiades. Copyright: Alson Wong. jodrellbank.manchester.ac.uk• http://www.theblaze.com/blog/2012/02/06/money-romney-money-romney-

money/romney-21/• Oil soaked bird – Frederick Larson, Chronicle,

http://frogsaregreen.com/2716/how-the-gulf-oil-spill-threatens-birds/• Civil War Soldier:

http://www.civilwar-photos.com/monthly.htm• Tom Douglas, Palace Kitchen Menu: http://tomdouglas.com/index.php?

page=palace-kitchen-dinner• Simpsons Trivia, Homer’s Brain:

http://www.simpsonstrivia.com.ar/wallpapers/homer-simpson-wallpaper-brain.htm

References and Credits