I'll give my example as it explains exactly what I mean. We have a store that on the main menu has a "Shop" link that when hovered over, will display a dropdown menu of categories and subcategories. Historically, the word "Shop" was linked back to the store homepage. But on mobile, if you click "Shop" to get the dropdown list, it just goes back to the homepage without the user being able to see the dropdown menu. I can fix this a number of ways, but I'd like to know what the best practice is. If I make it not a link, I think that's a UX issue in itself for both mobile and desktop versions.
You may not like the answer, but basically, you shouldn't use hover as an interaction anymore unless you know for certain that your customers will only be using it on a non touch based pc.
If they use it on any touch device (tablet, touch based pc, or mobile), then hover is meaningless. Although some touch based browsers will try to convert hover into a touch event, it is inconsistent, and not very usable.
So you will have to use a different menu type that works well with touch devices, or make it click / select based rather than hover based. I do not recommend the latter.
What about relying on the common mobile usability patterns, regardless of the historical UI? Such as:
- the name/logo placeholder as a link to the home page.
- a menu icon or word that shows/unfold/etc the menu on tap
- a dedicated breadcrumb and/or back button when necessary.
The decision here is whether you want to keep the desktop and mobile experience/interface consistent or not. Obviously it is impossible to create the same rich interactive experience on mobile because of the limited screen space and user interaction.
If you decide to keep the website the same (I guess for easy of maintenance and update), then you have to design for the lowest common denominator, which suggests that you have to provide a separate link for the home page and the Shop button could become an accordion header or trigger for the selection (not necessarily a dropdown list because it is hard to use on a mobile device). The good thing about this approach is that you retain all the functionality and consistency, but you can build richer interactions for the desktop just the same.
If you decide to keep them separate them separate (I guess for better experience for the device), then it won't really matter because you should just do what is easiest based on your content and navigation structure. The good thing about this approach is that users get the most effective use out of the mobile and desktop designs, but it is more effort to maintain two different designs/sites.
Of course, you should still test these ideas/approaches against the users, as every business/website/customer group is different.
If there aren't so many links you could display them all by default (no hiding/showing the sub nav), and have them indented from their parent link. Then you can still have the shop button link to the home page.
If you have a lot of categories and sub categories, I would opt for keeping the menu clickable. Then you could link to the home page from the logo or add a 'home' link to the menu and just hide it when at desktop widths.
Lets try this
SHOP <- click/tap
and menu appears
- Bla bla
- Bla Bla bLa
PLUS: adding home page link behind your Logo
It's a simplest way to resolve your issue I think
This is a suggestion to consider, NOT a definitive answer:
How about next to the "shop" button that currently has hover functionality, placing a tiny icon touchscreen device users (and others) could click to replicate that hover function?