12 common UI mistakes and the fix for each
Interfaces that look off tend to make the same dozen mistakes, and each one has a specific fix. The tables below list twelve, with a quick way to spot the problem and the repair. Start with the three that stop people finishing a task: unreadable text, vague error messages and targets too small to hit.
Layout and hierarchy mistakes
| Mistake | How to spot it | Fix |
|---|---|---|
| 1. Everything is emphasised | Several filled buttons, bold labels and coloured badges compete on one screen | Keep one filled button. Turn the others into outline or text buttons and use bold for headings only |
| 2. Spacing chosen by eye | DevTools shows gaps such as 13, 17 and 22 pixels | Allow only the steps of one scale, for example 4, 8, 12, 16, 24, 32 and 48 |
| 3. Near-miss alignment | Left edges differ by two or three pixels between title, text and button | Put the elements in one container and space them with flex or grid gap, not with individual margins |
| 4. Boxes inside boxes | Cards sit within cards, and borders, shadows and dividers all appear together | Remove the inner containers and group with whitespace. Keep a border or a shadow, never both |
Text and colour mistakes
| Mistake | How to spot it | Fix |
|---|---|---|
| 5. Too many type sizes | A count of font sizes across three screens gives eight or more | Cut to a set such as 14, 16, 20, 24 and 32 pixels and two weights |
| 6. Lines that run too long | Body text spans the full width of a desktop window | Cap text blocks at about 70ch, which gives lines of roughly 50 to 75 characters |
| 7. Light grey text | A contrast checker reports less than 4.5:1 for body text | Darken the text until it passes. #6b7280 on white, for example, comes to about 4.8:1 |
| 8. Colour as the only signal | In greyscale, a field with an error looks like any other field | Add an icon and a text message to the red border, and underline links inside body text |
Interaction mistakes
| Mistake | How to spot it | Fix |
|---|---|---|
| 9. Placeholder used as the label | The field's description disappears once you type | Place a visible label above the field. Use the placeholder for an example value at most |
| 10. Vague error messages | The form answers with Something went wrong or Invalid input | Name the field, state the problem and the expected format, and leave every entered value in place |
| 11. Missing states | A new account shows a blank page, and a slow request shows a spinner without end | Design empty, loading, error and success states for each key screen |
| 12. Tap targets that are too small | People hit the neighbouring icon, or a 16 pixel icon has no padding | Give every target at least 24 by 24 CSS pixels, and 44 to 48 on touch screens by adding padding around the icon |
Why these mistakes keep appearing
None of the twelve comes from bad taste. They come from screens being built one at a time, by different people, under deadline, with no shared values to copy from. Each developer picks a gap that looks right on that day. After a year the product contains dozens of slightly different decisions.
That is why fixing individual screens only helps for a while. The lasting repair is to move the decisions into one place: named variables for colour, spacing, type size and radius, and one shared component each for button, input and card. Once a wrong value is harder to type than the right one, the mistakes stop coming back.
Which ones to fix first
Order the work by harm to the user, then by how many screens one change reaches.
- Mistakes 7, 10 and 12: they prevent people from reading, recovering or tapping.
- Mistakes 9 and 11: they cause confusion at the moments people are least sure of themselves.
- Mistakes 1 and 2: one change to button styles and spacing variables improves every screen.
- Mistakes 5 and 6: usually a few lines of CSS.
- Mistakes 3, 4 and 8: tidy these screen by screen as you touch them.
What this list does not cover
All twelve are surface faults. If people cannot find a feature, do not understand what the product is for, or need eight steps for a task that should take three, polishing the surface will not help. Those are structural problems, and the redesign or refactor page of this site covers how to recognise them.
Common questions
What is the most common UI mistake?
Inconsistent spacing is the one that shows up most often in products built without a designer. Gaps are chosen by eye, screen by screen, so nothing quite lines up. It is also the cheapest to repair: define a scale based on 4 pixels, replace every off-scale value with the nearest step, and the whole product looks more deliberate.
Can I fix these mistakes without changing the layout?
Yes. All twelve can be repaired in place. Contrast, type sizes, spacing values, labels, error text and target padding are changes to styles and copy, not to structure. That makes them low risk: existing users find everything where it was, and it simply becomes easier to read and use.