May 09 2012

Long Page Scrolling Designs That Work

LongPageScrolling

In the early days of the internet, scrolling was a faux-pas – a dirty interaction that was to be minimized. Design gurus, fearing that novice web users were missing the content “below the fold”, would exhort designers to cram as much as possible above this dreaded invisible line.

Today, the ubiquity of mobile touchscreen devices, coupled with the steady increase in the resolution of consumer screens both in the mobile form as well as traditional laptop and desktop settings,  has revived scrolling as an effective and intuitive way to navigate through web content. With its rise, there has been a corresponding growth in the acceptable length of content-heavy pages, as designers experiment with using single pages to tell compelling stories with their content. The following is a collection of examples we’ve encountered that are poster children for the long scroll trend.

1. Navigation via narrative

Concise, and to the point has become a popular style of content on the web today. Simple contact forms, brief but clear “about” sections, and scannable “features” callouts – to name but a few – are leading the way in consolidating content into a single page. The pressure on the traditional horizontal navigation bar is easing, as it no longer must accommodate vast numbers of internal site pages. Instead, nav bars are being leveraged to lead users deeper into the story of the site’s main page. Keeping the story contained to a single page helps preserve the seamlessness of the experience, and helps guard against key content possibly being missed, due to the linear nature of how long pages present content.

Single: http://singlecard.co.uk

Single utilizes a slider to deliver a simple story to its users. All of the nav elements on the site serve the purpose of leading the user through their story – even the top right navigation  tab takes you to the very last slide that contains the main call to action.

Pur-Suit: http://www.pursuityourself.com

Pur-Suit is another site that opts for a clean and easy-to-navigate layout that tells its story. The site does have a small navigation bar, but it is confined to the very top of the page and its purpose is focused on helping navigate users down the page.

Whitmans New York: http://www.whitmansnyc.com

Whitmans provides all of the necessary sections a user would need to navigate through a restaurant site in a simple scrolling experience. The navigation sticks to the top right and remains a tool for jumping through different sections of the page, allowing users to quickly skip to the information they need.

2. Promoting engagement with metaphors & interactivity

Incorporating meaningful metaphors and rich interaction throughout the linear path of a long scroll page is a great way to keep users engaged with the story. Humans tend not to do well with uncertainty, so simple metaphors woven into the structure of your long pages help foreshadow what the user will encounter along the way. Sprinkling interactivity throughout these pages is similar to the good practice of stopping to stretch one’s legs on a long roadtrip – offering these mental breaks to your users keeps them focused, and helps them return to the journey refreshed and ready to continue.

Online Portfolio of Jan Ploch: http://www.janploch.de

Jan Ploch uses the simple but fun metaphor of drinking a bottle of soda to compel users to reach the end of his page — thus concluding a satisfying drinking experience (*burp* – ahhh). This subtle visual interaction keeps users scrolling down the page to reach the end goal of seeing his final call to action.

La Moulade: http://lamoulade.com

La Moulade is a design firm that utilizes a wide range of scrolling from various angles – not just horizontal and vertical – in their web pages. The surprise of angular motion in a medium that is almost terminally married to up-down/left-right movement captures your attention almost immediately, but what keeps you moving forward is the gradual reveal of additional content. The text and images act as building blocks for an easily comprehended layout, as the viewer keeps scrolling through, creating a satisfying experience all the way through.

Dangers of Fracking: http://www.dangersoffracking.com

The Dangers of Fracking site is an excellent example of creating engagement and interaction between the user and the content using long-page scrolling. The page tells the fascinating story of a single drop of water as it goes through the fracking process – making sure to provide informative snippets of content at each step along the way. The innovative transformation of the content encourages users to keep scrolling and discover what other surprises are in store.

Wunderkit: http://get.wunderkit.com

Wunderkit’s site is filled with all sorts of rich interactions that are cued to start when a user scrolls to certain sections down the page. The sum of all the small visual delights nestled within this page keeps users alert, and on the lookout to learn more about the product.

3. Improved comprehension

As anyone who’s infuriated a sibling by shouting random numbers while they’re memorizing a phone number can tell you, the human brain can only hold between 7 and 9 pieces of new information in short term memory at one time. Traditional sites with many separate pages break up content, therefore placing a greater burden on the user’s short term memory to piece together the holistic message from disparate fragments. Collecting content within a single experience allows users to follow an unbroken thread, thereby aiding in comprehension and recollection down the road.

Rdio: http://www.rdio.com

Rdio’s long scroll pages break up their content into digestible chunks of information that all relate to the main theme of each page. For example, the Apps page explores the various ways of using Rdio on different platforms – taking care to differentiate each section with good use of color blocks, while maintaining consistent style and flow from one section to another.

Think Green Meeting: http://thinkgreenmeeting.com

Think Green Meeting allows readers to jump to the information they need by clicking on the consistent navigation menu to the left. While the layout varies significantly from section to section, the panning motion between them connects the pieces together, reinforcing the main message.

Simple: https://www.simple.com

Simple is a site for a new money management service…that’s not a bank. The concept requires some explaining. Their challenge is to demonstrate their key value proposition quickly and convincingly, and to motivate visitors to sign up. The one-page scrolling design is a dramatic departure from the majority of online financial services websites, which typically contain oceans of content – most of it text. Simple presents their key points briefly, linking to pertinent examples. This layered approach aids in comprehension of their new concept without overwhelming the visitor with details too early in the exploration.

Long page scrolling designs are great for delivering end-to-end stories to your audience, and with the proper execution can propel your users toward the main goal – whether that’s a form submission, a product purchase, or even just reaching understanding of an idea you want to share.

Have you been impressed by a long page scrolling site recently? Share it with us in the comments below!

Editor’s note: Looking for the winners of the Arrrows font giveaway? We’ve extended the deadline by one more week so check back on next week’s post to see the winners!

About the Author:

Marketing strategist, designer, WordPress-er, fascinated singulatarian, sci-fi lover & improv comedian, with a dash of UK panache. Thinker/doer. Friend to startups. Enemy of bananas. I'm also the Director of Products at digital-telepathy. Join/find me on Google+ and Twitter.

Leave a Response

8 Responses

  1. Pingback: 16 Impressive Responsive Designs that You Can Learn From

  2. Nov 08 2012
    Fabio

    Great article, thanks for sharing! I have to ask, where did you get those sharing icons on the left? I love them!

  3. Dec 10 2012
    fan facebook

    When someone writes an post he/she retains the thought of a user in his/her brain that how a user can be aware of it.

    So that’s why this article is perfect. Thanks!

  4. Jan 09 2013
    http://tinyurl.com/gars-8154325109

    “Long Page Scrolling Designs That Work” ended up being a perfect article.
    In case it possessed even more pictures this would
    certainly be even a lot better. Regards ,Mittie

  5. Jun 15 2013
    east looe cottages

    Howdy! Quick question that’s totally off topic. Do you know how to make your site mobile friendly? My site looks weird when browsing from my iphone4. I’m trying to find a template
    or plugin that might be able to resolve this problem. If you have
    any recommendations, please share. Appreciate it!

    • Sep 03 2013
      Jessica Zurik

      I think you have to use a responsive theme in your site!

  6. Jul 01 2013
    Avner Pinchover

    Thanks, was great. You can add jifiti.com if you want, I think has some quite amusing features.

  7. Jan 29 2014
    Nahys

    Great article! I have one question though…does the long scroll is relevant on every user interfaces (like a project manager, for example) ?