You know what I find fascinating? How so many website owners seem to have a multiple personality disorder.
Here you are as a website visitor, swearing at your laptop when some websites make it difficult for you to find stuff.
But then you put your website owner hat on and – bam! – you’re a totally different person!
All that stuff you found irritating on other websites now proudly lives on yours!
I don’t know the reason for this peculiar behavior, but I know that we need to cure this.
So, let’s talk about one of those things you find irritating on other websites but still have on yours:
Website drop-down menus in navigation
In particular, why in 90% of the cases you need to get rid of them and what are the alternatives.
Let’s start with this:
Making users suffer a drop-down menu […] is one of many small annoyances that add up to a less efficient, less pleasant user experience. It’s worth fixing as many of these usability irritants as you can.
Also, the longer your list options, the harder it is for your prospects to make a choice:
But that’s generally speaking.
Let’s look at the common examples of website navigation drop-downs that drive your visitors insane. They’ll also illustrate the 4 reasons why your drop-down menu has to die.
4 reasons your drop-down menu has to die (and what to do instead)
Reason #1: Your visitors may skip important pages
Example A:
Imagine, you landed on this freelancer website.
You want to learn more about them and hover over that navigation label. What are the chances you’ll click on “My Story” label?
How does this harm your website?
Website visitors are humans, and humans are the creatures of habit. And their habit is not to click on the top-level item of a drop-down menu because:
- they think the top-level item is not a link but a plain text, which is the case on many websites
- they get distracted by the new stuff that just dropped down
What’s the alternative?
If your drop-down menu consists of 1-2 list items:
- either promote the links from the drop-down to the top-level navigation items
- or remove them altogether (for example, removing the Testimonials page from your navigation and website is generally a good idea).
Reason #2: You make your visitors work for it + you’ve created thin content
Example B:
Imagine, you landed on this website.
What’s the probability that you’re dying to learn about their values, mission and endorsements? Can you see yourself clicking on each and every drop-down list item?
#hellno
But the problem here isn’t only the irrelevant sub-labels. It’s much worse.
How does this harm your website?
1. You’re asking your visitors to do a lot of work to learn about something simple,
…which means they aren’t going to do it.
Your visitors just want to learn more about you – ideally, to click somewhere once and just scroll down reading.
But noooo, you’ve decided to make them work for it!
And here’s what someone who wants to learn more about this business will have to do:
- Hover over “About” navigation label.
- Click “About us”.
- Scroll down to read.
- Scroll up (which is especially fun on mobile where the pages are taller).
- Hover over “About”.
- Click “Our values”.
- Scroll down to read.
- Scroll up.
- Click “x” to close the browser tab BECAUSE NOBODY AIN’T GOT TIME FOR THIS!
Wonderful, wonderful user experience!
#noitsnot
2. You’ve created pages with thin content.
If you’re a one-person business or a small agency, there is no way in hell you have so much to tell about your values and mission that it’ll justify creating separate pages.
In this particular example, About us, values and mission pages have 150 words on average each. 3 pages with just 150 words that aren’t helping your visitors or making Google unhappy.
#notgood
Drop-downs unrelated tip: There aren’t many things that kill your visitors’ enthusiasm faster than “Our mission” and “Our values”.
What’s up with the corporate speak? Talk to your website visitors like a normal person! Or do you talk like this in real life when people ask you about your business?
What’s the alternative?
Write one solid About page where your visitors can find everything you’d like them to know by simply scrolling down. This way, the chances that they actually read everything are much higher.
Worried that it will be too much info for one page? Follow this fail-proof About page creation process. It even comes with an About page template:
But ok, let’s say you don’t have a drop-down menu under your About navigation label.
What about Services?
Reason #3: You make it hard to find relevant info
Example C:
Imagine, you landed on this website.
You want to learn about their services, hover over the Services navigation label, and this beauty drops down.
Your next move?
Probably clicking the “Services” label hoping to get to a page where you get the services listed together with more text.
Gotcha! No such thing. It’s just a text.
So, you need to decide NOW which of the services you’d like to learn about.
Not a quick decision to make, especially because 4 out of 6 services have the word “marketing” in them.
But ok, you click on “Marketing Audits” and start reading.
Want to learn about other services?
Prepare to scroll, hover, select and click, my friend.
Want to navigate back to the first service you found interesting?
Which drop-down item was it again? Nope, not this one. Try again!
#omg #thisisnuts
How does this harm your website?
Your visitors may miss a service they actually need (and you may lose money).
The main problem here is that there is no dedicated space where your services get all the attention of your visitors.
You’re asking your visitors to select one of the services while they’re surrounded by the rest of your website with its visual distractions.
And with your dropdown menu being, and its list items being unclear, your prospects will have a hard time making a decision.
No wonder they won’t check many of your service pages. Maybe one or two, but that would be it.
And this was only on desktop!
On mobile, if you don’t implement your drop-down navigation layout properly, your poor website visitors will end up with an endless list of links and an overwhelming number of options:
What’s the alternative?
1) If you offer more than 3 services AND/OR your serivces have longer titles
Let your website visitors decide in peace what services they’d like to check out, without the pressure of a soon-to-disappear drop-down or distractions of other links.
- Create a page titled “Services”
- Feature your separate services on it with an enticing paragraph and a visually prominent link to the corresponding page for every service
- In your navigation, link only to your main Services page without any drop-down lists
2) If you offer only a few services:
- either omit a “Services” navigation label altogether and link to the single service page directly from your top-level navigation.
- or give your services very clear, short and distict titles, and use a drop-down menu:
Like with any navigation options, make sure your drop-down list offers mutually exclusive options. Otherwise, your prosepcts make get confused:
❌ Content creation – Website copywriting – For agencies
Wait, isn’t web copy also content? I’m an agency owner who needs blog posts written. Where do I click?
✔️ Blog posts – Website copy – Printed materials
Ah, this is clear. Those three are disjuoint options.3) Combine the two approahes
- group your services by topic
- use a short and clear drop-down menu under Services
- make each drop-down list item link to a dediced page that features multiple services
Example:
In my navigation bar, I have a short drop-down menu under Services. The label “Website review” leads to this page that features 3 specific services and offers links to dedicated service pages:
Reason #4: You drive your website visitors insane
I’ll just leave it here:
#facepalm #nowords
What’s the alternative?
If you’re absolutely sure you need many links in your navigation, and they don’t fit on the top level, implement your whole navigation menu as a mega menu.
Don’t be shy to give all the links enough space on the screen making it full-width. Style your menu to make it easy to scan using different fonts and icons.
Something like this:
To sum it up:
4 alternatives to a drop-down menu that will improve your website
- If you have only one drop-down item:
- either put it as a top-level navigation item
- or remove it
- If it makes sense, combine the info on the separate pages from the drop-down menu and make one page out of it (for example, if you have a drop-down menu under “About” top-level navigation item).
- If you have a Services drop-down menu:
- either use only a top-level “Services” item that leads to a dedicated “Services” page
- or, if you offer only 1-2 services, remove the “Services” navigation item and link to the corresponding services directly from your top-level navigation
- or, use a short and clear drop-down menu, making sure its list items offer mutually exclusive options
- If you have no choice but to offer your visitors many navigation menu options, use a mega menu.
Whatever you do, make sure you keep your navigation menu short, descriptive and clear.
Final words of wisdom
Being a regular person who needs to book a vacation or buy a pair of shoes from time to time gives you a unique opportunity to learn about what makes a great website… without spending extra time on it.
Be a mindful website visitor.
Next time you’re checking someone’s website to learn more about them or to find their return policy, notice what irritates you. What information is missing. What’s hard to read.
Then think about your website. Chances are, you’re making the same mistakes.
That, and also kill your drop-down menus.
A blog post can only get you so far…
Want to find out what else you can improve on your website? Get a professional website critique!
Hi Gill, Thanks for the article. I am building an application with 1000+ Universities for my customers to choose from. How do I make this an easy experience instead of drop-down menu? Please advice. Thanks
Hi Tanveer. The tips in this article are about a drop-down menu on websites, on apps. With apps, it’s different. I don’t think you can (or should) avoid drop-downs on apps, but I’m also not an expert on app UI, sorry.
Excelente concejos Gill, los voy a tomar en cuenta para mejorar mi recién creada página web. Gracias
My pleasure, Eduardo. Glad you found this helpful. Wishing you best of luck with your new website.
Hey Gill
Thank you for this article – unfortunately, I have been guilty of this and it has caused issues, especially on our mobile site. So off I go to sort it out. Thank you!
My pleasure, Paul. Glad you found the article helpful.
Yikes. Guilty and will rework my nav. Thank you!
Without hyperbole, I can safely say, this article is the best, most real, UX-IX, ergonomic advise on web.site design ever written.
Hypatia could not have said it better herself.
Thank You G. Andrews
Thank you very much for the compliment, Frank. I’m afraid I don’t know who Hypatia is but I’m guessing somebody important 🙂 Glad you found this useful.
I feel the need to point out, since you didn’t that drop down’s are not infinitely bad. You gave great examples of where one should not use a drop down, but speak as if there is never a time to use drop downs – and that’s hardly the case.
Facebook vs Linkedin is a great example. On Linkedin, notifications are stored in a separate page. When you have new notifications, you click the link and are taken to a page of notifications. Its a burden. There are times you don’t want to be taken away from your stream just to see someone liked a post you made. Instead, Facebook’s method of putting notifications in a drop down that allows the user to click an extra link if they do wish to view a pull page of nothing but notifications or friend requests. This is more user friendly by far as it doesn’t take away from the stream. Sadly as we all know, when you leave your stream, finding the exact posts from the stream later is often times near impossible- so we don’t want to leave the stream. A drop down is perfect in this instance.
Another time drop downs DO work, is for account functions. I have never minded having the “account” text displayed with a drop-down for things I rarely do such as edit profile, logout, find purchase history, and similar types of account functions.
Also I would say “company details” (about, mission, etc, etc,…) should be something companies consider for their footer links and leave them out of standard navigation entirely. If someone has come to your business and you are their to provide them with something like marketing services, then your main menu should consist of making them spend money with you easy, for those who want to dig into more about your company, let your footer handle that – its not something most visitors are going to care about.
One thing you did very well at driving home without actually saying it, is the point I touched on above. If a visitor is their to spend money – make sure your website absolutely makes shopping the easiest thing ever. This isn’t 1996 and we can’t get away with hundreds of menu’s like ebay or amazon. 🙂
Overall loved this post.
Hi Bruce. Thank you for your comment. All good points, with which I totally agree.
The reason I didn’t mention the points you made about working drop-downs is that this article (as well as my blog overall) is aimed for small business website of a totally different scale as opposed to Facebook, LinkedIn & Co., and whose websites don’t have any customer accounts with a gazillion things to do on that website. I generally think that website advice for SMBs and giant websites is very different and shouldn’t be lumped together.
But I realize that it’s not obvious, especially if one has just found the article from search, so I’ll make sure to add this to avoid confusion.
Thanks again for taking the time to read and comment.
I was looking for some new and classy drop down menu plugin when I found this article. Gues my search ends here, at least for now.
I guess it does 😄 For a personal website, there is absolutely no reason to use a drop-down menu, and you (and your visitors) are better off if you reorganize your pages. Glad you found this article helpful, Alexei.
You didn’t address using in page anchors for example with the services you mentioned. I’d assume they’re a good thing?
Hi Nathaniel. I’m not sure what you mean by “in page anchors”. Are you talking about on-page navigation? If so, I didn’t address this as it has nothing to do with the topic of the post (the drop-down menus).
When it comes to your website, whether something is a good thing or not, in most of the cases depends on how you use it. But yes, used wisely, the in-page navigation may improve the user experience.
I seem to remember Nielsen liked the huge mega-menu’s even less? Going to check that right now.
Ah, I see you read that post. My mistske. Apparently, they work. The ones NN shows are all ugly though – except for the Moleskin website.