{"id":139759,"date":"2021-08-28T11:13:00","date_gmt":"2021-08-28T16:13:00","guid":{"rendered":"https:\/\/getflywheel.com\/?p=26708"},"modified":"2024-01-01T06:11:49","modified_gmt":"2024-01-01T12:11:49","slug":"creative-404-pages","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/creative-404-pages\/","title":{"rendered":"Creative 404 Pages"},"content":{"rendered":"\n<p>Uh oh! You\u2019ve stumbled on a 404 page!<\/p>\n\n\n\n<p>Generally speaking, landing on a 404 page is frustrating for your users. It\u2019s also bad for your SEO, as most people\u2019s first reaction is to click away, sending your bounce rate tumbling.<\/p>\n\n\n\n<p>But 404 pages don\u2019t have to be a nightmare for your user experience. Instead of ignoring your 404 page or using a dull, generic template, you can use it as an opportunity to reinforce your branding and even encourage some conversions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is a 404 Page?<\/h2>\n\n\n\n<p>A 404 page is a standard HTTP error code that appears when the page you\u2019re seeking cannot be found on the server. Essentially, it\u2019s a tool that tells users a page is unavailable.<\/p>\n\n\n\n<p>There are various reasons for its appearance. The page could have been moved or deleted, or the link broken. It could also indicate that the user typed in the wrong address. This last option shows that finding a 404 page can be out of your control. So the best thing you can do is design a user-friendly, creative page that delights your users and directs them to the right place.<\/p>\n\n\n\n<p>Here are seven tips and tricks to designing a creative, memorable 404 page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Lose the Technical Mumbo-Jumbo<\/h2>\n\n\n\n<p>It\u2019s important that people can tell at a glance that they\u2019ve landed in the wrong place. However, it\u2019s likely that many users won\u2019t know what a 404 page actually is. So avoid the technical mumbo-jumbo and tell it to them straight.<\/p>\n\n\n\n<p>Use normal, human language, such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2018Oops! Something is broken\u2019<\/li>\n\n\n\n<li>\u2018Uh oh! This page doesn\u2019t exist\u2019<\/li>\n\n\n\n<li>\u2018Oh dear! This link isn\u2019t working\u2019<\/li>\n<\/ul>\n\n\n\n<p>Injecting a little personality and humor can go a long way to alleviating some of the frustration of ending up in the wrong place.<\/p>\n\n\n\n<p><a href=\"https:\/\/hootsuite.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Hootsuite<\/a> gets this spot on with its witty 404, cracking a joke about their <em>extinct<\/em> page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Shoulder the Blame<\/h2>\n\n\n\n<p>The goal of a 404 page is to keep the user on the website, even if they\u2019ve landed on a page that doesn\u2019t exist. So you don\u2019t want to make them feel stupid for typing in an incorrect address.<\/p>\n\n\n\n<p>Never point the finger of blame at your users, even if they made the mistake. Instead, take ownership of the problem and apologize for the error.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.emailcenteruk.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Emailcenter UK<\/a> took this one step further by accepting the blame and asking you to choose an employee to fire.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/03\/image2-2.png\" alt=\"Emailcenter UK 404 page, four guys with the writing &quot;Pick who to fire&quot;\" class=\"wp-image-26815\"\/><\/figure>\n\n\n\n<p>The humor continue once you chose which employee got the boot.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/03\/image8-1.png\" alt=\"emailcenter UK screenshot poor james\" class=\"wp-image-26816\"\/><\/figure>\n\n\n\n<p>Poor James! (Gotta love the developer nerd\/Star Trek humor!)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Offer an Immediate Solution<\/h2>\n\n\n\n<p>The worst 404 pages are the ones that leave users hanging, telling them they\u2019re in the wrong place but not offering a solution.<\/p>\n\n\n\n<p>Instead, you want to extend a helping hand. Your goal is to ensure your users stay on the website and find what they came for. So suggest some tools to help them out.<\/p>\n\n\n\n<p>Good options include a link to the homepage or sitemap, a search bar, a link to your most popular posts\/products, or a contact form so they can report the error. &nbsp;Use one or a combination of these, but take care not to overwhelm the user with choices\u2014the less clutter there is, the higher their chance of choosing the most useful option.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.hubspot.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">HubSpot<\/a> has an excellent example, offering a link to their blog, main product page, and inviting users to sign up for a free demo (great conversion tactic!).<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/03\/image5-1.png\" alt=\"hubspot screenshot broken heart\" class=\"wp-image-26817\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">4. Keep it on Brand<\/h2>\n\n\n\n<p>One of the biggest mistakes brands make with their 404 pages is leaving them void of personality. Indeed, you land on their error pages and you could be anywhere online.<\/p>\n\n\n\n<p>The key is to keep your 404 page on brand. Maintain the same look, feel, and voice as the rest of your website to reassure people that they\u2019re in the right place.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.ft.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">The Financial Times<\/a> has designed a fabulous 404 page that will appear to finance nerds everywhere, which asks leading economists why the page couldn\u2019t be found. All you need is a highbrow sense of humor and a solid understanding of economics theory\u2026<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/03\/image1.png\" alt=\"financial times screenshot\" class=\"wp-image-26715\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">5. Make Them Smile<\/h2>\n\n\n\n<p>People can become angry or frustrated if they can\u2019t find what they\u2019re looking for. The best way to defuse that anger and keep a potential customer is by making them smile.<\/p>\n\n\n\n<p>Offer an amusing graphic, animation, or video that will amuse people and leave a lasting impression on them.<\/p>\n\n\n\n<p><a href=\"http:\/\/audiko.net\/\" target=\"_blank\" rel=\"noreferrer noopener\">Audiko<\/a> is a UK company offering free ringtones. They created a vibrant 404 page that was filled with London imagery, including Sherlock Holmes looking for clues. It included a link to the homepage and a search bar.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/03\/image9.png\" alt=\"audiko screenshot with magnifying glass cartoon\" class=\"wp-image-26716\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">6. Be Interactive<\/h2>\n\n\n\n<p>Introducing an interactive element to your 404 page will increase the time spent on the page while decreasing your bounce rate. The more fun and entertaining you make it, the longer your users will hang around.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.androidpolice.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Android<\/a> used to appeal to their gaming crowd by offering an interactive game to everybody that landed on its 404 page.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/03\/image4-4.png\" alt=\"android screenshot game\" class=\"wp-image-26822\"\/><\/figure>\n\n\n\n<p>Once you pressed play, they launched a cute little game that involved catching desserts in the right pipe. And they longer users played, the longer they stayed\u2014even though the page served them no real purpose.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/03\/image7-1.png\" alt=\"android screenshot game\" class=\"wp-image-26820\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">7. Regularly Check Your Links<\/h2>\n\n\n\n<p>Finally, while adding a creative 404 page is fun, you don\u2019t want it to become a regular sight for your users. It\u2019s recommended that you run a frequent check of your site for broken links to ensure you keep them under control. About once a month is a good period of time.<\/p>\n\n\n\n<p>Using a plugin like <a href=\"https:\/\/en-gb.wordpress.org\/plugins\/broken-link-checker\/\" target=\"_blank\" rel=\"noopener noreferrer\">Broken Link Checker<\/a> is a useful tool.<\/p>\n\n\n\n<p>404 pages used to be a huge source of frustration, but it doesn\u2019t have to be that way. By designing a user-friendly page that gently guides people in the right direction while bringing a smile to their faces, they can be a great way of keeping your users entertained, introducing your brand, and helping to solve people\u2019s problems. Just ensure that they don\u2019t see them too often!<\/p>\n\n\n\n<p><em>What are your tips for designing a great 404 page? Can you add anything to our list? Tell us in the comments below.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Uh oh! You\u2019ve stumbled on a 404 page! Generally speaking, landing on a 404 page is frustrating for your users. It\u2019s also bad for your SEO, as most people\u2019s first reaction is to click away, sending your bounce rate tumbling. But 404 pages don\u2019t have to be a nightmare for your user experience. Instead of<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"template":"","resource-topic":[1396],"resource-role":[1397],"resource-type":[916],"class_list":["post-139759","resource","type-resource","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creative 404 Pages<\/title>\n<meta name=\"description\" content=\"Users encountering an error isn&#039;t ideal\u2014but as a designer, you can use these moments as opportunities to surprise and delight your customers!\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creative 404 Pages\" \/>\n<meta property=\"og:description\" content=\"Users encountering an error isn&#039;t ideal\u2014but as a designer, you can use these moments as opportunities to surprise and delight your customers!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/creative-404-pages\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-01T12:11:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/03\/image2-2.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/creative-404-pages\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/creative-404-pages\/\",\"name\":\"Creative 404 Pages\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2021-08-28T16:13:00+00:00\",\"dateModified\":\"2024-01-01T12:11:49+00:00\",\"description\":\"Users encountering an error isn't ideal\u2014but as a designer, you can use these moments as opportunities to surprise and delight your customers!\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/creative-404-pages\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/creative-404-pages\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/creative-404-pages\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Creative 404 Pages\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creative 404 Pages","description":"Users encountering an error isn't ideal\u2014but as a designer, you can use these moments as opportunities to surprise and delight your customers!","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"Creative 404 Pages","og_description":"Users encountering an error isn't ideal\u2014but as a designer, you can use these moments as opportunities to surprise and delight your customers!","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/creative-404-pages\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2024-01-01T12:11:49+00:00","og_image":[{"url":"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/03\/image2-2.png"}],"twitter_card":"summary_large_image","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/creative-404-pages\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/creative-404-pages\/","name":"Creative 404 Pages","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2021-08-28T16:13:00+00:00","dateModified":"2024-01-01T12:11:49+00:00","description":"Users encountering an error isn't ideal\u2014but as a designer, you can use these moments as opportunities to surprise and delight your customers!","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/creative-404-pages\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/creative-404-pages\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/creative-404-pages\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"Creative 404 Pages"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/themes\/wpengine-breakthrough\/images\/fallback\/default-grid-resource.jpg","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Designer","topic":"<strong>Topics:<\/strong> Design","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/139759","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=139759"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=139759"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=139759"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=139759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}