Two bus apps
App A has one big green button: "Buy a ticket". You tap it, pick your stop and pay. Done in three taps.
App B has twelve small buttons, all grey. Some say "Go". One of them takes your money and does not tell you.
Both apps work. Only one is nice to use. The difference is called user experience.
Key words
| Word | What it means |
|---|---|
| User experience (UX) | How a person feels when they use a product. Is it easy, clear and pleasant? |
| Consistency | Things that look and work the same way everywhere. |
| Information hierarchy | Putting information in order of importance, so users find things. |
| Visual hierarchy | Using size, colour and position so the important things are easy to see. |
| Confirmation | A message that tells the user what happened. |
| User control | The user can move around, undo and fix mistakes. |
| Accessibility | Making a product usable by as many people as possible, including people with disabilities. |
| Brand | The name, colours and style that make a company known. |
The cells students fill in are left blank in this preview.
Six UX principles
| Principle | In simple words | Good example | Bad example |
|---|---|---|---|
| Consistency | Same look and same behaviour everywhere. It is easy to learn once, pleasing to look at, and it makes the brand known. | Every Save button is blue and on the right | Save is green on one page and a link on the next |
| Information hierarchy | Group things and put the key things first. | Menu: Home, Tickets, Help | A list of 40 links with no order |
| Visual hierarchy | Important things look important. | A big Pay button | Pay is the same size as Cancel |
| Confirmation | Tell the user what happened. | "Ticket bought. Check your email." | The screen goes blank after paying |
| User control | Easy to go back, cancel and undo. | An Undo button after deleting | No way to leave a form |
| Accessibility | Works for many kinds of people. | Big text, dark text on a light page, a text note for each picture | Pale grey text on white |
The cells students fill in are left blank in this preview.
Two hierarchies
Information hierarchy is about order and groups. Which things go together? Which comes first? A menu with a few clear groups is easy to use.
Visual hierarchy is about looks. A bigger, bolder, brighter thing is seen first. So make the most important thing the most noticeable.
Try it: make Pay easy to see
<h2>Your ticket</h2>
<p>Route 42, one adult. Price: £2.50</p>
<button class="cancel">Cancel</button>
<button class="pay">Pay</button>
Quick check
Have a go
Quick check
4 questionsYour answers are marked here and are not kept. A college account keeps every student’s marks.
Confirmation and control
Confirmation has two jobs. It tells the user an action worked. It also warns before something that cannot be undone, such as deleting an account.
User control means users can go back, cancel or undo. Do not block them. Do not ask "Are you sure?" for every small click, or people stop reading the message.
Try it: a confirmation message
<button id="buy">Buy ticket</button>
<p id="msg"></p>