Stick Around: It’s Nice to Navigate

compass and map

As you scroll down to read this blog post, you’ll notice something: even though you may be part way down the page, the navigation is still available at the top of your browser.

That’s called sticky navigation, and increasingly you’ll be encountering this style of navigation treatment as you traverse the modern web. The reasons for its increasing popularity range from its usability benefits to its visual appeal and even its marketing value, although there are also some situations in which a sticky nav can be inappropriate.

Examples by Zenman

In addition to the one on our own site, Zenman implemented a variety of sticky navigation bars on several client websites. Some are fairly simple:

http://www.industrydenver.com/

sticky navigation example

Notice how the navigation bar stays put while scrolling.

Others include a lot more information:

http://kindsmiles.org/

kindsmiles sticky nav example

Notice how the navigation is sticky, but changes while scrolling.

And of course there are many more that fall somewhere in between:

http://www.ikegps.com/

ikegps stickynav example

Notice how the shop button changes during scrolling.

http://www.drdamonsmiles.com/

drdamon sticky nav example

See how the navigation stays at the top, but changes as you scroll.

http://www.mobiletvgroup.com/

mobiletv sticky nav example

See how the font changes as the page scrolls.

Why it Works

The most obvious benefit of a sticky nav is that it is now unnecessary for users to scroll up to browse a site; the main navigation is always visible. This is particularly helpful on mobile devices, where narrow dimensions squeeze content into a long-scrolling format where the top of the page is far out of view.

It also helps create a consistently-branded experience. Most website navigation systems will include a company logo, colors, fonts, and key words in the form of global navigational items. Making this sticky ensures that the scrollable expanse between the header and footer still contains these elements, reminding the user where the information they are reading is coming from.

A sticky nav also aids usability by helping convey a sort of locational sense within the website. Users can always see what pages are available to visit next. They’re also reminded, perhaps subconsciously, of the basic structure of the website’s sitemap. Further, many navigation systems highlight the current page to let users know which page they are currently visiting. Keeping users constantly appraised of where they are and where they can go next in this way makes the website seem more organized.

When it’s Wrong

However, the sticky nav isn’t an appropriate solution for every website. One of the major issues is that, while it’s nice that the navigation is always present, the navigation is always present. It’s always taking up space on the page, possibly obscuring more relevant information. This is especially problematic on mobile devices. For websites like blogs where users will be spending a lot of time reading and scrolling through content, a sticky nav may be too obtrusive.

Clicking through the examples of sticky navs above, you may notice several of the larger examples shrink somewhat as you begin to scroll down the page. This helps to some degree, providing full navigation at the top of the page, but decreasing the overlap as users scroll down by hiding some minor navigation links. You may also notice that many of them are semi-transparent, providing a partial view of the content underneath. Techniques like these can minimize the intrusion of a sticky nav, but by its very nature it will always obscure at least some of the page.

There are other potentially smaller issues with sticky navs as well. It’s often more time consuming to build and test a sticky nav because of their complexity, so cost and time may be a factor. Also, particularly in older mobile browsers, it used to be common for sticky navs to jump and jerk when users scrolled down the page as the navigation tried to follow the scroll and then realized it was meant to stay in place. A sticky nav behaves strangely also when users zoom in on the page, growing exponentially in some cases and obscuring all else. Newer versions of browsers aim to fix these issues, but they still exist for many users and will continue to exist to some extent for the foreseeable future.

Variations on the Sticky Nav

In part to solve some of these issues, Zenman has employed some unique variations on the sticky nav for our clients. One technique we’ve implemented is to minimize the navigation when scrolling down to the bare minimum—namely, just the company logo. Hovering on the logo then brings up the rest of the navigation.

http://www.advisionmarketing.com/

advision sticky nav example

Watch the sticky navigation reappear when the cursor hovers over it.

It’s also possible to have the navigation start off lower down the page and then “become” sticky when it hits the top of the browser window. For Adventure Nannies, this allowed us to focus visitors’ attention first on the large, beautiful hero graphic.

http://www.adventurenannies.com/

adventurenannies sticky nav example

This sticky navigation sticks once it reaches the top of the browser window.

Borrowing from the Facebook iOS app, I also developed a jQuery plugin for a sticky nav with a unique twist: the nav disappears as users scroll down allowing them to see all the content, but then reappears when they scroll up no matter where they are on the page.

In action:

http://www.richeymay.com/

richeymay sticky nav example

See how the navigation reappears as soon as the page scrolls upward.

The plugin:

https://github.com/tcmulder/stickup-nav

Conclusion

A sticky nav can be a great option for a website with an average level of navigation complexity where users are expected to browse through the pages frequently. For websites where content is paramount or on-screen real estate is sparse, a standard navigation is a better option. Regardless, consider what navigation system will serve your users’ needs best, and then minimize any issues that may be inherent with that approach. If you’re wondering if a sticky nav is the way to go for your website, we here at Zenman would love to discuss the possibilities with you!

Calendar March 24, 2015 | User Sam O'Daniel | Tag ,