What is the first screen: myths and findings

The first screen is the part of the web page that is visible to a user at first boot without additional scrolling. The concept of the first screen lies in the idea that any content located here is much more effective than content placed below so the user has to scroll down or aside to see it. Thus, all the most important content as well as elements that define your brand (like logo, navigation menu, links to social network pages, search, etc.) must be located here. Nevertheless, as is reported by professionals, this concept is just a myth. In this article we are going to explode this myth and give some tips that will ensure viewing the content placed below the first screen.

Over the last few years, US experts examined data on more than 800 tests, and the first screen became a barrier separating content from the visitors just in three cases. These tests were carried out by tracking the movements of users’ eyes. Then, using generalized motion data focus intensity map sets were created to show what exactly a group of users is looking at.

Results revealed that site visitors feel quite comfortable scrolling through long pages and looking for the necessary information. Attention intensity maps showed a pronounced bright spot over a scroll bar. Therefore, users expect they will have to scroll the page. Thus, the smaller amount of content on the first screen can greatly encourage the user to scroll the page down. Here are three tips for creating a design that ensures viewing content placed below the first screen.

  1. Less but better: resist the temptation to cram everything into the first screen. Judicious use of empty space and images entice visitors to look down.
  2. Saturated horizontal lines can discourage scrolling. To encourage the visitor to scroll using such lines, make sure that a small amount of content emerges from behind the border of the first screen.
  3. Avoid using built-in page scrollbars. Indicators of the amount of content placed on the page are scrollbars of the browser itself. Additional scrollbars can visually reduce the amount of content.