SlideShare a Scribd company logo
1 of 126
Pie-bellies,
     Colonoscopies
        and the
Doorway of Forgetfulness
     Corinne Erly Brown
 Web Manager, Sr. Information
          Architect
    Seattle Public Utilities
The mechanics
Web experience in four acts

1. Start with ease.

2. The best journeys are hard.

3. Create a satisfying ending.

4. Protect memory. It’s fragile.
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
Feels good


sleep     mail   switch

 salt     deep   foam
sea
salt   deep   foam
Is overconfident

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

  $1.10 (ball)               $1.05 (ball)
  $1.10 (bat)                $1.05 (bat)
  $1.20 (total)              $1.10 (total)
Is good at…
Less
More
The halo effect


           Try not.
        Do, or do not.
        There is no try.
Root for the hero
A hero is one person



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

(CDV Courtesy Don Ryberg Collection).
Priming
The illusion of the familiar




The body temperature of a
 chicken...
The illusion of the familiar




… is 102 – 103 degrees Fahrenheit.
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
Prefers plausible over probable

               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.
Some drawbacks
Ice cr m
      ea
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?
Memory - depth of processing

        •   tongue
        •   authority
        •   likeness
        •   stout
        •   freckled
        •   lozenges
Depth of processing

•   tongue
•   authority
•   likeness
•   stout
•   freckled
•   lozenges
Depth of processing
Definition of TONGUE
1a : 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
Mention money
5 ways to create microtension
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
The call to action - triumph
Colonoscopies
Peak – End Averaging
Which one would you do again?


             60 seconds
             or
             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…
The doorway of
  forgetfulness


 Cuing - Getting
information into
   long-term
    memory
Prevention
 attempt
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
Checkout fail

44% - shipping and handling too high
41% - not ready to purchase
27% - wanted to compare prices
25% - price higher than expected
21% - want to save for later

       Top 5 reasons aren’t usability issues.
A shopping cart redesign
The experience

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 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
References and Credits
• 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&
• Duhigg, Charles. Habits: How They Form And How To Break Them.
  http://www.npr.org/2012/03/05/147192599/habits-how-they-form-and-
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
•   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

More Related Content

Similar to Pie Bellies, Colonoscopies and the Doorway of Forgetfulness - Structuring User Experience to Embrace Complexity

Roald Dahl Quote Good Writing Is Essentially Rewriti
Roald Dahl Quote Good Writing Is Essentially RewritiRoald Dahl Quote Good Writing Is Essentially Rewriti
Roald Dahl Quote Good Writing Is Essentially RewritiJessica Huston
 
Reaching net-generation learners with social technologies
Reaching net-generation learners with social technologiesReaching net-generation learners with social technologies
Reaching net-generation learners with social technologiesguestba21f9
 
Reaching Net Generation Learners with social technologies - CDIO 2008
Reaching Net Generation Learners with social technologies - CDIO 2008Reaching Net Generation Learners with social technologies - CDIO 2008
Reaching Net Generation Learners with social technologies - CDIO 2008Maarten Cannaerts
 
How To Write A Conclusion To A Research Paper
How To Write A Conclusion To A Research PaperHow To Write A Conclusion To A Research Paper
How To Write A Conclusion To A Research PaperPatty Joseph
 
College Scholarship Essay Sample - How To Create A
College Scholarship Essay Sample - How To Create ACollege Scholarship Essay Sample - How To Create A
College Scholarship Essay Sample - How To Create ALindsay Alston
 
Lecture 9 - New Paradigms, New Technologies, and Your Asset Creation - 6 Ma...
Lecture 9 -   New Paradigms, New Technologies, and Your Asset Creation - 6 Ma...Lecture 9 -   New Paradigms, New Technologies, and Your Asset Creation - 6 Ma...
Lecture 9 - New Paradigms, New Technologies, and Your Asset Creation - 6 Ma...Fahri Karakas
 
Presidential Essay Topics
Presidential Essay TopicsPresidential Essay Topics
Presidential Essay TopicsApril Lynn
 
Narrative Essay Writing An Essay Fo
Narrative Essay Writing An Essay FoNarrative Essay Writing An Essay Fo
Narrative Essay Writing An Essay FoAndrea Christian
 
Life Experience Essay Sample.pdf
Life Experience Essay Sample.pdfLife Experience Essay Sample.pdf
Life Experience Essay Sample.pdfMichelle Stefanich
 
Life Experience Essay Sample.pdf
Life Experience Essay Sample.pdfLife Experience Essay Sample.pdf
Life Experience Essay Sample.pdfLory Holets
 
milestone-5-stretching
milestone-5-stretchingmilestone-5-stretching
milestone-5-stretchingJohanna Jan
 
Can You Use I In A Narrative Essay
Can You Use I In A Narrative EssayCan You Use I In A Narrative Essay
Can You Use I In A Narrative EssayAndrea Lawson
 
How To Write A Cause And Effect Paper. How To Write
How To Write A Cause And Effect Paper. How To WriteHow To Write A Cause And Effect Paper. How To Write
How To Write A Cause And Effect Paper. How To WriteSusan Cox
 
Silence Of The Lambs Analysis Essay
Silence Of The Lambs Analysis EssaySilence Of The Lambs Analysis Essay
Silence Of The Lambs Analysis EssayErin Sanders
 
Essay Simple Life. Online assignment writing service.
Essay Simple Life. Online assignment writing service.Essay Simple Life. Online assignment writing service.
Essay Simple Life. Online assignment writing service.Becky Smith
 

Similar to Pie Bellies, Colonoscopies and the Doorway of Forgetfulness - Structuring User Experience to Embrace Complexity (19)

Roald Dahl Quote Good Writing Is Essentially Rewriti
Roald Dahl Quote Good Writing Is Essentially RewritiRoald Dahl Quote Good Writing Is Essentially Rewriti
Roald Dahl Quote Good Writing Is Essentially Rewriti
 
Reaching net-generation learners with social technologies
Reaching net-generation learners with social technologiesReaching net-generation learners with social technologies
Reaching net-generation learners with social technologies
 
Reaching Net Generation Learners with social technologies - CDIO 2008
Reaching Net Generation Learners with social technologies - CDIO 2008Reaching Net Generation Learners with social technologies - CDIO 2008
Reaching Net Generation Learners with social technologies - CDIO 2008
 
How To Write A Conclusion To A Research Paper
How To Write A Conclusion To A Research PaperHow To Write A Conclusion To A Research Paper
How To Write A Conclusion To A Research Paper
 
College Scholarship Essay Sample - How To Create A
College Scholarship Essay Sample - How To Create ACollege Scholarship Essay Sample - How To Create A
College Scholarship Essay Sample - How To Create A
 
Lecture 9 - New Paradigms, New Technologies, and Your Asset Creation - 6 Ma...
Lecture 9 -   New Paradigms, New Technologies, and Your Asset Creation - 6 Ma...Lecture 9 -   New Paradigms, New Technologies, and Your Asset Creation - 6 Ma...
Lecture 9 - New Paradigms, New Technologies, and Your Asset Creation - 6 Ma...
 
Presidential Essay Topics
Presidential Essay TopicsPresidential Essay Topics
Presidential Essay Topics
 
Narrative Essay Writing An Essay Fo
Narrative Essay Writing An Essay FoNarrative Essay Writing An Essay Fo
Narrative Essay Writing An Essay Fo
 
Life Experience Essay Sample.pdf
Life Experience Essay Sample.pdfLife Experience Essay Sample.pdf
Life Experience Essay Sample.pdf
 
Life Experience Essay Sample.pdf
Life Experience Essay Sample.pdfLife Experience Essay Sample.pdf
Life Experience Essay Sample.pdf
 
milestone-5-stretching
milestone-5-stretchingmilestone-5-stretching
milestone-5-stretching
 
UX design 101
UX design 101UX design 101
UX design 101
 
Can You Use I In A Narrative Essay
Can You Use I In A Narrative EssayCan You Use I In A Narrative Essay
Can You Use I In A Narrative Essay
 
How To Write A Cause And Effect Paper. How To Write
How To Write A Cause And Effect Paper. How To WriteHow To Write A Cause And Effect Paper. How To Write
How To Write A Cause And Effect Paper. How To Write
 
Silence Of The Lambs Analysis Essay
Silence Of The Lambs Analysis EssaySilence Of The Lambs Analysis Essay
Silence Of The Lambs Analysis Essay
 
Linkedinmay
LinkedinmayLinkedinmay
Linkedinmay
 
Linkedinmay
LinkedinmayLinkedinmay
Linkedinmay
 
Artificial intelligence
Artificial intelligenceArtificial intelligence
Artificial intelligence
 
Essay Simple Life. Online assignment writing service.
Essay Simple Life. Online assignment writing service.Essay Simple Life. Online assignment writing service.
Essay Simple Life. Online assignment writing service.
 

Recently uploaded

General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxmarckustrevion
 
Color Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 StudioColor Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 StudioThink360 Studio
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfneelspinoy
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxNitish292041
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024digital learning point
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioRMG Project Studio
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbpreetirao780
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfAayushChavan5
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster1508 A/S
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 

Recently uploaded (20)

General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptx
 
Color Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 StudioColor Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 Studio
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project Studio
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbb
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenology
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 

Pie Bellies, Colonoscopies and the Doorway of Forgetfulness - Structuring User Experience to Embrace Complexity

  • 1. Pie-bellies, Colonoscopies and the Doorway of Forgetfulness Corinne Erly Brown Web Manager, Sr. Information Architect Seattle Public Utilities
  • 3. Web experience in four acts 1. Start with ease. 2. The best journeys are hard. 3. Create a satisfying ending. 4. Protect memory. It’s fragile.
  • 5.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11. The machinery of experience © Katherine B. Turner/UW Admissions
  • 12. Story arc – three acts
  • 13. Web experience – four acts
  • 15.
  • 16. System 1 – Things are easy Go with the gut
  • 19. Feels good sleep mail switch salt deep foam
  • 20. sea salt deep foam
  • 21. Is overconfident A bat and ball cost $1.10. The bat costs one dollar more than the ball. How much does the ball cost? $1.10 (ball) $1.05 (ball) $1.10 (bat) $1.05 (bat) $1.20 (total) $1.10 (total)
  • 23. Less
  • 24. More
  • 25.
  • 26.
  • 27. The halo effect Try not. Do, or do not. There is no try.
  • 28. Root for the hero
  • 29.
  • 30.
  • 31.
  • 32.
  • 33. A hero is one person Private Henry E. Crouch, Company D, 45 th Massachusetts Infantry. (CDV Courtesy Don Ryberg Collection).
  • 34.
  • 35.
  • 36.
  • 38. The illusion of the familiar The body temperature of a chicken...
  • 39. The illusion of the familiar … is 102 – 103 degrees Fahrenheit.
  • 40.
  • 41. Emotion = intensity, not numbers
  • 42. How much would you pay? Average donations were: • $80 to save 2,000 •$78 to save 20,000 •$88 to save 200,000
  • 43. Prefers plausible over probable 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.
  • 45. Ice cr m ea
  • 46. We are more gullible If our mind is otherwise engaged.
  • 47. 8 Ways – System 1
  • 48. The middle – The best journeys are hard
  • 51. System 2 - Things get difficult prefrontal cortex
  • 52.
  • 53.
  • 54.
  • 56. The path of least resistance System 2 is lazy.
  • 57.
  • 58.
  • 59.
  • 60. 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 } } }); });
  • 62. How do we use System 2?
  • 63. How do we use System 2?
  • 64. How do we use System 2?
  • 65. Memory - depth of processing • tongue • authority • likeness • stout • freckled • lozenges
  • 66. Depth of processing • tongue • authority • likeness • stout • freckled • lozenges
  • 67. Depth of processing Definition of TONGUE 1a : 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
  • 69.
  • 70. 5 ways to create microtension 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
  • 71. The call to action - triumph
  • 73. Peak – End Averaging
  • 74. Which one would you do again? 60 seconds or 90 seconds?
  • 77. 2 ways – Satisfying ending
  • 79. The Doorway of Forgetfulness I know I came in here for something…
  • 80.
  • 81. The doorway of forgetfulness Cuing - Getting information into long-term memory
  • 83. Where are the cues?
  • 84. Enlist the senses – dual coding
  • 85. Enlist the senses – dual coding
  • 88. 4 ways -Doorway of Forgetfulness
  • 89.
  • 90.
  • 91.
  • 92.
  • 93. Checkout fail 44% - shipping and handling too high 41% - not ready to purchase 27% - wanted to compare prices 25% - price higher than expected 21% - want to save for later Top 5 reasons aren’t usability issues.
  • 94. A shopping cart redesign
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
  • 122. The experience 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.
  • 123. “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
  • 125. References and Credits • 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& • Duhigg, Charles. Habits: How They Form And How To Break Them. http://www.npr.org/2012/03/05/147192599/habits-how-they-form-and-
  • 126. 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 • 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

Editor's Notes

  1. We bring our brains and our bodies wherever we go. No matter what the experience, our physiology makes sense of information the same way. Research into physiology and psychology helps us understand the mechanics that make digital experiences compelling.
  2. Our experiences start with ease. In the beginning, we have to make sense out of nothing . We have little or no information . We not only have to trust, we prefer to trust. We also prefer to leap to conclusions. the best journeys are hard . Contrary to popular opinion, we want to be challenged. Create a satisfying ending. If we’ve been challenged and we triumph, that’s satisfying. We’d like a reward, something to acknowledge our effort and let us know that we’ve done well. Protect memory. It’s fragile. There’s a risk that we’ll get distracted along the way and forget what we were doing. We’ll want to avoid that. Ultimately, we to want to remember our experiences.
  3. The world is complicated. But that isn’t bad.
  4. Our human systems are designed to make sense of complexity. We like complicated. (anyone here ever been in a relationship?)
  5. Everything we see is a story. Stories combine all the elements we need to move an experience from short term memory into long-term memory.
  6. In a novel or a video game, the story evolves slowly.
  7. In a movie, it’s faster.
  8. On a website, a story can be very fast. We don’t mind if we lack of information at the beginning. Our brains are built to jump to conclusions. We tell ourselves stories about what we experience. We make stuff up.
  9. Six month old babies shown a black moving square that touches another are not surprised if the second starts moving at the moment it appears to be “hit”. Babies are surprised if the causality is not there. Six month old babies jump to conclusions. (stupid babies)  
  10. Complicated stories are the most compelling. We are social creatures with a complex social hierarchy. Many scientists believe this is the reason we have such large brains. What makes this photograph compelling is the story… we fill in the blanks. There is a past: the young women have just gotten coffee. There is a future… they’re on their way to class. Our brains don’t make a distinction between stories that we read and experiences that we HAVE. When we look at these women running and laughing, our brains light up as if we ourselves are having that experience. We are participating in the story we tell ourselves. This is the same machinery we use to experience websites.
  11. Three act story structure can be traced back to Aristotle and Greek tragedy In the Beginning we start by knowing nothing. We make the rest of the story up based on the little we do know. In the Middle the story develops through a series of complications and obstacles, each leading to a mini crisis. As the story progresses, there is an overall rising tension In the end, the loose ends of the story are all tied up. Tension rapidly dissipates because it’s nearly impossible to sustain a reader’s interest very long after the climax. Finish your story and get out. Pillow talk is brief.
  12. Web stories happen fast! Beginning – introductions Characterized by ease… effortless, frictionless THEN something happens to knock the visitor out of their comfort zone. Things get interesting. Not frictionless. donate to charity. buy our product. learn more about recycling. Middle – characterized by complications and microtension. We present a series of obstacles which must be overcome. Being uncomfortable here is good. There’s an overall rising tension as we approach the Climax. We care more. More invested Climax = completion of the primary call to action. Big success, biggest reward. In the End, = back to ease, but the experience is embedded in memory.
  13. The beginning is the place in the web experience where you want to engage your customer and draw them in. Your goal is to make them trust you. The first part of the experience = ease.
  14. Neuroscientists have identified two systems in the brain. The technical, highly scientific names for them are: System 1 and System 2
  15. System 1 is the system we use most often. It’s a go-with-the-gut, instinctive, happy place. System 2 comes into the web experience later. We’ll talk more about it then.
  16. System 1, which we can also call cognitive ease, is the secret author of many of the choices and judgments we make. There are certain circumstances when System 1 works best:
  17. Being happy favors System 1. If we passed out pencils and you placed them between your teeth, then asked you to perform a task, the fake smile you had on your face would give you an advantage . You would be slightly faster and slightly more successful . If we asked you to press your eyebrows together , as if you were concentrating… it looks a little like a frown, the task would be a little harder for you. Anything that causes you to be in a happy mood, even if you fake it! will make you more successful. Thinking happy thoughts more than doubled accuracy in an intuition test.
  18. Please read these two lines of words from left to right. If we measured the electrical activity in your face, your muscles would have shown a slight smile when you read the second set of words. These are called triads. A triad is something that is often used in psychology experiments. A triad is a group of three words that has another word that creates an association they have in common. The first set doesn’t have a solution . It won’t produce a smile.
  19. Sea is the solution to the second set. Even when you know nothing about triads, a smiling reaction to coherence appears .
  20. System 1 is screaming at us that the BALL COSTS 10 CENTS!!! If the ball costs 10 cents, then the total cost will be $1.20, .10 for the ball and 1.10 for the bat. The correct answer is 5 cents.   If we get an answer, any answer, we don’t want to think further.   More than 50% of students at Harvard, MIT and Princeton gave the incorrect answer. At less selective universities, the rate of failure greater than 80% . If System 1 is involved, the conclusion comes first and careful thought is unlikely to follow.
  21. Among other things, System 1 is good at simple stuff like: Scanning and grouping objects Understanding simple sentences Detecting that one object is more distant than another Detecting hostility in a voice
  22. System 1 understands scales – we know the range between less
  23. And more
  24. Because we understand scale, we also recognize intensity Notice saturation levels in colors (particularly green…
  25. and blue
  26. System 1 is responsible for first impressions – also called a halo effect - to like or dislike everything about a person , including things you have not observed. We like Yoda. Because we like him, we think he was a really good Jedi master. Maybe the best. But he wasn’t really a very good master. He couldn’t even bully Anakin, a little kid, into not training to be a Jedi. Fails to convince anyone else not to train Anakin. Really… There is no try.
  27. Screenwriters have a formula that utilizes the halo effect: Three of the most effective tricks to make people to like the hero in the opening few minutes of the film are letting you know that: Other people like her very good at what she does innocent - afflicted through no fault of her own In ecommerce, the word Guaranteed implies innocence. If there’s something wrong, it’s not our fault and we’ll make it right. 60% of consumers feel at ease and are more likely to buy a product that has the word “guaranteed” associated with it.
  28. Other people like her If your friends like her… even better.
  29. “ Best-selling” Lots of people like her.
  30. Very good at what they do. Anthropologie sells a particular style of clothing. They really get it.
  31. These people sell electronics. They don’t want you to miss the guarantee. They’re innocent. And they will prove it.
  32. In the stories we tell ourselves, we want ONLY ONE person to be the hero. introducing more than one person will break the coherence of the story/ On a website that means being aware images and even of word choice: The word “ Soldiers ” makes you think of individuals, “ troops ” does not.  
  33. Photo of one child will make people donate to charity.
  34. Photos of many children do not.
  35. Not sure about photos of Justin Bieber.
  36. Priming is just one example of how System 1 can’t be trusted. Priming happens when you are subconsciously prepped for a behavior by previous exposure. researchers at New York University gave two groups of subjects word puzzles. One group had a puzzle made up of words associated with kind behavior The other group had a puzzle with impolite words. An assistant sat in the lab pretending to be on the phone. After they finished the word puzzles, the subjects were instructed to talk to him. The group that had done the rude puzzle interrupted the assistant sooner than the other group.
  37. Words you have seen before become easier to see again . You see them more clearly. You don’t have to repeat the entire statement to make it appear true . X People who were repeatedly exposed to the phrase “the body temperature of a chicken’ were more likely to accept as truth the statement that “ the body temperature of a chicken is 144 degrees ”.
  38. The familiarity of one phrase in the statement made the whole statement feel familiar, therefore true.
  39. Priming happens frequently in the media: If you link two unrelated events in the same headline, you’re priming people to believe the events were related.
  40. We don’t make rational decisions when we’re having strong emotions. Emotion makes us more dependent on system 1. System 1 is good at patterns, not good at math. Math is hard. Math is system 2. After the Exxon Valdez oil spill, researchers wanted to find out how the perception of price was influenced by emotion. They asked subjects the amount they were willing to pay for nets to cover oil ponds in which migratory birds often drown.
  41. You’d think that people would pay a lot more to save 200,000 birds. But the amount people were willing to pay was surprisingly unrelated to the number of saved birds. After seeing the photo of a helpless bird drowning, all three groups weren’t rational, they were running on System 1.
  42. System one prefers plausible over probable. People were asked which is most likely to happen: (read slide) Most people chose the second scenario as most probable. In the second scenario, we’re told a better story. It has a cause (we recognize the beginning of a story), and has better details… including the illusion of the familiar with the phrase “an earthquake in California.” Of the two examples up there, the first one is the most probable. There are many bodies of water in North America, lakes, rivers, and ocean shorelines. And all potential causes of the flood are left open… hurricanes, tsunamis, heavy rainfall, snow melt, dam burst. In the second scenario, the potential range is now limited to just California and the flood has to be started by an earthquake. It’s less probable.
  43. Some drawbacks to cognitive ease / System 1… Doesn’t care much about facts, just looking for a story. It isn’t good at: Analysis Logic Statistics Big words Can it answer difficult questions? It will answer them… but cheats.
  44. System 1 can’t be turned off. If you are shown a word on a screen, you will read it. You can’t help it.
  45. System 1 is gullible and biased to believing. System 2 is in charge of being skeptical. When we’re doing hard thinking, (like holding a grocery list in memory) we will believe almost anything.
  46. How to enlist System 1 to work for you:
  47. Which brings us to the middle.. Pie bellies
  48. Pie bellies is the post Thanksgiving effect… We’ve all experienced this. We’ve just eaten an enormous meal. We push away our plate. We’re so full we can’t eat another bite. And then the pie comes around. Suddenly, we discover we have a new belly that isn’t full. We were coasting on ease . We thought the story was complete. But then something happened. We were knocked out of ease and offered something new, another choice. Satiety research – after a while of eating the same flavors and experiencing the same scents… your brain will eventually tell you you’re “Full”. But if you introduce a new flavor … suddenly you’re hungry again. In order to get past the old, bring on something new. The story isn’t over, there’s something more… Change is not easy. It’s challenging, and exciting. But we are looking for new rewards. Things were easy, now they get a little hard.
  49. Writers call the driving elements in the middle of the story “microtension” Micro-tension moves the plot along. The small struggles, overcome, give a feeling of progress toward a goal. The techniques that engage System 2 will cause us to feel struggle. The bottom line is you need to make your user WORK and they don’t want to.
  50. System 2 takes over when things get difficult and normally has the last word. System 2 is the one that can follow rules , compares options and makes choices Bad mood – things are not going very well, there may be a threat, vigilance is required. Energy-intensive –If you were walking down the street and someone asked you to multiply three digit numbers in your head, you’d have to stop walking until you figured it out. System 2 keeps you polite when you are angry and alert when you are driving at night There are times when you have to make people uncomfortable. In research done for a non-profit cancer foundation’s website, researchers found that people didn’t donate when happy photos of survivors were used.
  51. It was difficult to convince the stakeholders to post pictures of people suffering. Here’s a missed opportunity. This is the donation page for Swedish Medical Center in Seattle. This is the place where you actually need to push people out of their comfort zone. There are no people photos on this page at all.
  52. Effort isn’t a bad thing. People will put effort into getting what they want. This is a line outside a Seattle ice cream store, Molly Moon’s. In fact, the amount of effort needed to acquire something desirable can increase its value.
  53. This is the project that got me started thinking about this. It’s a lookup tool for finding how to dispose of an item… is it recyclable, food and yard waste or is it trash? When my team and I designed this four years ago, We were forced to build this using a series of dropdowns . We knew this was clunky. during usability testing I expected our subjects to complain about the dropdowns. Instead, all subjects ran through the dropdowns rather quickly without mistakes. One of the tasks we asked them to perform was look up plant pots. And when they saw the results page: Their body language changed: they relaxed back into their chair. People were smiling! They said “Plant Pots” in an excited and happy voice… as if they’d just been given a prize. I knew the experience was harder than we might have designed, but they seemed much happier than I expected. In the end it seemed like a more satisfying experience BECAUSE we’d forced them to make choices . They were more engaged . They CARED more.And when they got the answer, they were more SATISFIED . The answer itself was a little reward. A previously blank page filled in with text. Little icons appeared. The end was clearly the end.
  54. What does it feel like when System 2 kicks in? Read all the words on the screen, starting at the top left, going down the left column, then starting at the top right and going down the right column. Whisper to yourself if the word is aligned left or right Read both columns. You will notice that it’s easier when the words don’t compete with the task. On the first column, you’ll go slower. When the words you’re reading compete with the task, that’s an example of increased cognitive load.
  55. Laziness is built deep into our nature. If there are several ways of achieving a goal, we will choose the easiest. System 2 is lazy System 2 uses more energy. Blood sugar is measurably lower after complex thinking tasks. What does the difference between using System 1 and using System 2 look like?
  56. System 1 menu Plastic food – to order, you point.
  57. System 2 menu –successful restaurant… by Tom Douglas, if you know him… Forced to slow down: Compare and make deliberate choices between options
  58. Park in a narrow space or in snowy conditions
  59. Slow thinking Demanding computation
  60. Characterized by Rationality, immune to biases. Can do Analysis Understands statistics
  61. I’d like you to take a moment and try to come up with the answer to this word problem. DON’T READ QUESTION.
  62. HOW LONG WOULD IT TAKE? Intuitive answer is 24 days. System 1 comes up with that quickly. Once our brains come up with an answer, we’re satisfied and find it hard to insist that System 2 should jump in. X The answer is 47 days. System 2 is lazy enough to rely on System 1 for the answer.
  63. Research has shown that when you induce cognitive strain… you kick in System 2 and decrease errors. Normal font – 90% Princeton students got the previous word problem wrong Reduced legibility – errors reduced to only 35%
  64. If we want people to remember information, we need to make them use System 2. It’s called the “DO make me think” part of the web experience. There’s a phenomenon of memory called: ‘ depth of processing’. Information that is analyzed deeply is better recalled than information that is analyzed superficially. Here’s a task: list of words in front of us
  65. and a block of text, if we were asked to circle the words from the list, That would be pretty easy. System 1 would handle that. If we were given the same task of circling the words and then asked to give a definition of them, that would be harder.
  66. Our brains resist. Being asked to think about information is harder than being simply asked to do something. But being asked to think greatly aids information recall. We create more memory cues, more neural pathways, there is more for us to hang on to, we “own” the information to a larger degree.
  67. Other things that push us out of our comfort zone? Money causes people to pay closer attention. Cognitive ease is gone. money priming causing people to sit farther apart (even subtle money cues, like a screensaver with dollar bills floating in water in the background) Mentioning money also primes people to be more selfish.
  68. Placing the cost for an item on a page will slow people down. They begin to evaluate.
  69. Tempt with something new Reduce legibility Reduce cues that kick in System 1, like photos and graphics. Mention money Offer small rewards… these can simply be design elements… we’ll see some examples later when we look at a checkout experience.
  70. Final call to action We perform the last task. We’re at the end. But the experience isn’t over. If we treat the experience like it doesn’t matter after the completion of the final call to action, we’re not creating a feeling of triumph. It isn’t satisfying. There’s more we’re looking for in the story…
  71. Research into pain in 1980s: Simply leaving the endoscope inside the patient during a colonoscopy for one to two extra minutes , moving it very gently at the end of the procedure. Greatly decreased the reported perception of pain.
  72. Researchers call this: Peak – End averaging People don’t remember the pain they felt during the entire procedure. They only remember 2 things: They remember the moment that was the worst time. They remember the end And they average the two.
  73. In one study, subjects were asked to hold their hands in ice water, so cold it was painful. After 60 seconds , they were told to take their hands out of the water. Later the same subjects were asked to hold their hands in the same temperature of ice water. After 60 seconds, a stream of water only ONE DEGREE less frigid was introduced into the bowl. After a total of 90 seconds, the subjects were instructed to pull their hands from the water. When asked which experience they would repeat , nearly all of them chose 90 seconds. They chose exactly the same 60 seconds and then 30 seconds more of only one degree less frigid water. The Peak – End averaging radically changed their memory of the entire experience and caused them to choose to repeat something that doesn’t really make sense.
  74. If the ending is good, the struggle was worth it. This is what importing bookmarks looks like after installing Chrome It’s no-color, reduced legibility, just function, no frills. Google is invoking System 2.
  75. But look at the great big check mark. . I have no doubt in my mind that this worked. I feel good about myself. Peak – End averaging We can entirely rewrite the experience by having a great ending. My subjective experience of the process was changed by how good I feel at the end.
  76. The challenge for web design is to get people to remember all of this later. We want people to come back to websites. Two things about memory Memory is fragile It can be tricked
  77. Psychology research shows that the act of passing through a doorway serves as a way the mind files away memories. Going through doors, even virtual ones, causes people to forget. In a set of three experiments, subjects used a virtual environment and moved from one room to another, Took something from one table and exchanged it for an object at a different table. They did the same thing while simply moving across a room but not crossing through a doorway. subjects forgot more after walking through a doorway compared to moving the same distance across a room , The second experiment repeated this in real-world setting results were the same. Previous research has shown that environmental factors affect memory and that if you learn information in one environment you remember it better if you try to remember in the same place . The final experiment - Subjects passed through several doorways, leading back to the room in which they started. The results showed no improvements in memory , suggesting that the act of passing through a doorway serves as a way the mind files away memories.
  78. Turns out that I am not the only person who has ever forgotten where I parked in a parking garage. Now parking garages have begun to create retrofits to help people remember. They’re using colors and names painted near the places you parked. It’s a good idea… Where we parked needs to be in long term memory.
  79. A parking garage in my building has 13 floors. People park in it every day. They use color, a name that matches the floor #, in this case “Alki Point” to match floor A. They’re even using a story which you can read while you’re waiting for the elevator. These are GOOD Retrieval cues But… You have to go through the elevator doors! Having to adjust to a new setting takes just enough mental effort to cause a break in short-term memory.
  80. If the story and color worked, you wouldn’t need the paper.
  81. Inside the elevator… everything vanishes. Where’s my color? Where’s the story? In 20 seconds, I’ll be off this elevator, in another one, stuffing the little paper in my pocket. Hoping I still don’t have the paper from yesterday.
  82. if it escapes working memory, chances are slim that the information will make it into long-term memory. working memory gets full fast . You have about 20 seconds and can remember about 7 items, plus or minus 2. Dual coding encourages moving information into long-term memory because it creates more relationships, there are more ways to retrieve it. An example of dual coding is when visual elements (images) are combined with a language elements (in this case, we’re instructed that blue = democrats and red = republicans)  
  83. Color coding the shapes of the states on a map as red or blue helps us remember the political leanings of a given state—the shape of the state triggers our remembering the color. Notice also the scale here, more or less is easy to understand based on the intensity of color.
  84. Repetition increases the perceived importance of memory. In this sketch from The Daily Show Samantha Bee is playing a reporter covering the last days of Newt Gingrich’s campaign. He’s being ignored the press… and the joke is the campaign headquarters is in the back of a van. Being mentioned in the media is vital to political campaigns. The more frequently and prominently the news media cover an issue , the more instances of that issue become accessible in audience's memories. We assign greater importance to information that can easily be recalled.
  85. Anyone a parent here? Parents of teenagers? Everyone be nice to these people. If you’re a parent staying up late waiting for teenage daughter to come home. Part of you realizes there is (almost) nothing to worry about. The other part of you can’t help images of disaster coming to mind. Basic inability of our mind to deal with small risks . We either ignore them or give them far too much weight. Nothing in between. Your memory pulls up the tragic story you saw on the news. It is difficult to reason oneself into a state of calm. Emotion, particularly fear, can increase the perceived importance of anything.
  86. Let’s see some examples
  87. A 10-second example of what a coherent story looks like: Cognitive ease. We’re not challenging anyone.
  88. This is System 2 – things get harder. This is more like the Tom Douglas menu… There are some legibility areas… to help make sure people are paying attention. No icons for the eye to skip to…
  89. Tiny rewards.
  90. Success! You get a whole collection of little carts! We’re using dual-coding to help people remember.
  91. Forrester Research into shopping cart abandonment revealed that the top five reasons for cart abandonment weren’t usability issues at all. There is a subtext here. Well, the exception of shipping and handling and I’m not really sure why that’s a sticking point. Research shows that the word “free” is pretty magical… but at any rate, The rest of them: not ready to purchase = I’m not convinced yet. I don’t trust you. I don’t believe. wanted to compare prices = I want to spend time doing analysis. price higher than expected = I need to do analysis. want to save for later = A combination of I don’t believe and I need to do analysis. Either they don’t believe the story so they don’t trust you. Or you needed to kick them into System 2 so they can do the analysis. All parts of the story are important.
  92. Let’s take a look at a quick shopping cart redesign using these principles. To be clear, I’m going to be talking about the subjective experience of shopping cart redesign from the customer’s point of view. I’m looking at what will be satisfying, what will be memorable.
  93. Tell a story Photos and rich details make it believable They look good at what they do.
  94. Other people like her. Zappos (and Nordstrom and Anthropologie) all offer reviews on the detail page. Zappos actually does this best because they tell the story of the company along with a photo of a real person. This adds richness and makes it memorable. And you don’t have to leave the page.
  95. Nordstrom allows sorting by customer rating… keeping you in System 1 longer. The prices are the least visible element on the page.
  96. Looks like the Japanese food choices? Price is there, but grey. Choosing by whether they LIKE, not comparing attributes. Remember We are often more confident with less information.
  97. I chose a shoe. Going from thumbnail to larger shoe is still within the range of System 1 which understands scale. But if I want to go farther… I’ll have to start working. I have to choose a size… and some of them are not available! The size I want is backordered. I have to decide if I want it or not. microtension
  98. Tiny reward Highlights my choices in a color. The color matches the stars rating. This makes me feel good. I add to bag.
  99. They must want me to stay here in the happy place and shop Small reward
  100. I want to check out. Photo is still there … so I recognize my purchase. Cuing. Notice the Checkout List at the left. Looks like steps. I’m going into System 2… Details are listed in a table, almost like yellow tablet paper.
  101. I log in. I’m in a new page and slightly anxious. The images are gone. I have to pay attention.
  102. I passed through the doorway of forgetfulness, but I’m back in a place I recognize. The cues are still there. I still have my shoes. But the focus of the page is work. Everything is desaturated, font is not black on white background. I know what I have to do. Looks pretty simple.
  103. Edit payment, stay in same place.
  104. . No doorway of forgetfulness Is anyone here from Amazon? Anyone here bought anything from Amazon… ever? Amazon has a very familiar shopping process.
  105. And I’m going to look at Amazon’s checkout process from the point of view of how satisfying, and how memorable is this experience . They’re optimizing for profit . I understand that. I firmly believe that customers should enjoy the process as much as possible. T hat can only be good. Amazon search based. They don’t start with a story. Remember, Zappos is also search-based, but they include story on their shopping pages by adding reviews and information, with photo about the brand.
  106. Amazon forces you to make choices early. Notice all the options on the left. We’re invoking .System 2 The RED price… that’s going to slow me down. There’s a lot of text below the shoes. I have to read and decide if these are factors that should be compared across all the shoes (am I supposed to scan to find out which qualify for Free Shipping).
  107. Detail page – Very large, clear image, multiple views – small reward Have to seek out the story. There are stars here,
  108. But you have to click away to get to reviews. Doorway of forgetfulness.
  109. If you add to cart, I got a little green checkmark! Microtension! But all of this is so much smaller than the upsells.
  110. Did you see the little green check up in the right corner? I got one for putting shoes in the cart, then there’s another up there because I qualify for free shipping. Another small reward Notice also the Ship to: dropdown in the blue area. It’s defaulted to my home address.
  111. Going into another world. I get a little claustrophobic when I see the little cart moving along that tiny pathway at the top. Remember the doorway of forgetfulness? Having to adjust to a new setting takes just enough mental effort to cause a break in short-term memory. Those elevator doors are closing.
  112. Still have to choose shipping address. Even though the dropdown had my address selected.
  113. Another page to force me to choose the shipping option. Defaulting to Free… or allowing me to edit the shipping method would eliminate this step.
  114. Choosing a payment option is another screen. But my cart at the top doesn’t move. I’m stuck here in shipping and payment.
  115. Amazon review and place order Finally! There are no upsells on the page. But the use of color is yanking the eye around, pulling system 1 into play. Our eyes want to roam rather than pay attention the important stuff. This makes it hard for me to review my order. I click “place your order.”
  116. Where’s my reward? I want to feel good! A tiny thumbnail of my shoes is over in the share my purchase section, not next to the “your order has been placed”. I’m not being rewarded for my order, I’m being encouraged to take another action. The experience would feel better if the layout placed importance on the success of the order. And the upsells make me exhausted. And there’s an ad for the ASPCA… I’m not in Ease any more. There is no ease. How would Amazon’s checkout feel if it followed the four act web structure we’ve been talking about?
  117. Login in place
  118. This is a working page. Pay attention. Attention is drawn to the cart summary by the colored rectangle, But the legibility is less.
  119. Remember Peak – End phenomenon. If the end is really really satisfying, any hardships they’ve had before this point will be much less important. For success, we offer the item they purchased. There are also upsells, but they’re in the same format as the Japanese food menu… we’re in System 1 here, we want to stay with cognitive ease.
  120. This is the experience
  121. THANK YOU!