Daily UX Challenge #10 — 404 Page
This is a part of #DailyUX design challenge series. I write about my thought process of approaching 20 different design prompts.
Design Prompt
Not the best experience of browsing… But we know you can reverse it to an enjoyable experience! Make your user happy he or she ended up on this 404 page.
Good 404 Pages — natural, personal, with personality
A 404 page is a by-product of the World Wide Web. The technical definition on Wikipedia is:
The HTTP 404, 404 Not Found and 404 (pronounced “four oh four”) error message is a Hypertext Transfer Protocol (HTTP) standard response code, in computer network communications, to indicate that the client was able to communicate with a given server, but the server could not find what was requested.
The website hosting server will typically generate a “404 Not Found” web page when a user attempts to follow a broken or dead link; hence the 404 error is one of the most recognizable errors encountered on the World Wide Web.
I’m not a technical person like my boyfriend, who does professional IT troubleshooting for a living, so I really don’t need to know the specifics about the cause of a 404 error. So do most people out there. To me, the non-technical way to define 404 page can be as plain as “dead end” or “detour” in the virtual world of internet.
Thanks to the smartphone era, we will also find the 404 page method used in mobile applications when things don’t work as expected.
MWhat do these examples of 404 pages have in common? Without throwing the same old “404 Not Found” at people, they put a positive, or even funny, spin on it to ease people’s frustration and abandonment, and provide helpful information about what to do next instead. Yes, some of them have really cool illustrations and graphical elements or even animations, but if we take those added layers away and just look at the text, they use plain English, they read natural, they are personal, and they seamlessly weave in the brand identity and personality.
As Margaret Urban, interaction designer at Google, talked about the magic of language in a recent Google Method podcast:
“How language is used in the social context is really important in creating something that sounds natural. Because we want the computers to talk like people. We don’t want to force the people to talk like computers.”
Good 404 pages give people positive experience that it feels like a human being talking to you in real life, such as “Bummer! Something went wrong. Let me help you get out of here.”, rather than laying out technical terms in a robotic tone for people to read, and hopefully, to understand.
Redesigning 404 Page by Rethinking Words
Like most people, I turned to Google for searching and use numerous Google products everyday. Naturally, out of pure curiosity, I wonder with all the impact this company has to millions of people on this planet, how does this engineering-centric turned design-driven tech giant present its characteristic on the 404 page?
That’s it?
As Renny Gleeson mentioned in his hilarious TED talk on 404, “it’s the feeling of a broken relationship… it’s like a slap on the face.” But it doesn’t have to be like that. It can be an opportunity to thrive:
“Little things, done right, matter.
Well-designed moments build brands.”
That is exactly why words matter so much to me, even though I don’t have a linguistic or communications background.
Grew up speaking Cantonese and Mandarin, and adopting English as a second language for almost a decade, I‘d like to hack some 404 page design by rethinking words, from a conversational design perspective.
404 Page Hacks
Text is what people interact with the most every day, in the forms of interactions like talking, hearing, reading, and writing. Especially Google.
I’m not pretending that I know anything about Google’s branding other than what I learned from the talks scratching the surface of voice user interface design at Google I/O 2017 and their conversational design guidelines on Actions on Google. My hacks are based on the fact that Google’s products heavily influence millions of people’s life, and how I, as one of those frequent users, would expect its 404 page “talks” back to me.
At the minimum, I’d like to see words with more humanity, perhaps somewhat witty, to show that they care — care to be simply more useful, care to keep people engaged, and care to tell people more about the brand.
I’m not a writer by trade, but here is one of my attempt — shruggie and “talks” back ina lighthearted and easygoing tone:
My another attempt is more straightforward — give feedback then prompt to take action:
What I learned
I am not proud of the fact that this supposedly daily design challenge has become quite sporadic due to all kinds of “excuses”, such as work, personal life, or partially just procrastination.
However, I’m amazed how often this writing project is on my mind — I think about it on the bus, while driving, when eating, and at idle time in between chores. I find myself genuinely having fun with it even if I constantly struggled to put my thoughts into words.
Writing certainly helps me to collect and sort out my thoughts, and gives me an outlet for exploring new ways to be creative. I will keep doing it.
Previous pieces in the series (so far)
Challenge #1 — Wallet
Challenge #2 — Landing page
Challenge #3 — Parking machine
Challenge #4 — Chatbot onboarding flow
Challenge #5 — Teacup
Challenge #6 — Worst phone number input
Challenge #7 — Backpack
Challenge #8 — Contact section
Challenge #9 — Stove controls
