Icons: Avoid Temptation and Start with User Needs (NHS Digital)
A 2019 NHS Digital blog post by an interaction designer on the NHS website redesign, describing how the team audited, cut, and tested the site’s icons.
License: Open Government Licence v3.0 — inferred from NHS England’s website terms and conditions (section 8.1: NHS England content is released under the OGL “except where specified”), rather than a per-page statement.
Key points
- Very few icons are recognized by everyone: home, print, and search. Expecting users to understand a non-universal icon is compared to expecting them to learn a new language.
- Icons still have real advantages when they’re quickly recognized: they make good targets for fingers and cursors, and they can overcome language barriers.
- The old site had more than 30 inconsistent icons used for navigation, decoration, and buttons.
- The team audited each one: what existed, what user need it met, whether users understood it, whether it was essential, and whether it was accessible.
- Keeping only icons that met a specific user need or were essential to the page cut the set to 15, and testing reduced it to 11.
- Icons that are used should look like one family. The team drew its own rather than mixing in free icon sets.
- A hamburger icon isn’t universally understood, and making it accessible would have needed a supporting label anyway. The team tested the plain word “Menu” instead, and users had no trouble finding information through it.
- Exclamation-mark icons on warning boxes backfired in testing. Some users skipped the boxes, likening them to advertising. Others who read them overrated their importance, mistaking them for something more urgent than emergency “call 999” messaging. Replacing the icon with the word “Important” fixed both problems on retest, and dropping the information icon in favor of a colored left border highlighted content without overstating it.
- Some icons tested well: ticks and crosses reassured users on do/don’t lists, and arrow icons drew attention to action links while users still read the link text.
- The tested set only holds for the contexts it was tested in. Add icons only when research shows something is missing.