There has been a resurgence of what was once considered website design taboo. Scroll Design.
Users are finding a new appreciation and love for websites where it is necessary to scroll.
Designers must shed old stigmas about the “one-page website” and learn new rules; as scrolling becomes a core element of interactive design.
Scrolling Rebirth
User Interface (UI) designers have had to adjust to new design trends since mobile device use has surpassed desktop use. Small screens necessitate the use of scrolling or single-page websites. The smaller the screen is, the more scrolling is needed to ensure a responsive design.
There are other reasons for the return of scrolling. High-speed Internet access is available in many places. It is quicker to scroll through information than to click from page to page. Social media sites are growing in strength and feed the technique.
Scrolling naturally accommodates user-generated content. Placing long scroll content alongside card-based design combines techniques that provide users with unlimited streams of bite-sized content. The combined technology is ideal for web and mobile experiences.
The above-the-fold doctrine that held scrolling back is now considered a myth. Studies show that users do not mind scrolling. Designers no longer need to jam all content above the fold. Everything can be spaced out for a smooth and even scroll.
Advances in Cascading Style Sheet (CSS) and JavaScript have made scrolling ‘sexy’ as a visual storytelling technique. A long page of text occasionally interrupted by images is not an engaging UI layout.
Designers now approach a long scroll as a canvas that uses icons, animations, graphics, etc. that illustrate a beginning, middle, and end. The use of scrolling has a film-like power that captures the user’s attention.
A recent trend in scrolling is a hybrid pattern that has a ‘fixed-in-place scroll’ that creates the traditional long scroll experience without vertically stretching a site. Every design tool and technique has those who hate the concept and those who love it.
Usually, the opinions are neither intrinsically wrong nor right.
Designers have to weigh all considerations before embarking on a project.
Scrolling Advantages
Tastefully-executed parallax scrolling websites encourage user interaction. It is an interesting storytelling method that uses changing elements for constant stimulation. Complex navigation paths, created by clicking, limit or slow down the experience.
Long scrolling is faster. The ease of use increases time spent on a site and promotes interactivity. Infinite scrolling sites help users discover content that may not have occurred to them. Scrolling simplifies the differences in page design that caused complication with different screen capabilities and screen sizes across devices.
The design is more responsive. Scrolling is a gesture that comes more natural to users than repeated taps on areas of the screen. Users, especially those with mobile devices, are accepting scrolling as a way to view displayed information. Fewer clicks result in faster interaction for a game- or app-like user experience.
Overcoming Disadvantages With Scroll Design
Some users will always resist change. Scrolling can be an SEO drawback. One page may have a negative impact on the current SEO algorithm. There are ways to minimize SEO downsides. Moz has a parallax scroll, and Quicksprout has infinite scroll.
Some users feel disoriented. They are disjointed or confused about the disconnection between content and scrolling.
Large pieces of material such as image galleries or video can slow the speed of a site, especially those using parallax-scrolling that relies on jQuery and JavaScript.
There are tutorials available that teach creating parallax sites without slowing the speed of a website. A ‘sticky’ footer is recommended, so navigability is not sacrificed for infinite-scrolling sites. They prevent confusion for users reaching the bottom of the page.
Some sites benefit more from extended scrolls than others. The content and design is best used when
- The majority of traffic comes from mobile devices
- Sites, such as blogs, have frequent new content or updates
- Much of the presented information is in a single format to enhance comprehension (Infographics are an example.)
- Media-rich content causes a drain regarding loading time
Scrollable Pictures on Mobile Phone Example
Twitter and Facebook helped make the technique popular.
Social media sites have extensive and constant user-generated content. eCommerce and other goal-oriented sites require coherent navigation and tend to have conservative page lengths.
Sites, such as Etsy that have user-generated products for an online store, are the middle ground that uses a hybrid solution. Several pages of ‘infinite’ scrolling end with a call-to-action button.
Longer scroll should not be used just because it is now an acceptable technique.
The website should meet the criteria mentioned above. Its use on the wrong site can make the user experience worse.
Scrolling Best Practices for Design
Parallax effects, scrolling, and similar mechanisms have been used for approximately four years.
They are relatively new in the design realm. Through trial-and-error, some fundamental best practices have evolved.
Below are some tips for implementing a long scrolling website successfully.
- The content should dictate the scroll length. You can alternate long and short scrolls. Use long scroll for landing pages and short scroll for the homepage.
- Use sticky navigation that allows users to bounce from one element to another or get back quickly in the scroll.
- Use tools and designs elements to suggest scrolling, so visitors learn to navigate the site quickly. Animated buttons, arrows, or similar UI tools are easy and fun ways to let users know what to do next. Buttons with instructions such as ‘Start Here’ or ‘Scroll for More’ are helpful in navigating a site using unconventional techniques.
- Distinguish between call-to-action, scrolling, taps, or clicks to get the desired interaction on the website.
- Tweak the design by using data from sources such as Google Analytics to see the number of users who click below the fold.
- Don’t overdo scrolling. Tell the story and stop. Long scrolls can be simple. They do not have to be 500 continuous pages of content.
- Focus on the goals and realize the term ‘infinite’ in this context does not mean endless. Users still need a sense of orientation and navigation.
- Use visual clues to help orient users. An example would be helmet icons for a motorcycle website. Stick to these recommendations to avoid causing more harm than good.
