Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (13)
Ähnlich wie 404 Moment of Truth -- David Zerlin (WIAD 2015)
Ähnlich wie 404 Moment of Truth -- David Zerlin (WIAD 2015) (20)
Mehr von WIADchicago
Mehr von WIADchicago (11)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
404 Moment of Truth -- David Zerlin (WIAD 2015)
- 1. PRESENTED BY David Zerlin VSA Partners 404 Moment of Truth Rethinking ibm.com’s primary error page 21 February 2015
- 2. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Moment of Truth 2
- 3. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL 3
- 4. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL A Walk Through the Project 4 Research & Analyze • Landscape Review • Evaluation System • Traffic Analysis Explore • Design Three Concepts Refine & Build • Test With Users • Improve • Build
- 5. IBM⎪ 404 PAGE REDESIGN⎪ 4 DECEMBER⎪ © 2014 VSA PARTNERS⎪ CONFIDENTIAL Research & Analyze
- 6. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Landscape Review Where we found many examples of interesting or entertaining 404 pages, but few that were actually helpful.
- 7. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL 7 Mint GitHub Dilbert Mailchimp RomainBrasier.fr NPR Apple Oracle GE Nike Coke - corporate Zappos - corporate
- 8. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Mint 8
- 9. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Mint 9 Cute Helpful?
- 10. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL GitHub 10
- 11. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL GitHub 11 Funny inside joke Fun animation Somewhat helpful
- 12. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Dilbert 12
- 13. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Dilbert 13 Branded communication Where do you go next?
- 14. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Nike 14
- 15. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Nike 15 Simple, minimal Unhelpfully multilingual Where do you go next?
- 16. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL A 404 page should: • Covey to users that something went wrong • Briefly indicate why • Give users obvious options for getting back on track
- 17. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. - Jacob Neilsen, 1995 A 404 page should: • Covey to users that something went wrong • Briefly indicate why • Give users obvious options for getting back on track
- 18. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL GE 18
- 19. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL GE 19 Covey that something went wrong
- 20. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL GE 20 Covey that something went wrong Briefly indicate why
- 21. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL GE 21 Covey that something went wrong Briefly indicate why Obvious ways out
- 22. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Oracle 22
- 23. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Oracle 23 Covey that something went wrong
- 24. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Oracle 24 Covey that something went wrong Briefly indicate why
- 25. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Oracle 25 Covey that something went wrong Briefly indicate why Obvious ways out
- 26. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Mailchimp 26
- 27. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL 27 Covey that something went wrong Mailchimp
- 28. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL 28 Covey that something went wrong Briefly indicate why Mailchimp
- 29. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL 29 Covey that something went wrong Briefly indicate why Obvious ways out Mailchimp
- 30. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Mailchimp 30
- 31. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL
- 32. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL “hitps” “hip” Places you can go that might be related to your request.
- 33. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Research⎪Landscape Review 33 A 404 page should: • Covey to users that something went wrong • Briefly indicate why • Give users obvious options for getting back on track
- 34. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Research⎪Landscape Review 34 A 404 page should: • Covey to users that something went wrong • Briefly indicate why • Give users obvious, relevant options for getting back on track • Express the character of the brand
- 35. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Evaluation system Where we decided what aspects of the experience were important and made a measuring stick.
- 36. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Research⎪Evaluation System 36 Function How relevantly a 404 page points users toward their original goal. Tone The nature of the page in how it conveys its information and guides users.
- 37. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Research⎪Evaluation System 37 The Function Spectrum How relevantly a 404 page points users toward their original goal. Direction Proactively tries to get the user back on track. Diversion Creates a distraction to keep users on the site.
- 38. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Research⎪Evaluation System 38 The Tone Spectrum The nature of the page in how it conveys its information and guides users. Technical Provides functional information in a tactical, straightforward way. Delightful Provides engagement in a branded, whimsical or distinctive way.
- 39. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Research⎪Evaluation System 39 DIRECTION DIVERSION TECHNICAL DELIGHTFUL
- 40. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Research⎪Evaluation System 40 DIRECTION DIVERSION TECHNICAL DELIGHTFUL Oracle
- 41. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Research⎪Evaluation System 41 DIRECTION DIVERSION TECHNICAL DELIGHTFUL
- 42. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Research⎪Evaluation System 42
- 43. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Research⎪Evaluation System 43 Discovery: Too delightful and we disrespect the user’s situation. Romain Braiser
- 44. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL 44
- 45. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Research⎪Evaluation System 45 Discovery: To offer truly useful direction, pathways off the page must be intelligently personal. Zappos (ecomm)
- 46. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Research⎪Evaluation System 46 The Target The place our design explorations should hit.
- 47. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Traffic Analysis Where we discovered that we’re serving a lot of 404 pages and that the biggest bunch of those come from search engines.
- 48. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Research⎪Traffic Analysis 48 What we were hoping for • Site exits from the 404 page • Top countries of visitors to the page • Top languages of visitors to the page • Top referrers to the page • 404 visits/total visits
- 49. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Research⎪Traffic Analysis 49 What we were hoping for • Site exits from the 404 page • Top countries of visitors to the page • Top languages of visitors to the page • Top referrers to the page • 404 visits/total visits The principal KPI. We want this number to drop after we launch the updated 404 page.
- 50. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Research⎪Traffic Analysis 50 What we were hoping for • Site exits from the 404 page • Top countries of visitors to the page • Top languages of visitors to the page • Top referrers to the page • 404 visits/total visits A rough indicator of user needs, and helps prioritize multi-lingual variations.
- 51. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Research⎪Traffic Analysis 51 What we were hoping for • Site exits from the 404 page • Top countries of visitors to the page • Top languages of visitors to the page • Top referrers to the page • 404 visits/total visits Shows how people got to the page, which is a more specific indicator of user needs.
- 52. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Research⎪Traffic Analysis 52 What we were hoping for • Site exits from the 404 page • Top countries of visitors to the page • Top languages of visitors to the page • Top referrers to the page • 404 visits/total visits Indicator of how serious an issue we are having.
- 53. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Research⎪Traffic Analysis 53 What we could get…
- 54. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Research⎪Traffic Analysis 54 What we could get • Site exits from the 404 page • Top countries of visitors to the page • Top languages of visitors to the page • Top referrers to the page • 404 visits/total visits
- 55. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Research⎪Traffic Analysis 55 What we could get • Site exits from the 404 page • Top countries of visitors to the page • Top languages of visitors to the page • Top referrers to the page • 404 visits/total visits Majority of users arrive at the 404 page via a search engine results page (SERP).
- 56. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Research⎪Traffic Analysis 56 What we could get • Site exits from the 404 page • Top countries of visitors to the page • Top languages of visitors to the page • Top referrers to the page • 404 visits/total visits Not visits, but page views instead. 4 weeks (28 days): 404 page: 223,777 Total views: 63,939,140 or .35%
- 57. IBM⎪ 404 PAGE REDESIGN⎪ 4 DECEMBER⎪ © 2014 VSA PARTNERS⎪ CONFIDENTIAL Explore
- 58. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL 58
- 59. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Concept 1 Simple, with a touch of whimsey.
- 60. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Explore⎪Concept 1 60
- 61. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Explore⎪Concept 1 61 Simple with a touch of whimsy
- 62. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Concept 2 Expertise as a resource.
- 63. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Explore⎪Concept 2 63
- 64. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Explore⎪Concept 2 64
- 65. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Explore⎪Concept 2 65
- 66. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Explore⎪Concept 2 66
- 67. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Explore⎪Concept 2 67
- 68. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Explore⎪Concept 2 68
- 69. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Explore⎪Concept 2 69 Expertise as a resource
- 70. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Concept 3 Intelligent search.
- 71. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Explore⎪Concept 3 71
- 72. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Explore⎪Concept 3 72 Intelligent Search
- 73. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Concept 4 Combination of managed states.
- 74. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Explore⎪Concept 4 74 Conditions can be extracted from: • Logged-in user properties - primarily Industry, Company Size, Company, Preferred Language, Geographic Location • User’s IP address - Company Size, Company, Industry, Geographic Location • The referring URL - the place the user was when asking for the requested URL • The requested URL - the “broken link” that the server can’t find • Install-language of user’s browser
- 75. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Explore⎪Concept 4 75
- 76. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Explore⎪Concept 4 76 Combination of Managed States
- 77. IBM⎪ 404 PAGE REDESIGN⎪ 4 DECEMBER⎪ © 2014 VSA PARTNERS⎪ CONFIDENTIAL Refine & Build
- 78. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Test With Users Where we saw the Moment of Truth on people’s faces.
- 79. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Refine & Build⎪Test With Users 79 Study Goals • To investigate the flow from the most common user scenario: a broken link from an external search engine. • To see how people react overall to the message and tone of the upside-down logo. • To investigate the various “ways out” options developed in concepting Prototype
- 80. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Refine & Build⎪Test With Users 80 Overall Findings • People were confused at first—took a while to understand what was happening and why. • Participants were task-focused, and not interested in exploring the page. • People understood that the page was trying to be informal, human, self- effacing and funny, yet nobody even cracked a smile. • There was consensus that “404 Error” was redundant, but helpful. • Cards with sub links were considered more useful. • Unhesitating preference for the option with search results.
- 81. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Improve Where we simplified the plan and changed priorities.
- 82. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Refine & Build⎪Improve 82
- 83. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Refine & Build⎪Improve 83 Next Phase
- 84. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Build Where the minimum viable product went live. Generic 404 Search Results 404 How We Did
- 85. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL
- 86. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL
- 87. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Build⎪First Launch 87
- 88. IBM⎪ 404 PAGE REDESIGN⎪ 4 DECEMBER⎪ © 2014 VSA PARTNERS⎪ CONFIDENTIAL Epilogue
- 89. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Epilogue 89 Error prevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. - Jacob Neilsen, 1995 Keep users from ever seeing a 404
- 90. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Epilogue 90 There will always be cases could produce a 404 page. Visitors who: • Mistyped a URL • Bookmarked pages that have since be decommissioned • Clicked a link on an external site that points to your dead page These are out of administrator control, but there are still things we can do: • Redirect inbound links to decommissioned pages—where appropriate • Remove dead links on experiences you control • Have and maintain Google Sitemaps
- 91. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL Epilogue 91 A 404 page should: • Covey to users that something went wrong • Briefly indicate why • Give users obvious, relevant options for getting back on track • Express the character of the brand or organization
- 92. IBM⎪ 404 PAGE REDESIGN ⎪ 4 DECEMBER ⎪ © 2014 VSA PARTNERS ⎪ CONFIDENTIAL 92 Epilogue Photo: Susan Sermoneta
- 93. IBM⎪ 404 PAGE REDESIGN⎪ 4 DECEMBER⎪ © 2014 VSA PARTNERS⎪ CONFIDENTIAL Thank you. David Zerlin VSA Partners dzerlin@vsapartners.com @zetadog @vsapartners Additional fun 404 pages: • http://www.bloomberg.com/404 • http://www.bloomberg.com/politics/400 • http://www.romainbrasier.fr/404
Hinweis der Redaktion
- This is the face of this guy’s next loyal customer. Or next ex-customer. These two are having a moment of truth, where what this fellow does next makes the difference. Hopefully, this is going to be a positive experience for her. How many of you have been in a situation like this, on or offline? You were deeply engaged right? IAs and UX designers strive for that kind of engagement with users, but on the other end of the spectrum. The theory is that if we can turn that negative into a positive, the level of engagement is still there. The impression is deep. When someone gets a 404 page, they are having an experience similar to this young lady. Expectations are unmet, you are responsible, she is looking to you for redress. What you do next is happening at that deep engagement level. Its either going to be negative, or positive… [next slide]
- This is the story of how we addressed ibm.com’s 404 page, and laid the groundwork for a series of improvements to make the experience positive—happy. Our client—design partner really—recognized the opportunity to improve users’ experience of this page. We worked closely over a period of 8 weeks or so to find true north, and launch the first step. In case you don’t know: a 404 page is page a web server displays if it can’t show the requested URL.
- A more-or-less linear review of the highlights of our journey.
- We began with a spin through a slew of 404 pages-just to see what was out there and capture general impressions. Corporate, retail, media, tech…
- After familiarizing ourselves with the range of 404 pages out there, we took a step back and distilled some principals from our increasingly specific opinions. This started sounding familiar…
- Around the time the Web was becoming a mass medium, Jacob Nielsen had already circulated his 10 design guidelines, one of which directly relates to error pages. Our list gave us a slightly better view into the workings of 404 pages…
- GE’s main site, with a mission not unlike IBM’s site.
- Many confusing ways out. Also similar to ibm.com. Fav: you can actually share GE’s 404 page on FB, LI, Twitter, G+, Pinterest.
- Oracle. This is 100% of the page—no navigation header, footer, search.
- Good on this one. Big red banner with an “!”
- Good here
- These links are obvious, but probably not so useful. And not even necessary if the site’s navigation and footer were present.
- Everyone on the team liked this page a lot…
- Part of conveying that something went wrong is by presenting a page that is very different from every other page.
- This page pivoted our thinking. It has a lot of character. And the way it is having fun seems right on brand for MailChimp, and doesn’t get in the way of the things it really has to do as a 404.
- Another page drew our attention. This isn’t even technically a 404. But we looked at a few commerce sites to see how they dealt with requests they couldn’t process. This is Zappos…
- Commerce sites generally work harder to give you something RELEVANT to your request. We were impressed by this, and felt that 404s could do something similar.
- So we changed our list a bit.
- Pathways back to safety shouldn’t just be “obvious.” They should also be “relevant.” And, like MailChimp, all of the above should express the character of the brand. We needed a tool for measuring, or at least evaluating these aspects.
- With these guidelines in mind, we created a way to gauge 404 page experiences so, when we got to designing, we could compare our own concepts to the better 404s.
- After some back and forth, we determined that there are 2 continuums (continua) that were important for this project. Function, and Tone. [ read slide ]
- The Function spectrum’s two endpoints are Direction and Diversion. [ read descriptions ]
- The Tone spectrum spans from Technical, to Delightful. [ read descriptions ]
- So looking again at ibm.com’s 404, it is extremely prosaic. About as far to the left as you can go. It is trying to provide direction, rather than distract, so it is above the halfway mark vertically. Within the main body area, there are several groupings that are hard to differentiate. Along with main navigation, including search, and the large footer, there are potentially helpful ways out. It could provide much better direction, so only a little above half vertically.
- Oracle’s 404 is similarly technical in tone, and is much simpler. But without any navigation or search, it looses a little ground to IBM’s in terms of helpful direction.
- What GE gains by having navigation, it looses by being chaotic. We put it in the same place vertically as Oracle. It’s also all the way to the left tonally.
- This is where some of the main pages we were tracking plotted. Make note of the Zappos commerce dot, and the Romain Braiser dot. These helped us make a couple of important discoveries…
- One discovery was that it is possible to go too far to the right. For our brand, anyway, too much delight and you cheapen the situation the user is in. Romain Braiser is a French developer. Here’s his site’s 404 page… [ next slide ]
- The other discovery, remembering the Zappos eCommerce example, was that some amount of personalization is required to provide truly useful pathways off the page. Zappos may not be the best example of that, but it hinted at what was possible. So the horizontal blue line represents personalization—everything above provides intelligently dynamic recommendations.
- So for our designs, we wanted to target this zone.
- [ Skip if running out of time ] Also part of the initial phase of the project: Traffic Analysis, where we discovered…[read slide]
- We don’t have access to ibm’s traffic analytics tools, so we asked for a few metrics.
- So for whatever reason, the search services have outdated indexes pointing to decommissioned pages.
- If you figure 2.5 to 3 page views per visit, that’s maybe 1% of visits have a 404 page view. Bottom line: we’re serving up a lot of 404 pages, and our principal use case is a pathway from a search engine result page.
- After a few weeks of research, we began designing.
- We developed several concepts. Using our 4 principals, the writer generated dozens of messaging variations which visual designers and I would expand on. We’d bring our drafts to collaborative sketch/critique sessions, discuss and redline, and revise for the next, working closely with our client along the way. In a couple of weeks we worked our way down to 3-ish versions for testing…
- This concept is straightforward in it's functionality but utilizes an unexpected treatment of the 8-bar as a way to add delight. The page quickly informs the user of the error encountered and provides search and top links as a easy way to navigate away from the 404 page.
- Expertise as a resource This concept recommends select IBMers along with targeted links to help people find what they need. This would allow users access to a resource—IBMers—that is unique to IBM.
- Users start by selecting an area of interest. When we got to the test version, the initial state of this page had some experts and pages exposed by default, recognizing that we had to make some available without an interaction.
- Selecting brought forward a set of experts, some of whom you could chat with. Also, places on ibm.com. All of which are related to the user’s selection.
- Scroll down the page. Here are some example areas of ibm.com.
- On the desktop experience, users roll over the faces to get a sense of each person’s expertise. In this first iteration, we had a sense that this was too much work. We refined it for the test version.
- Chat window.
- For this one, we figured that if people actually ended up in communication with one of the IBMers, they’d be getting personalized direction, and hopefully somewhat up the delight spectrum. That’s a big if, however. One we’d test.
- A search field would be pre-populated with some search terms based on…whatever we can interpret from the user’s request (will show that in a minute), with result cards from a carefully curated set of… maybe 200 locations populated below. Hit return and you go off to a standard results page.
- In this concept, we dynamically show different modules, some of which we have already concepted, based on properties associated with each specific user. Modules like…[ talk through ]. Properties like… [ talk through ]
- So a high-level flow might look like this. [ talk through ]
- This one also provides a lot of personalized direction, and combined with a good Main Message Module, could also be delightful. This concept provided us a way of thinking about the previous concepts—not as exclusive, but as a system; options that we show to users based on what we can learn about what they need.
- Before building and launching, we needed some user input to help us refine.
- We tested a prototype of the first three concepts, starting from a Google results page. It was really interesting to see people’s flow interrupted as they encountered the 404 page rather than the information they were expecting. They were riveted. The gears were turning as they tried to contextualize what they were seeing and why. It really was the moment of truth.
- Also: To discover where users may have troubles we didn’t anticipate. To trigger new ideas to make the page more effective. [ Walk through live prototype - if AxShare doesn’t work, open Axure File on desktop ]
- [ show built page ]
- Where did we net out with this first launch? If we can’t get the search query, users get the generic version with no results, shown here. That has us resting on the X-axis. The upside-down logo and verbiage is somewhat cute, so about 1/2 way toward delightful. If we get a user’s query, the links off the page are personalized so we get above the horizontal blue line. And when we start doing more advanced interpreting of the requested URL, IP address, and the referring URL, we’ll get more deeply into the target zone.
- I probably don’t need to tell you this, but it is better to keep users from ever seeing a 404. Fortunately, our project was in parallel with another at IBM to better sunset content, which will almost certainly include ways for decommissioned pages to redirect to closely related content.
- If we do the things on the previous slide, then hopefully users will be back in their flow, feeling supported, happy, and with a deeper appreciation of what your organization can do for them.