Error getting theme layout

Trends in Web Design: Long Scrolling Pages and Sticky Navigation

Posted @ 8:31 pm by Yusuf Asgerally | Category: Copy & Content, Creative Design, Mobile, User Experience | 1 Comment

Long scrolling pages are all the rage and something that I’ve recommended to a number of our clients. It was not too long ago, though, that I recommended against this very practice. Faster Internet speeds and a change in how users consume data online have transformed the way we present data to users.

This does not mean that it’s okay to have long pages of text-heavy content. It does, however, mean that well-thought-out and well-designed pages with the right content hierarchy and structure are now more acceptable and appreciated by the user.

“So what made long scrolling pages cool? I thought people hated scrolling?” you may wonder. Touch interfaces have made swiping down a screen and scrolling through long pages much easier. Pagination has been replaced on many media sites in favor of progressive loading of content — Facebook news feed loads more content as you continue to scroll down the page and Google image search replaced its paginated search results with a mechanism to auto load more images as the user reaches the bottom of the page. We have even seen this become popular with blog sites that auto load more blog posts as a user scrolls down the page (e.g.: Boing Boing www.boingboing.net).

Dynamic loading on www.boingboing.net

Dynamic loading on www.boingboing.net

I’ve even observed users in user tests comment that they would much rather have a long page that they can scroll back up to reference something rather than have to click the “next” button 10 times to get to what they want.

This article will look at some of the key principals of designing a well-structured and user-friendly long scrolling page.

1. Do I need a long scrolling page?

This is the number one most important question that you have to ask yourself. Just because I can, do I need a long scrolling page on my site? Long pages tend to work best when you have a story to tell (e.g. www.nest.com) or  have content that is more list type (e.g.: list of features). Do I have enough supporting creative assets (images/info-graphics/videos) to support the copy? It is key to remember that a large part of making a longer page successful is having meaningful and interesting images to pull the users attention down the page, while leaving the copy on the page to a minimum.

Timeline on Acumenfund

Timeline on Acumenfund

http://www.acumenfund.org/ten/
Great example of a site that leverages a long scrolling page to tell a story, in this case it uses a timeline to highlight their accomplishments.

Storyline on Nest

Storyline on Nest

www.nest.com
Similar to the previous sample, nest also uses a long scrolling page to tell a time-lapsed story of sorts. In-page navigation allows the user to easily go to the next or previous day.

2. Navigation is key

This very basic principal of designing a user-friendly site has not changed. It is critical that longer pages with lots of content have very easy to see, understand, and use in-page navigation to help the user navigate through the content on the page.

This used to be the job of jump links, but this mean that users had to click on the “Back to top” link to get to the page navigation. Sticky navigation now allows us to have in-page navigation that follows the user as they scroll down page.

Here are some examples of how sticky navigation has been successfully used by some popular sites.

a) Omni present header

Omnipresent Header

Omnipresent Header

http://frecklesandhandsome.com/
This is a pretty standard representation of an Omni present header that is always “stuck” to the top of the browser

b) The sliding header

Example of a Sliding Header

Example of a Sliding Header

http://www.acumenfund.org/ten/

Another example from Acumen Fund, showing the same screen that’s displayed above but this time with the sliding navigation. This navigation docks to the top and slides with the user and if the user stops scrolling for a but fades away to allow the user to read the content on the site, but re-appears when the user starts to scroll again.

c) Sliding secondary navigation/action menus

Example of Sliding Utility Nav

Example of Sliding Utility Nav

www.gmail.com
The new GMAIL UI has a sticky actions menu that follows users down.

3. Drawing the users attention on

The very success of your page relies on your ability to keep the user’s attention until the end of the page. This means investing in a copywriter to ensure that your user does not get bored half-way through. Keeping your copy short and scan-able is the best way to go. As mentioned in the first point; images are key to the success of your long content page. Really successful pages use the images on the page to tell most of the story and help draw the users eye further down the page.

Keeping the user's attention

Keeping the user's attention

www.nest.com

 

Attention grabbing images

Attention grabbing images

http://www.acumenfund.org/ten/

4. Don’t leave the user hanging

Always remember to have key calls to action tied in with each main section of the page. This ensures that the user has a way to stay engaged on your site every step of the way. The last thing you want for your site visitors is to read the entire page and then wonder what they are supposed to do.

Paying attention to the calls to action

Paying attention to the calls to action

www.nest.com

Summary

To summarize, long scrolling pages can be very effective when used in the right context. Hopefully, the guidelines highlighted in this article will help you decide if a long scrolling page is right for your project and how to approach the layout of these types of pages.

One thought on “Trends in Web Design: Long Scrolling Pages and Sticky Navigation

  1. v negron says:

    for me the down side of boingboing’s dynamic loading is that there is no place holder when returning from a link.I have to scroll for a while to get back to the point where I linked from.
    Is it technically possible to have a place holder with a long scrolling site?

Leave a reply

Error getting theme layout