Knowledgebase

Designing Buttons and Actions Print

  • uiuxdesign, guide, howto, solution, zillionkinghost, hosting, support
  • 0

Things people click.

WHAT A BUTTON MUST COMMUNICATE

That it is clickable What it does Whether it is the main action

WHAT MAKES SOMETHING LOOK CLICKABLE

Consistent styling used only for actions Sufficient contrast A shape people recognise

WHAT BREAKS IT

Styling non-clickable things the same way Styling actions differently in different places

WHAT TO LABEL BUTTONS WITH

The action they perform, specifically.

"Save changes", not "OK". "Delete account", not "Confirm".

WHY

People click without reading the surrounding text.

WHAT TO DISTINGUISH

The primary action, visually stronger Secondary actions, present but quieter Destructive actions, clearly marked

WHAT SIZE

Large enough to tap reliably on a phone.

WHAT SPACING

Enough that adjacent actions are not hit by accident.

Particularly where one is destructive.

WHAT TO PROVIDE

Feedback on press, and an indication when something is processing.

WHAT TO PREVENT

Double submission.


Was this answer helpful?
Back

Are you happy with your experience? Leave us a review on Trustpilot.


Trustpilot