Page header actions

[robertjmccarthy]

The page header actions component is live in the MoJ Design System.

Use this discussion to suggest changes and improvements to this component.

[murrlipp]

Page header actions discovery

Background

While working on the Button menu component, the MoJ Design System team determined that the Page header actions component was very similar in functionality. We did a discovery to better understand how these two components overlap, and what we could do to support users of Page header actions.

Activities

• Understand and document which components in the MoJ and GOV.UK design systems are similar/linked
• Explore similar components across government and private sector design systems
• Check usage statistics on Figma, Github, and Google Analytics
• Check Slack for relevant conversations mentioning use
• Check Github discussion for issues/suggestions
• Check the suggest a change form
• Build and circulate a survey to discover type of use
• Hold 1:1 sessions for longer discussions, demos, etc.
• Synthesise findings to define improvements based on best practice and user needs

Findings

• Usage of the component within MoJ across coded and Figma components was relatively low
• There is wide cross-government use of the component in coded prototypes
• There was confusion among users between Page header actions and Button menu
• The component worked and tested well when used in accordance with the guidance - actions relating to a whole page, but the guidance was often unclear and misinterpreted
• Some services using Page header actions would have testing insight and audit results available in late 2024
• The maximum amount of actions to be used in Page header actions was ambiguous to users
• Guidance about the buttons reflowing underneath the H1 at narrow screen widths was useful to users
• Some users had concerns about the lack of guidance on accessibility and positioning of actions. These will be met by the revised Button menu guidance
• Many examples from other design systems are patterns that define the whole page header including navigational elements, breadcrumbs, actions, filters, etc

Decisions

Several options were discussed based on the findings:

• Archive the component as the usage is relatively low, and in its current form it is only an H1 with associated actions
• Archive as above, but add an item to the backlog to create a ‘page header’ component with more functionality.
• Continue to support Page header actions in its current form, but add an item to the backlog to create a ‘page header’ component with more functionality.

Option 3 was chosen, and we are making changes to the Page header actions component to accommodate the changes to the Button menu component. A task will be added to the backlog to explore a new ‘Page header’ pattern.