pie bellies, colonoscopies and the doorway of forgetfulness - structuring user experience to embrace...
DESCRIPTION
Research into physiology and psychology helps us understand how to make digital experiences compelling. The mechanics of experience include two systems in the brain which are responsible for both the "don't make me think" and the "do make me think" parts of a web experience. Tips for enhancing memory and avoiding the doorway of forgetfulness are included. Examples are included along with a redesigned shopping cart process.TRANSCRIPT
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?
• 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