Is It Time to Rethink Website Navigation?

Jun 27 2011 by Jason Gross | 35 Comments

The hyperlink has been a staple of the Internet since it began. The Web simply wouldn’t be a web at all if we didn’t link from one web page to another. Links make the Web work.

So it would make sense to put a lot of time and effort into how we design our links and navigation systems.

But, this isn’t always the case. Oftentimes, we shortchange the information architecture phase of a site build and fall back to one of the few tried-and-true design patterns — a canned template — for designing site navigation.

The Status Quo of Site Navigation

One of the many beautiful things about Web Design is the near-limitless options available to us. Yet, still, our navigation systems seem stuck into the existing preformed solutions.

For small, personal sites, a simple top horizontal navigation bar is the typical option.

For larger sites with more pages to link to, we default to a stacked vertical navigation bar to give us the ability to include more links.

In other situations, we find that drop-down menus or fly-out menus are used to keep the navigation menu compact.

Drop-down menu on Google home page.

It’s easy to see why we have these options. To some degree, we have been forced to conform to them because of the early limits in web design.

As time went on, our users got used to the status quo. As a result, we’ve been hesitant to rethink the way navigation systems are designed.

And even if we didn’t put our users first, why spend time creating something new when the hackneyed solutions work? (At least we think they do, anyways.)

But are these conventional forms of navigation still the best solutions?

Natural Evolution

Since its inception, Web Design continues to evolve at a rapid pace. Our designs are getting easier to use, they’re more pleasing to experience, they have become richer in features, and are better optimized for speed.

Through the changes, our conventions for navigation have stayed the same, perhaps with the exception of the short surge we saw of entirely Flash-based websites that introduced some pretty unique navigation system designs.

This Flash site forgoes the common navigation design patterns we see in most websites.

While there are plenty of reasons to avoid going back to the days of entirely Flash website builds — whether your reasons are related to performance, SEO, web accessibility, independence from a proprietary technology, etc. — for most of our projects, we may still be able to gain some inspiration from what Flash sites showed us, especially in the rethinking of how website navigation can look and function.

As web browsers become broader in features and as web design specifications continue to advance — most recently with CSS3 and HTML5 — our design opportunities broaden.

Website navigation should be at the forefront of our minds as we take advantage of these new technologies for the betterment of the user experience.

We have already seen CSS3 in action to some degree, most notably on responsive web designs that transform the navigation menu’s layout on-the-fly depending on the size of the user’s display (with the help of media queries).

On the Forgotten Presidents site, navigation layout changes from horizontal to vertical depending on display size.

Change with Purpose

Of course, changing something just for the sake of change is a poor excuse. We shouldn’t be changing the design and layout of navigation systems just because we have the tools to do so.

Instead, we should approach the situation by looking at existing issues with navigation design, and how we may address them with the new techniques available to us.

Some of the bigger questions touch on things such as where the navigation should be located, how expansive it should be, what shapes it consists of and what kind of feedback it will provide users. All of these lead to huge decisions that play a pivotal role in how usable, flexible and practical your design is.

Newegg provides the ability to navigate its immense inventory of products with multiple navigation solutions.

The New Face of Navigation

CSS can do some downright exciting things these days and it’s in the nature of many designers to experiment and push the boundaries of innovation.

For example, blogger and web developer Chris Coyier shows that we can draw adaptive shapes that can transcend the scalability limitations of images.

Graphic designer/web developer Alex Girón shows us that we can create pretty impressive animation effects and transformations with his experiment involving the solar system’s orbit.

This sampling of possibilities demonstrates some pretty impressive capabilities. It doesn’t take long to see that these experiments can be adapted practically to solve design problems.

With shapes, and the ability to animate them, we have the building blocks to create flexible and imaginative interfaces.

Offline Inspiration?

We don’t have to go far to see new twists on navigation. Our computers, stereos, appliances, vehicles, and even our keyboards all use a wide array of shapes, sizes and colors to build interaction.

The spacebar on your keyboard is not larger than the other keys because it contains more characters. It’s used the most, so it’s the largest — an application of Fitt’s Law.

Source: Wikipedia

Compare the size of your spacebar to your Y key, for example. In your web design, could the Home link (or any other frequently used navigation link) also benefit from the same boost in size over a less important link?

The interfaces on our sound system receivers, remote control, and car dashboards all house a wide variety of size, shape and color to denote differences in importance and function.

We hold the ability to craft these solutions in our web interfaces without sacrificing flexibility or accessibility, the traditional reasons we’ve stayed away from them, using progressive enhancement and other best practices.

To illustrate my point, I put together a quick example of an early-generation-iPod-inspired navigation using just HTML and CSS.

iPod illustration by Matthieu Riegler, Wikimedia Commons

In reality, a circle can often provide a much more convenient use of space when compared to rectangular shapes.

Also with all of the active areas of our navigation naturally placed at equal distance from each other, this type of navigation is consistent with Fitts’ Law.

Of course, this may or may not be the best solution for any single situation, but that is the beauty of our profession. Designers should be taking the time and consideration to explore all of the constraints each project comes with and working out individualized and ideal solutions.

Take Advantage of New Opportunities

Now, more than ever, we have the opportunity to use our creativity to solve complex issues with our navigation systems. The rapid adoption of CSS3 unlocks a huge amount of design potential. We can start to think outside of the limited array of design patterns we have for site navigation.

Related Content

About the Author

Jason Gross is a freelance web designer focused on creating clean and user friendly websites. Jason currently lives in Indiana and can be found on Twitter as @JasonAGross or on the web at his personal blog and portfolio.

35 Comments

Simon Willans

June 27th, 2011

In most cases, 1/2/3 tier navigation should be simple lists of links, with drop downs for 2/3 tier navs. In my opinion, there’s nothing simpler. The simplest navigation can be demonstrated on paper. Technology doesn’t matter.

If you change navigation, the user then has to learn this new system.

Rob

June 27th, 2011

First off, this article is well written and I believe it provides a very clear call to action for us as developers not to become complacent using the same old tired tricks of the trade. Strive to IMPROVE (not just create and be different). However, while I agree with the general sentiment, I think there should be some cautionary advice.

While CSS3 is great and there is definitely ways to improve upon the standard navigational components, I feel too much improvisation could prove faulty. We are in the business of making usable products to solve business goals. If creativity and the need to break new grounds supersedes the goal of making projects usable and useful, then we are surely losing the battle.

I’ve seen some very interesting conceptual navigation structures, the problem is, when there is no instruction it may be hard to figure out what is where, when there is instruction you’re already making it too hard on people (who really wants to read a manual on navigating your website?).

I find comparing the “home” or other “important links” to the space bar to have slight fault. One must be careful not to break balance and ALSO not place too much emphasis on the wrong item. For example, I think of the spacebar like a call to action. It is the biggest, it stands out the most, it is most used. Same for call to actions, well at least we hope. When we start competing too much for users attention we drive their eyes all over the place, which is just as bad as not driving them enough. If your site/project has a lack of call to action, then altering certain navigational aspects based on importance may prove very useful. At least, this is my two cents on the subject.

It always comes back to “does this make sense” for me. If we are going to use split navigation structures and have different areas devoted to different types of links, we need to have different types of content which make this usable.

Again, please don’t think I’m disagreeing with the author, I find Jason’s thoughts on the subject to be both provacitive and inspiring and just want to caution some of those out there who might have read it and ran off in an attempt to design some ground breaking new HTML5/CSS3 layout with a navigation system never seen before in the wild. If you design something like this without the proper amount of thought you may end up on CSSsites.com or some other aggregate, but will your client see more leads, sales or results from this system, that’s what’s important.

Of course, if you’re just doing something for the sake of, say as a proof of concept, then rock out and go nuts!!!

Food for thought!

Peter Schreiner

June 27th, 2011

Great Food-for-Thought. Thanks!

PixelTunnelVision

June 27th, 2011

So long as the navigation makes sense, people can figure it out quickly, and it flows naturally, a lot of things are possible. Even in the responsive examples, it’s still the same old thing, it just fits into the view. But it’s not breaking the mold of the “tired” examples.

Navigation for the average joe has to be quick and no-brainer. This is why all those status-quo examples reign supreme, and will for some time. People are used to them. As the old saying goes, don’t fix what isn’t broken. Try to improve if you want, if even possible. But don’t make navigation a puzzle, even on the simplest level. Most people don’t want an iPod wheel as a site’s nav. Really, Fitt’s “Law” be damned. And, even as a developer, I don’t like the Wishes Greenhouse nav, or the “clever” nav layout of most Flash sites.

David

June 27th, 2011

I reckon the navigation of a website shouldn’t be too complicated. It should look straightforward and reflect the site structure and content. Occasionally, there could be exceptions in order to drive more traffic to important pages. Anyway, the bottom line is, IMO, stick with what users are familiar with…

Marc Davison

June 27th, 2011

I am pretty sure I never began a comment with the phrase “great post”. However, I will do so here because there’s nary a thing I believe I can add to this that we as architects aren’t all thinking.

My comment, albeit somewhat useless is, thank you for this post. It confirms what we believe and understand but most importantly, comes in handy as 3rd party verification for clients when see new ideas architected that challenges their understand of Web.

Well done Jason.
Marc

Shane

June 27th, 2011

What a great article! I think with most things like design we almost need to force ourselves out of the box so that we can design more freely. You are right about the tried and true methods though, we use them because we know that people will recognize what a traditional navigation looks like, if we change it will they leave our sites because they don’t know how to use the site? It’s a risk that some of us are going to have to take. Anyways thanks for the article, very informative.

Kelly Baker

June 27th, 2011

Some good thoughts in there. Most interface design needs to evolve slowly to prevent users from feeling overwhelmed and I think you’ve done a good job of capturing that sentiment. I agree with some other comments about the problem of equating the space bar on a keyboard to the home button on a website, but the concept of making links different sizes, shapes, or colours based to what we as designers would like to draw the users attention to is a practice that isn’t used enough. I’ll definitely keep some of these ideas in mind as I work on future sites and software. Thanks!

Mike

June 27th, 2011

What a wonderful article :)

Craig

June 28th, 2011

Just like everything, it will reach a point where something new will be better and more efficient! The time is coming close….

Gary Barber

June 28th, 2011

Very interesting article.

It’s good to see the basis of navigation patterns being discussed from time to time. It helps everyone to revisit the problems of the site navigation and see if we can do in better with the latest common use technology. But as Shane has pointed out we must be very aware of the previous experiences of the users that are going to use any new navigation.

That said the use of gesture base interfaces in very quickly exploring new paradigms of navigational systems. In many ways all those “crazy flash” interfaces are being recycled and tried again. Which isn’t too bad, but then again it’s not that new.

Navigation based around everyday devices is fine, if one remembers that not every device interface has been designed well. Often they are just too overloaded with bad UI and product design elements. So again we have to be aware of the good and bad aspects. Lest we draw a comparison and implement a bad read world interface.

Jason we are in for trying and exciting times in the world of interface design; yes it is time to take the old problems of navigation and rework them into the new…

Young

June 28th, 2011

It’s a great prompt for a web philosophy discussion – fun subject for all of us to think about. My opinion is with a lot of the commenters. It’s a bit of a hubris we all want to believe in, to think that we are the driving force behind web’s evolution, but user experience always reigns supreme. Users are repelled by the unfamiliar, and unfortunately for the average surfer out there, it doesn’t take much deviation to find yourself in the “unfamiliar” category. Flash in the 90s and 00s has given us lots of unconventional navigations, but eventually the public voted against them.

The items, most of the time, need balance. Sure, on a stereo the volume dial is usually the only thing you use, but then you have to read the manual to figure out what all those small buttons do. We design sites nowadays with almost complete transparency at a first glance, almost at a primal level, and I think that’s really important.

Browser compatibility is also an issue at the moment, and perhaps a new norm will come along eventually. The current system makes logical sense to me, and until someone comes along with a revolutionary, counter-intuitive yet more sensible system (like Einstein), or the web itself evolves with the technology and the populace, I think I’ll be secure in the status quo. Of course that shouldn’t stop me from thinking about these things – maybe I’m (or you are) the Einstein – and in stimulating our brains in that direction this article has triumphed. Thanks again Jason.

Mike

June 28th, 2011

The key thing to remember is that if users have to learn how to use your navigation, then you have compromised usability and consequently failed.

The navigation needs to be so bleeding obvious the user doesn’t have to think about it.

Remember kids, usability and UE beats bling any day of the week.

Kudos for having the stones to suggest rethinking something that has become so ubiquitous in web design though.

tony swaby

June 28th, 2011

You know I’ve been thinking about this for some time. Why do we put visitors through it every time they visit. I’ve been playing with very simple and different approaches (see link to concept) Frightened the pants off the client:) Like Shane said, they think they have to look like everyone else or people won’t be able to use their site (and other stuff you know what clients are like hahaha)

Sara

June 28th, 2011

Best examples of Navigations styles. Great

Avangelist

June 28th, 2011

@Rob
That is a salient point, without clear instruction even the simplest navigational device fails.

Does that mean we should experiment with interactive design any more? Exploration into the interactivity is still burgeoning with ideas and formulas. Think of the icons you seen on your browser whilst viewing this site, will you click the left arrow to go back a page, or press the delete key? Or will you use another device within the site itself?

These things were experimental to start and now have become common ground. It’s a great place to start.

Paul Anastasiu

June 28th, 2011

WHY U NO HAVE TAGS ON POSTS ??

and the search bar should be shown at the top :)

dp

June 28th, 2011

I like this article.

I like the mention of Flash and how it taught designers to think outside the box.

Say what you want about Flash, but I learned how to animate with that program and become innovative and experimental in terms of interfaces and navigation. Without it, rigor mortis has begun to settle into web design despite advances in css and html.

Yes, Flash became overused and the interface design began to overwhelm the content, and the loading bars were excruciating, but I still think subtle use of Flash combined with a content-centered approach would bring back some of the ingenuity missing from todays sites.

I happen to think its criminal that Apple has all but removed it from the future of our lives.

So it goes…

-dp

Jordan

June 28th, 2011

I agree with this way of thinking. At one point in time tabbed navigation was considered innovative.

Anyway, I think this is the only way to move the needle regarding navigation conventions. We need to learn from unsuccessful innovations to weed out what doesn’t work, but need to continue to explore.

A learnable interface doesn’t mean you’ve failed – If the UI/ product you’re designing for is WORTH learning.

Sean

June 28th, 2011

The examples from “Offline Inspiration” are to the point because following the most common of them you may “kill two birds with one stone” – your navigation will be fresh and at the same time quite familiar and intuitive. On the whole, the new possibilities in designing navigation should be definitely tested – quite likely that soon some of such novelties would be as conventional as those that are mentioned in “The Status Quo of Site Navigation.”

Stacia

June 28th, 2011

I love the application of Fitt’s law on anything, and for some reason it doesn’t happen often enough in web design (or in automobile dashboard design, for instance).

In terms of navigation, I think Fitt’s law is already found in tag clouds. Love ‘em or hate ‘em, they are a simple way to display the most important areas or subjects of a site.

I like the idea of making what you (somehow) know to be the most-frequented or “most important” area of your site bigger in the navigational area. Or should you use Persuasive design to make the areas you want users to spend more time at larger in the navigation?

lola

June 28th, 2011

It’s great and all to have “new” navigation systems and “new” designs. It seems that bigger and new attract those looking for the latest vicarious thrill of navigation. If we are constantly reworking these already useable designs, when do we get to the next level of understanding our website and why it’s there? Reinventing the wheel a thousand times over does not make the wheel any better. In other words, we need to go to the next level of cognition here.
I did enjoy this article – yes, well written – thanks!

Ben

June 28th, 2011

True True- always a thing to think about.

The first page for navigation has been a close focus to get right.

Roxy

June 28th, 2011

Nice article. I’d like to take it a step further with theorizing web design/interaction will adopt more of a smartphone/tablet interface. With the rapid adoption of widescreen monitors, these horizontal layouts mimicing the swipe actions of smartphones will become a hot trend if not a complete revolution in design. Menus will become more simplified while the interface and layout, though simple as well, far more sophisiticated than traditional design. Right now, tech users are torn between scroll down or swipe. With smartphones here to stay, the horizontal swipe gesture could easily transfer to web design. Even the most tech challenged person quicly adapts to a smartphone, yet, can become confused or lost on traditional sites.

I think once this trends starts, it will spread like wildfire. I’m on board!

Jason Gross

June 28th, 2011

@Rob

Great comments and additions to the content of the article. It’s always a great idea to pursue these kinds of ideas with caution and understand that changing a convention is not always a smart move. Manipulating the navigation of a website to something new, whether users see it in “real world” contexts already or not, merits a good deal of testing before throwing it at anyone. It’s always good to see a topic that can go back and forth in this manner, it’s what makes these things worth having a discussion over.

@Stacia

The quick mention you made to tag clouds is very intriguing to me. Technically we have the ability to manipulate an entire website and how we navigate it based on what is popular today or at the moment. How cool would it be if your site structured itself based not just on what content was new but also what page was popular at the time?

@Roxy

Bringing touch screen devices into the conversation changes things a lot. Not only do we get to consider the swiping motion you spoke of along with typical vertical scrolling but we must also take into consideration devices that have multi-touch capacity.

For example if I load up tabular data that relies on a lot of columns on a site and then place this table inside of a div that flexes with my design. Set the overflow of that div to auto and you get scrollbars when the div can no longer contain the table, right? Well not on the iPhone where I can use multi-touch to swipe just that table left and right. Pretty cool. Also pretty inconsistent between an ever growing array of devices right now :( All stuff that we get to find unique design solutions for!

sam

June 28th, 2011

I think that many people are do fall short of the mark when doing navigation design.

I feel that one should always try to make things easy as possible for users, successful websites tend to be clear and concise with excellent navigation and search functions. Often people will just pay more for products for ease of website use like the amazons and ebays of the world which incidentally still sport a fairly simplistic navigation systems.

I think there are many other great things to be done with the web of more interest to me is svg which might make more appearances in the future, with great java script libraries like raphael.js which linked in with xml, xslt and node.js could do some incredibly powerful stuff the options are limitless!

Reinoud

June 29th, 2011

Well written, and it’s good people think about things like this, but I don’t agree.

Webdesign is graphic design.

And just as you want the design of a paper map, paper book or paper-whatever to support the content it holds, you want a website’s navigation and layout to support it’s contents, not interfere with it.

This means that in no way the navigation should ever make the user have to think, even if it were for two seconds. It’s about the content. Just like highways and roads shouldn’t make drivers think. It should take them where they want to go, as quickly and as smoothly as possible.

However, if you want your website to be an ‘experience’, none of what I just said is true.

Sigh

June 29th, 2011

Flash menus were purely about experience; about making something fun. But they were in no way easier or more intuitive. If I visited my banks’ website, or my local council website, the LAST thing I want to do is ‘have fun with a new navigation system’. I want to get where I want to be fast.

Current navigation trends weren’t created out of ignorance or accident, they’re the product of years of testing and iteration. Simply put, they work.

Also that example you show of the horizontal navigation has the logo ‘breaking’ the navigation. This is actually a bit of a faux pas – so my trust in this article is waining at each paragraph.

This article reminds me of the one whereby a chap suggested that URLs should change. Noble in theory, but pointless headline grabbing in practice.

Michael

June 29th, 2011

While I agree that a lot of people need a simple navigation system to help them with “using” the internet, it is long past time to move forward push the boundaries of web design both in navigation and over all. Stop worrying about the computer retarded and focus on a more beautiful web.

Sanket Nadhani

June 29th, 2011

Thought provoking I must say!

But I think bringing in offline objects for inspiration to the navigation world is a bit faulty. Offline objects have to use diff shapes and sizes because everything you can do with that object has to present all at once. So the more important or the more used ones have to be prioritized using shape and size. On a website, if you put together everything at once, you know what’s gonna happen.

That said, we recently came up with a new navigation styles (not radically different) when we run into constraints with our product tour – http://www.fusioncharts.com/tour. We had to put all the headers within the tour side-by-side and they just wouldn’t fit. So we used a two-layered approach to split the elements into two lines and serve our purpose. And yeah, it feels good to put thought to these things we accept as status quo.

Robin

June 29th, 2011

I love the fact that the navigation on websites has become a topic of discussion. Accepting the status-quo is not always necessary.

Justin

June 30th, 2011

It is good to discuss website navigation and what other possibilities there are to change from the norm.

Although website usage needs to be intuitive and this is the reason most websites follow a similar formula when it comes to navigation. Most users are now used to the traditional menu and it’s placement.

Coming up with new systems will mean the user will have to learn how to use that navigation no matter how simple it is. There is a possibility that this could lead to user confusion and dissatisfaction when using a website leading to the user moving on from your website onto a competitors site.

Cool Boy

June 30th, 2011

I think Google has a very easy navigation for their services and we have to learn from google “simplicity earns more success if implemented successfully”.

Austin_Brian

June 30th, 2011

I think it’s also a navigation issue when you break convention with underlining links in the body text of an article and solely rely on color for the user to notice where links are. This article is an example of where the links in the article body may not be noticed by someone with color blindness or a monitor which makes the dark blue look like black. You should foillow standard convention and underline links in the content area by default. You can turn the underlining off in navigation menus and in areas where it is obvious that the text being presented is a series of links.

Eric Itzhak

August 16th, 2011

It’s a good idea to change the classic way of navigation, but still it’s the most comfortable. other ways may cause pepole to leave your website

Leave a Comment

Subscribe to the comments on this article.