We’ve all seen them before in some way or another: the main menus that when you hover over them with your mouse, they open and show a sub-menu underneath. These are called drop down menus, and they’re one of the most common interactions on the internet today.
Drop down menus operate under a pretty simple pretext. But it’s one that can be a little broken for mobiles, because there isn’t a mouse! There’s no such thing as a “mouse hover” interaction for mobile devices.
This is a big problem for mobile browsers, because their job is to render an already existing internet that is full of hover reliant designs. They get around this with a pretty simple idea: the “tap” fires first a hover event, then a click event immediately afterwards.
This is actually a pretty great solution. But of course, it can’t be perfect. Drop down menus are the largest problem that this solution helps…but it’s not always fully solved.
Why? Most drop down menus have the hoverable area (that opens the submenu) also be a clickable link. This basically means that a simple tap on the menu will result in you seeing the submenu…for a split second as it changes pages! This is obviously not the intended interaction!
What to do about it?
Different platforms attempt to rectify this different ways. For example, on my Android phone you can press, hold for about a half second, and then swipe your finger sideways. This will fire the hover event, but not the click. It’s great to have, but it’s hardly a solution because 1: you have to know it’s a drop down menu before interacting with it, which isn’t always the case, and 2: that’s not exactly a normal or intuitive interaction, so most don’t even know about it.
Basically what I’m getting at is: there is no good solution that has been thought of or implemented on the device side that really works. So it’s up to us to make mobile web designs that solve this problem.
My Usual Solutions:
I have to deal with this issue a lot. It’s never really easy but here’s some of my usual courses of action how to make a mobile website work when it’s desktop one may use drop downs:
1: Get rid of them. Of course this is the simplest solution, but it only works well for some websites. Often the original design of the information architecture just isn’t conducive to the idea, because it was built with sub-menu navigation in mind. If you can get a clean slate to design the information architecture and the site is simple enough to allow it, then try to do it in a way that doesn’t involve the need for submenu driven navigation.
2: Make the hover area not a clickable area. This is the solution that I’d have to say is the most appropriate to most websites I’ve dealt with. The button in the menu that requires the sub-menu technically does not actually have to be a clickable link. Make it a hover only area that is only meant to open that sub-menu. The page that was linked to from that main button can be added to the top of the sub-menu itself. For example: lets pretend we have an “About” button that on hover shows “About Our Prices” and “About our Services”, and on click of the main button itself went to an about summary page. Simply remove the click event from the “About” button itself and have it only open the menu, then add an “About Summary” (or whatever you want to call it) to the top of the sub-menu. This is the most versatile way to solve the issue that works on almost any website.
I want to hear more!
This is something that mobile designers have to deal with a lot. I’d love to see comments with more ideas for how to overcome the issue!