Booklet

author

Mike V Dijssel

Design

How to use tooltips in ul design

design

Design

|

HOW TO USE TOOLTIPS IN Ul DESIGN

Tooltips help users understand unknown or unfamiliar objects that aren't described directly in the user interface. They are a powerful way to simplify a UI.

So, How Do We Use Tooltips in UI?

FIRST..HOWTHEY WORK?
Tooltips are displayed automatically when users hover the pointer over an object, and removed when users click the control or move the mouse, or when the tip times out.

USE TOOLTIPS WHEN.. CONTROLS DOESN'T HAVE A TEXT LABEL
If a button, label, or icon has little to no descriptive text or needs some short explanation. then a tooltip works well for this — toolbar controls and command buttons with graphic labels should have tooltips.

CONTROL BENEFITS FROM A SUPPLEMENTAL DESCRIPTION OR FURTHER INFORMATION.
Tooltips can be a form of grogressive disclosure controls. eliminating the need always to have descriptive text on screen. However. the text must be supplanental — that is, not essential to the prirnary tasks. If it's essential. put it directly in the Ul so that users dm•t have to discover or hunt for it.

RARELY USED FEATURES OR FEATURES THAT CAN BE INTERPRETED DIFFERENTLY.
Tooltips work good for rarely used features users tend to forget about and context-specific

AVOID TOOLTIPS WHEN...
Perhaps the most important rule to follow is to never use tips as a substitute for good design. If a button. or other object requires users to keep checking a tip to understand it, the design is bad. Fix the design instead.
WHEN USERS NEED TO INTERACT WITH THE TIP'S CONTENT.
Users cant interact with tip's content because moving the mouse makes them disappear.

WHEN USERS RUN YOUR APP OR SITE ON A MOBILE DEVICE.
Because tooltips fails to translate well on touch devices. Yes, you can design tooltip to be activated upon touch, but it's not the most predictable interaction for your users. If you need more information for a certain control use a dotted underline to make it clear that the user can interact with the work but to set it apart from a link.

TREAT YOUR UI AS THE LOVE OF YOUR LIFE

More booklets by Mike V Dijssel

More Design booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets