cr: Sage Island

Design Inspiration #2 : How to Design a Compelling Error Page

Angga Pradikta
uxmarker
Published in
4 min readAug 21, 2017

--

When something goes wrong with your website or application, it’s a common to display an error page. There are many different types of errors, but the most legendary one is 404: Not Found.

Wait what? What happen? Ewh

There is an urban legend said that the first internet server was located in room 404 of the CERN building. Reportedly, this server also produced the first “Not Found” error, which was subsequently termed as 404 error.

The problem was that apparently a room 404 never existed at CERN. Who knows. But this is make much more logical explanation for why “Not Found” is a 404 error.

Don’t Make User Leave Your Web App with Sad Face

Uh error? Oh my eyes..

Maybe you work as a software developer for internet company and writing code is hard and you don’t even bother to think that your website’s visitors would find the error pages and spending time on it.

Sorry to say but it really happens.

The 404 error page is one page that user interactions happen rather often times.

Don’t make it so boring. Add more fun and communicate like real human instead of become so stiff and formal.

Ewh Boring..

Design it in a way that speaks to users rather than encouraging them to leave your site.

More memorable and less frustrating 404 error pages are the most successful way to increase your web traffic and retaining users.

They can also be the most fun to design.

So here are few tips and gallery of great examples of the best 404 page I found on dribbble.

Don’t Make It Looks Like An Error

Area 404 by Cory Duma

Speak Like a Human, Your Users are Human, You are Human too

404 Got Lost by Anastasiia Andriichuk

Give Clear Explanation

Looks like you got lost by Alex Deruette

Make it Fun and even Funnier

What do you prefer, “404!” or “Four, oh four!”? by Anthony Lagoon

Please Your Users’ Eyes

No Bananas here by John Torres ♖♜ ✨

Admit That You Did Something Wrong

Lil’ generic 404 page by Greg Christman

Express Your Error Message More Personally

404 — funky monkey by Tony Babel

Use Emotion

Missing File by Zach Graham

Never make your user leave your web app with sad face, you don’t know what they’ve been through. Make them smile and feel relieved. So they’ll comeback.

uxmarker was founded with one mission mind: creating the best and most reliable user-centered design for our clients. Here in our HQ, we deal with a wide range of design avenues on every product platform. To ensure a satisfying product experience, our dedicated team generate data from curated user research methods and analyze them to find and fix various design obstacles. With our ingenious ideas and tested skill, we believe we can help make your products a pleasure to work with.

Keep in touch with us :

Instagram | Twitter | Dribbble | Contact Us

To help spread the word about uxmarker, please click recommend, or share this story! See you next week everyone.

--

--