Designing for navigability: 3 big wins… or epic fails

Cecily Kellogg

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.

The author

Cecily Kellogg
Cecily Kellogg

Cecily Kellogg became an accidental designer when she worked at a short-handed non-profit and although she now prefers designing with words, the lessons she learned from doing graphic design make her work in content development more well-rounded. She writes about the intersection of family, technology, and social media for Babble Tech and runs her own web content business. She is also known for her raw tone and humor on various social media platforms including her own blog, Uppercase Woman. Cecily lives in the Philadelphia area, is happily married, is mom to a fierce and amazing daughter, and has occasionally been called a bad ass.

Related articles

The fundamentals of responsive website design

The fundamentals of responsive website design

The days of designing a website for a single desktop screen are well and truly over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Think about it: how much browsing do you do every day on your phone vs. your desktop? Enter:…

The new Google Fonts is a win for designers

The new Google Fonts is a win for designers

Google launched Google Fonts in 2010 to provide web fonts free of charge. Over the next six years it grew considerably, becoming very popular with web designers—for the obvious reason of affordability. The original website was definitely what the startup world would call an MVP: minimal viable product. It got the job done, but it…

Current Design Contests

Designers, check out these contests so you can start building your career.
0%