UI Components Explained: Reusable Website Controls and Their States

The six points in the video

This is a silent video. The headings, explanations and labels below reproduce the information on screen.

1. 1

   Step 1: Give it a specific job

   0:18

   A button, input or notification solves a particular interface problem.

   On-screen labels: Clear purpose; Suitable control; Expected behaviour.

2. 2

   Step 2: Define its states

   0:30

   The component may need focused, selected, disabled or error presentations.

   On-screen labels: Normal state; Interaction state; Feedback state.

3. 3

   Step 3: Keep the wording useful

   0:42

   Labels and messages still need to make sense in this page.

   On-screen labels: Specific label; Helpful instructions; Relevant feedback.

4. 4

   Step 4: Check keyboard behaviour

   0:54

   A reusable visual style also needs a usable interaction.

   On-screen labels: Reachable control; Visible focus; Expected activation.

5. 5

   Step 5: Try real content

   1:06

   Long labels, small screens and translated text can reveal layout problems.

   On-screen labels: Realistic wording; Narrow viewport; Flexible layout.

6. 6

   Step 6: Review shared changes

   1:18

   An update to a reused component can affect many pages.

   On-screen labels: Affected pages; Tested behaviour; Documented change.

Common questions

Go further