Are we going to lose 'mouseover' on touchscreen computers?

February 1, 2010 4:54 PM

What user interface 'technique' is available (or may come to be available) on touch screen based devices that replicates the 'mouseover' function of a traditional computer?

I'm trying to think ahead a bit, to the time (soon now, I guess) when many visitors to my websites are viewing on an iPad-like device. I've used 'hover' and 'mouseover' quite a bit in designing navigation elements, but as touch screen can't 'see' a hovering finger, this obviously isn't going to work. Is there nothing to it but to re-design navigation so that everything is visible all the time? Anything coming down the pipe for this?

posted by woodblock100 to computers & internet (20 answers total)

Google fails me, but there have been proximity sensors in touchscreens before (just very expensive, experimental, etc), so I'll fearlessly predict that eventually, hovering over ("I'm thinking about touching this.") will indeed be the right way to perform a tooltipsy 'hover'.
posted by rokusan at 5:00 PM on February 1, 2010

This isn't exactly what you are looking for, but a "touch and hold" gesture on the iPod Touch activates something different than a simple touch. (Magnifying glass, URL, ability to move cursor, etc.)
posted by The Deej at 5:06 PM on February 1, 2010

People don't use their fingers like mice. I think you'll just have to deal with fact that traditional mouse input methods won't work.

I'm trying to think ahead a bit

There are millions of devices that don't support hover navigation, and not just touch screen devices.
posted by wongcorgi at 5:07 PM on February 1, 2010

A long hold could be treated as "not a click" if you accept that you'd need to tap for a click.
posted by Chocolate Pickle at 5:07 PM on February 1, 2010

The simplest solution is probably to allow mouseover-based navigation to also trigger on mousedown (or on the iPhone/Android "touchstart") and go away on a subsequent click anywhere outside of the navigation element.

You can support this in addition to existing mouseover behavior. This is similar to menu bars in modern desktop operating systems that support both the classic Macintosh-style behavior and the later Windows-style behavior: You can press to open the menu and then drag to your selection and release, or you can click to expand the menu and then click again on your selection.
posted by mbrubeck at 5:09 PM on February 1, 2010

Making the content of a page depend on the location of the mouse is a bad idea for most websites (games are an exception, obviously). This is because it hides information that should be visible, and/or makes things happen that the user doesn't expect, and/or it makes it harder for the user to find out how to do what s/he wants to do. This is why non-web interfaces, which tend to be more carefully thought out than websites, almost never use mouseovers.

My guess is that the increasing popularity of touch-screen devices combined with increased understanding of good interface design will make mouse-overs much less common.
posted by k. at 5:14 PM on February 1, 2010

Nokia's latest internet tablet, the n900, has a "cursor mode"...
A sweep of your finger from the left-hand side of the screen gives a little pointer (just like the arrow on your desktop) -- you can use the arrow to "activate" mouseover functions.
It is also used to select and copy text from web pages. Additionally, it is useful for some Flash-based games/apps that expect "mouse actions".
posted by crenquis at 5:28 PM on February 1, 2010

Do you mean you have say, fold-down menus, where the menu options reveal themselves on mouseover? Because as mentioned above, it's easy enough to have those same menu options reveal on click, provided the home menu item for that menu isn't also available on that click.

You don't need to complicate this by having a long hold do something different from a short hold (and I'd argue that it's best that you don't). You're just going to have to think about how each piece of navigation/interface functionality only does one thing, e.g. a click on one element will reveal the menu below that element, a click on a menu item takes you to that content, a click somewhere else will hide that menu, etc. The key difference between touchscreen and mouse is that we've become reliant on mouse functionality enabling us to do lots of things with one cursor - hover for one thing, click for another, and then outside of the web and into the desktop you've also got double clicks, right versus left clicks etc. Putting aside finger movements for a second, a touch screen really only enables you to click, which means each navigational element or bit of the interface should be limited to doing one really obvious thing. I'd look at how existing kiosk interfaces work for the best (albeit often simplistic) examples of this.
posted by iivix at 5:38 PM on February 1, 2010

By the way, this lack of mouseover is definitely going to be a serious issue moving forward when it comes to touch screen usability. If you've ever seen any usability testing in progress, you'll know how much the average user circles their mouse around, testing rollover on various elements to see whats clickable. And since there's a massive difference between idly moving your mouse and stabbing your fingering repeatedly at a screen, well, users' tolerance for unituitive navigation is going to drop considerably.
posted by iivix at 5:45 PM on February 1, 2010

I assume you've already read Apple's development documents on Safari Web Content: Handling Events. I don't think the iPad's browser is going to be significantly different from the iPhone's so people are already viewing your site in Mobile Safari.
posted by meowzilla at 6:23 PM on February 1, 2010 [1 favorite]

Is there nothing to it but to re-design navigation so that everything is visible all the time?

Navigation is something that users should ideally see before they interact with it, either explicitly or after activating a slide-out nav panel (on click.) Navigation elements that appear on hover tend to walk too close to "mystery meat" navigation to be easily used.

The key here might be to standardize on what "clickable" looks like, so that users don't have to hover to discover (welcome back to the wonderful world of buttons!) until/unless proximity touchscreens become the norm (in 2020 or so.) If this is too painful to consider, then consider using approaches that physically separate the link from the content -- things like moving away from this...

This article summary is a link that goes to...

...to this...

This article summary is not a link that goes to... [ more ]
posted by davejay at 6:34 PM on February 1, 2010

Also, in extensive user testing at the company I work for, we've found that making drop menus clickable is much, much better for our customers than opening the menus on hover -- our users really like the explicit action and not having to reopen the menu if they stray too far from the menu with their cursor. We moved our entire application suite's menus to onclick for that reason -- take that as a data point.
posted by davejay at 6:36 PM on February 1, 2010 [1 favorite]

Current touchpads can differentiate a gentle graze from a firm touch, they just don't use that functionality right now. I'm not talking about tapping/clicking, but the "normal" touch vs. a really light touch. One day you may request a tooltip by lightly resting your finger on a control, then give it a slightly firmer touch to click it, just like you might rest your finger on a physical button or keyboard key as you consider your action before pressing it down.
posted by pocams at 6:43 PM on February 1, 2010

In some Android apps you can do a tap hold that will bring up a menu, kind of like a right click in a traditional OS. Is something like that workable?
posted by 6550 at 8:03 PM on February 1, 2010

Thanks to everybody for the thoughts and ideas on this. As far as possible, the 'make it work both ways' idea is of course what I will try to do.

It seems that this scenario will no longer be possible: the page would show an image (this is the main content that people are looking at), and rolling over it would bring up a small navigation panel containing links (in icon form) to such things as image background info, title, closeups, etc. etc., along with 'previous' and 'next' controls. This way, when people just want to look at the image, nothing is in the way to distract them; but when they want more, they know how to access it. (This is like the little Flash movie players we see all over the place; roll in to see the controls, roll out to have an unobstructed view.)

But without 'mouseover', such navigation panels will either have to be there all the time, taking up room and adding clutter, or would have to be brought into view by a 'click' on the image, then sent away wiith a 'dismiss' icon on the navigation bar. That's doable, but I think much more clumsy ...

And as for the site's main navigation menu, which would normally be a 'roll-over to see drop-downs', I'll have to go with a simple 'click to open' style.

I think webpages are really going to have to change in this new era, because - as mentioned above - we're now so used to hovering around to see what's clickable ...
posted by woodblock100 at 10:02 PM on February 1, 2010

My NEC Versa LitePad uses a stylus, and you can mouseover things by holding the stylus close to the screen, but not quite touching it.

But without 'mouseover', such navigation panels [...] would have to be brought into view by a 'click' on the image, then sent away wiith a 'dismiss' icon on the navigation bar. That's doable, but I think much more clumsy ...

Why not use mouseover-or-click to open, mouseout-or-click-outside to close?
posted by Mike1024 at 12:21 AM on February 2, 2010

> the page would show an image (this is the main content that people are looking at), and rolling over it would bring up a small navigation panel containing links (in icon form)

Well, hopefully you're already using some kind of icon or other visual element to indicate that there is functionality hidden under mouseover, to avoid the kind of "mystery meat" navigation mentioned above. If so, you might want to make that icon the clickable button that reveals the subnavigation. But yes, in general interface design is definitely going to have to move away from that exploratory approach towards clearly delineated buttons I'm afraid. What we'll lose in playfulness and visual simplicity we'll hopefully make up for in immediacy, so it's not all bad.
posted by iivix at 12:29 AM on February 2, 2010

I currently use a touchscreen tablet, and I can tell you that many, many sites are virtually unusable because they have chosen to make certain things only visible on hover. Those who make things also visible on click or on mousedown are much better (I prefer on click, because then I don't have to keep my stylus on the screen, potentially blocking what I'm trying to look at). Sometimes I can approximate hover by touching down elsewhere and then dragging the cursor to the area intended, but it is a clumsy workaround.

I don't intent to get an iPad, but I am looking forward to more sites designing with them in mind, not only for things such as avoiding hover menus, but also smaller screen resolutions.
posted by timepiece at 9:53 AM on February 3, 2010

smaller screen resolutions

You mean smaller screen sizes, no? Resolutions on these mobile devices seen to be very high, and that's a whole other question - what sort of image data to feed them, to allow for scaling up without distortion ...
posted by woodblock100 at 6:48 PM on February 3, 2010

Both. I have a 12.1" screen with a max resolution of 1280x768; I usually use it in portrait orientation, so that means my width is 768 pixels. Many sites require me to sidescroll at that width, which I don't consider to be that tiny.
posted by timepiece at 5:47 PM on February 4, 2010