Create list of prioritized UX patterns

[johanstromqvist]

See list of prioritized patterns at the bottom of the thread

Tasks

Preview Give feedback

1. Explore the patterns builders struggled with the most during Uplift
2. List and make scrappy prioritization of potential patterns
3. Suggest shortlist of prioritized patterns (with time constraints in mind)

[johanstromqvist]

Builder struggles

• General card and form layouts; spacing/grouping, action mapping
• Action types: button styles, icons, what actions

What builders need to learn and reference

• For all patterns: How to design and how to compose components
• The anatomy and layout of a default card; specs and examples
• Common variations of a card

Suggested patterns

• Common card layout patterns
  • Default/simple card
  • Common main/side card
  • Cards with form layout
    • Vertical stack/field group
    • Empty/populated
    • With labels, help text, tag lists
  • Dealing with bespoke elements
• Common actions
  • Page actions
    • Create, Delete, Duplicate, Import, Export, Archive, Print, Preview/View, Edit/Save
  • Actions in cards
    • Create (add to list), Read (view), Update (edit & manage), Copy to clipboard
    • Mapping: which goes where, and why
    • Using icon-only buttons
    • Grouping actions
    • List item actions
    • Resource links
    • Disclosure: dealing with long lists

[johanstromqvist]

Refined shortlist layout

Card layout model

The card layout model is a simple framework that enables builders to arrange content effectively and consistently.

• Anatomy: named parts and the relationships between them
• Default gaps: using semantic tokens to group content clearly and consistently
• Common exceptions: known work-arounds when the defaults fall short
  • Dealing with long lists
  • Optically adjusting layout
  • Dealing with excessive display texts

Card patterns

Card patterns show how the layout model is applied to create common card types, as well as when and how exceptions are applied.

• Single section card patterns
  • a card with a single list
  • a card with multiple inputs
  • a card with a single input
  • a card with bespoke content
• Grouped card patterns
  • a card with multiple lists
  • a card with two form layout groups
  • a card with groups of mixed content

Admin examples

Pattern	Side card	Main card	Priority
single list	sales channels (discounts), conversion summary	media	P1
multiple inputs	product organization	-	P1
single input	status card	-	P2
bespoke list	fraud card, tax exemptions	-	P1
multiple lists	publishing card	-	P1
two form sections	-	-	P2
mixed content	customer card	-	P1

[johanstromqvist]

Refined shortlist actions

Resource actions

Resource CRUD

• Create
  • Primary action on index page (P2)
  • Duplicate action on details page (P3)
  • Import action on index page (P3)
• Read
  • Index page (P5)
  • Resource list (P5)
  • Resource link (P2)
• Update
  • Edit and save on details page (P3)
• Delete
  • Delete bulk action on index page (P5)
  • Delete action on details page (P3)
  • Archive action on details page (P4)

Other common actions

• Print (P3)
• Preview (P3)

Card actions

• Icon-only actions (P1)
• Grouping actions (P1)
• Update (previously edit and manage) (P1)
• Show more (P3)
• View all (P3)
• View object, such as "Report" (P3)
• Add to list (P3)
• Learn more (P3)

Item actions

• Hover item to reveal action (P2)
• Stacking item actions (P2)
• Copy to clip board (P2)

[johanstromqvist]

Shortlist

Card layout

1. Single section with a single list, such as sales channels on discounts
2. Single section with multiple inputs, such as product organization
3. Single section with bespoke content, such as fraud card
4. Multiple sections with multiple lists, such as publishing card
5. Multiple sections with mixed content, such as customer card

Card actions

1. Common placements
2. Icon-only actions
3. Update action (previously edit and manage)
4. Grouping actions
5. List item actions

Next steps

• Create Github epic with selection, ranked runner-ups, and scope considerations (such as main card list patterns)
• Outline each pattern in separate GitHub issues
  • A visual
  • A 3 bullet point outline of critical builder needs
  • A note on each need what might solve it
• Sketch what a pattern page might look like

[chloerice]

Highest priority patterns for this cycle:

• Banner (and anti-banner)
• Modal
• Onboarding