<aside> 💡 This page contains all the research and preparation for this article. Feel free to use any of this information for your own purposes! If you cite the published article, I'd ask that you'd please credit me, preferably providing a link to the article or a link to my website at https://www.sergix.dev. Not required, but much appreciated!

</aside>

Question: How do you best clarify the primary action the user should take?

Definitions

Primary action: intended action of a section, such as a dialog confirmation or form submission; "final" action; primary goal; typically positive (https://www.lukew.com/ff/entry.asp?571)

Secondary action: less utilized action; typically negative; alternative to the primary action (https://www.lukew.com/ff/entry.asp?571)

Tertiary action: miscellaneous actions, not the intended (https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112); can have similar style as a secondary action, but need to carry different visual weight (https://uxmovement.com/buttons/visual-weight-of-primary-and-secondary-action-buttons/)

Considerations

• dangerous actions as the primary/default action

  • move secondary destructive actions to a different section than the primary actions
  • de-emphasize the primary action and emphasize the secondary action (https://uxplanet.org/primary-secondary-action-buttons-c16df9b36150)

• order

  • progressive order: Secondary → back, Primary → forward
  • literary order: Primary → read first, Secondary → read second
  • accessible order: primary action on the right is closer for right-handed users on mobile

  Windows User Experience Guidelines — OK first

  Apple Human Interface Guidelines — OK last

  GNOME — OK last

  Material (Android) — OK last

  Linux — OK first

  Java — OK first

  NY State UX Toolkit — OK first (https://apps.labor.ny.gov/ux/doc/v1/design-primary-actions.html)

  https://lawsofux.com/jakobs-law — use patterns common in other applications

  For more than 2 options, the first and last options should be the most important actions the user should take — https://lawsofux.com/serial-position-effect

• color

  • intrinsic associations
  • colorblindness
  • culture differences
  • primary has strong contrast to background; secondary has less

• separation

  • visually separating primary and secondary actions associates with progressive order

• iconography

  • improves visual communication of an action
  • normally pair icon with text; icon-only can be ambiguous

• context

  • disabled secondary action

• consistency

  • the entire interface should maintain the same order and visual weight of each type
  • actions should be buttons, not links; while links reduce visual weight, links communicate a completely different type of user intention

• visual weight (https://www.lukew.com/ff/entry.asp?571)

  • https://lawsofux.com/law-of-similarity — similar designs communicate grouping even with separation; difference in visual style de-groups

• OS differences

• use explicit action verb rather than "OK"

  • finality of action verb; "Cancel" or "Back"?

• only one primary action at one time

  Users have expectations of what a single button on a page will do, based on the page they are on . . . Some sites exploit this assumption on purpose. This is a common dark pattern used when sites don't want you to take action at all (e.g., to cancel your membership). The example below uses all primary action buttons and the result is the user must study each section and read the button text to ensure they take the action they want.

  — https://balsamiq.com/learn/articles/button-design-best-practices/

• placement

  • put full-page primary actions on the left side of the screen (https://balsamiq.com/learn/articles/button-design-best-practices/)