• Written by Rich McNabb • Proofread & Edited by Claude AI
UX/UI design basics
A quick reference covering the core principles of UX and UI design, from usability and information architecture through to affordances, signifiers and user testing.
Image credit:
UI/UX 101
- Where am I?
Always indicate active navigation states, breadcrumbs, etc. - What do I need to complete?
Dashboard overview, notifications, alerts, comments and a list of tasks to complete and their status. - What am I looking at?
Headings, introduction text, graph information (titles, labels, keys) and use of plain concise English to reduce jargon and uncertainty. - What can I do here?
What elements can I interact with (aka visual clues and signifiers)? - Where do I go to find help?
Search functionality, FAQs, training material, support documents and support contact details.
Intent vs outcome
- Intent: What that person is coming here to do
- Outcome: What is the person expecting when they’re done doing that thing. Match or exceed their expectations.
The usability trinity
- User
- Goal
- Environment
Three measures of usability
- Speed of use
- User satisfaction
- Task completion
The six rules of usability
- The design is based upon an explicit understanding of users, tasks and environments
- Users are involved throughout design and development
- The design is driven and refined by user-centred evaluation
- The process is iterative
- The design addresses the whole user experience
- The design team includes multidisciplinary skills and perspectives.
Context of use
A description of the users, tasks, equipment (hardware, software and materials), and the physical and social environments in which a product is used.
Observations
What people say isn’t as useful as what people do.
How to test a user story
- Is it something a real user would say?
- Does it help you design and prioritise?
- Does it unnecessarily constrain possible solutions?
- Do you have good evidence?
Usability
- Effectiveness: Completion of a task
- Efficiency: Time taken to complete a task
- Satisfaction: The outcome of that task
Information architecture (IA)
Connecting people to the content they are looking for.
- Classification & hierarchy
- Labels and tagging
- Navigation & wayfinding
- Search
Organising information (LATCH)
- Location
- Alphabet
- Time
- Category
- Hierarchy
Interaction Design
The process of identifying design solutions and creating prototype user interfaces.
Affordances vs signifiers
- Affordances: The physical properties of an object that suggest to people how the object can be interacted with.
- Signifiers: The virtual properties on an object.
Usability testing
- Formative usability test: A form of iterative usability testing that aims to find problems with a system so they can be fixed.
- Summative usability testing: A form of usability testing that aims to measure usability metrics such as effectiveness, efficiency and satisfaction.
Where the basics start to matter most
The fundamentals of UX/UI design never really go away. Things like spacing, typography, hierarchy, and accessibility show up in every strong interface, no matter how complex the product becomes. They’re easy to skim past when you’re learning, and easy to forget once you know them, which is exactly when they start causing problems.
Most design mistakes I’ve had to fix later trace back to one of these basics being rushed or skipped early on. Not a lack of creativity, just a missed fundamental that quietly made everything downstream harder than it needed to be.
That thinking carries through projects like a loyalty app designed to feel effortless and a dashboard built to surface what matters, where small decisions compound into clearer, more usable experiences. Get the basics right early, and the complex stuff tends to look after itself.