Web UI Design
Patterns 2016
Ch 8:
Patterns for Scrolling
Web UI Design
Patterns 2016
Ch 8:
Patterns for Scrolling
Copyright 2015 by UXPin Inc.
All rights reserved. No part of this publication text may be uploaded
or posted online without the prior written permission of the publisher.
For permission requests, write to the publisher, addressed
Attention: Permissions Request, to hello@[Link].
Author
Ben Gremillion is a Content Designer at UXPin specializing in respon-
sive design. Previously, he was a Design Writer at ZURB. He has earned
an Adobe Certification and knows CSS, HTML, regex, PHP, MySQL, and
other impressive-sounding acronyms. He also builds and maintains a
CMS for webcomic artists, and participates in bi-annual NaNoWriMo
challenges.
Table of Contents
Long Scrolling 5
Fixed Long Scrolling 9
Infinite Scrolling 11
Parallax Scrolling 15
Scrolling
Long Scrolling
Take It
Patterns for Scrolling 6
Le Mugs
Beoplay
Patterns for Scrolling 7
Flickr
1. Problem
A site has so much eclectic content that a multi-page format would
be too difficult to navigate.
A site wants to tell a story in a smooth, linear fashion.
2. Solution
Create a single-page, long-scrolling site to consolidate your content
in a single place. This works great for social media sites and others
with user-generated content, where part of the fun is browsing
through everything all at once, and the content is diverse and
difficult to categorize because its always updating.
The prominence of mobile browsing supports the long scrolling
pattern since smaller screen sizes call for more scrolling.
Combined with the infinite scrolling pattern described below,
long scrolling can create a completely immersive browsing expe-
Patterns for Scrolling 8
rience. If users are searching for something in particular, a more
structured navigation system like Amazons works better but for
explorability, long scrolling is the fastest and most fun for users.
3. Tips
Use sticky navigation (Chapter 2). Disorientation and the inabil-
ity to go back are the innate drawbacks of long scrolling, but a
fixed menu allows users to move freely.
Long scrolling can have a negative effect on SEO, but this can be
avoided by following the advice of Neil Patel from Quicksprout.
Dont autoplay heavy media like videos, since in abundance
they drastically slow down loading.
You dont have to commit to a single-page format with long
scrolling: often sites feature a central long-scrolling home page
that links out to traditional secondary pages, like Facebook and
Twitters separate profile pages.
For one-off long scrolling on specific page sections, try the fixed
technique described below.
Patterns for Scrolling 9
Fixed Long Scrolling
Squarespace
UXPin Tour
1. Problem
A site could benefit from the advantages of long scrolling, but
doesnt want to convert entirely from a multi-page structure.
Patterns for Scrolling 10
2. Solution
Fixed long scrolling sites display information that might otherwise
require multiple sections within one long-srcolling section. The
effect feels like a scroll within a scroll.
3. Tips
When deciding what to include in a fixed scroll section, make
sure you only choose content that fits within a unified theme
or category. Each part of Squarespaces fixed scroll section,
for example, focuses on explaining how to Create a beautiful
website for different business types.
Place CTAs in at the end of each of each fixed-scroll frame.
As the UXPin product tour page shows, you can also consider
adding a scroll progress bar to the top navigation. The pat-
tern helps add a greater sense of pace if you have more than
3-4 frames.
Patterns for Scrolling 11
Infinite Scrolling
True Tube
Tumblr
Patterns for Scrolling 12
By Kato
Imgur
1. Problem
Content is better organized on a single page, but theres too much
to load all at once.
2. Solution
With the infinite scrolling pattern, content is loaded as needed to
provide a more paced experience. Infinite scrolling proves useful
for single-page sites with more than a few screens worth of content,
especially with multimedia galleries.
Patterns for Scrolling 13
Infinite scrolling creates a rhythm for social media sites, where
users are continually entertained with new content without click-
ing or waiting.
The problem with infinite scrolling is when users lose their place,
though there are ways around this. Sticky navigation (Chapter 2)
is the best way to give your user mobility in a near-infinite sea of
content.
3. Tips
In addition to sticky navigation, there are other methods to
help infinite scrollings disorientation. A jump-to-section option
(Chapter 2), as with Tumblr, lets users return to the start if they
become lost.
Infinite scrolling can be combined with pagination for more
accurate searches. For example, Facebook allows users to search
timelines by year.
Patterns for Scrolling 14
Dont be constrained by the traditional loading circle your
choice of icon is an opportunity to deepen your sites identity.
Facebook, Tumblr, Imgur, and others all have custom loading
signifiers.
Patterns for Scrolling 15
Parallax Scrolling
The Walking Dead
Oakley: Airbrake MX
Patterns for Scrolling 16
The Boat (SBS)
McWhopper
1. Problem
Users are not engaged enough in long scrolling formats.
2. Solution
Give your long scrolling site more impact with a parallax effect.
Known to the video game industry for decades, this pattern refers
Patterns for Scrolling 17
to the layers of a two-dimensional image moving at different speeds
when scrolling, i.e., the foreground and background moving at
different speeds, or differing layers of the background. The effect
creates a mesmerizing three-dimensional feel.
The parallax effect unlocks the more creative aspects of scrolling,
especially when combined with scroll-triggered animations. This
style lends itself to storytelling sites, building a more immersive
and stimulating experience with better visuals.
The Walking Dead uses parallax and other scrolling techniques
(i.e., atypical direction since the frames move left to right as you
scroll down) to deepen their narrative. While not necessary, the
differentiated backgrounds make just watching the scroll more
enjoyable. It also makes sense for the context of the site since the
character reacts to the scroll.
3. Tips
For help on coding for parallax sites, read Dave Gamaches
piece on Medium.
Be careful of loading times. A simplified fast site is still better
than an extravagant slow site.
Design web prototypes faster with UXPin (1000+ built-in elements)
Everything you ever wanted
in a UX Design Platform
Complete prototyping framework for web and mobile
Collaboration and feedback for any team size
Lo-fi to hi-fi design in a single tool
Integration with Photoshop and Sketch
Start using it now!
[Link]
