Table Of Content
Not everyone gets it right, and Awwward’s 404 page uses all caps and stark imagery to communicate to the visitor that they haven’t arrived where they were expecting to. The capitalised text in particular makes it harder to read, causing the user to tarry longer on their journey than they might otherwise prefer. With a cool and casual tone, it focuses the user’s attention on exploring some delicious food items because what they are searching for is not found here. With a single CTA, it drives the users to their homepage to avoid any sort of distraction. As we went through many 404 pages with such a format, it is safe to say a little done with a lot of intention can do the work perfectly. Empathizing with the users, they redirect them to explore the platform or search help docs if they specifically need something.
Examples of Exciting 404 Error Pages [PART 2]
This can happen if someone mistypes the URL (or in other words, the web address that appears in the browser’s address bar). You can also reach a 404 page if a company has deleted or moved certain content from their website or has made changes to their permalink structure. Using relevant imagery is a great way to communicate with your audience visually and demonstrate great attention to detail. Properly selected illustration, photo, or video can help you draw interest and create an emotional connection with your audience and encourages them to stay at your website.
What's included in a 404 page?
404 page: the error sites of federal agencies - FedScoop
404 page: the error sites of federal agencies.
Posted: Tue, 23 Apr 2024 20:58:06 GMT [source]
To keep the users from drifting, it encourages them to scroll down and read some interesting blogs or learn more about their brand. There are no links in the header or footer if you try scrolling through. One diligently crafted page with one clear intention to bring back the interested users home.
Of The Best 404 Page Examples
Dribbble is a website for designers looking for inspiration, so what better way to help a lost visitor than letting them pick a colour and giving them links to designs of that colour. Another example of a website 404 page that deeply understands why their customers are there, and then works hard to give those customers that content wherever they go. Just an image of a broken robot and a simple almost technical error message. Probably a testament to their engineering roots and focus on finding just the right answer every time. Clean and simple, with plenty of options for users to continue navigating. The highlight of the page though is the oversized 404 text rendered in vectors that you can reshape to your heart’s content.
Explain, don’t just error message
If you have multiple menus, then you may prefer to show a different menu instead. To add a new block to your design, simply find the block in the left-hand menu. You can now customize the block following the process described above.
On top of the design, you’ll have the option to write a friendly, on-brand message that will provide visitors with the help and direction they need to keep browsing. To keep the cool vibes consistent across all parts of your site, you want to pick one of our free 404 error page templates. These come in all shapes and sizes, ensuring your users, readers, and random site visitors keep their presence by returning to your home page or visiting your social media accounts. You can achieve fantastic results with a responsive, mobile-ready, easy-to-use tool, like Colorlib 404 v15 page template.
Mastering Next.js Error Handling with the App Router — SitePoint - SitePoint
Mastering Next.js Error Handling with the App Router — SitePoint.
Posted: Thu, 08 Jun 2023 07:00:00 GMT [source]
For example, you can change the number of columns in the block, add pagination, allow shoppers to filter the best-selling products, and more. However, you can fine-tune this block by selecting it in the editor and then using the settings in the left-hand menu. You can create this list automatically using the MonsterInsights plugin. It’s the best analytics solution for WordPress, used by over 3 million websites. Next, we are going to change the ‘Back To Home’ button so it encourages people to check out a specific post instead of simply returning to the homepage.
Most of these default templates are simple and don’t show any content from your site. This means anyone who lands on your 404 page is more likely to leave your WordPress website, which will increase your bounce rate. A 404 error page doesn’t have to be a bad thing if you apply a creative touch and smart branding. In this article, we’ve curated 5 awesome examples of error pages to inspire you. One of the best practices for improving your 404 page is to recommend resources or add a search form to it to keep users on your website.
Learn more about your target audience and use this information to design jokes that work for them. Copy that reads “page not found” is the absolute bare minimum of what you can show on a 404 page. If your website contains a lot of content, you can also offer a search bar to help users find what they are looking for. For example, Apple uses a fairly standard design for its 404 page—the text section and search bar. If you would like to hit your users heavy (in a positive way) with your error page, we have a special treat here for you.
The amazing design of their error page is a direct reflection of their brand and their target market, making for the best user experience (UX). Since there’s very little diagnostic work that can be done to solve a 404 error, it’s best to keep everything simple. Unless your visitors have root access to the server they’re not going to solve anything by themselves. Engadget is an extremely popular site and their 404 page keeps it all grounded. Just a few links are offered along with the top navigation bar.
Also, you might have some content that is no more live on your page, again, sort things out with a 404 page. To save you from the hassle of creating one yourself, we bring you a massive collection of free 404 error page templates to start ASAP. Download this clean-looking layout with text and a call-to-action button that leads the user back to the home page. Whether you are still establishing your page or already have it live but missing an error page, you can now add it sooner rather than later. Every great website features a number of common pages with similar usability techniques. One of the most common yet unrecognized pages that every site should have is the 404 error page.
The illustration depicts worriness, which is something that is happening as the user is on the 404 page. With a single motto to get them back to a happy state, they offer their homepage CTA. The users can either opt to go to the homepage or, if they are not sure what to do, they can explore some store examples and their success stories.
Many websites use gamification to build customer loyalty and keep people coming back. As we can see, OptinMonster uses the 404 error to their advantage by creating a pitch that feels very relevant and timely. The 404 page’s messaging adds to this sense of urgency, making this a very dramatic and compelling page design. This brings us back to the necessity of proper UX/UI design for websites and 404 error pages. An oblique movie reference, a little explanation and a chance to look at a curated photo list means even users who arrived there by accident are likely to hang around for a little longer. Every good UX designer and product manager recognises that while you focus on solving the biggest problems a user has first, you need to accommodate when they go off script too.
No comments:
Post a Comment