Scrolling and Placement
When designing a website, it's important to place content in a way that will guide the users down the page to learn more. Scrolling is one of the primary interactions a user can do on a website so it's beneficial to use different scrolling techniques to engage the user. This article will teach you about how to strategically place content to guide the users down the page and different examples of scrolling.
As a designer, your objective is to create an easy to understand layout for the user to experience the content. As you’ve learned, using a layout that includes grids and clean spacing, and appropriate content placement is important to guide the user through your website.
The term “above the fold” comes from printed newspaper terminology, to describe content placed at the very top, right where a reader would see it first. Websites use this term as a reference for what is visible on the page without scrolling. The exact measurements of “above the fold” vary between devices, but the concept remains the same. The content placement in this area is what encourages the users to scroll.
It’s your job to show the most important and relevant information in the top section but also hint to the user that they’ll need to scroll down for the rest of the information. A few ways you can do this is with visual elements like arrows or animated buttons, or even by showing the start of the following content.
Scrolling is a core interaction in designing a User Interface and encourages interactivity while increasing the time that users spend on the site. Guiding the users to scroll is beneficial because users have better experiences with scrolling rather than clicking. When a user has to click something, they also have to wait for the page to load, which may steer them away from the site.
Here are a few examples of different types of scrolling:
1. Long Scrolling
This type of scroll is a good way for designers to tell a story in a smooth, linear fashion.
Le-mugs is a good example of long scrolling. Notice how the animation of the arrow hints that there is more information. Each of the sections are well defined and easy to scroll through.
With long scrolling, it’s good to have a sticky navigation. Sticky navigation can be in the header, or like the example, on the side. The dots on the side allow the user to know where they are, or easy access to where they want to go.
2. Infinite Scrolling
This type of scrolling is beneficial when there is a lot of content that is organized on a single page but has too much to load at once. Social Media sites like Facebook or Instagram use a feed that uses this type of scrolling. It creates a rhythm for the user, allowing the user to be continually entertained without having to wait for the new content to load.
Users may stay on the page longer with this type of scrolling, which can lead to more engagement. It’s a good idea to include a “back to top” button to allow the user to easily scroll to the top despite the amount they have scrolled. This type of scroll is commonly used on mobile devices since it is easy for the user to continuously scroll with their finger and keep the user engaged.
Imgur is a good example of infinite scrolling. Since there are so many pictures, the website uses a lazy load to load the content so that the images load in sections as opposed to all at once.
The website for the movie The Disaster Artist provides an infinite scroll. However, this version of the infinite scroll takes you back to the top of the page after you have reached the bottom.
3. Parallax Scroll
With this type of scrolling, the background images move at a different speed than the foreground images. This style of scrolling is a creative way to tell a story because it allows for an immersive and stimulating experience.
<a href=”https://ihatetomatoes.net/demos/parallax-scroll-effect/"target=_a>This demo site is a simple version of the parallax scroll and gives examples of transitions in scrolling.
Another example is this McWhopper site. In this website, we see the parallax effect in the interaction of the items in the sandwich moving faster than the background.
Notice two things about the McWhopper website:
- That they instruct you to “Please, scroll down”
- If you look at the site on your mobile device, the parallax scroll is no longer there.
As you have learned, organizing content in a way that will guide your user to scroll through the information on the website is important when creating a good user experience. Rather than placing all of the important content in the “above the fold” area, only place the most important content and hint for the user to scroll. This will guide the user to read through the other important content throughout the site.
Providing a scrolling experience beyond a regular scroll, similar to the scrolling examples you just learned about, will captivate the user and create a more stimulating experience for them. This is better for the experience that you provide the user and the analytics of your site.