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-readers1, 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.

Footnotes​

  1. World Wide Web Consortium. WCAG 2.1 Quick Reference. https://www.w3.org/WAI/WCAG21/quickref/ ↩