How to use hover in a user interface

By: Christi Juchmes, product marketing engineer, Cypress Semiconductor Corp.

Hover sensing combines self and mutual capacitive sensing to create a mouseover-like functionality in a handheld device, including magnification and simplified text selection. Here are some of the capabilities and applications of hover technology in handheld devices.

Hover sensing is a rapidly emerging technology for handheld device user interfaces (UIs), with the potential to revolutionize the user experience (UX) for mobile devices. Hover detection changes the fundamental navigation functions on mobile devices by emulating “mouseover,” delivering easier, more accurate interface navigation for handsets, GPS systems, and other mobile applications. The technology is rising quickly in importance among major OS developers; most indicators point to this becoming a major market trend within the next two years. It allows us to interact with touchscreen devices in ways that solve common UI problems, and it presents exciting new possibilities, some of which I explore in this article.

Keep your gloves on

Gloves greatly hinder touchscreens from sensing the capacitance of a fingertip, making navigation and selection all but impossible. However, users in cold climates need a more realistic solution than removing their gloves any time they need to operate their devices. For handheld device designers, achieving real touchscreen performance for the gloved user has long been difficult. Many touchscreen-controller manufacturers attempt to resolve the issue by dramatically slowing down screen refresh rates and lowering the noise threshold to allow the sensor to pick up very small touches, such as those produced by a gloved finger. Demonstrations of this functionality may appear to work but are typically conducted on a demo kit in a safe, noise-free environment.

In an actual device, noise is unavoidable. Once you take the technology contained in the demo kit and build it into a system where noise is present, the lowered thresholds and increased sensitivity that allowed the demo to work with gloves makes the controller much more susceptible to phantom touches due to noise spikes, as Figure 1 shows. In real systems, that glove functionality falls apart very quickly, leaving the glove-wearing user with an unresponsive, inaccurate touchscreen that has a higher incidence of false detection even when operated by bare hands.

How to use hover in a user interface
Click on image to enlarge.

Hover technology enables real operating capabilities even with thick, heavy gloves. The touch sensor “sees” finger movements even without the finger touching the screen. The technology also eliminates the false touches and performance disruption caused by the lower noise threshold needed for glove operation. For those with long fingernails, especially the acrylic type, hover technology also provides better navigation for a better UX. Touch sensors have difficulty sensing fingernail input for much the same reasons as with gloves. Hover functionality allows the widespread use of touchscreens regardless of climate, gloves, or fingernails.

Touch redefined

Hover offers many possibilities for current handheld applications. For example, hover could be used to preview your e-mail inbox on a mobile device by hovering your finger over your new e-mails to see the first few sentences. If the e-mail demands immediate attention, you use direct selection to open up and respond to the entire message. Another potential application is personal media players, especially those with streaming capabilities. Hover could allow users to preview a song or play a movie trailer before downloading. Users could then use direct touch input to select. Handheld gaming applications are also poised for increased functionality. No longer limited by simple taps or gestures, game designers could add new commands and options with the addition of hover.

The development of hover technology allows handheld devices to deliver the functionality of a personal computer. Hover makes it possible to design a “mouseover” function for mobile devices. Users could hover over an area of the screen to magnify text, such as a clickable link or keys on an onscreen keyboard for easier selection, as shown in Figure 2.

How to use hover in a user interface
Click on image to enlarge.

It could also be used to view additional information; for example, you could use hover while scrolling through contacts in your mobile phone to see a person’s contact information and history, such as phone calls and text messages sent. It’s not unrealistic to think that a social networking mobile app could utilize hover to enable a user to see a preview of another person’s profile, photos, or previous posts without direct selection. Or users could preview content on video-sharing sites like YouTube. You could use hover in GPS devices or map apps on a mobile phone to browse nearby amenities like restaurants without navigating away from the current map.

Hover also allows for a new and simplified method of text selection. Accurately placing a small cursor with a tap and then dragging a finger to highlight text can be difficult, and increases the possibility of improper cut, copy, or place commands. Hovering could be used to select text, while direct input could be used to open the command menu and select specific commands.

Hover has even more possibilities beyond current applications. Three-dimensional displays are a hot market trend. With 3D interfaces, users may want a 3D way to interact. Hover could enable you to navigate through multiple open applications on a 3D display, bringing different applications to the front of the screen while other open apps are still visible behind it. If you’re playing a game on your mobile phone, for example, and get a text message, you could hover your finger over the incoming message to open it up and read it without having to close or navigate away from the game.

Designing hover into a mobile device does more than just create new commands and capabilities. In capacitive touchscreens, the issue of Z-Force is a recurring problem. In this type of touchscreen, Z-Force is a measure of cross-sectional area and signal, not a measurement of touch pressure, as it is in resistive touchscreens. When you apply more pressure with your finger, it flattens against the screen, increasing the cross-sectional area of the finger/touch. A Z-Force measurement then evaluates the wider area touched by your fingertip to calculate force used. This is an issue because by relying solely on area and signal, the touch controller has difficulty telling the difference between a light touch with a large finger and a hard press with a smaller finger.