Table Of Content
If you have an online marketplace or store, then you may want to show your best-selling WooCommerce products on the 404 page. In this way, your custom 404 page can help you get more sales. After that, click to select the Shortcode block in the SeedProd editor. With that being said, let’s look at some advanced features you can add to your 404 page. For example, you might promote the most popular post on your WordPress blog or the page that helps you make the most money online blogging. We’re using ‘Oh No 404 Page’ in all our images, but you can use any design you want.
Start prototyping new websites today. Enjoy unlimited projects.
Google Offers Advice on 404 and 410 Status Codes - Search Engine Journal
Google Offers Advice on 404 and 410 Status Codes.
Posted: Wed, 23 May 2018 07:00:00 GMT [source]
There’s a clear apology message and a search bar that encourages you to stay on the site and search for the resource you need. The message simply states that “this path goes nowhere” and then it directs the visitor to try one of a few different links. While the user is still technically on the website (as evidenced by the address in their browser bar), the only way to escape from this kind of error page is to use the “Back” button. Neither the message nor the reversal approach is user-friendly.
Types, Examples & Tips: All About Grids in Graphic Design
It’s the cheeky, self-deprecating error message that enables Skillshare to take the blame for the 404 error away from the visitor. While it’s nice to keep users on the site, it’s going to confuse a lot of people when they assume they’re about to see a product page, for example, but end up on the homepage instead. In fact, many of those people will probably try to execute the same steps as before, thinking that maybe something went awry before. As I explored 404 error pages today, I discovered an annoying trend. Instead, when someone encounters an error, they immediately move the user to a designated page (usually the homepage). This unique design by creative duo Wade and Leta stands out from the crowd.
Top Examples of 404 Error Pages
We hope this article has helped you find the best 404 error page design examples. You may also want to check out our guide on how to track website visitors, or see our comparison of the best email marketing services to turn potential leads into paying customers. Instead of a static list, they’ve created an interactive element where the 404 error message itself is populated with images that match a specific color scheme. However, unlike the other businesses on this list, Screaming Frog creates a tool that helps website owners find and fix broken links. Their 404 page wastes no time pointing out the irony of the Screaming Frog website having a broken URL.
Error pages could be boring, or they could be cool and attention-grabbing. Hey, you should keep your site visitors impressed and fascinated. Even with a 404 error page, you can have it in tune with your page style and keep the branding intact.
The Ultimate Guide to Crafting a Perfect Graphic Design Resume in 2024 + Examples
It's vital not to go overboard with offering too many options. Presenting too many choices makes the page less visually appealing and makes it harder for a visitor to decide what they want to do next. Use your analytics data to understand what parts of your website are the most important to your visitors, choose the top important ones (as a rule of thumb, up to 5) and add them on this page. In the perfect world, website visitors never see the 404 page. But in the real world, both website visitors and website moderators make mistakes, and it's nearly impossible to avoid showing the 404 page. Poorly designed 404 pages can fill visitors with frustration, while a well-designed 404 page can turn that moment of frustration into a moment of delight.
Ben includes a surprise scroll-triggered animation — when we scroll down the message disappears and the stars rearrange to form a 404 constellation. Anyone who loves popping bubble wrap will enjoy MAD’s 404 page. Instead of bubbles to pop, this error page spells out 404 in with toggles we can flip on and off to either erase the number or spell out our own message. Kualo delights us with a branded version of the old school video game, Space Invader. She now spends her days reviewing mattresses and hiking boots as the Outdoors and Wellness editor at T3.com, but continues to write about design on a freelance basis in her spare time.
I really like GitHub’s 404 page because it offers a very large search bar. Most people on GitHub are technically savvy enough to use that search bar to help them find whatever they’re looking for. Thoughtfully designing a page that only shows up when things go wrong may seem pointless, but it’s actually a chance to keep visitors engaged. So before you add a basic “oops, page not found” message, take a look at some of the more imaginative examples I’ve stumbled upon. A collection of some of the best 404 page examples that go beyond the standard error message by using creative design and copy. Tripadvisor also attempts to put things into proportion with its 404 page.
Customer Service
Like the rest of their x it’s personal and weird in all the right ways. They’ve included a short looped gif of Wade chatting away in a supermarket aisle and making a hand gesture that seems unrelated to the issue of the 404 page. However, what makes this 404 page truly special is the sensitivity with which each element has been created. The image of the donkey with its head in a hole, desperately searching for the page the visitor was looking for, is moving in itself.
We hope this article helped you improve your 404 page template in WordPress. You may also want to see our guide on how to set up Google Analytics goals for your WordPress site and our expert pick of the best virtual business phone number apps. In this case, you usually don’t need to redirect the user to another page. But we recommend following the best practices we’ve shown you to get them back on track. One of the most common causes of 404 errors is when the visitor genuinely made a mistake when entering the URL. For example, you may want to display your site’s recent posts.
Is it a waste of time to create a custom 404 page for a website? In general, aiming to include up to 4 links on a 404 page is good practice. Let’s show them everything we got and see if they bite” Bad idea. Overwhelming the user with a 404 page jam-packed with links to every nook and cranny of your site is a surefire way to cognitively overload an already frustrated user. And as NN Group guru Kathryn Whitenton makes clear, cognitive overload and usability do not go hand in hand.
Spotify keeps the main navigation bar at the top of the page and includes links to helpful resources in the error message. No one aims to land on a 404 page — unless you’re collecting them for an article, of course — so pointing people to FAQs is a nice touch. It’s the difference between hitting a roadblock and seeing signs for a detour — one is a deadend while the other is an alternate route. This design leans into the joke by providing a “next place” button in addition to the link back home. Now that you understand how a fantastic 404 error page may improve both your visitors’ user experience and your website’s SEO rating, it’s time to design the ideal 404 error page.
These and many other features are great ways to retain your visitors. If a user lands on an error page, you do not want them to leave your site entirely. Ikea’s 404 error page includes notification and a simple message with a “go back home” link. Besides, a creative sorry message, their “Page not Found” is inspired by their offer, with call-to-action buttons.
With the Back home button given prominence within the design, the page provides a quick bit of wit before encouraging users to circle back to the start of their journey. Rather than simply stating the error, the brand has created a Venn diagram that covers the two main bases for why the user has ended up here – user error or a website issue. Plus, there’s still the option to go back and pick up their user journey where they left it after they’ve had their fun. Ready to Go Survival plays with this choice, though, as both options link back to the homepage – so users can start their journey again and make new choices from there. That means the content of your 404 page can be designed however you see fit, forming a key part of your website just like any other page you need to design to represent your brand. As a result, you can maximize the opportunity to increase pageviews and reduce bounce rates.
While informing website visitors that nothing exists here, it plays with convention to congratulate those searching for the error page. If users manage to hit the 404 page, they’re treated to a randomly selected psychedelic background clip while the text provides a playful snippet of personality. Upon landing, its statement green coloring is on full display with clear error message text – but the big difference is your mouse cursor. A sad robot follows your movements around the page perfectly, indicating that this page is a dead end. By doing this, it forms a bonding moment with the user and the 404 page no longer feels like a negative experience.
No comments:
Post a Comment