Patterns
Overview
Patterns are a way to combine different components to help a user carry out a task. The task could be entering information, such as an address or phone number, or helping users download a file or correct an error.
Each pattern has guidance on:
- when to use it
- how to use it
- how to check it for errors
- user research done on it
You are welcome to contribute a new pattern or a change to an existing pattern.
Ask users for...
These patterns are used to request specific information or actions from users, such as entering a date or uploading a file.
Access codes
Ask users for access codes securely and clearly, ensuring they understand why it's needed.
Addresses
Collect user addresses in a structured format that supports validation and international variations.
Dates
Help users enter known dates accurately using a clear format which uses three input components.
Durations
Help users to input time durations in a consistent and understandable format.
Email addresses
Request email addresses with validation and guidance to ensure correct formatting.
Feedback
Provide a form for asking users to enter their feedback on a service or survey.
Names
Ask users for their names using inputs for full name or first, middle, and last names.
Numeric values
Collect numeric data like quantities, percentages, or financial figures with clear labels and validation.
Passwords
Help users to create a password to access a service or respond to a survey.
Phone numbers
Request phone numbers using the input component and input label to let users know what type of phone number you need.
Relationships
Help users define household relationships between household members clearly, supporting various family structures.
Help users to...
These patterns support users in completing tasks or understanding content, like confirming details or correcting errors.
Change language
Allow users to switch between English and Welsh easily at any point in the service.
Check answers
Allows users to check the information they have previously entered and confirm it’s correct before submitting it.
Control cookies
Allow users to choose which cookies are enabled when using your service.
Correct errors
Show clear error messages and guidance when users enter invalid or missing information.
Create an account
Help users to create an account when they need to access your service or are invited to take part in a survey.
Extend a session
Warn users before session expiry and allow them to extend the amount of time given.
Save and sign out
Let users save progress, sign out, and return later to continue the service.
Send a web form
Allow users to contact support or give feedback via a simple message form.
Send and reply to messages
Display a conversation thread between internal and external users clearly.
Pages
These patterns provide structured page layouts for services.
Confirmation page
Thank users and confirm their response has been submitted at the end of a survey.
Error and status pages
Inform users there is a problem with the page they are trying to view or with the whole service.
Guide
Present a collection of related pages that help users understand and navigate a topic or subject.
Hub and Spoke
Let users complete a survey section by section, in their preferred order.
News
Display, tag, and categorise news articles for easy browsing and relevance.
Question
Ask users for responses using structured question pages, with optional or mandatory fields.
Survey interstitial page
Provide guidance to users by separating subsections of questions in a repeating section.
Survey section introduction page
Provide guidance and context for a section within a hub and spoke questionnaire.