{"id":138095,"date":"2019-10-08T19:26:45","date_gmt":"2019-10-08T19:26:45","guid":{"rendered":"https:\/\/www.searchenginewatch.com\/?p=138095"},"modified":"2020-01-08T16:50:55","modified_gmt":"2020-01-08T16:50:55","slug":"how-to-fix-the-top-most-painful-ux-mistakes-examples","status":"publish","type":"post","link":"https:\/\/searchenginewatch.com\/2019\/10\/08\/how-to-fix-the-top-most-painful-ux-mistakes-examples\/","title":{"rendered":"How to fix the top most painful website UX mistakes [examples]"},"content":{"rendered":"<p><strong>In today\u2019s market of evolving website functionality, <a href=\"https:\/\/searchenginewatch.com\/?s=ux\" target=\"_blank\" rel=\"noopener\">UX design<\/a> has become more important than ever to businesses, globally. Here&#8217;s a roundup of top UX mistakes and how to fix them.<\/strong><\/p>\n<p>We want users to navigate our site freely, without obstacles and without friction. If your site makes finding information a challenge, you can bet your bottom dollar your competition already knows that, and is capitalizing on it.<\/p>\n<p>Both <a href=\"https:\/\/searchenginewatch.com\/2019\/10\/08\/how-to-fix-the-top-most-painful-ux-mistakes-examples\/\">UX<\/a> and <a href=\"https:\/\/searchenginewatch.com\/category\/seo\/\" target=\"_blank\" rel=\"noopener\">SEO<\/a> are user-centric, which makes them a formidable pair when you get them right.<\/p>\n<p>But get it wrong and you could see high bounce rates, low conversions and even a slight hit on your rankings as Google\u2019s John Mu considers UX a <a href=\"https:\/\/www.searchenginejournal.com\/usability-ux-ranking-factors\/291695\/\" target=\"_blank\" rel=\"noopener\">\u2018soft ranking factor\u2019.<\/a><\/p>\n<p>If you\u2019re finding that users aren\u2019t spending time on your site (or converting) there could be issues. We\u2019re going to help you find out what they could be.<\/p>\n<h2>Cluttered navigation<\/h2>\n<p>Your site\u2019s <a href=\"https:\/\/searchenginewatch.com\/?s=navigation\" target=\"_blank\" rel=\"noopener\">navigation<\/a> is the gateway to your <a href=\"https:\/\/searchenginewatch.com\/2019\/08\/28\/guide-to-keyword-research-content-strategy\/\">content<\/a> and service pages. It\u2019s where you (really) focus on building a funnel that is both frictionless and easy to understand.<\/p>\n<p>Your navigation should be an architecture of well-structured, groups of pages; either commercial or informational (depending on your business).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-138096 aligncenter\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux0-1024x898.png\" alt=\"example of cluttered navigation, bad for UX and SEO\" width=\"640\" height=\"561\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux0-1024x898.png 1024w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux0-300x263.png 300w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux0-768x674.png 768w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux0.png 728w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>Some of the most common mistakes we see are:<\/p>\n<ul>\n<li>Links without value in the main menu<\/li>\n<li>Excessive anchor text<\/li>\n<li>Non-responsive (yep, it still happens in 2019)<\/li>\n<li>Too many sub-menus<\/li>\n<li>Relies on Javascript (with no fallback)<\/li>\n<\/ul>\n<h3>How to fix your site\u2019s navigation<\/h3>\n<p>The golden rule here is to make your navigation accessible, responsive and clutter-free.<\/p>\n<p>Think about your categories, your most valuable pages, where users spend most of their time and, more importantly, who your users are.<\/p>\n<p><a href=\"https:\/\/www.forever21.com\/uk\/shop\" target=\"_blank\" rel=\"noopener\">Forever 21<\/a> does a great job of linking through to the main areas of its site in a structured and visually pleasing way.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-138099 aligncenter\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux1.png\" alt=\"example of forever 21 good site navigation to main pages\" width=\"728\" height=\"335\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux1.png 728w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux1-300x138.png 300w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux1-768x354.png 768w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Let\u2019s say you run an <a href=\"https:\/\/searchenginewatch.com\/?s=ecommerce\" target=\"_blank\" rel=\"noopener\">ecommerce<\/a> store for pets (because everybody loves animals).<\/p>\n<p>You sell products for dogs, cats and rabbits. Here\u2019s how you can structure your navigation\u2026<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-138097 aligncenter\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux2-1024x898.png\" alt=\"example of good site navigation\" width=\"640\" height=\"561\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux2-1024x898.png 1024w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux2-300x263.png 300w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux2-768x674.png 768w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux2.png 728w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/p>\n<h2>Aesthetics are everything<\/h2>\n<p>People are visual creatures. We like websites to be aesthetically pleasing.<\/p>\n<p>One of the biggest cardinal sins of UX is poor imagery, color choices and font selection. In fact, I\u2019ll extend that into most areas of any online marketing; social media and display ads.<\/p>\n<p>Here\u2019s an example of all three on a single site:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-138100 aligncenter\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux3.png\" alt=\"example of bad site nav, has bad colors, fonts, and images\" width=\"728\" height=\"606\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux3.png 728w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux3-300x250.png 300w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux3-768x639.png 768w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/p>\n<p>I don\u2019t think I need to go much further into why this could be improved. But, I will go into the how.<\/p>\n<p>Even the big brands get it wrong\u2026<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-138101 aligncenter\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux4.png\" alt=\"boohoo example of bad site navigation, how one poorly sized image affects UX of whole page\" width=\"728\" height=\"400\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux4.png 728w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux4-300x165.png 300w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux4-768x422.png 768w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/p>\n<p>Notice how a single, poorly sized image has affected the feel of the whole page?<\/p>\n<h3>Fixing poor page structure<\/h3>\n<p>Things to consider when it comes to site layout are: margins, padding and alignment.<\/p>\n<p>As you can see in the example above, alignment is a big issue and even a small amount of misaligned content\/imagery can look unprofessional. Web pages work in columns which provide a structure for designers to create <a href=\"https:\/\/searchenginewatch.com\/2019\/09\/11\/landing-page-copy-tips\/\">landing pages<\/a> which can <a href=\"https:\/\/instapage.com\/blog\/z-pattern-layout\" target=\"_blank\" rel=\"noopener\">influence users\u2019 focus and attention.<\/a><\/p>\n<p>Combining text and images together is normally where layouts can become difficult to manage as we\u2019ve already seen.<\/p>\n<p>Luckily for you, we\u2019ve put together a number of page layout examples below which make structuring your content and images simple.<\/p>\n<ul>\n<li>Image aligned to the right of text:<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-138102 aligncenter\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux5.png\" alt=\"example of image aligned to right of text\" width=\"728\" height=\"546\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux5.png 728w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux5-120x90.png 120w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux5-300x225.png 300w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux5-768x576.png 768w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux5-250x188.png 250w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux5-146x110.png 146w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux5-360x270.png 360w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/p>\n<ul>\n<li>Text on top of image:<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-138103 aligncenter\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux6.png\" alt=\"example of text on top of image\" width=\"728\" height=\"546\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux6.png 728w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux6-120x90.png 120w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux6-300x225.png 300w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux6-768x576.png 768w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux6-250x188.png 250w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux6-146x110.png 146w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux6-360x270.png 360w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/p>\n<ul>\n<li>Text box overlaid on carousel image:<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-138104 aligncenter\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux7.png\" alt=\"example of text overlaid on carousel image\" width=\"728\" height=\"546\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux7.png 728w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux7-120x90.png 120w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux7-300x225.png 300w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux7-768x576.png 768w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux7-250x188.png 250w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux7-146x110.png 146w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux7-360x270.png 360w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/p>\n<h3>Working with fonts<\/h3>\n<p>When you consider fonts, you need to think about how your content will appear at all sizes. From your header hierarchy to your bullet points.<\/p>\n<p>We recommend limiting the amount of different fonts you use on your site. It\u2019s easy to get carried away to give different sections of your site its own \u2018feel\u2019.<\/p>\n<p>Once you\u2019ve chosen a single font family or families, consider how you can create contrast between header and body content.<\/p>\n<p>Single font selections with varying font weights can create a very visually pleasing contrast between sections of your page.<\/p>\n<p>A poor font selection can even make a retail giant, such as Amazon, look untrustworthy and unprofessional.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-138105 aligncenter\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux8-1024x600.png\" alt=\"example of poor font selection on Amazon product page\" width=\"640\" height=\"375\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux8-1024x600.png 1024w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux8-300x176.png 300w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux8-768x450.png 768w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux8.png 728w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>If you\u2019re struggling for ideas on font pairing, you can find use <a href=\"https:\/\/fontpair.co\/fonts\/\" target=\"_blank\" rel=\"noopener\">Font Pair<\/a> to put together different font types. It\u2019s important to remember that font readability will play a huge part in how users consume content.<\/p>\n<p>Consider:<\/p>\n<ul>\n<li>Size<\/li>\n<li>Width<\/li>\n<li>Paragraph spacing<\/li>\n<li>Weight<\/li>\n<\/ul>\n<p>If your content currently looks like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-138107 aligncenter\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux9.png\" alt=\"example of how typography can go very wrong\" width=\"728\" height=\"546\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux9.png 728w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux9-120x90.png 120w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux9-300x225.png 300w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux9-768x576.png 768w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux9-250x188.png 250w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux9-146x110.png 146w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux9-360x270.png 360w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/p>\n<p>I\u2019m sorry, but you\u2019re doing it wrong.<\/p>\n<p>Even a minor change to fonts can cause the greatest of upsets to users. Just ask Amazon <a href=\"https:\/\/www.businessinsider.com\/amazon-changes-website-font-customers-react-2018-6?r=US&amp;IR=T\" target=\"_blank\" rel=\"noopener\">how it went for them<\/a>.<\/p>\n<p>Most CMS platforms will come with pre-installed fonts, but if you need more of a selection you can always use <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener\">Google Fonts<\/a>.<\/p>\n<p>Finally, consider how your font appears on desktop and mobile.<\/p>\n<p>If your font size is too big, it would take up too much of a mobile screen. If it\u2019s too small, users will struggle to read it. It\u2019s worth testing different sizes to cater for overall legibility.<\/p>\n<p>This is an example of how Zazzle\u2019s homepage appears on an iPhone X &#8211; using a font size of 18px.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-138108 aligncenter\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux10.png\" alt=\"example of site nav on mobile\" width=\"345\" height=\"697\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux10.png 345w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux10-148x300.png 148w\" sizes=\"auto, (max-width: 345px) 100vw, 345px\" \/><\/p>\n<h2>Page load times<\/h2>\n<p>This shouldn\u2019t be news to you by now.<\/p>\n<p>There are multiple case studies available about <a href=\"https:\/\/econsultancy.com\/improve-site-speed-developers-web-managers\/\" target=\"_blank\" rel=\"noopener\">how load times can impact conversions.<\/a> So, I won\u2019t go into that here.<\/p>\n<p>The most common reason for page load times being high, is images. Images are something most site owners can change with little dev input. It ultimately comes down to saving the right file type, using the right dimensions and compressing high-resolution to preserve quality, whilst reducing size.<\/p>\n<p>Savings in KB can often make a huge difference.<\/p>\n<p>Take a look at what happens when image optimization is ignored.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-138109 aligncenter\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux11.png\" alt=\"example of slow page load times\" width=\"710\" height=\"433\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux11.png 710w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux11-300x183.png 300w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/><\/p>\n<p>For the sake of anonymity, we\u2019ve hidden the brand\u2019s identity.<\/p>\n<p>However, this is the page we were greeted with for over five seconds. It\u2019s a medium-sized <a href=\"https:\/\/searchenginewatch.com\/2019\/10\/04\/tips-for-q4-ad-copy-and-messaging\/\">ecommerce<\/a> website that caters to children\u2019s clothing.<\/p>\n<p>By optimizing the images, we found that there were savings of up to 900kb &#8211; a significant weight lifted off of a browser.<\/p>\n<p>Consider how this feels for users? First impressions are everything. What\u2019s to stop traffic bouncing due to content\/images not loading?<\/p>\n<p>Think about that for a second!<\/p>\n<h3>How to fix image bloat<\/h3>\n<p>Firstly, you need to find if this is an issue.<\/p>\n<p>You can run speed tests using Google\u2019s Lighthouse or GTMetrix to get an understanding of which files are too heavy. It\u2019s simple to find poorly optimized images for individual pages.<\/p>\n<p>For batch analysis, we recommend using a tool like Sitebulb which has an incredibly in-depth section attributed to <a href=\"https:\/\/searchenginewatch.com\/2019\/10\/08\/how-to-fix-the-top-most-painful-ux-mistakes-examples\/\">page speeds<\/a>.<\/p>\n<p>If your images are already on your site and you don\u2019t really fancy opening Photoshop and resizing them all, you need to run batch compressions to reduce the file size.<\/p>\n<p>There are a range of <a href=\"https:\/\/searchenginewatch.com\/2019\/05\/31\/image-optimization-for-seo\/\" target=\"_blank\" rel=\"noopener\">image compression<\/a> tools available online, we recommend <a href=\"https:\/\/compressor.io\/compress\" target=\"_blank\" rel=\"noopener\">Compressor.io<\/a> or <a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noopener\">TinyPNG<\/a>.<\/p>\n<p>It\u2019s often thought that compressing images means poor quality. However, take a look at the image below and assess the quality difference\u00a0 for yourselves.<\/p>\n<figure class=\"wp-caption aligncenter\"  data-width=\"728\" data-height=\"525\" data-url=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux12.png\" style=\"max-width: 738px;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-138110 size-full\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux12.png\" alt=\"example of image size reduced, image compressor\" width=\"728\" height=\"525\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux12.png 728w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux12-300x217.png 300w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux12-768x554.png 768w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><figcaption class=\"wp-caption-text\">Image size reduced by 37%, over a 1.3MB saving<\/figcaption><\/figure>\n<p>For those of you using WordPress, you can use the <a href=\"https:\/\/en-gb.wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"noopener\">Smush.it plugin<\/a> to compress and resize the images on your site.<\/p>\n<h3>New image formats<\/h3>\n<p>Google Developers introduced a new file format which is considered to be superior to its PNG and JPG equivalent.<\/p>\n<p>It offers fantastic lossless and lossy compression for images.<\/p>\n<p>Shaving milliseconds off your load time, especially on poor mobile connections, can stop a user from leaving your site. Google has said it actively rewards sites that are seen to make incremental improvements to site speed.<\/p>\n<p>The great news?<\/p>\n<p>More than 70% of browsers support this media format!<\/p>\n<p>You can read more about <a href=\"https:\/\/developers.google.com\/speed\/webp\/\" target=\"_blank\" rel=\"noopener\">WebP with Google Developers.<\/a><\/p>\n<h2>Pop-ups<\/h2>\n<p>No UX mistake roundup would be complete without mentioning pop-ups.<\/p>\n<p>They seem to get more aggressive and more disruptive each year. You\u2019ll find it hard to come across a website without them.<\/p>\n<p>Sorry Sumo, but this is one of the worst.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-138111 aligncenter\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux13.png\" alt=\"example of a bad scroll-triggered popup on a website\" width=\"728\" height=\"488\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux13.png 728w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux13-300x201.png 300w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux13-768x515.png 768w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/p>\n<p>This is considered a scroll-triggered pop-up. Whereby, the page waits for me to interact before the pop-up is shown.<\/p>\n<p>There is one major rule that you must abide by: <strong>do not disrupt a user\u2019s experience with pop-ups.<\/strong> We know this is a bold statement but\u2026 who likes pushy sales?<\/p>\n<p>If you want to help users, do it natively.<\/p>\n<p>Remember, we\u2019re creating a frictionless journey.<\/p>\n<h3>How to use pop-ups &#8212; the right way<\/h3>\n<p>First things, don\u2019t ever use interstitial pop-ups. It will annoy users and could defer the rendering of your page in search engines.<\/p>\n<p>Both are bad for business.<\/p>\n<p>We recommend using pop-ups in a more subtle manner.<\/p>\n<h3>Top banners<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-138112 aligncenter\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux14.png\" alt=\"example of a brand CTA at the top of a screen\" width=\"728\" height=\"561\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux14.png 728w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux14-300x231.png 300w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux14-768x592.png 768w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/p>\n<p>A perfect example of a branded CTA at the top of the screen. It\u2019s non-invasive on both desktop and mobile.<\/p>\n<h3>Chatbots<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-138113 aligncenter\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux15.png\" alt=\"good example of a website chatbot\" width=\"728\" height=\"427\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux15.png 728w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux15-300x176.png 300w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux15-768x450.png 768w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/p>\n<p><a href=\"https:\/\/www.clickz.com\/?s=chatbots\" target=\"_blank\" rel=\"noopener\">Chatbots<\/a> are a great way to help users find what they\u2019re looking for, without disrupting their experience.<\/p>\n<p>You can incorporate lead generation, discount codes or just offer general customer advice. It can help improve operational efficiency (reducing calls into the business) and improving conversion rates.<\/p>\n<p>If a customer is finding it hard to find a particular area of the site, chatbots can remove this friction quickly to help retain users.<\/p>\n<h3>Native CTA banners<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-138114 aligncenter\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux16.png\" alt=\"good example of native CTA banners\" width=\"728\" height=\"478\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux16.png 728w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux16-300x197.png 300w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/ux16-768x504.png 768w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/p>\n<p>Another smart way to offer discounts to users is to integrate CTAs within product selections or even at category level as a header banner.<\/p>\n<p>We find this to be a great way to preserve UX and still help drive incentivized clicks to sale or discount pages.<\/p>\n<p>It\u2019s always important to remember to design banners to match size and resolutions of your products.<\/p>\n<h2>Summary<\/h2>\n<p>UX is as important to your website as your content. Data shows <a href=\"https:\/\/searchenginewatch.com\/2019\/09\/16\/10-takeaways-from-the-state-of-seo-survey\/\" target=\"_blank\" rel=\"noopener\">that UX is still a bit of a mystery<\/a> to many marketers, but it should be the most important factor on any site design.<\/p>\n<p>Website innovation is encouraged but not at the cost of your users. When you\u2019re considering how to improve your user\u2019s experience, you need to remember how you feel navigating a poorly put together site.<\/p>\n<p>Consider the easy fixes; fonts, images, colors and navigation first, before you think about CRO (conversion rate optimization).<\/p>\n<p>Remember, we\u2019re in a market driven by user behavior so, try your best to cater to that as much as you can and you\u2019ll win!<\/p>\n<p><em>Ryan Roberts is an SEO Lead at Zazzle Media.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>From images to pop-ups, page load speed to site navigation, here&#8217;s a roundup of top UX mistakes and how to fix them for improved SEO.<\/p>\n","protected":false},"author":1092,"featured_media":138115,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[510,22,27176,183],"content_type":[],"class_list":["post-138095","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","tag-page-speed","tag-seo","tag-site-navigation","tag-ux"],"acf":{"tad_independentcommercial":false,"tad_content_format":false},"post_info":{"name":"idris.nagri@blenheimchalcot.com idris.nagri@blenheimchalcot.com","title":"","thumbnail_url":"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/10\/shutterstock_1151989370-120x90.png","category":"SEO","timeago":"6y"},"_links":{"self":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/posts\/138095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/users\/1092"}],"replies":[{"embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/comments?post=138095"}],"version-history":[{"count":0,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/posts\/138095\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/media\/138115"}],"wp:attachment":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/media?parent=138095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/categories?post=138095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/tags?post=138095"},{"taxonomy":"content_type","embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/content_type?post=138095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}