I’ve noticed a worrying trend in web navigation lately. More and more websites are hiding their navigation – at desktop resolutions – under a single button, often the 3-bar “hamburger” icon.
They are doing this because it makes the website look “clean” – simple and uncluttered. Who wouldn’t want that? Or perhaps they are following the lead of some powerful role models, such as Google, or Medium. Or they are influenced by design for mobile devices, where small screens often require navigation to be hidden initially, and the hamburger icon has become ubiquitous. But they are usually wrong.
Hyperisland, XOXO festival and Squarespace are just 3 examples of sites that hide their navigation under an icon even at desktop resolutions.
Just a quick recap of the purposes1 of navigation menus on websites:
- It tells you what’s here and what you can do
- It gets you to where you want to go
- It tells you where you are
Hiding the navigation under an icon does a slightly worse job at no.2 (one extra click), but a terrible job at nos.1 and 3. And a clean-looking design does not compensate for this loss, for most websites at least.
So when is it OK to hide the navigation under an icon?
Well, I’ve already mentioned devices with small screens, where there simply is no room to spare for a menu. Responsive web design (RWD) is often used to transform the navigation menu into an icon at small screen sizes, like the popular Bootstrap framework. This is an ergonomic, not aesthetic decision.
The other case where hiding the navigation is understandable is on sites where random browsing is the dominant navigation pattern. This can describe journalism sites such as Medium, Upworthy, blogs in general, or social networks like Google+, Pinterest, Instagram, etc. These are sites where you typically don’t start at the homepage, and you typically navigate via related content. They may have navigation behind the scenes (such as content categories or account tools) but these are not needed in the vast majority of user journeys.
For most other websites and web applications, where users need to be guided to the information or tool they need with as little fuss as possible, visible navigation menus or toolbars are necessary2.
Yes, it’s easier for a designer to make a site without navigation menus look attractive, at first glance. But as any UX expert knows, visual simplicity does not necessarily equal ease of use. The best website designs are those that look beautiful while also providing the information and tools most users need. You do not solve a design problem by sweeping it under the carpet.
Hold the mystery meat, too
Which brings me to another form of the same problem – sweeping “surplus” navigation underneath a cryptic icon like the hamburger or “…” Software developers have known for decades that menu labels like “Other”, “Misc” or “More” are design failures – yet somehow giving them a trendy icon has given this form of mystery meat navigation new respectability. Google is a prime offender. Submenus are OK when the label clearly suggests what’s inside, such as the now-ubiquitous Account menu (or just avatar) at the top right. If not, it may as well be labeled “Stuff”.
Google has become a chief offender in making invisible navigation seem respectable again. Even on wide screens with plenty of real estate, Gmail hides commonly-used functions under cryptic menus. (1) I curse every time I have to click here to go to Contacts. (2) Without looking, I challenge you to guess what’s in the “More” menu. (3) What would you find in here? (4) Or here?
Flickr’s May 2013 redesign (bottom) swept most of the user-related navigation under the obscure ellipsis icon, which may seem neater to anyone who doesn’t actually use the site, but is a major, on-going frustration to regular users.
[Update 10 Feb: Killing Off the Global Navigation: One Trend to Avoid by the Nielsen Norman Group makes much the same argument, but provides more background, examples and suggestions. Their article correctly targets any single menu item hiding the global navigation inside a drop-down menu, rather than hiding it under an icon as I focused on. They point to online retailers starting the trend, possibly copying Amazon. They suggest using click tracking, observation and analytics to decide whether it makes sense to hide your global navigation, and what impact it’s having.]
(1) Those who’ve read Steve Krug’s 2001 classic Don’t Make Me Think may recall his slightly different list of the purposes of navigation:
- It gives us something to hold on to.
- It tells us what’s here.
- It tells us how to use the site.
- It gives us confidence in the people who build it.
(2) Search can help, but most usability studies show that Search is typically only used after navigation has already failed and should not be considered a replacement for navigation. Search on the vast majority of websites falls far, far short of Google’s magic.
About us: Isotoma is a bespoke software development company based in York and London specialising in web apps, mobile apps and product design. If you’d like to know more you can review our work or get in touch.
Good article Francois.
It’s not just websites that have this problem, but dedicated phone and tablet apps too.
I’m researching just such a decision right now. User testing is only showing a few people finding this a problem, which my client believes means it isn’t a problem.
It hides vital tasks and functionality by reducing visibility as you say, plus it increases time and effort in an app that is massively time sensitive….
ah, yes, that pain of google hiding the contacts in gmail.
I had to google (!) where to find it – maybe that is part of their business plan?
Given the fact that hiding navigation is – at least objectively – a pretty obviously bad idea, I sometimes wonder whether it’s a symptom of a deeper problem in design in general. My pet theory at the moment is that “visual design” is a sort of cuckoo in the nest – anything that looks nice (or in this case “simple”) is given far more consideration by those who are responsible for letting the design go live than things that are practical , or non-visual. Visual design is self-evident, while “non-visual design” needs a degree of sophistication to understand that many people simply don’t have. Indeed, the whole idea that there might be something more to design that what you see on a screen can seem completely alien at first.
So I suspect the discipline of IA/UX has basically failed to make an impact on business minds, despite the likes of Peter Moreville banging on about definitions and such. That graphic and visual designers have also started to describe what they do as “UX” doesn’t help. And the idea research, theory, planning, principles, etc. seem to be constantly taking a back seat faced with things like agile methods and “lean” practises. There was even a serious discussion on LinkedIn the other day about how much coding a UX designer should do. If people thought that accountancy was an easy gig, I wonder if they would ask whether accountants should also do some IT support or legal work? The unspoken assumptions there are the same.
So it’s perhaps not surprising that Google, et. al. get this wrong. There will be product managers there who will only sign off stuff that is superficially “clean”, “simple” or even “mobile friendly” (a phrase that on the desktop basically means “crippled”) . And I bet there are UX designers there who are mightily depressed about that.
Jonathan: That’s what pushed me to write this. A creeping sense of how IA/UX design can go backwards, that the discipline may be un-learning things that we thought have become commonly accepted.
It’s telling that both Google and Flickr’s recent redesigns were of the “Please the CEO” kind. Google’s designers have admitted as much, and Flickr’s 2013 redesign was widely reported as Marissa Mayer needing to make her mark (and Flickr designers have admitted that it was rushed through).
That both these redesigns were broadly hailed in the tech press (while users were left to complain in blog posts and support forums) serves to embolden designers and product managers into also taking the shortcut.
I for one welcome this development. I would like to see a time when even the hamburger is removed and the website becomes a single static image, or better, a single full-screen slab of uniform, uninterrupted colour. The loss of functionality and brand identification is a small price for aesthetic purity.
@Ian – funnily enough (and even though I agree with Francois’s post), last year I did a perfectly serious re-design of an iPad app that was almost along those lines. This was in a genuine attempt to see what would happen, but also to solve some problems that we saw in repeated user testing of the old application, which showed that people weren’t seeing functions in plain sight . This, we thought, was because those functions were drowned out by other elements of the application. So in the re-designed app, the main principle we had was that anything that wasn’t purely content was “conspicuous by its absence.” I split the app into “nouns” (content) and “verbs” (stuff you can do to content). It then had three modes: default (showing nouns only), global navigation and operations (verbs invoked using a single lateral swipe across the screen), and local navigation and operations (verbs invoked by two-finger tapping objects on the screen). When you first used the app, it had one of those “here’s how to use this app” tutorials. Basically two gestures, not including scrolling of course.
The hope was that because the app was modal between the nouns and verbs, people would study the verbs more and remember them without being distracted by content. It also gave us room to make the app more engaging by putting things on the backs of the “nouns” (in practice, these were cards – at a time when the whole card design thing was getting trendy, annoyingly).
We prototyped the app, but never got the intended design into user testing because (and this was the biggest surprise for me) the developers didn’t want to do it! Unlike when they were working on boring old web apps, they had suddenly all become tortured designers talking about “conventions” and “patterns” in ways I’d never heard them talk before. They really, really wanted to make the app have a left-hand fly-out menu (on a hamburger) like all other high-profile apps had at the time.
So we went for a compromise in testing*, and then eventually dropped to what the devs wanted. And they got their way because they could point to similar implementations (eg Facebook), which of course cut way more ice with the stakeholders than my non-existant design did. See my comments above about the failure of IA/UX to communicate the value of non-visual design.
Let that be a sort of footnote to all this 🙂
* The results were pretty mixed. Nobody paid attention to the startup tutorial. So then they naturally got into trouble. But it’s frickin’ hard to test mobile apps in the lab with much degree of contextual verisimilitude.
I was just thinking about this exact thing. For the average user, navigation that is easy to use andsee is very important. Great post!
I’d argue that the good old ‘burger actually is (or will soon be) a widely-accepted symbol for navigation. I see the point, and to an extent I agree that it’s bad form to hide key navigational items, but I think that it’s becoming almost ubiquitous and that fewer users are getting confused by it. I admit that I haven’t seen much research about this, but if anyone knows of any good reading material, let me know.
Well, websites and the way we use the internet is not the same as it was in 2001. The trend we see right now is that we are moving from structured websites with 10.000 pages to a more visual, storytelling experience of the web. Companies start to consider simplifying their websites instead of creating sh*tload of information that nobody needs to look for. I think that the “hamburger” lets the user focus more on the content of the website instead of focusing on the framework of the website, because we want the user to experience the content, dont we? 🙂
Brian: I agree it’s useful that we have a reasonably well standardised symbol for a menu now. The main thrust of my article wasn’t so much that that the icon was confusing, but that it was usually unnecessary and unhelpful to hide the navigation at desktop sizes. (Under “Hold the mystery meat, too” I criticise the various cryptic ways that navigation gets hidden, which I believe do cause confusion.)
Anton: I agree there has been a movement lately towards websites that are, as you say, more visual, storytelling experiences. And in these I usually agree with the decision to hide the navigation – they’re what I referred to in my second example as ” sites where random browsing is the dominant navigation pattern”. But I’d say these are a niche, and those large, structured websites are for the most part not going away. The mistake is to apply a navigation approach suitable to the former, to the latter, just because it’s trendy and looks nice.
Hi there.
Your post raises some valid points, but I think it falls short on the valid reasons to hide the navigation behind an icon. I think there are more reasons that random-browsing behavior and small screens, but they’re not generic rules of thumb based on device characteristics or browsing patterns, instead they reason falls on the actual purpose and content of the site, the rest of the site — particularly the homepage — as a how, and also how the designers want people to browse the site.
I’ve given this a lot of thought, as the sole designer for XOXO, and by explaining the rationale behind our navigation decision, I think I can make clear how this kind of decision has much to do with the content and purpose of the site.
As I was sketching and planning the site, I kept coming back to the need of having a dedicated “schedule” page, as most event sites have — XOXO in particular has a lot of events every day, and goes on for four days, unlike a more traditional industry conference. Schedules are complicated to build in such a way that will work nicely in narrow screens, and most of the time they duplicate some of the information present on the homepage.
So I though: “What if the homepage is the schedule, and every event is acessible via the homepage?”. There were a few benefits and reasons that backed such idea.
1. No duplication betwen homepage and schedule page.
2. The homepage still presents an overview of the whole week.
3. Browsing is very simple: the homepage is a list of events, clicking on one gets you there, clicking back takes you home. So, this makes turns the whole homepage into navigation, too.
4. We don’t want people to rush to navigation. Instead, we want people to read what XOXO is about, and, as they scroll, to understand how events are spread throughout the week, then click on what they find interesting or what they’re looking for.
So we went on and we build the site as it looks today, except that *there wasn’t a navigation bar or icon at all*. In fact, it wasn’t up until days before release that we added a traditional navigation bar and icon.
We did so because while our idea for homepage-as-schedule-and-navigation worked, it could mean a lot of scrolling for people who are after something specific at the end of the page, especially returning users. This problem is even more noticeable in narrow screens, where content is pushed further down the page, and you can’t scroll as fast. Furthermore, we wanted to provide a way to get to the main events — not all — even on event pages, not just the home page.
Since it was obvious that we’d need a classic navigation icon on narrow screens, we also added it to widers screens. We debated whether we should use an icon on wider screens or not, and our reasons for these were:
1. We don’t want people to rush to navigation. Instead, we want people to read what XOXO is about, and, as they scroll, to understand how events are spread throughout the week, then click on what they find interesting or what they’re looking for.
2. If you miss the navigation, you still have one-click easy access to every single page on the site — this is important.
3. XOXO’s audience is usually very tech-savvy — either technology industry people, or artists that use or are interested in using the Internet and technology to help them make a living. I’d argue that most of XOXO’s audience know what an “hamburger icon” means, compared to a more diverse group of people from different backgrounds and levels of interest in technology.
But what about what the responsibilities of navigation, as you mentioned? They’re already tackled by other parts of the site.
1. It tells you what’s here and what you can do. That’s what the homepage is for, and that’s where most people land — there’s little interest in linking to a particular page unless you’re attending XOXO.
2. It gets you to where you want to go. That’s what the homepage is for, plus, the navigation is still present.
3. It tells you where you are. Every page but the home page has a navigation bar that works ver much like a mobile-app: it has back/home link (they’re the same), a navigation icon, and most importantly, the name of the page, telling you where you are.
At the end of the project, we were pretty happy with the result, and very confident on our decisions — they weren’t taken lightly, as I hope this long comment made very clear.
But my main point isn’t related to this website in specific, but to critiquing and analysing designs as a whole. When doing so, we should not only consider best practices and rules of thumb, but each website’s audience, purpose, and intent. Every one is different, and we should think whether or not a “best pratice” is the best solution for our website’s particular problem.
@Paulo – thanks for this explanation. If only more designers thought as clearly as you about what they were doing!
When you say “We don’t want people to rush to navigation. Instead, we want people to read what XOXO is about … to understand how events are spread throughout the week” that appears to be based on an assumption that your audience is content agnostic. I would guess that most people would in fact have more interest in one thing than another (film over games, for example). This is particularly true when people also have date/time constraints.
So when you say the home page on its own (as a heterogeneous list of stuff in chronological order) “… tells you what’s here and what you can do.” You imply that scrolling through a long page scrubbing for words like “music” is as good an experience as showing the word “music” as part of the other available content types in a short list at the top of the page. That’s quite hard for me to accept as being superior, particularly given the minimal visual impact of the nav at the top.
Be that as it may, why, after initially having no navigation, did you put one in? It seems to go counter to your otherwise very well considered design rationale.
Paulo: Thanks for the thoughtful response. I appreciate you taking the time to explain your rationale.
I was a little uneasy about using XOXO as an example, as it could be considered another exception. It’s a very small, very shallow site, and being a conference, already benefits from most visitors having a mental model of what the site would provide. The fact that I’m talking about making another exception underscores your point that one can’t make a blanket rule about these things, that one can only judge designs on a case-by-case basis. You are, of course, right about that too. I, too, abhor once-size-fits-all design maxims, but – where blogging is concerned – sometimes that’s needed to start a useful debate.
That said, I’m not convinced by everything you said. You talk about “how the designers want people to browse the site”, and not wanting people to “rush to navigation”. I’m sure most site owners would like visitors to spend more time perusing their homepage to get a fuller picture of what they’re about, but we should design for how we know most users navigate, not how we’d prefer them to. For example (on a conference site), scanning for keywords matching their interests, or having a predictable way to get to something as basic as Venue or Tickets. I fully support your decision of having the homepage serve as the schedule, but don’t see how it would’ve been any worse with a visible navigation bar, making it clearer at a glance what the conference offers.
It’s clear, though, that you have put a lot of thought into the user experience rather than, as I implied, simply removing navigation because it looks nicer without. (And I wish I could have gone to the conference!)
@Jonathan: Regarding the reasons for adding navigation, I wrote that in a paragraph. Starts with “We did so because while our idea for homepage-as-schedule-and-navigation worked…”.
@Francois: I’d argue that people can still easily scan the biggest and boldest words on the page very easily, they were designed with that in mind, so I think it’s still clear to understand what the conference offers by scanning the home page. With that in mind, in our case it was important to design in the way that we want people to understand what is being communicated without preconceptions. Having a permanent navigation would make it much easier for people to look at those keywords and thing XOXO is just another industry event. Perhaps immediately click one and not read the copy that was carefully chosen for a particular communication. By making people read the premise of the conference — at the very least — and by accompanying the name of the event with a two-line description, we can present things in our voice and tone, and avoid misconceptions or preconceptions. Another reason: if you go straight to the navigation, it’s hard to understand how events play out during the week, and easy to think “where’s the schedule?”. All of these were reasons why we wanted navigation to be secondary on the homepage. That’s not to say this was the only solution. At one point, I played with the idea of placing navigation underneath the main banner at the top of the homepage, but that brought up other problems that made it a less than viable option. However, I remain confident it’s the solution that worked best for us and the goals we had for the site.
I hate this trend. I’d hate to see every website start to look so simple and boring, usually with lots of white space and big gay typography. I like sites that have interesting artwork, like by the designer from http://www.weepingweb.com and http://www.mirrorthrone.com . What’s going on, is the whole population turning into a bunch of grown children where we need simple, kindergardenesque symbols that remind us of our old plastic kiddy houses and toys? That’s what this oversimplification of art feels like to me. Instead of using a finely crafted piece of silverware, it’s like using a chubby, plastic, neon-purple play-spoon designed for toddlers.
Something I find equally egregious is this nagging expectation that navigation is the content of a site. Navigation is a safety net that, if copy writing and IA have been done well, is available to a user after their primary needs have been satisfied through pertinent content. This expectation that users are going to top-level pages and browsing through navigation hierarchies is a dated paradigm and very misleading. How many users end up on a site by navigating a link via social media, a link in an email or IM, or simply a normal web search? Those users are at a page seeking specific content and navigation is a secondary artifact. Still useful? Certainly, but it is no longer the primary route to content discovery, imho.
@Paulo’s response is a fantastic example in that he defined a singular, overarching goal and made that front-and-center in their entire presence. Many sites that I’ve worked on in the past didn’t have such a singularly driven idea, but we were able to bubble up the more pertinent sections of the site so navigation could function as a fallback device: Available when users needed it, but otherwise not very pertinent.
The overarching problem that I have with site-wide navigation is they’re all different and a user has to dissect and disseminate new hierarchy at every site or app they visit. I like the hamburger icon because it’s becoming a more ubiquitous and more recognizable. It’s a glyph that says, “Here’s where my safety net is, I can find extra stuff here,” and it’s not limited to the UI shortcomings (crazy flyouts, tunnel menus, etc.), traditional navigation schemes can fall into. It also has the benefit of providing more aesthetic clarity and unifying desktop and mobile interaction patterns. Thumbs up for me, I think this is a good change for the desktop.
Joshua: I would never claim that navigation is the content of a site, nor do I accept that making the menu visible makes it seem so. I also agree that people don’t necessarily start at the homepage.
Yes, navigation may well be secondary, a safety net, but this is still a very important role, one that the majority of people use at some point on your site. And it fulfills this role much less well if it’s hidden, to the inconvenience of your visitors.
Any UI shortcomings of navigation menus are not solved by hiding them under an icon, just postponed. You will still need to work just as hard to make the navigation clear and usable, whether it’s visible by default or not.
This article, as others have mentioned, does have valid points, but there are some sweeping generalizations being made that aren’t helpful.
You’re not really taking into consideration (among other things):
1. The # of navigation items – Is it more usable to display 20 links in the header of a site all at once? Visual hierarchy, while not always a UX designer’s concern, directly influences the user experience. Yes, Google hides a lot of navigation content; sometimes it helps and sometimes it hinders.
2. Scalability – Hiding some navigation content can be a very useful way to allow a client to add more content to a site in the future, without breaking any design.
The idea of hiding content until the user decides to interact with it is certainly nothing new. Site maps used to always be a requirement, because they showed EVERYTHING on the site. But, guiding the user through the experience can mean omitting some detail while displaying others, and it’s always a curated process.
Standardizing iconography for an interaction type is helpful, and I’d argue that there are effective ways to use that tool to create a better brand and user experience.
Pingback: Web design trends and predictions for 2014 | thewanderlust.net
Agree completely. It is a disturbing and pretty silly trend unless you don’t care about people ever leaving your front page. Pretty simple stuff. Recognition over recall. Always on navigation won’t fit well on a mobile device. It fits fine on a desktop and often tablet.
Is it a coincidence that this hamburger navigation is often also mystery meat navigation ? I think not 🙂