Bored with Up-and-Down Scrolling? Try Alternative Navigation

Bored with Up-and-Down Scrolling? Try Alternative Navigation

Up and down, up and down—traditional scrolling makes up the basic navigation for most websites. Text and images scroll on and off the screen as the right sidebar moves from arrow to arrow, and there’s not much more to be expected. But web designers are starting to play around with the concept of website navigation and develop new alternatives. Some elevate the traditional up-and-down scrolling; others throw it to the wind altogether.

Infinite Scrolling

While infinite scrolling still involves traditional up-and-down controls, instead of coming to an end at a certain point, the bottom of the screen continues to repopulate with content as the users keeps scrolling. Popularized by such sites as Google Images, Facebook, Twitter and Pinterest, infinite scrolling has become more and more common in web design over the past year.

Horizontal Scrolling

This is one of the most obvious alternatives. Instead of presenting content below more content, designers display it to the right of the first screen of content. Scroll bars are at the bottom of the screen instead of to the side. If users can get passed the fact that they can’t use the scroll wheel on the computer mouse, this could be an interesting way to go. It’ll certainly help the website stand out, and some types of websites are well-suited for this type of scrolling, such as portfolios and photo galleries.

This website from London designer team Here Design features horizontal scrolling navigation. The setup allows users to smoothly scan images side by side.

1

Parallax Scrolling

One of the latest trends in web design navigation, parallax scrolling creates an illusion of depth as background images move more slowly than foreground images onscreen. It has become popular among businesses and brands of all stripes as a unique way to present content in a visually pleasing manner.

For the Atlantis World’s Fair, website designers use parallax scrolling to show a person riding down an elevator underwater, passing various blocks of text as the elevator plunges thousands of leagues beneath the surface.

UK dementia research charity Alzheimer’s Research uses parallax scrolling to bring the user on a tour of a research lab with different clickable sections of the website appearing as the user scrolls through.

3

Nintendo created a website for the launch of Mario Kart on the Wii that features not only parallax scrolling but horizontal movement on a track. The effect takes the user through the history of the game via text boxes and graphics on an animated road.

4

Freeform Dragging

Another alternative throws up-and-down and side-to-side scrolling out of the window altogether. The freeform dragging navigation method allows users to click and drag points on the screen to move the visible portion around at will. This is one of the most involved and complex forms of navigation, but it can work really well for some brands—particularly bold, quirky brands who want to make a statement with their website content and design.

Jacqui Co. Bakery’s website features freeform dragging navigation. You can explore their huge page of content by dragging the screen around, up and down and side to side to reveal more content.

5

Benefits and Drawbacks

It’s important to keep in mind that not all audiences will appreciate these design techniques and not all websites are suited for them. For example, blogs and other text-driven websites might not necessarily do well with horizontal or freeform dragging navigation.

Designers should be wary of their websites becoming too over-stylized, which could turn away users out of confusion, slower loading times or both. Alternative navigation can really elevate a website, but it should be used thoughtfully and creatively.

Related Articles

  • The Easy Way to Build A WooCommerce Restaurant Website

    As a restaurant owner, there are a number of ways you can benefit from building a WooCommerce restaurant website. For example, you can offer online ordering options to customers, automate order processing, and potentially increase sales. Creating a functional restaurant…

  • The Three Types of Service Organization Control Reports

    The primary purpose of a service organization control (SOC) report is to help your service organization or company communicate information in regards to your controls. The report will be given by an independent service auditor (who must be a certified…

  • Bar Preparty Identity

    The unique identity of a bar attracts thousands of customers and increases sales. Let’s see how the unusual bars around the world look and let’s learn more about the trends in their design. Types of bars: Lux-format. To decorate such…

Written By
Carolyn Heneghan

Carolyn Heneghan is a freelance writer, journalist and editor who loves to research and tell a great story. She currently serves clients in a variety of industries and is always looking for a new and exciting project to take on. She also loves cooking, reading, watching movies and cooking shows and cross-stitching.

Leave a Reply

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