
Icons: Avoid temptation and start with user needs - open-source-ux
https://digital.nhs.uk/blog/transformation-blog/2019/icons-avoid-temptation-and-start-with-user-needs
======
deanclatworthy
The UK government doesn't get enough credit for the work they do on making
their information accessible. They publish all kinds of open-source research,
the sites are built from the ground-up with accessibility in mind, and they
are incredibly lightweight.

Try a few for yourself:

\- [https://www.nhs.uk/](https://www.nhs.uk/) (833kb)

\- [https://www.gov.uk/](https://www.gov.uk/) (428kb)

~~~
mbrock
Really good stuff!

It’s kind of sad to see the cookie warning on first visit to an NHS page—from
an accessibility point of view. If you’re sick and maybe older and you go to
find some health information, the first thing you want to see isn’t “We’ve
placed some small files on your computer called cookies. Are you okay with
that?” It’s an almost nonsensical, bizarre question for anyone who isn’t an IT
expert.

~~~
deanclatworthy
Unfortunately it’s the law. But I completely agree. I’d argue it’s
inaccessible for everyone too.

~~~
onli
Which law? It's not what the GDPR is requiring.

~~~
deanclatworthy
EU cookie law [1].

[1] [https://eur-
lex.europa.eu/LexUriServ/LexUriServ.do?uri=CELEX...](https://eur-
lex.europa.eu/LexUriServ/LexUriServ.do?uri=CELEX:32002L0058:EN:HTML)

~~~
onli
That does require no such thing. See the comment below to tgb

------
NeedMoreTea
> We had proved through testing that buttons with rounded corners looked more
> ‘clicky’, so we styled our icons similarly

> but, while hamburgers are used on a lot of websites and apps, they aren’t
> universally understood

Again the fashion for extreme flatness, with square icons and buttons that
disappear into the background are shown to be counter productive and user
hostile.

They might "look nice" to some lead designer, but they don't _work_ as well.

Now, if only Google, Microsoft et al were to wake up to this.

The icons the NHS have used seem to nod to hospital signage too - the arrow,
the proportions etc. Probably intentional, working from the same start point,
but not mentioned here.

~~~
epistasis
Agreed 100%. For companies that appear to usually be data driven, the fetish
for minimalism and removal of basic UI affordances in the pursuit of style has
been a bit shocking.

~~~
mgkimsal
the data points to other companies/products/projects doing it, and they seem
to have customers, get funding, and still be in business. I don't even need to
invoke the cynicism of "resume-driven-development" to get to that point, and I
think that's probably as deep as some people go when justifying their design
direction.

------
anoncake
> To our astonishment, a number of users said that they wouldn’t read the
> information in the boxes. They likened them to advertising on news sites

Well done, ad people. I hope you didn't kill anyone.

~~~
mortenjorck
While banner blindness has been a thing for some time, this takes it to a new
level. Apparently years of "You've won a £50 Amazon Gift Card!" and fake
software update bottom-of-the-barrel advertisements have engendered a broader
disregard of genuine alert messages than previously understood.

This seems to invite its own study.

~~~
Illotus
Anything that looks like an ad will be largely ignored. This has been
understood for over 20 years now. However, flashy looking boxes have always
been the first idea that pops into anyones head, so here we are.

------
combatentropy
I've always been a fan of one-word labels instead of icons.

If I understand it, the mind does not look closely at every line of every
letter but reads it in outline. So a word is not much more cognitive load than
an icon.

There is no learning curve, as with icons. With icons, the problem is not
recognizing what the icon looks like (an envelope!) but what it means within
the application (I'm looking at you, GMail).

Selfishly, as a developer, text labels are easier than a folder full of image
assets. But I don't feel bad about it, because it's better for the user too.

DISCLAIMER: These are not absolutes. There are exceptions. The article's tack
is reasonable. I'm saying that icons are overused in general.

~~~
kurtisc
The NHS serves one dialect of one language. If you translate 'menu' into
another language, you may need a classifier, an article, a case, a longer
word, a non-alphabetic script, changing the reading direction, or more.

Scaling this to a website that serves people internationally and needs to have
a consistent branding is much harder than using an icon.

There is a learning curve, it's just one you climbed when you learned the
language (which may not be your own).

~~~
yorwba
The same learning curve applies to icons. If you think you can simply use the
same icons in another language, you're going to confuse a lot of users without
the shared cultural context. I once overheard a woman on an international
flight from Beijing to Moscow explain to her daughter that the "house" icon of
the in-flight entertainment system represented the "main page". The whole
metaphor falls down as soon as there's no "home" in "home page".

~~~
jonfw
I never considered this. Metaphors are very difficult to translate because
while the primary definition of a word may be easily translatable, that
translated word may have slightly different linguisitic properties that make
the metaphor a little more abstract.

In this example, "Home" in english doesn't always just refer to somebody's
primary residence, we also use it as a descriptor or prefix (hometown).

In china, the direct translation for "home" probably isn't also used as a
descriptor, which means that they aren't used to using "home" in a more
figurative sense.

------
Nition
Interesting that they actually had to tone down the "!" important boxes to get
more people to read them because they've been conditioned to tune out brazen
colourful boxes as advertising.

Also shows how important it is to test with real users.

~~~
Arbalest
Just like how I flag "important" emails as junk. Well, almost.

~~~
function_seven
Same with real mail. The more markings on the outer envelope (“Urgent”, “Time
Sensitive!”, “Important Information!!”), the more I know it’s shit.

Real important mail is usually in a plain white envelope, with first-class
postage.

I would gladly pay $2 per stamp if it meant obliterating junk mail. Hell,
charge me $5 a month just for the privilege of not receiving any. Just,
somehow figure out what the true cost of delivering my mail is, and allow me
to pay it instead of having to trash all the “subsidy” crap.

~~~
djur
Important mail also clearly says who it's from. Any time I see mail that's
supposed to mimic the appearance of US government forms (a common example
being having the current year in a large font with the "20" and "19" visually
distinguished in some way, like on a 1040 form) but a vague "Benefits Office"
type sender I know it's junk.

~~~
ytjohn
On the other hand, when I receive a valid credit/debit card, it's a plain
envelope and the sender name is not there. There is a return address, but no
name. But when I receive a pre-selected offer to apply offer with a fake card,
always a name.

~~~
yardstick
I’ve wondered how effective this is in securing post of credit cards. I assume
over time thieves simply remember the return addresses used. Over the years my
banks haven’t changed their return address, so always easy for me to spot the
new card letter.

~~~
megous
> I’ve wondered how effective this is in securing post of credit cards. I
> assume over time thieves simply remember the return addresses used.

It shouldn't matter. Last 10 years or so, my cards had to be activated online
first, before becoming useful.

~~~
yardstick
The concern I have is someone will intercept the card, grab its details, and
then repost it to me. They just have to wait a couple days/weeks and I’ll have
activated the card by then. They will then have my name, address, card number
and ccv values— often enough for online purchases. Some of my cards ask for a
secondary password but not all my cards and not all the time.

Requires someone able to intercept the post (eg corrupt postal employee or
subcontractor), and the ability to create a convincing replacement
envelope/letter, but it is all achievable, and I expect not everyone will
properly scrutinise the envelope/letter/card for signs of tampering. Even for
me, with a new card only once every 3 years or so, how can I tell the
difference between their letter being tampered with and them just using a
new/slightly different design?

~~~
megous
Fair enough. That's probably a case where disputing charges and blocking a
card is a solution.

It may also be possible to pick the card up at the bank (instead of post
delivery). I did that once before, too.

------
leokennis
What I appreciate about this site the most: when I hover a link, its
background turns bright yellow (so I know what I'm about to click) and then
when I click it, it flashes in another shade of yellow (so I see I've clicked
it, and the site "got" my click). A real pleasure to navigate this way.

------
gibolt
This is a great article. Common tools/utilities should strive to be instantly
understandable and consistent.

Hospitals are a mess, public transit is usually unnavigable, and almost all
websites have so many friction points in the name of design that they
literally become unusable in so many 'edge' cases.

------
doodliego
Solid write-up of the issue. Videogames (among others) are a prime offender
with this. Every game has to invent a whole slew of overly designed and
difficult to decipher icons, but a game is often something you move on from
quickly and on to the next one. Forcing users to learn a whole new language so
your art directors can feel special is terrible.

~~~
barbecue_sauce
As a player, having the same iconography in each game sounds terrible and
would result in an almost clinical experience.

~~~
kurtisc
You're right but I've always thought it's a bit sad how many hours must be
spent recreating the same similar assets - concrete, grass, clothes, etc. -
just so people don't have this clinical moment where they recognise something
from another game.

~~~
grenoire
In view of games as art, these are definitely _mandatory_ stylistic choices
involved in creating a unique experience for the players.

------
anitil
I find it bizarre that the NHS website had social share buttons. What would
you share?

~~~
pgl
They have a lot of useful information on the site that's not icky, eg:

* [https://www.nhs.uk/live-well/eat-well/](https://www.nhs.uk/live-well/eat-well/)

* [https://www.nhs.uk/live-well/quit-smoking/](https://www.nhs.uk/live-well/quit-smoking/)

* [https://www.nhs.uk/news/](https://www.nhs.uk/news/)

(However, I can't find the social sharing buttons on that article!)

~~~
anitil
Fair enough, I guess I'm just not the sharing type.

------
laythea
I can only assume that because the site has an nhs.uk address that this is
sponsored by them, appreciate any clarification.

Sorry for sounding like this but I'm not very happy that the NHS is spending
money on these first world problems, when there are people who cannot get seen
with life threatening illness.

~~~
DanBC
By rapidly and accurately delivering health information to the population the
NHS Choices website aims to save money for the NHS - by teach people about
prevention, and by directing people to the right source of help at the right
time.

~~~
laythea
Still - If someone had a life threatening issue, I'm not sure they would think
that the extra money spent on this kind of thing (icons etc) is more
important.

