The Power of the Tooltip

Discovery has always been part of our experience in using web sites and apps. They could be in any form:

• clicking an ambiguous icon to find out what it does
• going through multiple pages to find information
• finding out what’s causing an alert icon beside a label
• learning and memorizing keyboard shortcuts

…and the list goes on.

One UI element that helps us in most discovery processes is the tooltip. Users of Windows or Mac have surely encountered it when you hover your mouse cursor on certain items in your computer desktop (maybe by chance or out of curiosity if you don’t want to click something). It is in the form of a box with text label or description.

In illustration 1 we could see that Google Chrome has a stylized rectangle beside its opened tab yet it doesn’t have any icon in it. As a user looking to open a new tab, you either click it to find out if it will indeed open a new tab or hesitate to click it and look for its tooltip to find out beforehand what it does. Fortunately, Chrome provides for a tooltip with the label “New tab”.

Relatively, the tooltip, if absent, poses frustration to the user.

Take for example Mac’s Calendar app in illustration 2. We all love to clear out notifications indicators – they call our attention because either there’s a new item or an immediate action is needed from us. But what if you are still unfamiliar with a web site or app and the notification indicator can’t be activated or clicked and doesn’t even have a tooltip? Then your discovery will be a long journey.

Sure, I could discover the number seven at the sidebar and the one at top toolbar are related but when I first tried to prove that by dismissing one item from the top toolbar icon – hoping that both numbers will reduce to six – nothing happened. I went back after a day or two to wrap up this curiosity and tried to clear out all notifications from the top toolbar and both notification indicators cleared out. Quite not the ideal discovery for me and it could have been easier if there was a tooltip (not to mention if the notification indicator was also active or clickable).

Tooltips in Mobile

On the Gmail app in Android – out of curiosity – I long-pressed the magnifying glass icon and a tooltip appeared with the label “Search” (duh!). I tried the same to the action bar icons in an opened email and they all returned tooltips with their respective labels.

An icon I recently discovered was the “Mark unread” as seen in illustration 3. Although currently, I don’t find any use for it – otherwise, I should have discovered it a long time ago – but since my discovery, I might find it useful.

One thing to note, though, it seems like only icons in the action bar return tooltips – while other icons in the content area of apps which could benefit from tooltips do not show tooltips when long-pressed.

—

Conclusion

Due to the limited space that mobile devices have, icons have come to the forefront of mobile user interface design. They denote information in a little space. But sometimes icons can be unfamiliar especially for new users of web sites or apps.

The discovery process in which users go through remains the same (whether in desktop or mobile) – we hesitate of things unknown, we fear for unrecoverable mistakes from unsure actions. The “long-press, Back, Cancel, Undo actions” – these are our safety nets while navigating and traversing web sites and apps.

The tooltip is a sure way of adding a layer of supplementary information (while being unobtrusive) to help our users in their discovery process.