Icons: Avoid temptation and start with user needs | Hacker News Reader

Icons: Avoid temptation and start with user needs

digital.nhs.uk

386 pointsopen-source-ux110 comments

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/ (833kb)

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

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.

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

They could have avoided that easily by not including Social Media and Third Party cookies.

An organisation as large as the NHS/UK GOV is not going to have their own in-house analytics solutions. And I believe even that would require a cookie policy to be displayed under the (current) legislation.

Or alternatively they could just not do any tracking or analytics based purely on the server logs.

There is always a choice. It is not the law that makes them display this, it is their choices that made them need to comply to the law.

You can't do any form of user testing or heatmaps with server logs. And whilst real user testing is undertaken, sometimes the passive collection of heatmap data etc. is best done in an unbiased environment (i.e. you don't know you are being tested).

There are plenty of open-source analytics tools that you can self-host, like Open Web Analytics. You can gather all the information you need for usability testing without handing it over to a third party and compromising the privacy of your users.

Of course they can, but there is always a cost of hosting your own infra. There is a strong argument for the gov to be doing this in house, but I suspect it's not 100% the case and individual departments have the freedom to put their own tracking codes on their own site.

What if they ask for permission in a less intrusive way? Like I dunno, send people an e-mail after using the site once with clear information?

Well, you will need GDPR checkboxes/disclaimers and a form to capture email. How is this more user friendly?

They could make the prompt less intrusive (on average) by only asking a random sample and just not tracking the rest.

I imagine they’re using analytics to improve the website, not to sell you more medicine. Imagine running a hospital without knowing where you had queues, people getting lost, broken doorways, etc. Analytics is just that.

I guess you’re worried about it being used more nefariously, especially by the third-party trackers themselves. If so, I’m also a little concerned about that, but I think the good probably outweighs the bad.

I mean they literally have Google and Microsoft analytics cookies in there.

I am aware that they are doing this to improve their website, but I don't get why so many are saying that it is because of the EU law or that it is a bad law.

Yes they have to show this dialog because of the law, but they decided that it is worth it for their analytics. That was their decision. They could also have said that they would be fine with less analytics and less tracking and gotten rid of the dialog. It can also not see why it is a bad law since it is exactly doing what it is supposed to do: Prevent or inform about tracking by the Tech giants. M$ and Google don't really have a huge amount of trust from the general public that their tracking is the good kind.

Self-hosting is a greater burden for larger organizations?

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

EU cookie law [1].

[1] https://eur-lex.europa.eu/LexUriServ/LexUriServ.do?uri=CELEX...

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

This one: http://ec.europa.eu/ipg/basics/legal/cookies/index_en.htm

I'm surprised you assumed it was GDPR since the cookie popups have been around for years and are hard to miss.

Because they collide. GDPR regulates how to work with private information and makes it absolutely clear that cookie popup informing the user that a cookie was already set is not sufficient. But if the cookie is not used for privacy relevant user tracking, then a popup is not necessary in neither regulation.

Those cookie popups have been a misinterpretation in the first place, the general recommendation for them already redacted by the one data protection agency that first formulated that consequence as requirement based on the regulation from way back then. They are completely out of date now. Note also how the site you link does not require them - it instead completely blocks the site when cookies are not allowed by the user, which is a different beast.

Yeah, it's an incredibly dumb law.

It is also unecessary to have cookies on a gov healthcare website. They can measure/track/count traffic and statistics from their servers' logs and run cookies-free environments. Exactly to reduce stress and confusion to people who lack these basic IT skills.

> Exactly to reduce stress and confusion to people who lack these basic IT skills.

Have you run user testing to see if people who lack IT skills find cookie warnings confusing?

Do you think it would have been missed by Gov.UK's own user testing?

If you don't like tracking you can come out and say that rather than couch it in the language of some voiceless 'confused' IT user.

You'd likely be on former ground too - as the Gov.UK site sets more or less a gold standard for usability.

Besides that, even if you tracked using server logs you are likely using PII so would still need the same warning anyway.

I don't think the law is dumb but the implementation certainly is. The settings should be incorporated into the browser so your browser tells the site what your preferences are. Then you only have to set them once.

The workaround would be pretty simple to implement. Cookies are only needed when you need 'state' between the client and server, so only serve cookies when you need state. The very first instance of state should be the very first instance of a cookie warning. Of course, once you have implemented cookie based tracking, this doesn't work anymore.

It is a lot more simpler then that actually. The law does not say that you need consent for all cookies, you just need consent for some types of cookies. If it is just between the user and your own server for some necessary state information you dont need this dialog.

If they removed the Social Media and Third Party tracking cookies they could remove the dialog completely.

The NHS front-end library is a particularly thoughtful set of interface components:

-https://nhsuk.github.io/nhsuk-frontend/

-https://github.com/nhsuk/nhsuk-frontend

I’ve cherrypicked a few here and there for a number of projects and they’ve worked well.

I love the GOV.uk website. It comes across as very, very well designed (phrased like that because I'm no designer, I can only judge as a dumb user). I use it and most Hugo-based websites as my ideal target for clear information accessibility.

> 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.

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.

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.

Well, NHS seems to have found that a text link (with an icon) is better than a button.

> We also found arrow icons highlight ‘action’ links for users wanting to find help. They're noticeable but, unlike buttons, users actually read the link.

I think it just depends, some things we think are UI affordances aren't, I'm not sure it's just minimalism vs not. Just that you gotta test.

> 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.

Any sources for this? I tend to share this sentiment, but have never really read too deeply into it.

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

To further this, I think it is important to acknowledge too that these design decisions are not made exclusively because they "look nice." There is value in "sameness" when you are competing with other products/brands/sites that have already established a certain style, convention or pattern. After all, we learn and orient ourselves by subconsciously comparing new experiences with ones we've already had. So when you experience similar patterns in a new interface, it drastically decreases the cognitive load in learning how to use it. To your point though, there is a fine line in how effectively you can push simplicity, and there are many subtle visual variables beyond the reductionist square button that could help to improve legibility of elements as distinct components that are largely ignored in current trends.

> Any sources for this?

The article?

I was about to add the same comment. I’m not sure why you are being downvoted.

As part of the UI for something safety critical, yes. But when I'm using a browser and a toolbar is moved behind a hamburger menu, that's a tangible improvement in screen real-estate for the content that I'm using most of the time.

Adobe is arguably the worst offender. They made their app icons look like entries in the periodic table. For marketing purpose, I suppose the scheme is very clever.

> 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.

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.

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.

The cynic in me now expects advertisers to adopt these techniques in future ads. What works well for content creators likely works for advertisers too. It’s sadly a cat and mouse game.

It's already there.... native ads, designed to fit perfectly in the content around it

Ironically, the exact same site greets users with a cookie warning, training them towards the behavior they were surprised about.

Brexit can provide them a way to remove that nonsense. I mean they will be free to adjust their local laws away from EU regulations where needed.

Many sites outside EU jurisdiction still abide by EU privacy/cookie laws. Not all for sure. It is typically easier for a developer to target the most demanding laws for all users vs different experiences and more code paths to dynamically offer based on region. I don’t expect anything to change in this regard.

The bigger problem about these nag screens is the poor UX. I often just accept the defaults because it is far, far quicker than trying to find the Opt out option. I especially hate sites that then take you to a config screen to pick and choose from providers. All I want is a binary Yes or No, with each option getting equal equivalence in the UI.

> I often just accept the defaults because it is far, far quicker than trying to find the Opt out option.

That is why opt-out is illegal.

Agreed. I guess the sites I'm complaining about are technically opt-in by legal terms, although opt-out in usability terms (making the no tracking option far more hassle than the yes tracking option)

The legal definition of "opt-out" is exactly the same as the "usability" definition: if you need to click anything other than "OK" in order to opt out of being tracked, then it's opt-in.

Which means that

> Many sites outside EU jurisdiction still abide by EU privacy/cookie laws.

is completely wrong. I would not be surprised if those popups put many sites out of compliance because they mean that the site is targeted at EU citizens.

Or just not track people [with cookies] when it's not essential?

Sure, and get 350 mln a week to fund NHS.

The UK weakening privacy laws when they can do so actually sounds very plausible.

I also notice myself missing road signs while driving in areas with lots of advertising.

Adding this to my ever-growing list of examples why advertising is a cancer on society.

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.

I think that a combination of both works well also, especially if the icon enhances the meaning of the text and the text enhances the meaning of the icon.

Where the whole icon thing sort of works, is with tools where the words won’t be able to communicate what a tool means anyways and. when there are too much for (e.g. the tools in photoshop)

Almost all tools can be summarized with one word [1]: Marquee, Move, Lasso, *Magic Wand, Heal, Paintbrush, Clone, Stencil, Eraser, Paintbucket, Smudge, Dodge/Burn, Path, Text, Pen, Shapes, Hand, Eyedrop, Hand, Zoom.

[1] https://annhjelle.wordpress.com/assignments-2/assign-12-spac...

Aren't those are summaries of the icons, not the tools? I'm struggling to come up with a concise and accurate way of describing the abstract actions of magic wand and heal, they might as well have been called foo and bar. I'd argue that you need to know what the icon means to know what the tool does - since you come across the icon first - and so would tautologically know what icon to look for to get the tool you want.

Yeah I agree. Photoshop also "benefits from" being an application of mostly power users who are willing to ramp up and learn icons and keyboard shortcuts.

Imagine that users of an NHS website are infrequent at best with a large number of new users.

> I think that a combination of both works well also, especially if the icon enhances the meaning of the text and the text enhances the meaning of the icon.

It's also a neat way to resolve issue with text-only buttons in multilingual software. From time to time, I find myself in front of an OS, an app or a website that's familiar to me, but is set to a language I don't know. Having an icon next to the text is very helpful then. That said, it's a rare case, so if I had to choose just one, I'd prefer text over icons.

Although icons can be monochrome, they tend to apply colors to indicate their function (red = bad/remove/stop, green = good/add, blue = optional/new). One-word labels do not have this problem. As a colour-blind person, I take one-word labels over finicky icons any time.

While correct, I'm not sure this argument makes any difference. If a designer considers colorblind users, they can also make sure that their icons still work in monochrome.

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).

If you're building a website for more than one language, you'll need most of these anyway, for the content of the site...

Exactly, for accessibility you need all icons to have a text replacement, so you can just use that text instead of the icon at no extra translation cost.

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".

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.

> The NHS serves one dialect of one language.

They also do Welsh.

https://www.nhsdirect.wales.nhs.uk/default.aspx?locale=cy

You may find this article, where they talk about using local slang instead of formal words: https://digital.nhs.uk/blog/transformation-blog/2019/pee-and...

The Welsh site has different styling

Well designed icons have their place, but a great example, for me, where “text is better than icons” is Gmail’s overly stylized icons. I’ve changed mine back to text, but wow, those icons are so poorly designed.

Back when I read the usability literature on icons about 10 years ago, the consensus was pretty much that text was pretty much the best, icon and text was worse and only icons was really bad.

Problem I see with designers is that they don't do enough work. If they put only icons, that is nice for someone who is used to app. If they put only text it gets annoying for power users. Of course switchable interfaces for "pro" and "noobs" cost more money. Downside with text is "pro" user would like to have more data in single screen to be done with what he wants to achieve. Though users are also in full spectrum, and sometimes even pro user can forget what icon was for ... let alone if someone comes up with brilliant idea to change icon to something totally different :)

Tooltips solve the problem of power users forgetting the meanings of icons.

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.

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

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.

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.

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.

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.

> 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.

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?

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.

In Germany it is enough to stick the German equivalent of “No Ads” onto the flap of your post box.

Doesn’t stop all crap, but certainly most, as the stuff sticking out my neighbours boxes without a “No ads” label proofs

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.

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.

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.

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

This is because software in contrast to games is usually meant to get shit done with the least possible friction.

While experimentation will always have a driving force, standardization allows a program to lower the barrier of usage to everyone. Especially to those who are not a typical HN user but rather like your stereotypical parents.

Games are not about getting stuff done, so people enjoy learning how it works, which in its own way reduces friction.

Also as a player: I'd love more consistency. Especially on mobile - the impossibly vast array of same-but-different is wearying, not interesting.

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.

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

> Forcing users to learn a whole new language

Each and every videogame has a lot information to learn about it. Game mechanics, interactions, that sort of thing. Games are wildly different in these aspects, so why would icons of all things be worth nitpicking here?

Since games are so different having unique icons makes total sense, since I can associate them with whatever unique mechanics of the game.

> a game is often something you move on from quickly and on to the next one

For you, maybe. I have 1400 hours in dota, and almost 1500 in tf2. Over time as one gets acclimated to a game, having icons is really helpful for quickly scanning/displaying information, etc.

---

Videogames have the problem of needing to visually display a lot of data, and needing to have good menus to traverse among its information/mechanics. Some games have really bad menus but I can't recall icons being the main issue in any of them. A bad menu is almost always one with options in confusing places or hiding a commonly-used option behind 4+ clicks, etc.

The thing is, you usually _want_ to play the video game just for the video games sake. Understanding it is mentally part of the thing.

With a typical application GUI you usually want to get some stuff done and the program is the thing you chose for the job. This means unless you really plan to learn that thing, every friction that program needlessly puts on reaching your objective is gonna piss you off.

This is btw. the same in Games, if e.g. the graphics settings don’t work as expected etc

I don't think it's just motivation. Video games are different from regular software also in that they do explain their UI to newcomers, whereas explaining anything is anathema to modern UI design. That's IMO a big problem, and why I find myself liking UIs in video games more than in "work" software.

Some webapps offer videogame-style guides on the first launch - I'm thinking of e.g. UI tours that highlight elements and tell you what they do. It's a good pattern.

Video games are designed to provide escapism. A different visual language is part of the experience.

Games are a prime proof that even a slightly motivated user has very little problems learning whatever UI style you created, as long as it's totally not absurd and/or you help them a bit along the way.

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

That there's a new surgery opening in your town, perhaps? Or news that the local hospital car park is out of action while being resurfaced? Or that there are new guidelines for visitors after an MRSA scare?

Nobody was sharing their colonoscopy highlights reel.

I’m not going to look myself but I bet if you searched YouTube...

I believe that's good for SEO and a standard in all kind of sites

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/quit-smoking/

* https://www.nhs.uk/news/

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

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

There’s a lot of “the latest diabetes research” and “myth buster” stuff on there which is perfect for sharing

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.

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.

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.

Reply on news.ycombinator.com