When you’re designing the menu of a new website, sometimes little UI details actually have a bigger effect than it seems.
You might hear yourself asking something like:
“Should I show the sub-menu on hover, click, or click-through?”
Just starting the Crash Course? Start here!
****
Imagine this scenario:
You have a few options in the main menu, and one of those options has a sub-menu; categories that the user can choose from.
Maybe it is your profile, settings, and account history.
Maybe it is a list of products under the main “Products” option.
It could be the individual lessons under a subject that you’re learning. If you do that sort of thing.
It could be anything, really.
Should you show that little list of sub-options when you hover the mouse over the main menu option, or when you click the main menu option, or should you put those options on a main page as a small sub-menu?
****
The stupid answers:
a) What does Twitter do?
b) What do our competitors do?
c) What would Jesus do?
****
The real answer:
It depends on how you want users to navigate your site and what device you’re designing for.
If you want users to choose a sub-option every time, then both hovering and clicking to reveal the sub-menu are fine. But remember: hover doesn’t exist on a mobile device. It becomes two taps (one for the hover, one for the click). So adjust the mobile version to avoid that. It’s annoying.
If you want your users to go to the main page first, then show the sub-menu there instead. Making them go back to the main menu after loading a new page is unnecessary work and time.
Showing the sub-menu directly in the main menu is great if your users want to access certain sub-pages over and over, or if they are already familiar with the content. It’s a shortcut.
Putting the sub-menu on the next page will allow users to get more information before they make a choice, so if the sub-menu isn’t a list of obvious every-day things, it might be better to get users to click through.
****
Why this isn’t a stupid question:
This little UI detail can change your company’s revenue.
This may seem like an insignificant little detail, and it probably won’t make-or-break your company, but it could change the company’s profit.
On websites that make their money from advertising (banners, etc.) that little shortcut in the main menu reduces the number of pageviews, which reduces the number of ads that are loaded, which reduces money.
On a big site, that might be millions of ads/dollars.
On websites that are more productivity-related, a click-through makes people load a whole page to make their next choice, which slows them down, which reduces productivity. Imagine if Photoshop loaded a new page every time you wanted to switch tools. Everything would take forever.
If that sub-menu leads to a purchase, it could go either way. Think about what they need to make a purchase decision, and A/B test the hell out of it.
And think hard about whether you want to hide the sub-menu. The less your users see something, the less chance there is they will click it.
****
Information architecture should define little details. NOT vice versa.
If you plan the structure of your design first, this question never happens. You should know whether you have planned a page for the main menu item, or only for the sub-menu items — before you start designing that menu.
If you have a page for the main menu item, you need a click-through. Then you have the luxury of a whole page to give the user sub-options.
If not, a shortcut-menu will work fine.
And that structure should be based on your goals, including business goals.
If you are adding pages because you need your buttons to go somewhere, you’re doing something wrong. That’s like building another room in your house because you have an extra door.
Sometimes details aren’t as small as they look.
****
Tomorrow we will answer: “Is an email confirmation bad UX?”