Info


I just wanted to share a website design pattern that seems to be gaining popularity called continuous scrolling.  Instead of navigating to the end of the page and clicking ‘Next’ or through traditional pagination, continuous scrolling loads new content in chunks as the user reaches the bottom of the page, providing a seamless experience of navigating by scrolling, rather than page by page.  Many of you have probably already seen this on sites like facebook.

Benefits

This style is particularly useful for blogs or catalogs, which contain large amounts content that are similar in category or nature.  It eliminates the need to reload the entire page every time, loading only the pieces that are needed.  And instead of breaking the content up into pages, the user now has a seamless experience.

Some of the examples I’ve listed aren’t true “continuous” scrolling sites, but I rather like how moving through content on a single page feels very much like moving through a slideshow or animation, like on spelltower.com.  There is something oddly refreshing about this tactic.  It may simply be that the large splashes of color and minimal text just look very appealing to the eye.

Disadvantages

I do think this tactic can be done the wrong way though, and designers need to take special care in modifying the UI to accommodate its inherent issues.  For example, it may be confusing to some why the page never ends, so it is important to give people feedback on the process, e.g. indicating that new content is loading.  It can also be a pain to scroll for days to see the infinite content, so it would be wise to either keep the main navigation visible at all times, or by providing a “scroll to top” link.

Overall, I think the benefits outweigh the disadvantages, particularly when it is executed correctly and used in the right place.  The point of designing the user experience is to provide a smooth, simple experience where the user has an appropriate amount of control and I think this type of layout accomplishes just that.

Other examples:

http://www.cocollective.com/
http://impressapenguin.com/
http://mandrill.com/
http://www.adidasdesignstudios.com/

Advertisements

Comments

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Basic HTML is allowed. Your email address will not be published.

Subscribe to this comment feed via RSS