{"id":197,"date":"2022-03-31T05:53:55","date_gmt":"2022-03-31T05:53:55","guid":{"rendered":"https:\/\/uxvibes.in\/blog\/?p=197"},"modified":"2025-02-01T13:06:59","modified_gmt":"2025-02-01T13:06:59","slug":"false-ending-are-your-users-missing-the-hidden-content","status":"publish","type":"post","link":"https:\/\/uxvibes.in\/blog\/false-ending-are-your-users-missing-the-hidden-content\/","title":{"rendered":"False ending- Are your users missing the hidden content?"},"content":{"rendered":"\n

Have you ever used the \u2018Economic Times\u2019 website\u2019s mobile version? If yes, you must have noticed some ads popping out after every second-third paragraph. Everytime I come across such ads while reading any news, it makes me feel like – I have reached the end of the page when there is a lot more content available to read below that advertisement.<\/p>\n\n\n\n

I am sure not only The Economic Times, but you must have experienced this illusion of completeness on many other sites. In the world of user experience design, this term is named \u2018false bottom\u2019.<\/p>\n\n\n\n

False bottom is a specific point on the web page where users believe that this is the end of the page when there is a lot more content available outside the viewable area.<\/strong><\/p><\/blockquote>\n\n\n\n

This term was first coined by Bruce Tognazzini in 1998 by referring to the vertical experience on the desktop sites (may be the reason it was called as false \u2018bottom\u2019). But in today\u2019s world of tablets, mobiles, smartwatches etc the scrolling experience has not remained limited to vertically but expanded horizontally as well and hence, the term false bottom may look little out of the context. So let\u2019s call it a false ending as of now for this article’s purpose.<\/strong><\/p>\n\n\n\n

Scrolling is now like a second nature, is it still really a considerable issue?<\/strong><\/h2>\n\n\n\n

This is the obvious question which came into my mind as well. It is so common that my 3 year old daughter also starts scrolling the page whenever she picks up my mobile or laptop. Then why is it yet an issue to be researched even after 24 years of its discovery? Below case study gave me an answer.<\/p>\n\n\n\n

……….<\/p>\n\n\n\n

NN group<\/a> conducted a usability test where users were asked to visit one site\u2019s home page with a full image in the background, value proposition & a \u2018get started\u2019 button on it. The task given was to find out the services provided by the company.<\/p>\n\n\n\n

Shockingly, 6 out of 8 users clicked on the get started button which took them to a form page. Users assumed that they would need to fill out the form first to get to know more about the company and most of them left the site half-way with the frustration.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Every brain prefers recognition over recall. Many times, users are not able to recognize the scrolling consciously even though they are familiar with the web world.<\/p>\n\n\n\n

\u201cJust because users have learned to scroll, we cannot expect them to scroll in the absence of proper visual indicators inviting them to do so. If you don\u2019t think there is any more information laid out below, why on the earth would you scroll?\u201d<\/strong><\/p>Kim Salazar, NN Group<\/a><\/cite><\/blockquote>\n\n\n\n

Common cases of False endings<\/strong><\/h2>\n\n\n\n

False ending experience often occurs due to the lack of strong visual cue indicating there is more content waiting outside the currently viewable area.  Below are some common examples.<\/p>\n\n\n\n

Full page hero imagery<\/strong><\/h3>\n\n\n\n

It is the latest design trend of having an image\/ GIF\/ video playing in the background covering the full viewable area of the first fold. That hero may look attractive and attention grabbing at a first glance, but be cautious! That is one of the most common cases causing an illusion of completeness. Look at the examples below.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"
Look at the websites of Surfrider Foundation<\/a> and Ditto<\/a>.
Did it take a while for you to think there is a scrolling required to view the rest of the content?<\/figcaption><\/figure>\n\n\n\n

Unanticipated end-to-end separator \/ background<\/strong><\/h3>\n\n\n\n

False endings can be seen not only at the first fold but anywhere on the page too. You are scrolling through a layout that uses a specific grid and suddenly a full width section\/separator\/background color appears! This can also be perceived as the end of the page.<\/p>\n\n\n\n

See Ombia Studio\u2019s shopping page<\/a>. They have utilized full width of the screen so frequently that every time it makes you feel the end of the page. And the funny part is even if you come to the real end, you would not recognize it and will still keep trying to scroll \ud83d\ude42<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Too much breathing space<\/strong><\/h3>\n\n\n\n

Use of too much white space can also make users experience the end of the page. See below the screenshot of Smartup Visuals<\/a>. You\u2019ll find this much empty space on the page at one point which can be concluded as the last module, and can be a reason for the users to move on to the next page or drop off the site.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Advertisements, promotional banners<\/h3>\n\n\n\n

See the snap below of Smashing Magazine<\/a>. The promotional banner appears when you are in the middle of the reading. Even though they have put a cue mentioning \u2018there is some content available below this ad\u2019, one still needs to put the conscious physical effort to read that line.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Unexpected scrolling & behaviors<\/h3>\n\n\n\n

There are certain site behavior patterns which most of the users are familiar with. Like they rarely expect horizontal scrolling on the desktops (except sliders and carousels).<\/p>\n\n\n\n

Check the website Square geeks arts<\/a>. Below is the page I could first see. I tried scrolling vertically, then horizontally but nothing worked. For a moment, I thought the site was in maintenance mode but then I realized the box \u2018Let\u2019s rock\u2019 is clickable. The trouble still didn\u2019t end up here. The whole site has been designed with breaking the rules of universally accepted behavioral patterns which made me totally confused.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Creativity at the cost of usability is always expensive.<\/strong><\/p><\/blockquote>\n\n\n\n

How to encourage scrolling<\/h2>\n\n\n\n

False endings occur when visual design fails to guide users about the available off-screen content, hence it\u2019s a designers job to add the strong visual indications that would encourage users to scroll further. Following below practices can help.<\/p>\n\n\n\n

Add strong affordances (directional cues like arrows)<\/strong>. See the first fold look of the Heco website below.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Check the whitespaces. Reduce the gaps if they are too large.<\/strong><\/p>\n\n\n\n

<\/div>\n\n\n\n

Avoid unanticipated full width separators or patches<\/strong> in between the layouts if you are following a certain grid throughout the page. Google Cloud uses full width modules only at the end of the pages. See below snap.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Use partially visible modules or imagery<\/strong> to display naturally that there is something more available after scrolling or clicking on the arrow. See how the homepage of UXvibes displays the partial part of the blogs\u2019 module.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Avoid Putting promotional banners or advertisements at the middle of the page.<\/strong><\/p>\n\n\n\n

<\/div>\n\n\n\n

Try following globally accepted behavior patterns or prototypes<\/strong>. Avoid surprises to your users.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Test your layouts on various screen sizes.<\/strong><\/p>\n\n\n\n

Conclusion<\/strong><\/h2>\n\n\n\n

In today\u2019s world of fancy websites with lengthy pages, users are definitely now aware of different scrolling behaviors. But their conscious mind may not necessarily always allow them to predict the hidden content area. If it is being perceived as an end of the page, they are not going to scroll further which can end up in losing your business. But this can definitely be avoided by giving them some natural reasons to scroll.<\/p>\n","protected":false},"excerpt":{"rendered":"

False bottom is an illusion of completeness which can be avoided by giving your users a natural reason to scroll.<\/p>\n","protected":false},"author":1,"featured_media":226,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4],"tags":[],"class_list":{"0":"post-197","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-visual-design","8":"","10":"fallback-thumbnail"},"jetpack_featured_media_url":"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2022\/03\/image_false-ending-1-1.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/posts\/197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/comments?post=197"}],"version-history":[{"count":18,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/posts\/197\/revisions"}],"predecessor-version":[{"id":229,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/posts\/197\/revisions\/229"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/media\/226"}],"wp:attachment":[{"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/media?parent=197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/categories?post=197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/tags?post=197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}