By the end of this lesson you can
- Recognise common interface patterns and when to use them.
- Wireframe forms, tables, lists and dashboards that follow good practice.
- Use established patterns instead of reinventing them.
The idea
Interface patterns are proven solutions to recurring problems. People already know how they work, so using them reduces learning effort.
Forms
Put one column of fields in a logical order, with labels above fields, clear required and optional markers, and helpful hints. Ask only for what you need. Group related fields and break long forms into steps.
Tables
Use tables when people need to compare items across several attributes. Align numbers to the right, keep headers visible when scrolling, allow sorting, and consider how the table behaves on small screens (often turning rows into cards).
Lists and cards
Lists suit scanning many similar items; cards suit items with images and varied content. Keep the structure of each item consistent so people can scan.
Dashboards
Dashboards summarise what matters most at a glance. Start from the decisions people make with the data, show the most important numbers first, give context (compared with last month, against a target), and link to details.
Other patterns
Wizards for multi-step tasks, tabs for related views, accordions for optional detail, modals for focused interruptions. Each has known strengths and pitfalls.
Why it matters in real projects
Using patterns well lets you spend your creativity where it matters, on the problem, rather than on reinventing a date picker. Familiar patterns are faster for users, faster for developers, and usually more accessible because they have been refined over time. Knowing why a pattern works also helps you recognise when it does not fit.
A realistic example
A small accounting tool shows invoices in a grid of colourful cards. Users find it hard to compare due dates and amounts.
The designer replaces the cards with a table: client, invoice number, amount (right-aligned), due date and status, sortable by any column. Overdue invoices get a clear status label. On mobile, each row becomes a compact card with the amount and status most prominent. Users find overdue invoices much faster in testing.
Step by step
Identify the task
What are people trying to do: enter data, compare, scan, monitor?
Choose a pattern
Match the task to a pattern: form, table, list, card, dashboard, wizard.
Study good examples
Look at design systems such as GOV.UK or Material for guidance.
Wireframe with real content
Use realistic data, including long and empty values.
Consider small screens
Plan how the pattern adapts.
Test
Check the pattern supports the task.
Common mistakes
Mistake Using cards when people need to compare.
Instead Use a table for comparison across attributes.
Mistake Multi-column forms.
Instead Use a single column so the path is clear.
Mistake Dashboards full of every available metric.
Instead Start from decisions and show what supports them.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 50 min
Pattern choice
Design screens for a volunteer rota app: sign-up form, shift list and a coordinator dashboard.
Steps
- Choose a pattern for each screen and explain why.
- Wireframe each with realistic content.
- Show how the shift list adapts on mobile.
- List the decisions the dashboard supports.
Deliverable
Three wireframes with pattern rationale.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Patterns are proven solutions people already understand.
- Match patterns to tasks: enter, compare, scan, monitor.
- Design systems are great references.
- Know a pattern's pitfalls as well as its strengths.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
- Components and patterns (opens in a new tab)GOV.UK Design System
- Data tables: four major user tasks (opens in a new tab)Nielsen Norman Group
Your notes
Marking complete updates your course and roadmap progress.