There’s a very simple and overarching principal that governs website navigability: Give visitors a reason to stay, and whatever you do, don’t give them a reason to leave. There are few more surefire ways to alienate visitors to your site than poor navigability. So when designing for ease of use, keep in mind the first-time site visitor and how you’d like to shape their experience. Here we’ll look at three current trends in how to design site navigation and examine the ways they could be big wins, or epic fails.

Infinite scrolling

Infinite scrolling (page content that automatically repopulates as the user reaches the bottom of a page) is a great way to hold viewer interest, avoid jump pages and create a seamless user experience. Ideal for small screen sizes and therefore perfect for mobile users, infinite scrolling would seem like an obvious win for today’s increasingly mobile world, where nearly 40% of users access the web primarily from smart phones or tablets.

2014-06-19_1046

And it is… mostly… so long as there are no static yet essential objects at the bottom of a web page. Say, for example, the site’s “About” or “Contact Us” buttons appear only at the bottom of the page. But every time a user attempts to click on either one, the page repopulates before they get the chance. That is an epic fail, and one that is likely to alienate a first-time visitor, perhaps permanently. With a little foresight, the fix is easy. If you’re designing for an infinite scroll environment, be sure those static elements are at the top or on a sidebar so they remain accessible to users at any point during the visit.

Nav bar versus menu

Screen-Shot-2014-01-17-at-7.46.13-PM1

Since the dawn of Windows technology in the late 80s, the nav bar has been standard issue. It’s clean, it’s simple, and it keeps all the essential elements needed for smooth site navigation handy, visible and out of the way at all times. Increasingly, dropdown menu navigation has replaced the old nav bars, and not always with stellar results.

An obscure, hard-to-locate dropdown menu tab can quickly prove frustrating — as can a menu that pulls down but won’t stay down. For example, the popular photo sharing site, Flickr, has recently changed its format (again), with dropdown menus that let users vie and prioritize search results as “relevant,” “recent, or “most interesting.” But often the menu withdraws like a cheap motel shade while the user is still making their selection. The result? They click on the image behind the menu instead. So, when designing for a menu environment, make the tabs clear and be sure all dropdown elements work as they should.

Those little icons

Screen-Shot-2014-01-17-at-7.40.15-PM

We’ve grown dependent on icons to guide us from one section of a site to another. After all, why say what you can show? And for the most part, these icons are clear and unambiguous. But a confusing or unclear icon can quickly transform a pleasant user experience into a frustrating and alienating mess. A “backward arrow” can, depending on its context, mean “reply to” or “return to previous page,” and in most cases the context is clear. But sometimes it’s not. An “open book” icon could mean “visit the archive” or, in the absence of a magnifying glass, it could mean “search the site.”

And there are even more ambiguous examples, ranging from things that look more like road signs to keyholes and even playing card symbols. Trying to determine whether diamonds or clubs means “Contact Us” can quickly transform a first-time visitor into a one-time visitor. So while the temptation may be to show how clever and forward-thinking a design can be, remember: simple navigation is effective navigation. Unless you’re designing a site to be used by only the most savvy of users, keep it simple.

With a little care and foresight, and a little empathy with your fist-time visitor, you should be able to create a site that will keep them coming back for more.