The old manta above the reel is not always what your content and design need. Here are seven ways to create a long scroll website that will grab users ‘ attention and hopefully scroll through them.
Long scrolling can be a great way to engage users. Sometimes the best possible visual representation does not happen completely over the parchment. Long scroll formats are websites that scroll multiple times to capture this content. Let’s put the often discussed concept to rest. Today’s users understand how and when to scroll.
1. Create Attractive Content
The number 1 key to success when it comes to a long scroll website is quality content. Without great content, nothing else is really important.
The bad news is that there is no quality test that tells you if what you are creating is good. (User analysis provides this information.)
But there are a few things you can do to create the best possible content:
- Tell an interesting story and make your own.
- Use high resolution and interesting visuals such as photos, illustrations and videos.
- Give users a reason to scroll. (There’s a reason many book chapters end with cliffhangers; that allows people to read.)
- Narrow the selection. Give users something to do in the design, but don’t overwhelm them with too many options. A call to action by parchment or step in history is enough.
- Write an attractive copy. While the visuals create a first impression, the words are what allow users to move into the content. Use action verbs and engage in an actionable and relatable story.
2. Create a visual theme
A strong visual theme will help users understand that the history of the previous screen, or scrolling, continues. Visual cues such as a common color thread, arrows and connecting lines, or even overlapping screens can create a visual line from one scroll to another. This will help users move throughout the design.
And here’s how to know if a long scroll theme works for your website. Track time on the site in your analytics. Do users stay on the site longer than before implementing long-scroll options? Do you interact with more or less content? Has the desired end conversion action increased or decreased?
More than just a visual theme, long scrolling web site traffic should help. If this does not happen, users may not understand the visual theme and they should scroll or perhaps the design concept just does not work for this user base. (Long scrolling is not for all or all types of content.)
3. Fun with interactions
One of the great things about the long scroll is that it lends itself to immersive storytelling techniques on the web. And this often includes many small interactions designed to delight users.
From animations to slide actions to scrolling techniques and images that change on screen, these small interactions can help users stay engaged. Beatrate, above, uses a handful of interactions-video, animated boxes while scrolling, hover effects, rotation counters and image sliders.
Every other part of the scroll contains animations that are unique to this content area. Since the elements, interactions ,and content are different (but always follow well-understood user patterns), there’s something new for visitors to do with every click of the mouse.
4. Using a scroll technique
One of the reasons designers love long scroll websites is that they work well on both desktop and mobile devices.
Many users would rather scroll than click (or touch) on smaller devices, as all information is always in one place and easily accessible.
Use scrolling techniques such as parallax, color blocking, or mixed content types (alternating heavy image, text, or video screens) to keep the design fluid. By using and mixing scrolling techniques, the design signals to users a change in content while remaining interesting. These effects can also encourage scrolling as users want to see what happens next.
And with a long scroll design, all of the content (or much of the main content) is on one page, so you don’t have to rethink contextual or hidden mobile browsing. Everything is there for the users.
5. Long and Short alternating scrolling
Just as you would switch scrolling techniques to create pages or screens in detail, make a point to mix long and short scroll segments.
Include short scroll items that are quick and easy to digest, such as images or a block with a handful of large words. Then add a longer scroll element, such as an infographic or a large block of text. Follow this with a brief call to action.
Mixing the length of the content blocks ensures a feed that users will not get bored. (The concept is very similar to writing content where you want to mix the length of judgement to avoid the monotony or boredom of the reader.)
6. Providing a roadmap
When it comes to long scroll websites, users want to know where they are and when to get to where they are going. You must provide a roadmap.
The roadmaps of the website users are available in different forms:
- Sticky navigation
- Points or elements that indicate the amount of remaining content
- Arrows or meanings that tell users what to do next
- A way to return to the beginning or end
7. Design Clear Goals
Long or infinite scroll websites should not be endless. The design must contain a beginning, an end and clear goals for the user.
No matter how cool the design is, it has to give users something to do. (That’s why you have a website, right?)
Before you even think about the design, describe what you want the end goal to be. Make sure that every part of the long scroll theme helps users achieve this goal. Take a look at the example above: each page and scroll contains a call-to-action button, which is located in the middle of the design and is easy to see and click.
Calling for action in multiple places is important because not all users scroll to the end of the long scroll content. Regardless of the quality of the story, regardless of the quality of the visuals, regardless of the engaging interactions, most users have a short attention span and decide whether and how to engage with the design within seconds. Ensure that the exploitable element is clear from the start and accessible at every stage of the design interaction.
While lang scroll website designs are not new, methods to improve the experience are evolving. This starts with excellent content and ends with how you organize the experience.
Be aware that long-scroll techniques and concepts are still quite discussed in the community of designers and users. Weigh the pros and cons and if this technique fits your concept, make sure you measure the analysis and test it along the way to make sure it works as expected.