Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Take the following page as an example (possibly in Firefox only):

firefox plugins hover, in firefox

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.

firefox plugins touch (mockup)

share|improve this question
    
This is commonly known as Hover-Reveal Tools. –  jensgram Nov 23 '11 at 13:17
    
Doesn't js already have this functionality (since we're talking about web pages)? stackoverflow.com/questions/4755505/… Touch for hover, etc? App languages of course have it already built in. –  Cincinnatus Jan 3 '13 at 6:22

7 Answers 7

up vote 43 down vote accepted

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.

share|improve this answer
    
what about tool tips? how do we fix that? especially that touch devices are heavily icon-dependent –  Ayyash Jan 14 at 6:50

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.

enter image description here

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

share|improve this answer
2  
+1 I think this is the right approach - @eoinoc : there's nothing wrong with repeating the direct action multiple times. The key is to keep it simple in appearance, so that the repeated element does not overwhelm the rest of the content. –  Roger Attrill Nov 23 '11 at 12:19
1  
+1 I think direct action is the best approach. If you want to avoid cluttering your screen, you can always make those buttons "cleaner" (lighter or text-only) –  Pedro Nov 23 '11 at 12:47
2  
I agree with @Pedro but whatever you do, make sure to make the easy to hit. This is one of the most important things. –  Octavian Damiean Nov 23 '11 at 13:03

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.

share|improve this answer

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.

share|improve this answer
    
Yeah, I wanted this approach too, until I realized that Safari for iOS always handles this action and never lets the website code handle long-press events - or at least, not with the methods I tried it with. –  Aadaam Aug 3 '12 at 0:05

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):

From www.reg.ca/faq/phpmyadmin8.gif (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):

From geektechblog.com/wp-content/uploads/2011/03/Stickers.png

share|improve this answer
    
+1 Interesting idea. Never thought of using drag and drop of items onto an action "box" or some such. GMail already does it for assigning items to a label (actually the other way round), but the potential didn't really register in my mind yet. –  Marjan Venema Nov 24 '11 at 8:29
    
Be careful. ..drag and drop is not an easy use action...it needs muscle contraction and thought concentration. –  pierre lebailly Mar 14 '13 at 6:25
    
The user can make mistakes if the object is far away from the action.And if he does he has to redo (stress) the drag and drop(complex movement) or he has a bad behavior(disliking the app). –  pierre lebailly Mar 14 '13 at 6:29

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.

share|improve this answer

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.

share|improve this answer
    
A small screen does not ensure a touch screen device, just as a large screen does not ensure a mouse device anymore. –  Derek S May 19 at 19:44

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.