Saturday, April 27, 2024

The best UX for 404 error page Practices + Examples

404 page design

Since the 404 error is unexpected, it’s important to reassure visitors that they are still on your site by maintaining brand familiarity. They also won’t show any content from your website, such as popular posts that the visitor may want to read, or your site’s navigation menu. Having a Call to Action(CTA) button or message encourages the user to take action on your website. An example of a Call to Action would be a button prompting users to click a link to check out new and fresh content on your website home page, or contact the support team. Adding useful links to the page is an excellent way to guide users back to you sites main content.

How to Remove Green Screen in Photoshop: A Step-by-Step Guide

All you need to do is hit the Start text to enjoy the simple horizontal scrolling game, where all you need to do is avoid obstacles and other cars. We also appreciate the fun information on the old school from 1902. It makes you appreciate how long of a way we’ve come, and in a sense, that couldn’t be any more representative of the museum. Their brand is young and vibrant, filled with real human beings as opposed to a simple marketing software.

How To Make An invoice: A Step-by-Step Guide For New Entrepreneurs

In actual fact, this error page recreates illustrations from a level of the game Glitch. In Glitch, the players are focused on collaborative exploration, collection, and building tasks. Bitly’s page is another interactive and creative 404 design that incorporates a cute pufferfish that has lost its way. Whenever you scroll your cursor on the water, it creates a ripple!

When Wrong Goes Right: 30 Creative Museum 404 Error Pages - Hyperallergic

When Wrong Goes Right: 30 Creative Museum 404 Error Pages.

Posted: Fri, 19 May 2017 07:00:00 GMT [source]

HTML 404 Page Templates

Dribbble makes clever use of their 404 page by nudging us towards designs categorized by color rather than sending us straight to the homepage. Seeing as Textio is an augmented writing tool, it’s nice to see them play around with words on their 404 page. Bonus points for working the link back to the homepage into some philosophical advice from the unicorn. The accompanying gif is a compilation of hectic scenes from an episode of The Office,  providing a good laugh (and example of what not to do) before directing you back to the homepage. For more inspiration see our pick of the best Google Easter Eggs. And more on UX in general, see our guide to UX theory and our tips for successful UX research and testing.

404 page design

A funny 404 page can make visitors chuckle and stay on your website longer. Humor can be anything—from a joke that you crack on the page to the fun game you invite visitors to participate in. A web creator from France, Romain Brasier, found a pretty unusual way to incorporate humor on the 404 page. Once visitors land on the 404 page, they are engaged in a fun game where they need to save lemmings that fall from the top of the screen. This smart design decision adds another layer of interest, and makes the website itself a bit more human and engaging–even when the user landed there by accident.

404 page design

Reasons why customer experience is the gateway to startup success

We don’t want to spoil the surprises, so just trust when we say that trying out the “trex” command is worth it. It’s clear that the web designer behind this error page loves memes, easter eggs, and general silliness. Try some unscripted commands in the control console and you’ll see what we mean. We love the use of color, illustration and the general young feel of the page. It’s got helpful links and some great recommended reading to encourage users to continue navigating – in other words, it ticks all the right boxes. The New Yorker has a 404 page that blends in effortlessly with the rest of the website – and the brand personality.

Was this helpful?

It should be first-class no matter what part of your website they visit. For the most part, websites rock a light web design, but sometimes the owner prefers a dark look. We bring you another stunning, elegant, and professional free 404 error page template if the latter is you.

Funny 404 pages

Since navigation is so important, we recommend looking at SeedProd’s Nav Menu block. It lets you build all kinds of menus directly inside the page editor. This makes it easy to add helpful menus to your WordPress website. SeedProd also has lots of professionally-designed 404 templates to help you create a beautiful error page, fast. The right 404 page will keep visitors on your site for longer and encourage them to convert. By creating an engaging, helpful, and entertaining 404 page, you can give visitors a great experience, even when they see an error.

A 404 error page appears when a website visitor encounters a non-existent page. This can happen when there’s a broken internal link on the site (because the page was renamed or deleted) or when the user types in the wrong slug. If you include humor in your 404 page, make sure to balance it out by maintaining a professional look that abides by the principles of design. The use of white space, a minimal color palette and textual hierarchy helps the brand achieve a professional tone. Other than the possibility to navigate via the menus, Spotify has also adopted friendly, conversational language to suggest other useful pages.

404 Page Not Found Kate Wagner - The Baffler

404 Page Not Found Kate Wagner.

Posted: Tue, 08 Jan 2019 05:37:09 GMT [source]

This guides visitors away from missing pages or broken links so they can continue browsing the site. Both the illustration and accompanying message keep us in the D&D world. We may have stumbled onto a missing page, but we have clues and tools to work past this obstacle. In this case, those tools are page features such as the menu and search bar along with footer links. DropBox has replaced the Escher-esque impossible box that adorned its 404 page for years, with a similarly quirky illustration. We like to think of an abstract representation of everything going wrong – the wheels coming off.

A cracking joke isn't much good if there's no easily identifiable way for the user to get to where they wanted to be in the first place. A well-designed 404 page can help prevent that by redirecting the user back to the site, helping them find an alternative path. They can even serve as an opportunity to boost branding while stopping the user from leaving the site. An illustration of a space person floating into the '404' accompanies text saying 'Oops! There's also a timer counting down to you being directed back to the homepage.

Also, you can directly show them suggestions closely related to their search term. When you call up a page that does not (or no longer) exist, you are redirected to 404 pages. But this is not directly bad, because the 404 templates can work wonders with a little creativity, so that visitors do not leave your site. W3 Lab is a full-service digital marketing agency that offers exceptional marketing services with transparent pricing.

WAZA ditched the usual error message and instead let its animals do the talking, with a flamboyance of flamingos squawking about the missing webpage. This is a fantastic example of blending brand purpose with some irreverent fun and genuinely helpful signposting to assist a lost user. As a self-styled “gourmet web design” company, Orange Coat breaks the mold and serves up a flowchart for its 404 page to redirect a user’s journey. 9GAG also uses this as an opportunity to nudge users towards its mobile experience instead, so you can scroll to your heart’s content.

Instead of keeping your website’s default one, elevate your online presence with a modern 404 section and keep your knowledge intact. 404 sign, text and additional information about why your users see an error page is what this page template treats you to. You will also notice a call-to-action button to make functional and take your site guests back to the home page. Or if you would like to push your compelling blog section, you can link the CTA button there. As a result, you have a quick fix that will sort out your error page.

Even though we have a copy of Illustrator CC right here, and could play with anchor points and Bézier curves literally any time we want, we're still entranced by Figma's 404 page. Oversized 404 text is rendered in vectors that you can reshape to your heart's content. New York-based artist Steve Lambert describes this as "the most awkward 404 not found page on the internet", and you know, he may well be right.

No comments:

Post a Comment

Best Miami Design District Shopping Centers Guide

Table Of Content Subscribe to our mailing list Parking/ Kengo Kuma to design new mixed-use shopping center for Miami's Design District F...