Good touch-based equivalent to the hover tools pattern?

Question

When you have a long lists of items and you want to let the user interact with one of the items contextually - a common solution is to use the hover-tools pattern in a desktop browser environment. The benefit is that you don't cluttering the user interface with a lot of repetitive controls.

The list could such as show a bunch of links and you want to save or comment one of those links.

(The interaction design pattern is discussed here:) http://patternry.com/p=hover-reveal-tools/

But, as we all know, on touch devices we don't have hover. On iOS we have the Edit button but that is usually for bulk actions and that is not what I'm after.

Do we have a pattern that could work for both mouse based and touch based interfaces?

Answer 1

As there is no on-hover trigger (no on mouse over action), you have three options:

• selecting an element on the list, then using a button above/beside the list to perform an action on this element (but it's not what you want to achieve, I believe),

• not displaying anything by default (hiding completely the buttons triggering actions) and displaying them only upon item selection (but you loose affordance),

• displaying a small button within the element on the list, which, on touch, will display a menu of actions to perform.

Th last one seems to be the best one.

Answer 2

I think the closest parallel is the 'edit' option you mention. You may not want to do the bulk edit button, but you could certainly have a record-level edit icon/button. Tap edit, see edit tools.

Answer 3

What about trying to display swipe actions? For example, like the mail app on iOS does with messages. That is, you have a list of items and in order to interact with one of them, you need to drag it to the right or left (probably better to the left, so as not to accidentally return to the page back if it is a browser or a page of the second or more hierarchy level). After such a "mini-swipe", a list of actions with this element appears.

Alternatively, you can use the checkboxes + keys that pop up from above with absolute positioning