What are UI and UX?
An interface is the meeting place between a person and a machine. On a phone it is the screen; on a lift it is the button panel.
- UI (user interface): the parts you see and touch: buttons, icons, menus, text, colours, layout.
- UX (user experience): the whole feeling of using it: Can I find things? Is it quick? Do I feel safe or confused?
A beautiful UI can still give a bad UX if the task takes too long. A good designer cares about both.
Who is the user?
Designers first learn about real users: their age, skills, language, device and goals. A persona is a short made-up profile of a typical user, such as "Meena, 62, uses a phone mainly for video calls and payments."
Principles of a good screen
- Hierarchy: the most important thing is biggest, boldest or highest.
- Layout and grid: line things up; group related items together; leave white space.
- Tap targets: buttons at least about 9 mm (48 px) so fingers do not miss.
- Thumb zone: on phones, put main actions in the lower middle where the thumb reaches.
- Contrast and colour: dark on light (or light on dark); never use colour alone to show meaning, add a word or icon too.
- Consistency: the same button looks and works the same everywhere.
- Feedback: after a tap, show something (a tick, a sound, a loading bar).
- Forgiveness: let people undo mistakes and confirm before something can not be undone.
User flows, wireframes and prototypes
A user flow is the chain of screens a person goes through to finish one task, for example: open app → choose item → pay → done. Counting steps and taps shows where to cut.
- Wireframe: a simple black-and-white sketch of a screen with boxes for title, picture, text and buttons. No colours yet; it is about placement.
- Mock-up: a finished-looking picture with colours, fonts and icons.
- Prototype: a clickable model (paper screens or a design tool) that lets people try the flow before any code is written.
Try it at home
Draw 4 phone screens on paper for "order a cup of tea". Ask a family member to "tap" with a finger while you swap the papers. Note where they hesitate, then redraw that screen.
Testing and designing for everyone
User testing: give real people a task, watch silently, note where they get stuck, then improve. Five users usually find most big problems.
Accessibility means everyone can use it, including people with weak eyesight, colour blindness, shaky hands or who use screen readers:
- Text that can be enlarged and has strong contrast.
- Big tap targets with space between them.
- Labels for icons and images so screen readers can speak them.
- Simple words and the user's own language.
Good UX is also honest: no tricks that push people into buying or sharing data by mistake ("dark patterns").
Key formulas and definitions
- UI = what you see and touch; UX = how the whole task feels
- Minimum tap target ≈ 9 mm ≈ 48 px (density-independent pixels)
- Taps in a flow = number of screens − 1
- Hierarchy: big, bold, top = seen first
- Wireframe → mock-up → prototype → user test → improve (repeat)
- Persona = short profile of a typical user
Worked examples
1. A flow has these screens: Home, Search, Product, Cart, Address, Pay, Done. How many taps (moves between screens) are needed?
7 screens, so 7 − 1 = 6 taps. Saving the address after the first order could remove one screen and one tap.
2. A button is 5 mm wide on screen. Is it a good tap target? What would you change?
No, it is below about 9 mm. Make it at least about 9 mm (48 px) wide and tall, and leave space between neighbouring buttons.
3. A form shows errors only by turning the box red. Why is that a problem, and how do you fix it?
Colour-blind users may not see the red. Add a clear message in words ("Enter a 10-digit phone number") and an icon next to the box.
4. An app for older users has a small grey "Next" link in the top corner. Suggest three improvements.
Make it a large button (≥ 9 mm), place it low in the thumb zone, and give it high contrast (dark button with white text) and a clear word like "Continue".
Common mistakes
- Thinking UI and UX are the same. A pretty screen can still be hard to use.
- Making buttons too small or too close together for fingers.
- Using colour alone (red/green) to show meaning.
- Designing for yourself instead of testing with real users.