When we think of best practices for user experience in web design, we think of clear messaging, great aesthetics, and easy site navigation. And when it comes to creating intuitive navigation on a website, we aim for a user experience that lends itself towards familiarity and clarity. As a result, however, we end up seeing the same typical navigation bars that reside in a list on either the top or side of our page.

Navigation isn’t an Obstacle, it’s an Advantage

Usually, it’s a list of words that we’re trying to fit into our near-completion design layouts. Or maybe it’s an awkward arrow that we don’t want covering up our content. More times than not, navigation bars are “necessary evils” that we reluctantly use to help ease the usability of our sites.

Yet, we should be proactive about site navigation and utilize this design ingredient to our advantage. When used right, navigations can enhance a site’s usability, aesthetic, and efficiency. So take a look below and see how you can utilize your next navigation section to your benefit.

1

www.graydenpoper.com

The general site navigation is out of the way and allows the user to immediately enjoy the visual layout and content of the site. The navigation tab extends the branding of the site. Upon opening the navigation menu, a user is presented with a very intuitive and highly visual way of browsing the portfolio of the site.

2

www.tdhcreative.com

This navigation is positioned in a familiar area to users; however, it is designed to carry out the site’s general design aesthetic. The style of the navigation also draws the user towards exploring different areas of the site.

3

http://madebygrave.com

This site introduces keyboard navigation functionality, thereby allowing a user to fully experience the site for how it was designed and presented. The minimalistic design of the navigation is unobtrusive and simple to understand. The flyout subnavigation of the individual portfolio pieces allows for quick scanning and jumping throughout the site.

4

http://neverbland.com

The simple bottom navigation that is different from the traditional top navigation allows for a visually pure and simple viewing experience. In addition to its position, the navigation tab also fades in opacity to reduce visual clutter when viewing different sections of the site.

5

http://www.archikon.nl/

The unique and spread out design of this layout rings true to the style and brand of their site. Their layout makes the navigation the star of the show and tempts the user to interact with the navigation links to see what the site will present the user with.

6

http://www.mccormackmorrison.com

This site also utilizes keyboard navigation functionality with minimalistic vertical and horizontal navigation. Its restricted navigation allows the user to be fully exposed to the site’s story and messaging.

7

www.pixelbaecker.de

Iconic and creatively positioned navigation elements make this site unique and stand out in a user’s mind.

8

http://www.hellostudios.com.au

While this navigation leans more towards the traditional ways of side navigation; its usage of visual icons give aesthetic value and an efficient tie-in to the site’s brand identity.

9

http://hatbox.co/

http://www.dtelepathy.com/wp-content/uploads/2012/01/09Hatbox.jpg

While the main navigation is short and simple, this site does a good job of enticing a user to play with the portfolio sub navigation below the main header. The high contrast iconographic tab navigation makes it painless to browse the author’s portfolio.

http://www.castirondesign.com
Cast Iron Design Company

Why it’s different:

Navigation can be unobtrusive and advantageous if designed with intent. It not only aids in usability, it improves aesthetics and general user experience. So the next time you’re designing navigation for your site, think about how you can position your navigation to lead your users towards an unforgettable and satisfying experience.

Comments
  • Amy

    These are great designs, and I loved playing with them, but I have to wonder how they affect usability. In a few years this won’t be an issue, because the youngest and most tech-savvy generation will be the ones surfing the web; but what about right now, when a lot of people can’t even navigate “traditional” navigation without some serious training?

    I’d love for the entire Internet to be this cool and fluid, but I think many websites are going to have to remain more traditional or risk losing their visitors.

    • Jessica Moon

      Hi Amy,

      You bring up a great point in that navigations should always fall under the consideration of todays users (especially the majority of users who aren’t as tech savvy as we’d desire for them to be). If anything, though, we have the responsibility as designers to be leaders in guiding intuitive and positive user experiences — especially in this period of time where technology is pushing the limits of traditional user experience.

      While we shouldn’t be kicking users off into extreme, creative yet unintuitive navigations, we need to start thinking about what is necessary and beneficial for a user’s navigation experience as a whole. If a site layout’s purpose is to bring you down the page via an engaging story, wouldn’t it be more intuitive to find your navigation on the bottom of a screen as opposed to the traditional top or left? It’s absolutely important to keep the experience of the web comforting and familiar to the user, but if the situation calls for it, we should aim to nudge our users towards better and more intuitive experiences. 🙂

  • Hi. I’d suggest that while these designs are wonderful, I’d guess that over 50% of people will not be able or WILLING to use the sites as they are. If your site is for a business, stick with what people KNOW AND EXPECT. You shouldn’t do anything to throw them off or make them try to figure your site out.

  • Nice I really like the Nevigation on Your blog ,..,.sipmply awesome!!!!!!!!