{"id":5456,"date":"2022-08-08T11:06:51","date_gmt":"2022-08-08T11:06:51","guid":{"rendered":"https:\/\/craighordlow.com\/index.php\/2022\/08\/08\/bad-website-design-bad-for-seo-ux-and-business\/"},"modified":"2022-08-08T11:06:51","modified_gmt":"2022-08-08T11:06:51","slug":"bad-website-design-bad-for-seo-ux-and-business","status":"publish","type":"post","link":"https:\/\/craighordlow.com\/index.php\/2022\/08\/08\/bad-website-design-bad-for-seo-ux-and-business\/","title":{"rendered":"Bad website design: Bad for SEO, UX and business"},"content":{"rendered":"<p>I tell my clients two things to frame organic search discussions around <a href=\"https:\/\/searchengineland.com\/content-better-user-experience-386253\" target=\"_blank\" rel=\"noopener\">content and user experience<\/a>:<\/p>\n<ol>\n<li>Search engines want to provide answers to their users in one click or less.<\/li>\n<li>If you design your website with the idea of getting answers to visitors\u2019 questions as efficiently as possible, your site should earn more attention in organic search<\/li>\n<\/ol>\n<p>Search engines must keep their users happy to retain and\/or grow their market share. Therefore, it\u2019s in their best interest to send people to websites that they calculate will give users a good experience.\u00a0<\/p>\n<p><a href=\"https:\/\/www.thinkwithgoogle.com\/marketing-strategies\/app-and-mobile\/page-load-time-statistics\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bounce rates increase 32%<\/a> when download times went from 1 to 3 seconds, according to Google. Also, <a href=\"https:\/\/www.pingdom.com\/blog\/page-load-time-really-affect-bounce-rate\/\" target=\"_blank\" rel=\"noreferrer noopener\">bounce rates increase dramatically at 3 seconds<\/a>, while page views also drop off, according to Pingdom.<\/p>\n<p>Both of these stats are a bit old, but there\u2019s no evidence to suggest people are any more patient today.<\/p>\n<p>The challenge I most often run into with brands is that they design their websites in a way that hampers the \u201cone click or less\u201d goal. They incorporate things into their designs like:<\/p>\n<ul>\n<li><strong>Large autoplay videos<\/strong> (sometimes with sound).<\/li>\n<li><strong>Large hero images<\/strong> that push informational content far below the fold (add heroes that rotate through a slideshow and the experience is even worse).<\/li>\n<li><strong>Custom fonts<\/strong> that are not likely to have been installed on the local machines of their visitors.<\/li>\n<\/ul>\n<p>All of these design elements (and others) detract from user experience, conversion optimization and accessibility standards.\u00a0<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/craighordlow.com\/index.php\/2022\/08\/08\/bad-website-design-bad-for-seo-ux-and-business\/#Examples_of_bad_design_and_UX\" >Examples of bad design and UX<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/craighordlow.com\/index.php\/2022\/08\/08\/bad-website-design-bad-for-seo-ux-and-business\/#Charity_website\" >Charity website<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/craighordlow.com\/index.php\/2022\/08\/08\/bad-website-design-bad-for-seo-ux-and-business\/#Well-known_brand_website\" >Well-known brand website<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/craighordlow.com\/index.php\/2022\/08\/08\/bad-website-design-bad-for-seo-ux-and-business\/#Why_bad_UX_happens\" >Why bad UX happens<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/craighordlow.com\/index.php\/2022\/08\/08\/bad-website-design-bad-for-seo-ux-and-business\/#Avoid_these_pitfalls\" >Avoid these pitfalls<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Examples_of_bad_design_and_UX\"><\/span>Examples of bad design and UX<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Both of these examples show the filmstrip view of the page load over time on WebPageTest.org, a popular site for testing download times that has been recommended by some Googlers. I simulate a Galaxy S7 smartphone over an LTE connection in both examples.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Charity_website\"><\/span>Charity website<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"217\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2022\/08\/charity-website-page-load-results-800x217.png\" alt=\"| Craig Hordlow\" class=\"wp-image-386998\" title=\"| Craig Hordlow\"><\/figure>\n<p>This website has a large autoplay video on its home page that pushes much of the main content below the fold.\u00a0<\/p>\n<p>In the tests I ran, nothing appeared in the viewport until 3 seconds into the load. The CTA at the top of the page is visible, but only the logo\u2019s alt text shows. Some text is hard to read because it is light gray; it is intended to display as an overlay on the darker video.\u00a0<\/p>\n<p>Visitors may even miss that they are on the right website because the logo does not display until 4.5 seconds into the load and the alt text is difficult to read.<\/p>\n<p>If we are to believe the data from Google and Pingdom, it\u2019s quite likely that unless someone taps on the CTA at the top of the page, they are quite likely to bounce before getting the main message of this organization.\u00a0<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Well-known_brand_website\"><\/span>Well-known brand website<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"800\" height=\"217\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2022\/08\/large-brand-page-load-results-800x217.png\" alt=\"| Craig Hordlow\" class=\"wp-image-386999\" title=\"| Craig Hordlow\"><\/figure>\n<p>This website has a large hero image pushing content below the fold <em>and<\/em> a custom font that must be downloaded before anything displays.\u00a0<\/p>\n<p>You can see from the example that nothing other than the hamburger menu displays until 4 seconds into the load.\u00a0<\/p>\n<p><strong>Here\u2019s a hint:<\/strong> If you have to include some sort of download timer to let people know something is on the way, it\u2019s too big.\u00a0<\/p>\n<p>Part of the reason the content takes a long time to display is that the custom font alone takes around 4 seconds to download. No text appears until 6 seconds into the load, and that\u2019s only the cookie notice.\u00a0<\/p>\n<p>All told, it takes longer than 10 seconds for this page to completely download. When the page finishes loading, the only thing you can see other than the hero image is the cookie notice.<\/p>\n<p>To be fair, there is a lot more going on in these examples than large videos, huge heroes, and custom fonts. There are also JavaScript and CSS files, third-party tracking, and more also jamming up the download streams. Those are likely a subject for another time.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Why_bad_UX_happens\"><\/span>Why bad UX happens<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When I talk with designers and developers about challenges like this, I\u2019m often given the same justifications:<\/p>\n<ul>\n<li><strong>\u201cEveryone else is designing their websites like this.\u201d<\/strong> This kind of excuse didn\u2019t work when we were kids. Why do some adults think it\u2019s still acceptable?<\/li>\n<li><strong>\u201cThe search engines are unfair in how they judge download times. Our tools tell us everything is OK.\u201d<\/strong> There are many reasons to believe that the search engines are being unfair about evaluating download times. In the end, it really doesn\u2019t matter. If we want to compete, we need to be faster!<\/li>\n<li><strong>\u201cBut \u2026 branding!\u201d <\/strong>Yes, branding is important. But is it so important to risk losing potential customers because the website is too slow?<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Avoid_these_pitfalls\"><\/span>Avoid these pitfalls<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>It\u2019s our job to help our clients, partners, and colleagues create engaging sites that download quickly and meet the expectations of website visitors while still looking good.\u00a0<\/p>\n<p>Doing so will help earn more attention from organic search results and increase business.<\/p>\n<p>The post <a rel=\"nofollow noopener\" href=\"https:\/\/searchengineland.com\/bad-website-design-seo-business-386996\" target=\"_blank\">Bad website design: Bad for SEO, UX and business<\/a> appeared first on <a rel=\"nofollow noopener\" href=\"https:\/\/searchengineland.com\/\" target=\"_blank\">Search Engine Land<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I tell my clients two things to frame organic search discussions around content and user experience: Search engines want to provide answers to their users in one click or less. If you design your website with the idea of getting answers to visitors\u2019 questions as efficiently as possible, your site should earn more attention in organic search Search engines must keep their users happy to retain and\/or grow their market share. Therefore, it\u2019s in their best interest to send people to websites that they calculate will [&hellip;]<\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"h5ap_radio_sources":[],"cybocfi_hide_featured_image":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-5456","post","type-post","status-publish","format-standard","hentry","category-best-seo-blogs"],"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":false,"author_link":"https:\/\/craighordlow.com\/author\/"},"_links":{"self":[{"href":"https:\/\/craighordlow.com\/index.php\/wp-json\/wp\/v2\/posts\/5456","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/craighordlow.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/craighordlow.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/craighordlow.com\/index.php\/wp-json\/wp\/v2\/comments?post=5456"}],"version-history":[{"count":0,"href":"https:\/\/craighordlow.com\/index.php\/wp-json\/wp\/v2\/posts\/5456\/revisions"}],"wp:attachment":[{"href":"https:\/\/craighordlow.com\/index.php\/wp-json\/wp\/v2\/media?parent=5456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/craighordlow.com\/index.php\/wp-json\/wp\/v2\/categories?post=5456"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/craighordlow.com\/index.php\/wp-json\/wp\/v2\/tags?post=5456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}