Anna Hosie Team : User Experience and Information Architecture Tags : User Experience

How to encourage users to scroll

Anna Hosie Team : User Experience and Information Architecture Tags : User Experience

For a long time we have used the content above the fold to tell the user about all the important sections of the site. Particularly on Home pages. However, times are changing. The arrival of touch devices has taught users to scroll and swipe so changing the user experience for all web pages. The content above the fold is still very important, but rather than trying to squeeze everything into the 600 or so pixels available, the space needs to be used to encourage users to scroll and read the rest of the page. So… how do we do this?

Avoid horizontal objects near the fold

These can be lines, bars or even white space. They cause the page to look like it finishes when in fact it doesn’t. The Harvery Nichols home page has content below the fold but looking at the above the fold screenshot below, you wouldn’t know it.

Screenshot of a website

Compare this with the Net-A-Porter home page where images are cut off by the fold illustrating there is obviously more to see below the fold.

Screenshot of a website

Use different heights for content blocks and columns

By creating content blocks and columns of different heights it makes it next to impossible for there to be empty space across the width of the page near the fold line. Or in fact anywhere. News sites tend to do this well as the example screen shot from the ABC News site shows.

Screenshot of a website

Use page trails

Using a trail that leads the user down the page is obviously going to encourage the user to scroll. The trail is cut off by the fold so naturally the user will scroll to see where it goes. An example of this is provided on the Mortgage Choice Financial Planning website.

Screenshot of a website

Just tell them

There is nothing wrong with being explicit and telling the users to scroll. This can be done in the copy or, to be more clear, introducing a nicely designed graphic. The graphic can be incorporated into the page content as in the Havericks site below. Or it can be locked to the bottom of the browser window and it disappears when the user scrolls down. The latter can be introduced easily to existing sites using a simple bit of code.

Screenshot of a website