UI (User Interface)
UI (User Interface) explained
A button involves more than colour and shape. Its label announces an action; its state indicates whether that action is currently available. Input needs recognisable feedback. Design normal, focus, loading, success and failure states together.
Visual hierarchy helps people understand content and actions. Recurring elements should retain a coherent meaning. Brand character can be expressed through typography, colour, imagery and motion while keeping operating cues clear. Animation needs a concrete purpose and consideration of different usage circumstances.
A design system can provide shared components and rules. It does not replace testing their combination in a particular journey. One accessible component does not guarantee an accessible form; labels, sequence, errors and focus handling work together.
Creative Engineering connects design and technical execution through to the actual outcome. An approved design also needs to work with real content, long translations, small screens and failure cases. Test operation in the finished product and document remaining limitations.
Examples
Hypothetical application
An enquiry form displays a green check mark immediately after submission while saving is still in progress. The team separates loading from confirmed acceptance and adds an understandable error message. The whole journey is then tested using a keyboard and a narrow screen.
Key Points
- Design elements and state changes together.
- Align labels with the actions actually performed.
- Test reusable components in their particular journey.
- Connect brand expression, clarity and accessibility.
Practical application
Check important actions with normal, long and missing . Test all relevant states and input methods through to correct feedback.
Useful measures
Understandable operation
Observe whether labels, states and feedback are understood correctly.
Correct journeys
Compare input and visible confirmations with actual processing.
Consistency and accessibility
Check components in relevant combinations, sizes and input methods.
Common mistakes
- Approving static screens while omitting states.
- Showing confirmation before the corresponding operation is confirmed.
- Treating individual scores or components as complete proof of quality.
Sources and context
- Nielsen Norman Group: The Definition of User Experience
Foundational account of UX and its distinction from user interface and usability.
- W3C: How to Meet WCAG
Technical criteria for accessible web content, not legal approval of a particular website.
Frequently Asked Questions about UI (User Interface)
No. The interface also includes input, states and feedback. Voice interfaces, for example, exist alongside graphical ones.
No. Shared rules can help. Content and the way components are combined need testing in the particular journey.
No. Automated checks capture only part of quality. Also test actual tasks, keyboard operation, resizing and relevant assistive use.
Loading related terms…
All TermsArticles about UI (User Interface)
Marketing as an Operating Discipline: Why Almost Every CMO Talks About AI and Few Have Built It
The gap between intent and execution is not a technology problem, it is an operating model problem. How to move marketing from a project organisation to an operating discipline with systems, roles and cadence.
GEO in practice: Customer questions and evidence
A practical GEO review: choose customer questions, check content gaps and technology, add evidence and assess suitable enquiries.
AI as a Conversation Partner
When people ask AI for advice, it's not about technology – it's about trust. What brands should learn from this.