Tooltips in the Era of Touch
The world today involves so much “touching” when it comes to electronic devices. We have phones, tablets, watches, car dashboard screens, refrigerators, ect… You name it there is probably a touch friendly screen of some sort associated with it. Coming from a world of mouse only interactions to touch leaves us with some baggage to deal with when it comes to the interactions we choose as designers.
Take tooltips for example, they were traditionally used to display small bits of information on hover. Commonly seen with ( i ) or ( ? ) icon to provide additional information about a term or action. Simple right? Somewhere a designer, or probably a developer, thought “Hmm, most people wont know what this means so we better add some help for them to understand it.”
Brilliant! Here we are in 2016, some 9 years after the iPhone was introduced, and due to the advances in technology we no longer need to push around a small plastic box that in turn moves around an arrow made up of pixels on a screen. Now, we can simply use our fingers and interact directly with things on the screen. Also don’t forget about accessibility where some users would use only the keyboard to navigate around a screen. Generally speaking an onFocus interaction can solve this for accessibility to provide the same experience as the hover.
So what do we as designers do now when we want an interaction that worked before on hover?
First I would suggest to re-think the item that needs this additional explanation and see if you can make it more clear to begin with. This could mean that the edit icon you are using which when tapped / clicked triggers the edit event could have text placed next to the icon saying “Edit” to make it clear.
As Luke Wroblewski says, “Obvious always wins”.
If making the item on its own more clear is not possible then the next option would be to trigger the tooltip on tap / click. This would work in any case where the item only triggers the tooltip such as the ( I ) or ( ? ) examples.
Finally, if the item must trigger an event and can not show the tooltip on tap / click or present text to clearly identify the action then the worst case is that touch users have to discover the meaning of the item without the assistance of a tooltip. To help users in this situation ensure that if you are using an action that is common, don’t try to invent a new icon to represent it. Use an icon that your users would be familiar with that clearly conveys the meaning of the action that will be performed.
In summary ensure that your designs across all devices regardless of touch or no touch do not require the user to have to think too much to complete whatever task they need. As one of my favorite authors says:
“If you can’t make something self-evident, you at least need to make it self-explanatory.”
― Steve Krug, Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability (3rd Edition)
