Home > Prototyping and wireframing > 3 scrolling patterns and how to prototype them
Prototype scrolling patterns to build stories that people want to read and create interactive content using Justinmind

Prototype scrolling patterns to build stories that people want to read and create interactive content using Justinmind

Scrolling has undoubtedly become one of the most natural actions that users make, especially since the proliferation of mobile devices over the last decade. With pages of content churned out every day and 350,000 tweets written in a minute alone, scrolling is an important element of the user experience. Getting scrolling right can be the difference between a visitor reading every last word of your content or disappearing in a flash because of onerous scrolling.

When creating a website or mobile app, it’s small details like smooth scrolling that can make the biggest difference and prevent rage from your audience. In Justinmind, there are a few ways you can implement an effective and seamless scroll that will improve the UX design and keep your visitors hungry for more content. Let’s take a look.

What is scrolling?

Scrolling basically means moving the content within a window up or down, left or right in order to make your way through the content. This can be done on a computer with a mouse or your finger on mobile devices. Stupidly simple but important to get right. 

Why should I care about scrolling?

You don’t need to care about scrolling. But if you care about creating user experiences that people love then getting your head around the basics of scrolling is necessary. Thankfully there isn’t a whole lot that goes into the inner workings of scrolling. Whatever scrolling pattern you do decide to use, let your website’s content inform that decision. Align your scrolling with your navigation design so that your users don’t get confused.

With web pages getting longer in content and mobile device use more ubiquitous, scrolling makes perfect sense. Why?

  • It’s fast
  • Ideal for mobile devices
  • It’s non-committal

Now, let’s look at what different scrolling patterns exist and when you should use them.

Download Justinmind and start creating hi-fi prototypes

Download free

Scrolling patterns

What sort of user experience you want to create will indicate which scrolling pattern to use. Here are the three main types of scrolling within web and mobile design:

Parallax scrolling

Parallax scrolling is an interactive scrolling pattern. This type of scrolling is quite genius. It gives the illusion of depth by having the background and foreground move at different speeds which helps to create movement and dynamism. And when paired with some animations can be quite a formidable force within UX design. The Nasa Prospect website is a great example of parallax scrolling.

How to prototype parallax scrolling with Justinmind

To create a parallax scrolling effect in Justinmind, open a new web prototype and go to the Parallax widget library.  You can choose from a range of different scrolling speeds.  Let’s create a simple webpage with a header, sub header and content.

In this instance, let’s go with 30% scroll speed. Drag the widget directly onto your canvas. Rename it to “thirty percent slider” and resize it as you wish. Be sure to remove the Ellipse widget from the Outline tab on the right hand side.

Once you’ve completed that you will want to add a Pinned top widget to the top of the canvas. Move it toward the front of the Pinned top widget. Make sure its length is the same as your 30% percent slider.

In the Pinned top widget that you just dragged onto the canvas, look in the Outline tab to remove the Icon and Rich Text, replacing those with your own navigation elements.

Now you need another widget but this time pick the 50% scroll speed. This will help to create the dynamism that parallax scrolling is famous for. Place it on top of your 30% scroll speed widget.Then move it in front of the Pinned top widget by right clicking and selecting the position.You should resize this to fit your header/sub-header content. To do that, simply change the Image and Ellipse to your header and sub-header, in this instance.

Once you’ve completed that step, simply drag a Dynamic Panel onto your canvas below the 30% scroll speed widget that you placed earlier. In your dynamic panel you can add text boxes to fill with content. And that’s it – you have created parallax scrolling.

Long scrolling

For one page websites that tell a story, use long scrolling. The long scroll helps to build a narrative and takes the user on a journey. Nick Babich points out that this “technique that allows user to scroll the chunks of content without any interruption or additional interaction”. Perfect for the mobile user who doesn’t want to awkwardly click a link to go to a different page. Long scrolling is also great for creating portfolios or even resumes.

How to prototype long scrolling with Justinmind

Putting a one page long scroll into your interactive prototype doesn’t take a lot of work. With minimal elbow grease, you can create something seamless with just a few click so let’s begin:

Create a web prototype with a parallax layout (which you just learned to do above). Decide how many navigation options you want as this will determine how many sub sections you have.

In your Pinned top widget you can add text boxes to represent your navigational tabs. So if you have 4 navigational elements (i.e home, about, team, contact) you should have 4 text boxes. You can add these in the Outline tab.

Next add an SVG image file – it isn’t important what the image is because we’re using it as a marker – for each of your sub sections, placing it precisely where you want your navigational links to move to. Position the image files in the top corner of the left side of each sub section then change the transparency of those images in the Properties tab to 100%.

Next we need to link the image files with the navigation tabs in order to create that sweet long scroll. The text boxes you created earlier need events – click the text box and under the Events add an “On click” and “Scroll to” event to each corresponding SVG image. Repeat this for each of the navigational tabs and SVG images and you’re all set.

Infinite scrolling

Infinite scrolling is very common on social media websites like Facebook, Twitter and Tumblr. Despite the UX controversy surrounding this innocuous scrolling pattern, it’s still a popular choice.

As you scroll, the content loads continually and infinitely. This type of scrolling is especially good if you have a lot of content to show but don’t want to break that content down into individual pages which helps to boost user engagement. How? In theory, if users have to continually scroll to discover new content then they will be more inclined to stay on that page scrolling ad infinitum.

It’s possible to add effects to your scrolling patterns too. For example, in a mobile prototype in Justinmind, you can scroll between fixed header and footer bars.

Scrolling is a vital part of the user experience. The smoother the scroll, the less noticeable and therefore the better browsing experience.

The takeaway

Scrolling can be overlooked when it comes to user experience design but it pays off to really consider what type of scrolling you wish to use, especially if you want to avoid screams of scrolljacking from angry UXers. Thinking about how your content should be read by your audience and what type of story you wish to tell will inform which type of scrolling to use. And if all else fails, you can always rely on the web standard.

Steven is the web editor at Justinmind

Add comment

Your email address will not be published. Required fields are marked *