WEBVTT

00:00:00.000 --> 00:00:06.000
What is a UI component?

00:00:06.000 --> 00:00:13.000
It is a reusable interface building block with a defined purpose.

00:00:13.000 --> 00:00:18.000
Check behaviour as well as appearance.
6 component checks.

00:00:18.000 --> 00:00:30.000
Give it a specific job
A button, input or notification solves a particular interface problem.
Clear purpose · Suitable control · Expected behaviour

00:00:30.000 --> 00:00:42.000
Define its states
The component may need focused, selected, disabled or error presentations.
Normal state · Interaction state · Feedback state

00:00:42.000 --> 00:00:54.000
Keep the wording useful
Labels and messages still need to make sense in this page.
Specific label · Helpful instructions · Relevant feedback

00:00:54.000 --> 00:01:06.000
Check keyboard behaviour
A reusable visual style also needs a usable interaction.
Reachable control · Visible focus · Expected activation

00:01:06.000 --> 00:01:18.000
Try real content
Long labels, small screens and translated text can reveal layout problems.
Realistic wording · Narrow viewport · Flexible layout

00:01:18.000 --> 00:01:30.000
Review shared changes
An update to a reused component can affect many pages.
Affected pages · Tested behaviour · Documented change

00:01:30.000 --> 00:01:39.000
Your checklist
Give it a specific job · Define its states · Keep the wording useful · Check keyboard behaviour · Try real content · Review shared changes

00:01:39.000 --> 00:01:47.000
Reuse a suitable component and test it in the complete page.
jerseyweb.je