The Overlap of Emotion and Usability

2d719a871ac6062f87ade207ff6802b8?s=47 Ross Johnson
August 19, 2012

The Overlap of Emotion and Usability

Logic and statistics drive many usability discussions. How many users accomplished a task? How long did it take on average? What labels caused delays? etc.

Likewise, emotion is often discussed in context of interactivity and aesthetics. Emotion and usability sound like separate topics but they closely intertwined, so much so they are impossible to separate.

I will go out on a limb and claim emotion is actually the most important aspect of usability. Because emotion is the root of all behavior, how one feels ultimately determines what they will or won’t do on a website.

In this session I will demonstrate how one can design themes and websites that are emotionally engaging and intuitively usable; creating the most compelling user experience possible.

2d719a871ac6062f87ade207ff6802b8?s=128

Ross Johnson

August 19, 2012
Tweet

Transcript

  1. by Ross Johnson of 3.7 DESIGNS @3pointRoss / @37Designs THE

    OVERLAP OF EMOTION AND USABILITY
  2. @3pointRoss @37Designs I AM ROSS “DANGER” JOHNSON

  3. My background is a bit diverse... DESIGNER SOCIAL SCIENTIST DEVELOPER

    EDUCATOR
  4. I founded a company in 2005 3.7 DESIGNS WEB DESIGN

    BRANDING USER EXPERIENCE DIGITAL MARKETING WORDPRESS (YEAH BABY)
  5. I started teaching in 2008 WASHTENAW COMMUNITY COLLEGE In 2012

    I began teaching at MICHIGAN STATE UNIVERSITY
  6. Wrote a book in 2011 the SIX LAYERS of DESIGN

    My research is the foundation for much of this discussion.
  7. Whether designing commercial themes or custom ones for clients (or

    yourself) GREAT DESIGN LEADS TO GREAT EXPERIENCES. GREAT EXPERIENCES LEAD TO SUCCESSFUL WEBSITES.
  8. HOW DO WE APPROACH USABILITY / UX?

  9. None
  10. None
  11. None
  12. Now that we know what “UX” is... WHAT ARE THE

    DELIVERABLES?
  13. INFORMATION ORGANIZATION

  14. None
  15. None
  16. LAYOUT & WORKFLOW

  17. None
  18. None
  19. PROCESS MAPS

  20. None
  21. None
  22. USABILITY STUDIES

  23. None
  24. Ease of use Frequency of use Difficulty to keep track

    of location in website Learn ability Information facilitation Look & feel appeal Site content Site organization ✓
  25. ALL HELPFUL & VALUABLE BUT...

  26. IS THIS YOUR USER?

  27. IS THIS YOUR USER?

  28. SO I ASK... IS THIS YOUR USER?

  29. WHAT’S MISSING?

  30. LET ME INTRODUCE YOU TO HUMANS...

  31. FOR A SUBJECT SO FOCUSED ON HUMANS, THERE IS LITTLE

    EMPHASIS ON THE MOST HUMAN CHARACTERISTIC
  32. EMOTION

  33. EMOTION DRIVES ALL OF OUR BEHAVIOR. WE JUSTIFY DECISIONS WITH

    LOGIC AFTER THEY ARE MADE.
  34. THE PLANK EXAMPLE...

  35. BEHAVIOR IS PREDOMINANTLY DRIVEN BY THE SUBCONSCIOUS.

  36. X 1. Weinschenk, Ph.D. Neuro Web Design

  37. AN EMOTIONAL QUESTION? WHAT CEREAL DO YOU WANT? 2. Emotional

    Design, Norman
  38. EMOTIONS MOTIVATION ACTIONS JUSTIFICATION

  39. EMOTIONS SITE OBJECTIVES GOOD EXPERIENCES

  40. UX != MAKE IT LOGICAL

  41. UX == MANAGING EMOTIONS

  42. PRIME EXAMPLE: AESTHETIC USABILITY EFFECT. 3. Norman, Emotional Design

  43. HOW? MANAGING EMOTIONS FOR UX...

  44. Three Types of Emotional Responses: VISCERAL BEHAVIORAL REFLECTIVE

  45. VISCERAL BEHAVIORAL REFLECTIVE SUBCONSCIOUS CONSCIOUS

  46. Old Brain VISCERAL

  47. FIGHT or FLIGHT DANGER or OPPORTUNITY

  48. FIGHT or FLIGHT DANGER or OPPORTUNITY

  49. VILAYANUR RAMACHANDRAN BRAIN IS MADE UP OF 100 BILLION NEURONS.

    MOTOR NEURONS FIRE WHEN PERFORMING ACTIONS.
  50. VILAYANUR RAMACHANDRAN THOSE SAME NEURONS FIRE WHEN YOU WATCH SOMEONE

    PERFORM THE SAME ACTION.
  51. VILAYANUR RAMACHANDRAN THE LIMBIC SYSTEM AND THE AMYGDALGA

  52. VILAYANUR RAMACHANDRAN SEEING IMAGERY OF IMPORTANCE CAUSES PHYSICAL REACTIONS.

  53. “FEELS” SAFE

  54. “FEELS” UNSAFE

  55. VISUALS EMOTIONAL REACTIONS MOOD & MINDSET

  56. What does it “feel” like to use? BEHAVIORAL

  57. INLINE WITH TRADITIONAL UX FACETS

  58. Learn and Love COST BENEFIT PRINCIPLE

  59. Why we hate LONG WEB FORMS...

  60. Why we DON’T READ INSTRUCTIONS UNLESS WE HAVE TO.

  61. And love CALORICALLY DENSE FOOD

  62. EFFORT TO OBTAIN BENEFIT OF OBTAINING

  63. Hick’s Law in Action EXAMPLE 4. Weinschenk, Ph.D. Neuro Web

    Design
  64. Selective Disregard EXAMPLE #2

  65. None
  66. RECOGNITION OVER RECALL

  67. PROGRESSIVE DISCLOSURE

  68. MINIMIZE ALL OPTIONS

  69. ULTIMATELY MINIMIZE EFFORT REQUIRED.

  70. Influencing Ones Conscious Thought REFLECTIVE

  71. None
  72. None
  73. None
  74. None
  75. Basic influence: HOW DO I REMEMBER EXPERIENCING THIS WEBSITE?

  76. Mid Level Influence: DOES THIS REMIND ME OF A GOOD

    OR BAD EXPERIENCE?
  77. None
  78. Mid Level Influence: DOES THIS SEEM LOOK LIKE IT SHOULD

    BE USABLE? 5. Blink, Gladwell
  79. Mid Level Influence: IS THIS A PRESTIGIOUS WEBSITE?

  80. Mid Level Influence: IS THIS A PRESTIGIOUS WEBSITE?

  81. Mid Level Influence: IS THIS A PRESTIGIOUS WEBSITE?

  82. None
  83. Ross Johnson of 3.7 DESIGNS @3pointRoss / @37Designs THANK YOU

    Recommended Reading Neuro Web Design by Weinschenk, Ph.D. 100 Things Every Designer Needs to Know About People by Weinschenk, Ph.D. The Design of Everyday Things by Don Norman Emotional by Don Norman Designing with the Mind in Mind by Jeff Johnson Blink by Malcolm Gladwell Designing for Emotion by Aarron Walter