3 reasons we should stop using navigation bars

If you’re anything like me, you spend a lot of time studying other designers’ work. I like to look at projects for the experience and the interactions created for the users.

Obviously, as more techniques come about, the changes in web design take place and newer, better things arrive. We’ve experienced the life of the splash page, the introduction header, parallax scrolling and so many other things that have affected the web experience. However, those things were mainly aesthetic and didn’t really change the way we create websites.

Lately, I’ve been thumbing through some websites and have seen a new change. One I think I like, but am not sure. A change that I could see really reinventing the way we even think about designing websites. It would cause us to be smarter and think more intuitively about our audience. And that couldn’t be a bad thing. This technique is something that’s not unique to the world of responsive and mobile design. However, for some tablets and desktops, it’s a new variety of navigation.

We aren’t getting rid of menus all together, we are just hiding them until they are called for. Could this be something that takes off?

 

How important are navigation bars?

The navigation bar was born right along with the Internet. Designers believe that placing all the menu content in clear view on a page just makes sense. And it’s hard to argue. If you come to a website for the first time, you want to know what’s available and where to go. It seems to have cemented itself as an important part of web design. Wireframing toolkits and programs include navigation bars, just like they include dummy text and buttons.

Navigation bars are presented in many different ways. Lately, sticky navbars have become very popular. Unlike the proposed effort, this nav bar is always present on the page. However, sticky bars are usually used in sites with heavy parallax scrolling (another huge trend). This can end up being a bit distracting, especially when it takes up a horizontal area at the top of a page.

It’s hard to argue the effectiveness of navigation bars. As a matter of fact, I won’t. They are effective and are the norm in web design right now. But, is there a better way to present our menus that could possibly change the entire way we think about web design? I believe so, and this way to change web design is to get rid of the navigation bar all together. But why?

 

3 reasons to stop using navigation bars

1. Fewer distractions

This is something I’ve touched on previously, but with the absence of navigation bars, there’s obviously fewer distractions. Navigation bars have become a place to store all the content you can’t fit on your website. On top of that, we put every single page we’ve imagined and come up with on the navigation bar. Some are junky and cluttered. Some have telephone numbers and search boxes. Some are just big and only have three small links on them. Some have drop-down menus that span the entire height of a website. What’s the point?

In the past few years we’ve come to notice that web design was becoming a little too cluttered, thus the resurgence of the ever-popular minimalist design. But instead of really fixing the problem of clutter, we’ve just stripped our web designs of the exciting stuff. In addition, the focus on the menu and the sitemap have really cost us the most important parts of the website. Immediately when we start designing, we are taught to think of the sitemap and how everything is going to connect. Imagine if we spent that time thinking about what the audience wants and how they’re going to use it. 

2. Customer Focus

At one point, I posed the question of whether or not flat design has made our web sites too simple. I’ve also asked other community members if they think minimalism is killing our creativity. I’ll spare you the lengthy read and summarize by saying this: we’ve traded in spectacular design for subtle web experiences. What do I mean? We’d rather have a simple blog with a white background, as long as the posts auto-scroll. We’d rather use a monotone or two-tone color scheme and make the highlight color something totally expected. Because we think that’s cool.

Now, I must admit that we must be weary of over-designing. It’s something I don’t recommend at all. But it seems like we just stopped designing all together. And the things we find to be good design are really only things other designers can notice and enjoy. It took me about 5 years to learn the lesson that what a designer may think will look good isn’t always what the customer thinks looks good.

In order to be successful with this, we have to focus on the customer/audience like never before. We have to try to figure out exactly what they want to see and how they want to see it. Navigation bars have kind of been like a guided process before, but since they’re the norm we’re just slapping it on a site as one-size-fits-all. The focus on the customer creates a greater connection with them and lends itself to experience driven designs like never seen before.

3. Experience driven designs

Let’s build a bridge. This bridge connects what we want them to see along with how we want them to see it. The length of the bridge varies depending on how far away the two are from each other, but there must be a bridge nonetheless. We obviously want to have the smoothest bridge possible so the transfer of information can be as smooth as possible. By ridding ourselves of the navigation bar, we’ve created a platform to have a fully immersive brand design that should cater directly to the customer.

This allows us to now create experiences. Yes, we’ll probably have to get away from the world of strict minimalism. However, this gets web design back to what it should be; a space on the web dedicated to the relationship between a brand and its customer. These experiences should make visitors more away of the brand while also creating an interesting way to do so. Rather than just clicking a link and being taken to a whole new page, now there’s an opportunity to really create something. There’s an opportunity to take all the cool new advances in HTML and CSS3 (aside from just scrolling) and create something magical and mindblowing.

 

Conclusion

Without that pesky bar at the top of our pages, it really frees up a whole new world of thought. I’m sure you’re thinking, well if you move and it’s hidden, then there’s really no difference. But we are essentially taking away the very thing that moves viewers from page to page. How does one design a website like that? How does one manoeuver around a website like that? It seems impossible and as if removing a bar couldn’t have such a large impact, but I beg to differ. You can check any scrolling site that makes no large use of navigation.

Is this the next thing in the world of web design? Can you imagine going to a website that has no visible menu, but knowing where you want to go? It seems like a mighty interesting challenge; one many will take. Of course, the first problem would be for sites that are heavy on pages: Does your flyout menu contain tons of links or do you just learn to condense all the content? No navigation bars could really change the way of web design, but only the future can tell if this will be a new trend.

Have you built a site without a traditional navigation bar? Do you think navigation bars are essential in website design? Let us know in the comments.

Featured image/thumbnail, navigation image via Shutterstock.

  • samson

    any example for a website without a menu bar? with > 10 pages? i had the same thoughts some time ago but i ended up with a menu bar again.

  • Adam

    Doing so (removing the navigation bar), will start making users think, no matter how well designed the website is. And when you make them think, you lose them. Being able to easily navigate around a website is one of the most important aspects of a website. If your navigation is hard to see, find or doesn’t exist at all, then it’s going to create hate for the user immediately. No one wants that!

  • http://www.sarahevansdesign.co.uk/ Sarah Evans

    Interesting topic for discussion. I try to keep just a top level navigation. I hate it when clients request multiple drops down from the nav, sometimes up to the 4th level. As long as they a clear journey between pages I don’t see a reason to go overboard.

  • http://ramonlapenta.com/ Ramon Lapenta

    I believe that if it fits, there’s no reason to hide it (like http://theindustry.cc/), however, I understand the need of a variation in trends.

    In other topic, the fact that point #2 has a different font-size, bugs the hell out of me.

  • Bentley V

    The only way to test this hypothesis would be to do some testing on the home page and see if we can get some insights following user flow. Perhaps you could do a follow up post with that data. I think it’d be super interesting to see.

  • tmikaeld

    I’ve seen many designers that try this, most have a lot of art and are made by multi-million dollar companies – or – are small designers that get started with flash.

    The problem is that without the menu, the customer quickly believe that there is no more content on the page and leaves once they have scanned through it.

  • http://timseverien.nl/ Tim Severien

    I believe neither are right or wrong. Though you have valid reasons not to create a navigation bar, it does provide a lot of clarity and transparency which I value a lot. I think users should be aware of the site’s content when entering the site, especially with informative and corporate sites.

    Instead of hiding or showing the navbar completely, perhaps we could do something that compliments both benefits. Show the bar for new users and on the homepage, hide the bar for returning users.

    • Frederik Krautwald

      Except, that would provide a horrible user experience. A returning user expects to find the Web site with the same structure and navigation as when they left. The only exception, I can think of, is if they hid the bar themselves.

  • http://www.martinspierings.nl Martin Spierings

    While i find the article pretty interesting, it really should have examples on how you think that it should be looking. Because i still think that navigation is still needed. Perhaps not in a single bar but somewhere the users will go to get to other pages. Cause otherwise you will lose more than you gain.

  • pierre.pucheu

    Nice article.

    When you say: …We have to try to figure out exactly what they want to see and how they want to see it.

    Quoting Steve Jobs not literally, users dont know what they want till we show it to them.

    Yes, what they want its vital for a bussiness, but I will rather say: We have to try to figure out whats the best experience fot them based on their needs/their ‘wanting’ and what the analitycs say about what works and what does not.

    Thanks for bringing the subject to the debate. Thats a great thing to discuss, really.

    I also think that it may be a better way to move the user to where he should go.

    I really think that the user its tired of that box in the middle of the website called navigation menu. He enters a website to look for something, info, content, etcc, not to see a boz with text telling him hes so dumb he cant realize where to go.

    I dont have the annswer of what this should be but Im looking for it.

  • pedromau

    Agree.

  • lexo

    1. “Fewer” distractions, not “less”. Please check grammar!

    • http://www.webdesignerdepot.com/ Walter Apai

      Thanks for pointing that out. We’ve corrected this.

  • mnesikles

    “Fewer” distractions, not “less” distractions!

    • http://www.webdesignerdepot.com/ Walter Apai

      Thanks. We’ve made this change.

  • Andy Astrand

    To answer the author’s questions. Yes, I can imagine going to a website with no visible menu and Yes, I can imagine still knowing where I want to go. I can less imagine being able to easily find it.

    I don’t feel a nav bar is a sacred cow but I think in most scenarios it’s very hard to come up with a better alternative. Especially for commerce sites or web applications.

    Most websites I’ve ever seen or had to use with no true navigation bar seem to feel they should be wholly in charge of my experience and the order in which I view the information or consume the functionality they provide. Single page scrolling websites often being the worst examples.

    A web page ISN’T a movie or a book. I don’t think, except in very specialist cases, it should try and be either.

  • Tim

    I am all for removing navigation from a phone version of a website. I hate that little hamburger icon that everyone seems to think works well for navigation, yet every older person that I’ve tested has no idea what it does. They simply look around to try and find the actual navigation.
    And that’s just it, you need to think about age groups when you are building a website. Older people need clear navigation, and right now there are more old people in the world than young people and a lot of those older people shop on tablets from the Goole Analytics data I’ve seen from some websites I work on. Until we have a generation shift and the younger people who know about certain UX elements grow older, we can’t go simply removing navigation unless you want a sharp increase in your bounce rate.

    • designcouch

      That’s because the hamburger icon as you call it is a new convention. You can’t continue to design for folks who don’t quite understand or no progress will ever happen – this applies to the exclusion of nav bars too!

      • Tim

        And you will lose sales if you’re an ecommerce site. Look at Amazon. What are they doing with their navigation? Depends what your site is trying to do, however, if you’re selling stuff online you NEED navigation (which includes a search field) otherwise you will fail.

      • Andrew

        The article isn’t talking about getting rid of navigation, only navigation bars.

  • David™

    CONTROVERSIAL

    • susanrubinsky

      Is your name really trademarked? Too funny. Love it!

      • David™

        Nah. Not really.

  • EzequielBruni

    The article’s title is intriguing, but you haven’t put forth any actual usability-based arguments for not using the navigation bar (that I could see). I mean yes, some of them are very badly designed and cluttered. That’s bad. But most of them, especially the best ones, don’t have anywhere near all of the site’s pages on them.

    Also, based on the way the article is worded, it sounds like you’re saying that more color and stylistic flourish equals better design. What would you say to the argument that design is how it works, and the rest is just aesthetics?

    What are your proposed alternatives? I’m genuinely curious.

  • Zimbabwe

    A lot of talk about nav-less design but it would be nice to see actual examples referred to here (let alone ones that would be considered good). Without good (or any) examples, isn’t this article just a hypothesis? If anyone has any good examples of nav-less designs please post them here so the point of this article can be brought into visual reality – because what seems clear is that the “3 reasons we should stop using navigation bars” listed here aren’t really that – they’re 3 examples of a failed nav design.

  • susanrubinsky

    Total bullshit. Good, relevant home page design — while extremely important — does not take the place of a well planned taxonomic system. Think about walking into a new mall and you really have to pee but the building planners decided not to put of any signage or create maps of the building so you could look up where to go. It would totally suck for that user. They may have thousands of dollars to spend but they gotta pee first.

    • Greg Designer

      very clever example to make your point.

  • Timo Sainio

    How about “nutbar”,”nutcell” or something like that. Browser it self could include a informative element that tells user what´s inside the page/s. That coud be something new. Creetings from Finland.

  • Space Gorilla

    I think a well-designed navbar for the main sections of a site is still required. Beyond that the content can be the navigation. I suppose a hybrid approach would be using the home page as a kind of table of contents, and your only navigation is a Home button, much like the iPad, so the user goes to a page, then goes back Home to see more content.

    My preference is a main section navigation though, which makes it very easy for users to get around your website (and helps tell them where they are). The key is to organize the content before you start designing, and to keep the site concise, so that your navigation isn’t unwieldy.

  • Dennis Hambeukers

    Great idea. I had the same idea when redesigning my blog: http://www.artscientist.nl (no navbar). It’s not a one-size-fits-all solution, but I really like the idea of leaving the navigation bar out and start to think in a different way about the information architecture. A blog is maybe the simplest place to start, but I think developing a new way of looking at websites this way can help to design other user experiences as well.

  • Sarah P

    Here’s a great example of an engaging website without a traditional top navigation.
    https://glass.eleks.com/#about

    *Disclaimer: This is a one-off microsite and doesn’t have many pages.

  • tb

    … well, you left the ‘hamburger’ icon there, that’s the first thing I clicked. Other than that my first (and still lasting) impression is you do something with music production. Nothing else. So it’s at least a bit confusing. An experience of trying to discover what’s going on it great when that’s an end in itself, but now when something needs to be communicated quickly. The problem is this approach does communicate quickly – but perhaps not what is intended.

  • Tim

    You are using navigation.

  • Tim

    The only answer I can think of for this would be a 3d site that you “move” through in space rather than clicking links. I’ve seen it done in the past using Flash in the early 2000s. It was hard to find what I was looking for.

  • Luke Askew

    The “springboard” pattern is an example of presenting the user with a mode of navigation without using a “navigation bar”.

    I love the idea of forcing such a design constraint. We will never come up with better ideas if we constantly repeat ourselves.

  • old school 1

    “I’ll spare you the lengthy read and summarize by saying this: we’ve traded in spectacular design for subtle web experiences.” — I actually believe it is quite the opposite, the focus on UI and minimalism forces the designer to…well…actually focus on the design — you are required to actually KNOW the basics of graphic design, color, grids, font usage, information leverage, clever choice of graphics; the cluttered design of the late 90s and early 00s was just the opposite, basically throwing as much as we could in a 960 by 560 space at the user.

  • Troy J. Brainard

    with enough scrolling effects and internally linked pages a scrolling site could be done but I firmly believe that we will always have a nav menu at the bottom of web sites.

  • Scottix

    I agree that opening space and creating a truly immersive website has great advantages which is similar to game development. We also don’t want them to feel they are lost. People don’t have a lot of time to just explore things and their attention spans are short on the internet. I think a serious reduction in navigation bars would be beneficial. A good example is the Tesla site which lets you explore but also gives you a way to navigate. http://www.teslamotors.com/models/features

  • http://www.pepperstreet.com/ Maik Kaune

    I agree with most of your thoughts! Unfortunately, there is a strange creature lurking out there… I think it is called “client”. ;-)

  • http://www.testshoot.com/ TestShoot

    Hooray for Tympanus codrops. Seriously though, you push the content so far out of view with so much negative space, that is not fun as a user.

  • Bianca Board

    I think navigation bars are still important. Not necessarily for every site, but boy, I’ve seen some BAD sites that really needed them. However, good arguments against them and certainly food for thought.

  • http://www.weiry.com/ David Weir

    A really interesting article and as a designer this is something that I am always considering with the changing face of how people browse websites today.

    I believe that with the way apple has now redesigned their mobile safari in ios7 which automatically puts the page in full screen once you begin scrolling down a page, hiding the address bar, is what will put this movement in place. As users, we have come to realise that the content is all we want to see and once we decide we’ve seen enough we then go looking for the navigation to take us elsewhere. With apples iPhone, this occurs when you scroll back upwards (to where the nav generally would be).

    Teehan+Lax (http://www.teehanlax.com) are always developing beautiful ways to browse content on the web and I’m a huge fan of how they hide their navigation bar as you scroll, only to reveal it again once you scroll up. This is what I expect to see more of in the future.

  • Lurk Sidewalker

    Requiring the user to interact with a brand and experience it’s culture is awesome. The nav bar SHOULD be dead for simple brand experiences that rely heavily on a tap/click flow/ story telling model. I’m thinking these types of experience would rely on a multitude of methods like tap/audio/swipe. THAT would be sweet. How do you propose a megasite like amazon or target might do this without baffling users?

  • Gokhan

    I would like to use this article for my Webdesign class homework, and I can not think of any good websites without a navigation bar, customers go to websites because they want to get more information, for more information they needs navigation, and that is what navigation bar do. If someone would give me a good website without a navigation bar, user friendly and fast, then I may change my mind.

  • DonVF

    This is a prime example of designer, versus marketer’s observation. I hate nav bars, but you make someone even remotely start to think about how to move around the site, in any way other then what they are used to…. you lose money, period.

  • Eric

    I like the topic of this article, but yes, examples are needed! The new “Search” feature on the MySpace redesign could be a solution. Yes it does have a nav menu, but it also starts a search as soon as you start typing from any page. I think with some kind of clear instruction (possibly on the home and/or landing page) this could be an option to explore further. It takes a normal behavior (like what we do everyday with Google searches) and brings the products to you.

  • Energy Mud

    Navigation bars have become ubiquitous and users feel comfortable using them, but I’d still love to see a new concept of navigating hierarchical data like a site’s pages, but the concept could be applied elsewhere.

  • http://inkovic.com/ Peter Macinkovic

    What would a website like ESPN, which has a stellar search function sorting out various content, do without it’s mega-menu functionality sorting out content by topics (the sport itself) and sub-menu item of the content type (ie: fantasy, scores, blog).

    Search is a common navigational element in the web. But raw url input is more common.

    That’s why a company like ESPN, with their brilliant team, recognised that any url input going espn.com/something will perform a search with the terms in the url parameters instead of a 404 broken page.

    That’s why a company like ESPN knows that common search terms are better being 301 redirected to the target page.

    This is so that repeat users simply type espn.com/podcast in their URL, rather that finding it in the navigation or even typing it in the search bar.

    Returning users always remember raw url locations which is why common and semantic urls like /blog and /latest get so much direct traffic. The native navigational tools within a browser should be leveraged with your website.

    Which is why navigation bars and good IA are so important in design: they are the starting point for a user to begin their narrative on the website journey.

    It’s not a linear narrative like a movie or a book (with exception to user on-boarding and multistep experience which are linear, by nature).

    Taxonomy and information architecture are vitally important, rather than ditching the nav bar I believe it is far more effective to make it more contextual – changing the navigation content dependant on where the user is on the site or even where they may be in their experience.

  • http://www.isadoradesign.com/ Isadora Design

    I’ll reiterate what others have said: once you make a user search for something basic (like a link back to the homepage), they lose interest and move on. I don’t agree with the points made in this article that the top nav is distracting – if done correctly, with the user in mind, it should only serve to enhance the visitor’s experience. Chucking the nav bar would be disastrous for many webpages.

    I am, however, interested in seeing some examples of this working. If it works, maybe it’s worth a second thought.

    Thanks for creating such an interesting thought experiment!
    Cassandra
    Isadora Design – Handcrafted Web Design Company

  • Design Absorber

    Maybe it’s a better to stop speculating. You know why? Because you’re responsible for what you write here.

    Instead of speculating, you can design a website you dream of and share the ‘real’ test results with your readers. Without any test results, these are just assumptions.

    As a matter of fact, it depends on the concept. If you’re designing a high-traffic website for seniors, maybe it’s not the best UX pattern to choose. This is just an example.

    I think you should have mentioned the notion of ‘content navigation’ in this article.

    “Assume nothing, question everything”

  • Afzal
  • Kit

    Most of the commentators have missed the whole point of the article. She doesn’t want to remove navigation, but rather reinvent it on a case by case basis. Clearly you have to engage your viewers with some sort of navigatory device, but it doesn’t always have to involve a bar across the top of the page.

    On a recent project I used a navigation that was sans bar at the top and it is completely responsive to phones as well. ( http://www.musicalites.com ) I think each distinct project could have more thought put into the navigation of things for sure.

  • kiplinger

    provocative but there ultimately has to be a means for a user to complete tasks which usually involves navigating to multiple pages. Take the word ‘bar’ out but in a mult-page experience there has to be some type of navigation. A consistent navigation element also provides a sense of way-finding and place of where the user is in the site relative to where they started and where they want to go. it’s also in most cases unnecessary to hide it. there’s been many a time this idea has come up in design sessions but there hasn’t been one time when we ended up without one.

  • http://bluemuffinstudio.com.au Blue Muffin Studio

    I would like to add one more point here..

    Renewed customer focus:-

    In today’s world of the Web, we’ve traded in spectacular design for subtle web experiences. We’d rather have a simple blog with a white background, as long as the posts auto-scroll. We’d rather use a monotone or two-tone color scheme and make the highlight color something totally expected. In other words, what a designer thinks will look good isn’t always what the customer thinks looks good.

    In order to be successful, we have to focus on the customer like never before. We have
    to try to figure out exactly what they want to see and how they want to see it, and just because navigation bars might be the most familiar way, they might not be the most preferred way.

  • Harish

    if i removed the navigation bar. how to go next page? please explain?

  • csslover

    I’m agree on all of your points. I’ve experimented a lot with navigation menus, I made my menus as bars, as normal lists, and tried keeping them as minimal as possible. Its true that it helps to get the readers straight on to the topic without distractions.

    On the other hand, there are strong chances of the readers missing some important links in the absence of a highlighted navigation menu bar. So, it would be better to implement those important sections (or links) in the design further without breaking that “bridge”.

  • roger belveal

    A feature film has no nav bar, except for in a DVD or similar format. Neither does the passenger seat in your car. What makes apps different than both of these experiences is that users need and expect to drive.

    Steering wheels and nav bars both remain pretty popular among users for similar reasons. Any exploration of alternatives to nav bars must be done with those reason in mind. In some cases, direct interaction with the content itself may be leveraged for navigation. This may or may not make sense depending upon the content. Simply taking away something that works without a thoughtful replacement is reckless and naive.

    They say that cleanliness is next to godliness, but if make interaction obscure, it still sucks.

  • PK

    I think the point of maintaining a menu bar is to make websites accessible—that is information is often stored in a hierarchical fashion, given that, a menu and item structure is necessary to meaningfully organize information for various audiences, including the blind or visually impaired as well as syndicators/feeds/robots.

  • Frederik Krautwald

    Looks like a common, slightly modified WordPress theme. Quite heavy on a mobile.