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.
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.
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.
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.
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.
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.
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.