Take the following page as an example (possibly in Firefox only):
As you hover over each search result, an "+ Add to Firefox" button appears.
However, that idea of the button appearing upon hovering doesn't apply to touchscreen users. How might this functionality be re-worked for the touchscreen?
The button could be always displayed, regardless of hover. However, then you would have a long line of identical "+ Add to Firefox" buttons down along the page.
Answer
Luke Wroblewski covers this topic in his book Mobile First
He stresses the importance of transitioning your on-hover menus to mobile using the most appropriate solution for your site:
...any actions that rely on mouse hovers in our desktop web experiences need to be rethought—and that’s a good thing. Many uses of hover actions on the web assume too much.
Replace by direct actions
...taking actions and information out of on-hover menus and placing them directly on the screen could be the right approach. This is the solution Twitter used on their original mobile web experience.
Here, he refers to Favourite, Retweet and Reply being visible at all times via an iconic button instead of a hover button.
Replace with on-tap menus
...they could be turned into on-tap menus by default. This might be good if the actions or content in the hover menu are a logical next step for people. But it could be annoying if the hover menu content introduces an unneeded extra step that gets in the way of people’s progress.
Replace by a separate page
If the content within a hover is extensive, it may be best to move what’s inside the hover menu to a separate screen on mobile. This is the approach used by Barnes & Noble
Here, he refers to a hover panel with product info and add-to-cart button which moves to a separate page on the mobile version (and which enables the addition of extra options in the process)
Make sure you get hover covered
Whichever approach is right for you, just make sure when you go mobile your hovers have been covered.
No comments:
Post a Comment