Re-thinking "hover" functionality with touchscreens in mind

Question

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 1

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.

Answer 2

Have the list item be split. Something like a label to the left and a button on the right.

It is basically what you already proposed. Here is an example how it could look like.

There is just no hover replacement for touch based devices. At least not for all types of touch based devices.

Answer 3

The Twitter client I use on Android is called Plume. It handles hover replacement very well:

In a list of things (tweets or Firefox addons, whatever), the entire list item invites a tap. Tapping slides down a menu with actions that can be taken on the selected entry. Simple, and it makes good use of screen real estate.

Answer 4

Strictly as a user, those people who have replaced 'hover' with 'long-press' have made my life easier.

When presented with an action item on a touch screen, I essentially have a default (tap) choice which works as links usually do, or a non-default action (long-press). It seems intuitive to me because when I long-press things I am usually thinking about what I'm going to be doing, so that 600 ms of time allows me to prepare for what I know is coming.

Answer 5

Suppose you have a list of objects on which you can perform a set of actions. One way of performing these actions is via the noun-verb model (i.e., first you select what to perform the action on and then what action to perform). This is what's done in the linked example: you first select the add-on (via hover) and then the action (install).

One way to achieve touch-support is to mimic what e.g. phpMyAdmin does: make the objects selectable and provide one set of buttons (one for each action):

(Actions are available after the "With selected:" text. One could use radio buttons if only one object can be selected.)

An alternative solution is to utilize drag'n'drop as this works both with a mouse and touchscreen (with the obvious restriction of keyboard-only interaction - guess you can't have it all.)

In order to preserve the noun-verb interaction, a noun (object) should be draggable (droppable on a verb (an action)):

[List item 1]          +-------------------+
[List item 2]          | Drag onto action: |
[List item 3]          | [Install]         |
[List item 4]          | [Other action]    |
[List item 5]          +-------------------+
[List item …]
[List item N]

The drop targets (the "Drag onto action" box) should keep its position on the page during scroll (position: fixed). This is pretty much how canv.as has implemented the "stickers" functionality (noun=sticker, verb=upvote target post):

Answer 6

You could show the "+ Add to Firefox" button in light gray, and when you tap it, color it and go to the next page.

Or you can work with two taps. When tapping on a list item (anywhere in the list box) the "+ Add to Firefox" button gets its color, and then you can tab it a second time to go to the next page.

Answer 7

Nowadays you can use media queries to change styles on the fly when the viewport changes. Example of regular site:

<style>
    a { color: #ffffff; /*Blends into the background for this example*/ }
    a:hover { color: #000000; /*Shows up on Hover*/
</style>

Of course, this will never show up to the mobile user but...

@media 
    only screen and (max-width: 760px),
    (min-device-width: 768px) and (max-device-width: 1024px)
    {
        a { color: #000000; text-decoration: underline; }
    }

Now when the viewport is small, the links will show up and have an underline so the user can see them.

I'm using this on a site where I have only small parts of the menu visible to save space. On hover, the links flyout. For mobile users, this doesn't work so I use media queries to change them all to block elements and put them at the top of the screen.

For child menu items, I always make sure the top-level items go to a page and aren't dummy items. That's where a lot of people are having issues because they all wanted to follow some trend of having their parent links just placeholders. they used to fight the :hover psuedo for IE6 just to get their placeholders to hover correctly. Now they all have to rethink that. So just turn your top-level items into portal pages that a user can navigate to the children once they arrive. It's an extra page to download for the user but if you have hundreds of pages, it might be your only option.