Parallax and Scrolling
Parallax is an animation effect that allows layers to move in response to a particular viewpoint. The effect is used to add a three-dimensional depth illusion to the design and make interaction more responsive and interesting. Recently, this technique has been frequently used to animate background images, as in the famous Nike Better World site.
Nike Better World
Rich graphics and parallax 3D effects
On the Nike page, the effect is visible when a user scrolls the page vertically. The background images seem to overlap, as if they were piled up in a slide deck. This effect is particularly strong when you click on the circles in the right area of the site. Notice the dashed horizontal and vertical lines which are displayed as you scroll the page. They vividly connect parts of the site and help to create a more consistent user experience.
One drawback of the navigation here is that the navigation controls are very subtle. In fact, on many sites which use this technique, the strong emphases are on the rich, detailed illustrations which make it a bit more challenging to actually find the navigation. In this example, perceiving the dots on the right side as navigation and not mistaking them for part of the design may take a while. Still, a very original and memorable design.
Horizontal parallax animation
Rosso Carmilla features an interesting twist on a combination of the Parallax-effect and scrolling navigation. The designer uses a horizontal rather than a vertical orientation, with a classic navigation menu at the top. As the user hovers over visual elements, they seem to move, creating the illusion of depth. The limited color palette and original illustrations work very well with the animation to create a memorable experience. The subtle animations are visible only when the user hovers over the content area.
The idea is very interesting, and the execution is done fairly well. However, a larger font size and additional navigation controls for a smooth transition between sections might improve the overall usability of the site: the horizontal scroll bar at the bottom of the page isn’t easy to notice and isn’t very comfortable to use.
Discover Tennessee Trails & Byways
Horizontal scrolling navigation, clarified.
Discover Tennessee Trails & Byways incorporate a “trail viewer” navigation for their users. The designers of the site use the same idea of horizontal scrolling navigation with a Parallax animation, but they decided to explain to users first how to use the navigation on the site. Usually, this is not a sign for an effective navigation, but it works quite well in this example, especially because the overall design appears to be very novel, playful and experimental to users anyway. In the case of uncommon or particularly innovative design techniques, this kind of instruction might be necessary until users understand the paradigm of the new navigation pattern.
When the user clicks on a trailer icon, further related details are displayed in a lightbox. Also notice how the “map” with trailer on the right side moves when the user uses the main “trail viewer” navigation. The other interesting navigation menu on the site is the one displayed at the bottom of the page; when a user selects an area, secondary options are displayed in the menu on the right side and this selection doesn’t change wherever the user’s mouse is. This navigation menu is also very nicely integrated in the overall site’s design.
‘Cluttered desk’ meets Parallax
Strikingly original, Siebennull features a’cluttered desk’ style wooden theme, along with a 3D feel provided in part by shadows and other realistic graphics and in part by the Parallax effect which is applied to the whole page. The overall effect feel very interconnected without too much clutter.
One pitfall with an animated background, however, is that the background doesn’t necessarily hold still while the user is viewing something in detail, whether in a model box or a simple zoom-in. This can make it more difficult to read large blocks of text. The page does feel a bit difficult to focus on due to a strong Parallax-effect. This is probably an example of the Parallax-effect being used too strongly, thus deteriorating the purpose of navigation.
It’s common practice to keep the design as simple and intuitive as possible, making it very easy for the user to click from one page to the next, almost mindlessly — “don’t make the user think” is the rule. However, you could as well engage users on your site, making them think about what’s going on in the page and involving them in the experience on a deeper level. For instance, you could employ storytelling to increase the engagement on your site by telling a story that your users would like to pursue or interact with.
One way to make your visitors feel involved is to turn the website into an interactive journey. While users interact with the page, they can learn something along the way, being baffled by the originality and uncertainty of the site. This technique is probably best-suited to promotional landing pages rather than content-heavy websites. If a story is intriguing and presented in an interesting, perhaps unconventional way, it will capture users’ attention and encourange them to continue through to your site’s call to action. A few fine examples of these types of navigation are highlighted below.
Ben the Bodyguard
A narrated landing page
The designers of the Ben the Bodyguard landing page have chosen a very memorable metaphor for their main character. Instead of presenting a generic “coming soon” page with a description of the upcoming service, the site effectively tells a story. The main tagline of the page is “A Frenchman protecting your secrets. Yes, seriously.” Next to this statement, a description of the tool is presented subtly. The mysterious character is displayed in the background, yet it very well captures users’ attention and interest.
The actual interesting part of the page happens when you scroll the page slowly. If you pay attention to illustrations and read all the details presented, you can watch as a story unfolds. While the narrator walks down the street, he gives you some explanation, but only enough to raise your interest. As you keep scrolling, the story reaches its climax and ends with a prominent call-to-action buttons. Notice that the design is responsive and the illustrations adjust to the user’s viewport. On the whole, it’s not classic navigation, but it’s not a traditional site either. Ben the Bodyguard is a remarkable website and storytelling works very well in this context of a promotional piece. That’s the reason why the site has received so much attention when it was initially released.
Smooth, gentle storytelling
Youzee is another example of a smooth, vertical one-page scrolling navigation which employs storytelling. The page has the main navigation at the top, yet it is not linked to separate pages, but rather to the sections of the loaded page. In fact, each section slides up neatly, with a bit of animation but not enough to make the user dizzy.
Notice how carefully the designers use storytelling to involve the user in a story and engage them in learning about the tool. Opposite to Ben the Bodyguard, the design doesn’t rely heavily on a character, but rather uses more familiar, existing metaphors to unfold the story. The main area on the top isn’t saying what the service is about; the user learns it along the way as he scrolls the page. Also notice how well designers use the “Turn on” metaphor for the button on the top of the page; it looks as if it wanted to be clicked on and responds appropriately to a click. Well done, guys, well done.
Tried and true, scrolling navigation is a simple and elegant way to guide users through your content. Many designers are experimenting with scrolling navigation on single page designs which accomodate the full information of a website on one page rather than spreading it across multiple pages that would load separately. Usability studies are required to determine if this navigation pattern is more effective than a classic one, and it would be wrong to apply it to contexts without verifying its usefulness first. Some ways of making your scrolling navigation unique are highlighted below.
Back to the basics
Polecat is a yet nice example of a single page site with scrolling navigation. The primary navigation in the upper right corner is very minimal, plain text almost, but it works well because it’s not in the way; it’s clearly available and makes the user feel like they know exactly where they are. The illustrations are unique and engaging. When you visit the page for the first time, you might feel overwhelmed with a number of information items thrown at you, but this feeling goes away shortly after the site is explored in more detail.
When a navigation item is clicked, the page smoothly scrolls to the chosen section of the page. The interesting part is that various parts of the page are clearly divided using distinctive background colors, so the user always knows exactly where a section begins and where it ends. Also, each section is vividly illustrated, leaving a lasting and memorable impression. It has a more interesting and engaging design for a portfolio website than many of the similar websites out there.
The main drawback: at first glance, it’s not quite clear which elements are clickable and how the navigation works, which can be a bit confusing at first.
Simple vertical scrolling navigation
Very much like Polecat, Cornerd features lots of illustrative eye-candy. The monster theme is working very well and subtle eye movements of the monsters create an inviting, playful atmosphere. The designer Denise Chandler does not take herself too seriously and this is exactly what invokes empathy and sympathy on the site, making it easier to develop trust for designer’s ability to produce engaging and attractive work.
The sections of the page work well, but a fixed navigation at theop might really help to establish more of a sense of freedom, especially in the long sections like the portfolio section. Instead of that, the user is only provided with the option to move back up.
Curious Generation Group
Single page scrolling with a twist
While clean and organized, Curious Generation Group feels a bit unexpected with its colorful round shapes. A simple static navigation bar at the top is both subtle and plays well with the overall design of this website. Sometimes a fixed navigation bar can feel clunky and distracting, but this one feels light and airy with its transparency. The positioning of the content works well with the animation of the scrolling and does a good job of leading your eye through the website. Notice that all single areas are interconnected: for each area, there is a sidebar navigation displaying further navigation options. A very vivid, colorful and memorable design.
Riding on a scooter
Eric Johansson does a couple of things that make the exploration of his site interesting for the user. The page provides subtle cues on how to use the navigation and there is also a (kind of) horizontal scrollbar which appears within the context of the page. It’s a small difference, to have a scrollbar a few pixels above the bottom of the window as opposed to using the browser scrollbar itself, but it provides almost enough distinction to make it clear that the user is supposed to click and drag.
As the users scroll the page, they need to look out for arrows and handles that need to be clicked on in order for further navigation options to be displayed. Eric is playing with the users, and does so in a very unique way. Users that do not feel comfortable with it are nevertheless provided with the option to View the extended & “normal” site. The graphics on the page could be improved a bit to make the design look a bit realistic, but maybe it is designed this way on purpose. But it would be great if the users could scroll the page without necessarily using the integrated scroll bar on the bottom of the page (see Scroll Page Horizontally With Mouse Wheel).
Vertical scrolling navigation with storybook graphics
Haunted Cathouse is a yet another, very detailed and very illustrated page which breaks the flow of the page by displaying unique illustrations between the sections of the page. As the user scrolls vertically, he can either see the current section, jump to the previous one or to the next one.
Clicking on the little owl in the lower right corner reveals a slide in navigation bar at your service wherever you are on the site, a better indicator however may save the visitor some time. While some users may be happy to start scrolling away on their mouse to get to the content, in this particular design it might be useful to provide multiple options. A top-level navigation bar also provides a way to highlight what kind of content users can expect to find below.
Horizontal scrolling within horizontal scrolling
Sam Web’s horizontal scrolling panels, while a fairly classic navigation model, are very cleanly executed. It’s also nice that some sections slide horizontally while the contact link scrolls to the bottom, since that element is present globally.
The interesting thing here is the nested horizontal scroller on the portfolio page. Since it scrolls in the same direction as the main content area, but isn’t controlled by the same navigation, it has some potential to confuse users. The left and right arrows are visual indicators that something is different about this section, but it also might benefit from being a slightly different kind of scroller, or using some other interaction to navigate that content. It’s a tricky thing, finding a slick way to add navigation to subcontent already inside of some sort of interactive navigation.
Too much of anything is bad for you
The designers of Denny’s Restaurant probably overshot when searching for a way to accommodate a lot of content. The combination of horizontal and vertical scrolling is rather disorienting than helpful. Without the small hint on the home screen, the user may even miss the content only reachable through the extra vertical scroll. Additional content is hidden in sliders and it seems easy to get lost. In addition to being confusing, the site is not very friendly to mobile users, looking to order or find a restaurant on the go. The site might create a feeling of “fluid content” which is a bit difficult to grasp and focus on, since everything is moving; everything is interactive and everything is changing. The design could use a bit more calm.