{"id":12827,"date":"2019-12-11T14:47:19","date_gmt":"2019-12-11T19:47:19","guid":{"rendered":"https:\/\/www.invespcro.com\/blog\/?p=12827"},"modified":"2019-12-11T14:47:19","modified_gmt":"2019-12-11T19:47:19","slug":"the-illusion-of-completeness-how-to-break-this-fatal-ux-design-mistake","status":"publish","type":"post","link":"https:\/\/www.invespcro.com\/blog\/the-illusion-of-completeness-how-to-break-this-fatal-ux-design-mistake\/","title":{"rendered":"The illusion of Completeness: How to break this fatal UX design mistake"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 11<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><p><i><span style=\"font-weight: 400;\">Why are users not scrolling on this site<\/span><\/i><span style=\"font-weight: 400;\">?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is the question that springs into the mind of most <\/span><span style=\"font-weight: 400;\">digital marketers, UX researchers, and designers when they analyze heatmaps and realize that users only focused on the <\/span><span style=\"font-weight: 400;\">\u201c<\/span><i><span style=\"font-weight: 400;\">above the fold<\/span><\/i><span style=\"font-weight: 400;\">\u201d content.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If it were 1996 \u2013 in the early years of the dotcom industry \u2013 this wasn\u2019t going to be a concern since users were not expected to scroll. The design of the early websites was centered on the \u201c<\/span><i><span style=\"font-weight: 400;\">above the fold<\/span><\/i><span style=\"font-weight: 400;\">\u201d concept and pagination in browsing tasks was the norm. Clicking was interpreted as interaction (and it still is) and it was enough.\u00a0<\/span><!--more--><\/p>\n<p><span style=\"font-weight: 400;\">But now that we are in an era of infinite scrolling, we expect users to keep scrolling down or even sideways. There are several <\/span><a href=\"https:\/\/www.invespcro.com\/blog\/website-usability-mistakes\/\"><span style=\"font-weight: 400;\">usability issues<\/span><\/a><span style=\"font-weight: 400;\"> that <\/span><span style=\"font-weight: 400;\">may cause users not to scroll on your site, and they include:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Long loading time.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">No clear directional cues.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Tiny clickable areas.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Having weak content above the fold.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Complicated security requirements.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Too much white space between content blocks.\u00a0\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">In some instances, users may exit the site without scrolling not because they got frustrated by the complicated security requirements or any of the above issues; but because there is a visual barrier that makes them think that the content on the screen is complete and there is nothing off-screen.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This visual error is known as the <\/span><b>illusion of completeness<\/b><span style=\"font-weight: 400;\">, and it is our main focus in this article. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">So, to make you understand the illusion of completeness we will start by defining it, show you how to determine its causes, and how to avoid it on your website? To make you understand, the article will layout the examples and help you entice your users to scroll through your entire site design.\u00a0<\/span><\/p>\n<div class=\"blog_img\"><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-12829\" src=\"https:\/\/www.invespcro.com\/blog\/images\/blog-images\/hand.jpg\" alt=\"\" width=\"680\" height=\"478\" data-wp-pid=\"12829\" \/><\/div>\n<h3><b>What is the illusion of Completeness?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">The illusion of completeness occurs when the visitor believes that the visible content on the screen appears to complete and there is no need to scroll further, despite the fact that more content exists outside the viewable screen.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Alternatively, when your visual design fails to guide visitors towards more off-screen content then there is an illusion of completeness on your site.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This illusion can also be referred to as the false bottom or logical end. But most <a href=\"https:\/\/www.invespcro.com\/blog\/things-ui-ux-designers-need-to-know-about-conversion-rate-optimization\/\">UX designers<\/a> prefer the term illusion of completeness because the other two suggest that the illusion only occurs at the \u2018bottom\u2019 or \u2018end\u2019 of a web page.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Making visitors believe that all they are seeing on the page is all that there is \u2013 when there is actually more content \u2013 is a usability mistake that can inhibit visitors from taking the desired goal of the site.\u00a0\u00a0<\/span><\/p>\n<p><a href=\"https:\/\/www.nngroup.com\/people\/bruce-tognazzini\/\"><span style=\"font-weight: 400;\">Bruce Tognazzini<\/span><\/a><span style=\"font-weight: 400;\"> coined the phrase, illusion of completeness, in 1998 and 21 years later, the phrase is still as relevant. Many sites are still making this costly UX mistake even to this day.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For a long time, the phrase Illusion of completeness was only associated with vertical scrolling. But since this is now a mobile-first-world, the illusion also occurs on the horizontal dimension of mobiles.\u00a0\u00a0\u00a0\u00a0<\/span><\/p>\n<div class=\"blog_img\"><img decoding=\"async\" class=\"alignnone size-full wp-image-12830\" src=\"https:\/\/www.invespcro.com\/blog\/images\/blog-images\/city.jpg\" alt=\"\" width=\"680\" height=\"454\" data-wp-pid=\"12830\" \/><\/div>\n<h3><span style=\"font-weight: 400;\">How to determine the illusion of completeness on the vertical dimension<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Vertical scrolling used to be a big problem during the early days of websites and most sites were all about the <\/span><i><span style=\"font-weight: 400;\">above the fold <\/span><\/i><span style=\"font-weight: 400;\">concept. Today, scrolling is second nature to most visitors, but that doesn\u2019t mean that designers have to take this for granted \u2013there is a great need to include visual indicators so as to entice your visitors to scroll <\/span><a href=\"http:\/\/www.nngroup.com\/articles\/page-fold-manifesto\/\"><i><span style=\"font-weight: 400;\">below the fold<\/span><\/i><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here is a list of design styles that normally misled people into believing that there is no more content off-screen:\u00a0<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Use of large hero graphics and videos\u00a0<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">This is the most common cause of the illusion of completeness on the vertical dimension. I understand that <\/span><i><span style=\"font-weight: 400;\">a picture is worth a thousand words<\/span><\/i><span style=\"font-weight: 400;\">, but incorporating large images or videos that take up the whole above the fold area won\u2019t do you any good. In most cases, when large hero graphics are used above the fold, this means that the important content is placed below the fold.\u00a0\u00a0<\/span><\/p>\n<p><b>Example<\/b><span style=\"font-weight: 400;\">: <\/span><a href=\"http:\/\/www.creativeadawards.com\/\"><span style=\"font-weight: 400;\">Creative Ad Awards<\/span><\/a><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n<div class=\"blog_img\"><img decoding=\"async\" class=\"alignnone size-full wp-image-12831\" src=\"https:\/\/www.invespcro.com\/blog\/images\/blog-images\/creative-.jpg\" alt=\"\" width=\"680\" height=\"389\" data-wp-pid=\"12831\" \/><\/div>\n<p><span style=\"font-weight: 400;\">Looking at the homepage of Creative Ad Awards, at first glance you\u2019d think that there is no content below the fold. The large image coupled with a call to action button and social media icons makes the page appear complete, whereas there is a heap of content if you scroll down.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019d like to have your visitors engage with content on your site, why make them think that there is nothing to see below the fold?\u00a0<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Break-in content marked by a horizontal line<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Even if you have given your visitors visible cues that encourage them to scroll down a bit to view below the fold content, the illusion of completeness can still occur in the middle of the page, especially when there are horizontal lines.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In most websites, horizontal lines signal the end of a section. So, when visitors come across these lines, even in the middle of the page, they assume that the page has ended.<\/span><\/p>\n<p><b>Example<\/b><span style=\"font-weight: 400;\">: <\/span><a href=\"https:\/\/local.theonion.com\/thanksgiving-conversation-devolves-into-just-stating-th-1840069525\"><span style=\"font-weight: 400;\">The Onion<\/span><\/a><\/p>\n<div class=\"blog_img\">\n<div class=\"blog_img\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12833\" src=\"https:\/\/www.invespcro.com\/blog\/images\/blog-images\/the-Onion-.jpg\" alt=\"\" width=\"680\" height=\"418\" data-wp-pid=\"12833\" \/><\/div>\n<\/div>\n<p><span style=\"font-weight: 400;\">Notice the horizontal lines that cut across the whole page. Considering that there is an advert just below the line, it\u2019s logical to assume that\u2019s the end of the page, right?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But in reality, there are six more blocks of content below that horizontal line\u2026<\/span><\/p>\n<div class=\"blog_img\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12832\" src=\"https:\/\/www.invespcro.com\/blog\/images\/blog-images\/the-onion-2.jpg\" alt=\"\" width=\"680\" height=\"404\" data-wp-pid=\"12832\" \/><\/div>\n<p><span style=\"font-weight: 400;\">All this shows that you must be careful where you place your horizontal lines, otherwise they may be a visual barrier that works against your site&#8217;s usability.\u00a0<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">When the content does not fit the whole container<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">When the container is too large for the content to fill, this results in too much blank space in the areas around the content blocks. Visitors may assume that there is nothing below or on the sides when there see a large gap with no content in it.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You don\u2019t have to fill every nook and cranny on your web page, but my point is, blank space is often uninspiring and visitors will see no need to continue scrolling down or sideways when they see no content there?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Example: <\/span><a href=\"http:\/\/www.suzannecollinsbooks.com\"><span style=\"font-weight: 400;\">Suzzane Collins<\/span><\/a><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n<div class=\"blog_img\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12834\" src=\"https:\/\/www.invespcro.com\/blog\/images\/blog-images\/suzzane.jpg\" alt=\"\" width=\"680\" height=\"446\" data-wp-pid=\"12834\" \/><\/div>\n<p><span style=\"font-weight: 400;\">Take note of all the blank spaces on the above website. The larger gap between the image and text can actually make visitors think that there is nothing to see below, especially when they are using mobiles to access the site.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Actually, when you scroll further down the page you will see many huge blank spaces between the images\u2026<\/span><\/p>\n<div class=\"blog_img\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12835\" src=\"https:\/\/www.invespcro.com\/blog\/images\/blog-images\/Suzzanne-.jpg\" alt=\"\" width=\"680\" height=\"595\" data-wp-pid=\"12835\" \/><\/div>\n<p><span style=\"font-weight: 400;\">Yes, the minimalist design movement advocates for the <a href=\"https:\/\/www.invespcro.com\/blog\/heuristic-evaluation-your-complete-guide\/\">importance of white space in designs<\/a>, but minimalism can backfire if used wrongly.\u00a0<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Back to top arrow\u00a0<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">If you just like anyone else, you probably get tempted to press the back to the top arrow that pops up on the page when reading an article. Sometimes when reading pages that are really long, it can become too tedious to scroll all the way to the top, so back<\/span><i><span style=\"font-weight: 400;\"> to top arrow <\/span><\/i><span style=\"font-weight: 400;\">is a shortcut that allows users to quickly and easily navigate to the top of long pages.\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0Example: <\/span><a href=\"https:\/\/medlineplus.gov\/kneeinjuriesanddisorders.html\"><span style=\"font-weight: 400;\">Medline Plus<\/span><\/a><\/p>\n<div class=\"blog_img\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12836\" src=\"https:\/\/www.invespcro.com\/blog\/images\/blog-images\/return-to-top-arrow-.jpg\" alt=\"\" width=\"680\" height=\"598\" data-wp-pid=\"12836\" \/><\/div>\n<p><span style=\"font-weight: 400;\">However, this arrow can be so deceiving sometimes \u2013when it appears somewhere in the middle of the page, it can make users assume that the page has ended. It\u2019s best to have this back to top arrow appear at the end of the page.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Use of Ads and CTAs within the content\u00a0<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">You probably have come across dozens of websites that have ads or <a href=\"https:\/\/www.invespcro.com\/blog\/your-complete-guide-to-call-to-action-button-plus-a-bonus-with-free-200-effective-cta-buttons\/\">CTA buttons<\/a> in between their post content. Many websites consider this as a norm. Although we, at Invesp, don\u2019t necessarily place ads within the content, we typically place <\/span><b>short<\/b><span style=\"font-weight: 400;\"> CTA buttons that allow our readers to view the content below.\u00a0<\/span><\/p>\n<p>Example: <a href=\"https:\/\/www.invespcro.com\/blog\/\">Invesp<\/a><\/p>\n<div class=\"blog_img\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12837\" src=\"https:\/\/www.invespcro.com\/blog\/images\/blog-images\/Invesp.jpg\" alt=\"\" width=\"680\" height=\"541\" data-wp-pid=\"12837\" \/><\/div>\n<p><span style=\"font-weight: 400;\">Placing ads or internal promotions is not an issue, as long as you keep it short and easy for your visitors to view the content below. The illusion of completeness occurs when you place large ads and CTA buttons that make the content below barely visible to visitors who use mobile devices with small screen sizes.\u00a0\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">How to determine the illusion of completeness on the horizontal dimension\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Over the years, designers have been trying to avoid desktop horizontal navigation \u2013 it was considered to be <\/span><a href=\"http:\/\/www.nngroup.com\/articles\/scrolling-and-scrollbars\/\"><span style=\"font-weight: 400;\">one of the biggest faux-pas in web design<\/span><\/a><span style=\"font-weight: 400;\"> \u2013 but it seems like it made a strong comeback.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Although horizontal scrolling still remains fairly common in mobile and tablet devices, there is now a plethora of websites that require desktop users to scroll sideways to view more information.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Regardless of the device being used, sites that incorporate horizontal navigation can give users an illusion of completeness, especially if there are no strong visual cues that give the direction of interaction to users.\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s look at the design styles that may lead to the illusion of completeness on the horizontal dimension of a webpage:\u00a0<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Manual Carousels\u00a0<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Nowadays, it\u2019s rare to see a site using the horizontal scroll bar to view all available content. The belief is that horizontal scroll bars are problematic because they require a great deal of attention and physical effort when controlling the cursor.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This might be the reason behind the use of <\/span><a href=\"https:\/\/www.invespcro.com\/blog\/6-reasons-why-visitors-are-leaving-your-e-commerce-website\/\"><span style=\"font-weight: 400;\">carousels<\/span><\/a><span style=\"font-weight: 400;\"> or slides in most of the websites we come across today. But some of us are still against the use of carousels of any kind. Automatic or manual. Carousels are just so confusing as they require visitors to give attention to different slides.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Automatic carousels, for instance, do not give visitors control over their browsing experience. They tend to force customers to read quickly according to the pace of the slide. If you think of it. this can raise an unnecessary level of anxiety.\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Unlike the automatic ones, manual carousels give visitors control on when to change the slides, but if they do not have <\/span><b>strong cues<\/b><span style=\"font-weight: 400;\"> that indicate how to interact with the site; they can create a different usability problem; the illusion of completeness.\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Example: <\/span><a href=\"https:\/\/themeforest.net\/item\/riliant-corporate-agency-wordpress-theme\/22916463\"><span style=\"font-weight: 400;\">Themeforest<\/span><\/a><\/p>\n<div class=\"blog_img\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12838\" src=\"https:\/\/www.invespcro.com\/blog\/images\/blog-images\/arrows.jpg\" alt=\"\" width=\"680\" height=\"335\" data-wp-pid=\"12838\" \/><\/div>\n<p><span style=\"font-weight: 400;\">The above WordPress theme shows weak carousel cues: users can easily miss the dots and the arrows are not big enough. If this site has multiple propositions and important content in other slides, visitors may not even identify it.\u00a0<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Implicit or less visible directional cues\u00a0<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">This might sound like a bleed over from the previous point but it deserves its own section. As the name suggests, directional cues are instrumental in guiding the gaze of your visitors to the content which is not displayed on your viewable screen.<\/span><\/p>\n<p><a href=\"https:\/\/envato.com\/blog\/author\/bogdan-sandu\/\"><span style=\"font-weight: 400;\">Bogdan Sandu<\/span><\/a><span style=\"font-weight: 400;\"> gives this detailed description of directional cues on websites:\u00a0<\/span><\/p>\n<blockquote><p><i><span style=\"font-weight: 400;\">A directional cue is not a particular item \u2013 it\u2019s a role that can be performed by almost every element on your site, thanks to shape and size variations. Therefore, you have directional cues that are explicit and obvious; and such which are less visible.<\/span><\/i><\/p><\/blockquote>\n<p><span style=\"font-weight: 400;\">The presence of directional cues in web pages can help improve user experience, and on the other hand, their absence can lead to usability problems such as the illusion of completeness, among others.\u00a0\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For our purposes, we will focus more on implicit or less visible directional cues on web pages because they are guilty of creating the illusion of completeness since they require much attention to notice them.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here are some of the web elements that can be used as implicit or less visible directional cues:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">View direction<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Color<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Visual weighting<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Repetition of color, size, and shape<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Prioritization<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The fact that implicit visual cues are not straightforward, this means that they are far easier to miss. Generally, visitors don\u2019t like to waste time or to take actions whose results they cannot predict. So why not use elements that are obvious in your bid to persuade visitors to fulfill the goal of the site?\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Example: <\/span><a href=\"https:\/\/www.crazyegg.com\/blog\/about\/\"><span style=\"font-weight: 400;\">Crazy Egg<\/span><\/a><\/p>\n<div class=\"blog_img\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12839\" src=\"https:\/\/www.invespcro.com\/blog\/images\/blog-images\/crazy-egg.jpg\" alt=\"\" width=\"680\" height=\"373\" data-wp-pid=\"12839\" \/><\/div>\n<p><span style=\"font-weight: 400;\">The above picture is a screenshot of Crazy Egg\u2019s About Us page. The whole page has a white background around a royal blue and pink color on that CTA button \u2013this implies that users will notice and click on the CTA button. But it\u2019s not obvious that they will.\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">How to avoid suggesting completeness on your site<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">To address the illusion of completeness on your site, you first have to know where it is occurring exactly. Is it on the vertical dimension? Or is it happening on the horizontal dimension?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can find answers to those questions when you analyze your site\u2019s scroll heatmaps and video recordings (<\/span><a href=\"https:\/\/www.figpii.com\/\"><span style=\"font-weight: 400;\">FigPii<\/span><\/a><span style=\"font-weight: 400;\"> offers both tools). As you are doing this analysis, keep the following questions in mind:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Are users seeing all the important content on the site?\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">At which point are you using to stopping to scroll?\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">What might be stopping visitors from scrolling? Is it the white space around content blocks? Is it the ads or CTAs in the middle of the page?\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">What can I do to fix it right away?\u00a0\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Are visitors trying to scroll horizontally?\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Are users recognizing the manual carousel for what it is? Are they even clicking to view other slides?<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Knowing the answers to these questions can give you ideas on where to optimize and encourage scrolling on your site.\u00a0<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Use obvious directional cues<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">You shouldn\u2019t assume that your visitors are going to notice your implicit directional cues. Visitors often miss the most colored and clearly marked navigational cues. Make it more easy for them, and usher them into taking the desired action by using <\/span><b>strong directional cues<\/b><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For instance, if your site uses ads or CTA buttons between content, use obvious directional cues that communicate to your visitors that additional information can be found further down the page.\u00a0<\/span><\/p>\n<div class=\"blog_img\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12840\" src=\"https:\/\/www.invespcro.com\/blog\/images\/blog-images\/washington-post.jpg\" alt=\"\" width=\"680\" height=\"596\" data-wp-pid=\"12840\" \/><\/div>\n<p><a href=\"https:\/\/www.nngroup.com\/articles\/ad-placement-mobile\/\"><span style=\"font-weight: 400;\">The Washington Post<\/span><\/a><span style=\"font-weight: 400;\"> uses an obvious \u2013 \u201d<\/span><b>Keep Reading<\/b><span style=\"font-weight: 400;\">\u201d \u2013 cue placed just above the ad so as to suggest that below there is a continuation of the article.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here is a list of some of the web page elements that can be regarded as explicit or obvious directional cues include:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Arrows<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Fingers pointing<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Eye direction (when people\u2019s faces are looking at a call to action)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Lines<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Curves<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Help your visitors find their way around a carousel\u00a0\u00a0<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Forgive me for overemphasizing this, but <\/span><b>your site\u2019s most important information should not be placed in a carousel \u2013visitors may not see it<\/b><span style=\"font-weight: 400;\">. In fact, completely remove carousels. But if you insist on using them, find ways to help your visitors understand the carousel.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In her article entitled \u201c<\/span><a href=\"https:\/\/www.invespcro.com\/blog\/6-reasons-why-visitors-are-leaving-your-e-commerce-website\/\"><i><span style=\"font-weight: 400;\">6 Reasons Why Visitors Are Leaving Your E-commerce Website<\/span><\/i><\/a><span style=\"font-weight: 400;\">, Ayat gave this shortlist of suggestions as a way of helping your visitors find their way around a carousel:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Introduce a manual carousel. Give visitors control on when to change the images.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Use big arrows to easily sign visitors on how to control the feature.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Choose a maximum of 4 features. Be aware that an average of<\/span> <a href=\"https:\/\/erikrunyon.com\/2013\/01\/carousel-stats\/\"><span style=\"font-weight: 400;\">1% of visitors clicks on carousels<\/span><\/a><span style=\"font-weight: 400;\">. Of these clicks, 84% goes for images on position 1.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Add a cycling function to randomize slides, so the banner on the first position varies each time the homepage is visited.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Don\u2019t use carousels at all. Select a still hero image for your website first fold, calling attention to one main seasonal item, category or promotion.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Segment your visitors, and transform each slide of your carousel in the still image of targeted homepages. For example, use geo-targeting to focus your offers and take advantage of the <\/span><a href=\"https:\/\/www.invespcro.com\/blog\/cross-border-shopping\/\"><span style=\"font-weight: 400;\">growing cross-border shopping<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Remember<\/span> <a href=\"https:\/\/www.invespcro.com\/blog\/improving-website-navigation-increased-conversion-rate\/\"><span style=\"font-weight: 400;\">manual sliders can work wonders<\/span><\/a> <span style=\"font-weight: 400;\">on other pages.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Show additional content bleeding off-screen\u00a0<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">If you\u2019re going to stick to large hero graphics or images, do not pin all your trust on the vertical or horizontal scroll bar \u2013users may ignore them. Instead, clearly, communicate that there is additional content offscreen. You can do this by using the cut-off look \u2013this is a web design technique that shows additional content <\/span><b>bleeding off-screen<\/b><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Netflix, Android App Store, and iTunes are fans of this technique. So are we!\u00a0<\/span><\/p>\n<div class=\"blog_img\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12841\" src=\"https:\/\/www.invespcro.com\/blog\/images\/blog-images\/Invesp-home-chairo-.jpg\" alt=\"\" width=\"680\" height=\"390\" data-wp-pid=\"12841\" \/><\/div>\n<p><span style=\"font-weight: 400;\">Looking at the above image taken from the <\/span><a href=\"https:\/\/www.invespcro.com\/\"><span style=\"font-weight: 400;\">Invesp home page<\/span><\/a><span style=\"font-weight: 400;\">, do you think that designers made a mistake by letting those incomplete words peek above the fold?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Well, guess what? That is the cut-off look at play there. Those words were intentionally left to bleed off-screen so that they clearly indicate to visitors that there have to scroll vertically to see more information on the page.\u00a0<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Test on many devices and browsers<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Your visitors use a number of browsers, in multiple formats, on various devices to view your website. This means that you have to ensure that all the design elements are working across different viewport sizes.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Yes, I understand that there is an overwhelming combination of devices, screen sizes and browsers to choose from; but it is important to test as many usable variations as possible. Suppose you have limited time and resources, you can restrict testing to the most appropriate variations.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Conclusion<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Visitors now understand that they have to scroll up and down or sideways to view additional content \u2013 long-scrolling sites are now popular and scrolling seems to have become second nature to most people. But as much as they may be aware of long pages, you still have to give them a compelling reason to scroll or you risk creating an illusion of completeness.\u00a0\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 11<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>Why are users not scrolling on this site?\u00a0 This is the question that springs into the mind of most digital marketers, UX researchers, and designers when they analyze heatmaps and realize that users only focused on the \u201cabove the fold\u201d content.\u00a0 If it were 1996 \u2013 in the early years of the dotcom industry \u2013 [&hellip;]<\/p>\n","protected":false},"author":54,"featured_media":12828,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-12827","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux"],"_links":{"self":[{"href":"https:\/\/www.invespcro.com\/blog\/wp-json\/wp\/v2\/posts\/12827","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.invespcro.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.invespcro.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.invespcro.com\/blog\/wp-json\/wp\/v2\/users\/54"}],"replies":[{"embeddable":true,"href":"https:\/\/www.invespcro.com\/blog\/wp-json\/wp\/v2\/comments?post=12827"}],"version-history":[{"count":0,"href":"https:\/\/www.invespcro.com\/blog\/wp-json\/wp\/v2\/posts\/12827\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.invespcro.com\/blog\/wp-json\/wp\/v2\/media\/12828"}],"wp:attachment":[{"href":"https:\/\/www.invespcro.com\/blog\/wp-json\/wp\/v2\/media?parent=12827"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.invespcro.com\/blog\/wp-json\/wp\/v2\/categories?post=12827"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.invespcro.com\/blog\/wp-json\/wp\/v2\/tags?post=12827"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}