Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Evaluating Homepage Design

3c0b492a599715b69b5ed1363a9c2c4f?s=47 Tomer Sharon
September 17, 2013

Evaluating Homepage Design

A homepage is where organizations communicate what they’re all about. The funny thing is there’s often a big gap between how organizations are perceived internally versus how they’re perceived by their target audiences. In this class, we’ll go over five questions people ask themselves when they access a homepage, as well as UX research techniques to evaluate a homepage design, including: interception survey, first click test, and online usability testing.

3c0b492a599715b69b5ed1363a9c2c4f?s=128

Tomer Sharon

September 17, 2013
Tweet

More Decks by Tomer Sharon

Other Decks in Design

Transcript

  1. EVALUATING HOMEPAGE DESIGN TOMER SHARON, UX RESEARCHER, GOOGLE @tsharon

  2. 3 GOALS

  3. UNDERSTAND HUMAN BEHAVIOR WHEN ACCESSING A HOMEPAGE

  4. OVERCOME CHALLENGES OF DESIGNING A HOMEPAGE

  5. LEARN TECHNIQUES FOR EVALUATING A HOMEPAGE

  6. AGENDA

  7. INTRODUCTION TO HOMEPAGES

  8. DESIGNING A HOMEPAGE FOR HUMANS

  9. HOMEPAGE RESEARCH TECHNIQUES

  10. AND A COUPLE OF COOL HOMEPAGE EXERCISES

  11. None
  12. INTRODUCTION TO HOMEPAGES

  13. WHAT A HOMEPAGE NEEDS TO ACOMMODATE

  14. SITE IDENTITY AND MISSION

  15. None
  16. SITE HIERARCHY

  17. None
  18. SEARCH

  19. None
  20. TEASES

  21. None
  22. TIMELY CONTENT

  23. None
  24. DEALS

  25. None
  26. None
  27. SHORTCUTS

  28. None
  29. REGISTRATION

  30. None
  31. WHAT I’M LOOKING FOR

  32. None
  33. WHAT I’M NOT LOOKING FOR

  34. None
  35. None
  36. WHERE TO START

  37. None
  38. ESTABLISH CREDIBILITY AND TRUST

  39. None
  40. CHALLENGES OF DESIGNING A HOMEPAGE

  41. EVERYBODY WANTS A PIECE OF IT

  42. None
  43. TOO MANY COOKS

  44. None
  45. ONE SIZE FITS ALL

  46. None
  47. None
  48. None
  49. None
  50. CONVEYING THE BIG PICTURE

  51. DESIGNING A HOMEPAGE FOR HUMANS

  52. 5 QUESTIONS A HOMEPAGE MUST ANSWER

  53. [WRITE THEM DOWN, WE’LL USE THEM SOON]

  54. WHAT PEOPLE ASK THEMSELVES ABOUT A HOMEPAGE WHAT IS THIS?

    IT’S NOT ALWAYS OBVIOUS
  55. WHAT PEOPLE ASK THEMSELVES ABOUT A HOMEPAGE WHAT CAN I

    DO HERE? EXPLANATIONS ARE NOT ANNOYING
  56. WHAT PEOPLE ASK THEMSELVES ABOUT A HOMEPAGE WHAT DO THEY

    HAVE HERE? EVEN USERS WHO NEED THE SITE CAN’T ALWAYS TELL
  57. WHAT PEOPLE ASK THEMSELVES ABOUT A HOMEPAGE WHY SHOULD I

    BE HERE? ADVERTISING IS NOT THE ANSWER
  58. WHAT PEOPLE ASK THEMSELVES ABOUT A HOMEPAGE WHERE DO I

    START? YES, THIS IS THE FAMOUS ‘CALL TO ACTION’
  59. WHAT IS THIS? WHAT CAN I DO HERE? WHAT DO

    THEY HAVE HERE? WHY SHOULD I BE HERE? WHERE DO I START?
  60. GETTING THE MESSAGE ACROSS

  61. TAGLINE

  62. None
  63. BLURB

  64. None
  65. SPACE

  66. None
  67. None
  68. PLAIN LANGUAGE

  69. None
  70. YOU BE THE JUDGE

  71. REMEMBER THIS?

  72. ANSWER THE 5 QUESTIONS FOR THESE HOMEPAGES…

  73. WHAT IS THIS? WHAT CAN I DO HERE? WHAT DO

    THEY HAVE HERE? WHY SHOULD I BE HERE? WHERE DO I START?
  74. CRESSKILLBORO.COM “YOU WANT TO CONTACT THE TOWN ABOUT REMOVING A

    DEAD TREE IN YOUR YARD.”
  75. “YOU WANT TO CONTACT THE TOWN ABOUT REMOVING A DEAD

    TREE IN YOUR YARD.”
  76. CESSNA.COM “FIND OUT HOW MUCH THE SMALLEST CESSNA COSTS.”

  77. “FIND OUT HOW MUCH THE SMALLEST CESSNA COSTS.”

  78. MILWAUKEEPOLICENEWS.COM “YOU OVERHEARD A CONVERSATION DURING A BUS RIDE ABOUT

    THE WHEREABOUTS OF RAFAEL GARCIA, A KNOWN MILWAUKEE CRIMINAL. YOU WANT TO REPORT IT ONLINE.”
  79. “YOU OVERHEARD A CONVERSATION DURING A BUS RIDE ABOUT THE

    WHEREABOUTS OF RAFAEL GARCIA, A KNOWN MILWAUKEE CRIMINAL. YOU WANT TO REPORT IT ONLINE.”
  80. HOMEPAGE RESEARCH TECHNIQUES

  81. WHEN I SAY RESEARCH…

  82. PROVIDING INSIGHTS INTO PRODUCT USERS, THEIR PERSPECTIVES, AND THEIR ABILITIES

    TO THE RIGHT PEOPLE AT THE RIGHT TIME.
  83. 3 TECHNIQUES FOR EVALUATING IF A HOMEPAGE DOES ITS JOB

  84. “ITS JOB”?

  85. WHAT IS THIS? WHAT CAN I DO HERE? WHAT DO

    THEY HAVE HERE? WHY SHOULD I BE HERE? WHERE DO I START?
  86. HOMEPAGE RESEARCH TECHNIQUE 1 INTERCEPTION SURVEY CAPTURE PEOPLE’S EXPERIENCE WHEN

    IT HAPPENS
  87. ALSO CALLED “TRUE-INTENT” STUDY

  88. TELL US WHY YOU ARE HERE AND HOW WE ARE

    DOING
  89. POP-UP / SIDE DRAWER DIARY STUDY EMAIL

  90. WHAT TO ASK

  91. WHAT IS THE PRIMARY REASON FOR YOUR VISIT WITH THIS

    WEBSITE TODAY?
  92. HOW SATISFIED ARE YOU WITH THIS HOME PAGE?

  93. WHAT, IF ANYTHING, DO YOU FIND FRUSTRATING ABOUT THIS HOME

    PAGE?
  94. DID YOU FIND WHAT YOU WERE LOOKING FOR?

  95. EXPECT SHORT ANSWERS

  96. PROVIDE ANSWERS TO CHOOSE FROM

  97. DON’T PUSH YOUR LUCK

  98. WHAT IS THIS? WHAT CAN I DO HERE? WHAT DO

    THEY HAVE HERE? WHY SHOULD I BE HERE? WHERE DO I START?
  99. None
  100. None
  101. HOMEPAGE RESEARCH TECHNIQUE 2 FIRST-CLICK TEST WHAT THEY DO FIRST

    TELLS YOU A LOT
  102. NOBODY LIKES TAKING A WRONG TURN…

  103. …ESPECIALLY IF IT’S THE FIRST TURN.

  104. WHAT THEY WOULD CLICK ON FIRST TO COMPLETE A TASK

  105. CAN BE PERFORMED ON A FUNCTIONING WEBSITE, A PROTOTYPE, OR

    A WIREFRAME
  106. WHY IS THE USER’S FIRST CLICK IMPORTANT?

  107. USERS WHO CLICK DOWN THE RIGHT PATH ON THE FIRST

    CLICK WILL COMPLETE THEIR TASK SUCCESSFULLY 87% OF THE TIME
  108. USERS WHO CLICK DOWN THE WRONG-PATH ON THE FIRST CLICK,

    TEND TO ONLY SUCCESSFULLY COMPLETE THEIR TASK 46% OF THE TIME
  109. HOW-TO

  110. CREATE SCENARIOS

  111. DON’T TELL PARTICIPANTS THIS IS A FIRST-CLICK TEST

  112. TRACK CLICKS

  113. WITH CHALKMARK

  114. WITH CHALKMARK

  115. WITH TREEJACK

  116. WITH TREEJACK

  117. WITH TREEJACK

  118. WITH USERZOOM

  119. WITH LOOP11 vimeo.com/15860443

  120. BY HAND BY WATCHING A RECORDING

  121. TIME THE FIRST CLICK

  122. COMPARE IF YOU CAN

  123. PRACTICE

  124. WHAT IS THIS? WHAT CAN I DO HERE? WHAT DO

    THEY HAVE HERE? WHY SHOULD I BE HERE? WHERE DO I START?
  125. HOMEPAGE RESEARCH TECHNIQUE 3 ONLINE USABILITY TESTING LEARN WHAT WORKS

    AND DOESN’T WORK IN A HOMEPAGE
  126. USERS ARE ASKED TO COMPLETE TASKS WHILE UX METRICS ARE

    COLLECTED
  127. METRICS?

  128. TIME-ON-TASK

  129. TASK SUCCESS

  130. SATISFACTION

  131. CONFIDENCE

  132. RESULTS

  133. THINGS TO KEEP OPPORTUNITIES FOR IMPROVEMENT COMPERATIVE DATA ABOUT SPEED,

    SUCCESS, & SATISFACTION
  134. PREPARATIONS

  135. SCRIPT

  136. BRIEF

  137. WARM-UP

  138. TASKS

  139. DEBRIEF

  140. PILOT

  141. TASKS

  142. CORE

  143. REALISTIC

  144. 15-20 MINUTES

  145. IMAGINE YOU ARE PLANNING A VACATION IN BORA BORA IN

    MAY 2014 WITH YOUR SPOUSE. USE UNITED.COM TO FIND A FLIGHT THAT SUITS YOU.
  146. None
  147. USE THE RAINBOW SPREADSHEET TO TAKE NOTES COLLABORATIVELY (goo.gl/XWydEC)

  148. WHAT IS THIS? WHAT CAN I DO HERE? WHAT DO

    THEY HAVE HERE? WHY SHOULD I BE HERE? WHERE DO I START?
  149. HOW MANY PARTICIPANTS?

  150. TRY THE FIRST-CLICK TEST

  151. WORK IN PAIRS

  152. GRAB A HOMEPAGE CARD

  153. RUN A FIRST-CLICK TEST WITH YOUR PARTNER

  154. SWITCH ROLES

  155. CLASS DISCUSSION

  156. RECAP

  157. WHAT A HOMEPAGE NEEDS TO ACOMMODATE SITE IDENTITY AND MISSION

    SITE HIERARCHY SEARCH TEASES TIMELY CONTENT DEALS SHORTCUTS REGISTRATION WHAT I’M LOOKING FOR WHAT I’M NOT LOOKING FOR WHERE TO START ESTABLISH CREDIBILITY AND TRUST
  158. CHALLENGES OF DESIGNING A HOMEPAGE EVERYBODY WANTS A PIECE OF

    IT TOO MANY COOKS ONE SIZE FITS ALL
  159. 5 QUESTIONS A HOMEPAGE MUST ANSWER WHAT IS THIS? WHAT

    CAN I DO HERE? WHAT DO THEY HAVE HERE? WHY SHOULD I BE HERE? WHERE DO I START?
  160. HOMEPAGE RESEARCH TECHNIQUES INTERCEPTION SURVEY FIRST-CLICK TEST ONLINE USABILITY TESTING

  161. RESOURCES goo.gl/Kx57cy

  162. THANK YOU @tsharon speakerdeck.com/tsharon/evaluating-homepage-design