Background
In the past we've been seeing confusion in product teams which of the various basic interaction elements to choose from in which context. The general user focus guidance would be improved by a guideline for an overarching page interaction element hierarchy.
Description: An overarching guideline to recommend on interaction element hierarchy and choice between:
- links
- normal link
- new/red link
- neutral link (see below)
- normal buttons
- quiet buttons
- primary buttons
- buttons with icons and label or
- icon-only buttons
- secondary buttons, currently quiet progressive and quiet constructive buttons
- groups of buttons, see T327426
Related question, when to use static icons? T301328: Document how to use icons in our projects
History: We're currently missing strong guidelines in the Codex Style Guide on when to choose which of the more basic interaction elements.
Known use case(s): Different interaction elements prioritized in siloed product teams lead to confusing page composition when skins, extensions and external user-interface library
Considerations: This other task is being looped into this task.
User stories
As a designer, I'd like to know which of the DS interaction elements are best used when.
Guideline specification
| guideline spec sheet |
Open questions
- Should a third type of link besides the new/red link be considered for the design system? A neutral link? Related task T311270
- Still an open question, but not blocking this task
- Should this guideline also live in DSG?
- No, this will only live on the Codex site within its Style Guide section. We're archiving DSG - design.wikimedia.org/style-guide will soon redirect to Codex.
Acceptance criteria for done
Design
- Gather an inventory/audit where there is ambiguity of links styled as buttons, or buttons styled as links
- Review current usage of button and link components
- Design the guidelines
Code
- Implement the guideline in Codex