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.