Skip to main content

Tips and Titbits

Use Empty Space

Empty space is the perfect place to add some help or a hint, or even a default dashboard.

LinearUI

Hiding vs Dimming Controls

Use Dimming

Tooltips on dimmed controls can improve learnability e.g “Available when X is enabled.”, one other point for developers is that UI libraries often offer a 'disabled' state for a control/widget, this can be read by screen-readers, so never just use opacity to dim a control.

  1. The control is relevant, just temporarily unavailable.
  2. You want to preserve the layout to avoid UI shift or disorientation.
  3. The user needs a visual cue about potential features they can unlock.
  4. The control becomes available quickly without a settings change.
    1. e.g if a selection change can enable the control.

Use Hiding

When hiding or revealing controls, consider animating the transition to reduce jarring shifts.

  1. The control is irrelevant or confusing in the current context/ mode.
  2. You want to reduce cognitive load.
    1. e.g Hiding can help avoid visual clutter when many options exist.
  3. The mode switch implies a radically different mental model.
    1. E.g switching from Simple to Advanced modes.