15 ms·

Icons: Avoid temptation and start with user needs

386 points by open-source-ux 8y ago

Nition 8y ago
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 8y ago
  Just like how I flag "important" emails as junk. Well, almost.
  - function_seven 8y ago
    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 8y ago
      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 8y ago
        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 8y ago
        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 8y ago
        > 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 8y ago
        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 8y ago
        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.
    - atoav 8y ago
      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
anoncake 8y ago
> 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.
- karl_schlagenfu 8y ago
  Ad people, scum of the earth.
  - anoncake 8y ago
    Now that goes too far.
    - liability 8y ago
      Corporate propagandists may not be the very lowest of the low, but they're certainly in unflattering company.
    - markovbot 8y ago
      Not in the least.
    - taneq 8y ago
      Scum is useful in some ecological niches, after all.
- mortenjorck 8y ago
  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 8y ago
    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.
deleted 8y ago
[deleted]
NeedMoreTea 8y ago
> 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 8y ago
  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 8y ago
    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.
  - jrochkind1 8y ago
    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.
- holowire 8y ago
  > 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.
gibolt 8y ago
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 8y ago
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 8y ago
  As a player, having the same iconography in each game sounds terrible and would result in an almost clinical experience.
  - kurtisc 8y ago
    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 8y ago
      In view of games as art, these are definitely mandatory stylistic choices involved in creating a unique experience for the players.
  - atoav 8y ago
    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.
  - Groxx 8y ago
    Also as a player: I'd love more consistency. Especially on mobile - the impossibly vast array of same-but-different is wearying, not interesting.
leokennis 8y ago
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.
combatentropy 8y ago
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 8y ago
  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).
  - nostoc 8y ago
    If you're building a website for more than one language, you'll need most of these anyway, for the content of the site...
    - TheCoelacanth 8y ago
      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.
  - yorwba 8y ago
    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".
anitil 8y ago
I find it bizarre that the NHS website had social share buttons. What would you share?
- pgl 8y ago
  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 8y ago
    Fair enough, I guess I'm just not the sharing type.
- rahoulb 8y ago
  There’s a lot of “the latest diabetes research” and “myth buster” stuff on there which is perfect for sharing
- petepete 8y ago
  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.
  - tonyedgecombe 8y ago
    I’m not going to look myself but I bet if you searched YouTube...
- nafey 8y ago
  I believe that's good for SEO and a standard in all kind of sites
deanclatworthy 8y ago
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 8y ago
  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.
  - b2ccb2 8y ago
    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.
    - VonGallifrey 8y ago
      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.
  - deanclatworthy 8y ago
    Unfortunately it’s the law. But I completely agree. I’d argue it’s inaccessible for everyone too.
laythea 8y ago
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 8y ago
  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 8y ago
    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.

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 8y ago
Just like how I flag "important" emails as junk. Well, almost.
- function_seven 8y ago
  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 8y ago
    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 8y ago
      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 8y ago
        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 8y ago
        > 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 8y ago
        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 8y ago
        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.
  - atoav 8y ago
    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

anoncake 8y ago

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

karl_schlagenfu 8y ago
Ad people, scum of the earth.
- anoncake 8y ago
  Now that goes too far.
  - liability 8y ago
    Corporate propagandists may not be the very lowest of the low, but they're certainly in unflattering company.
  - markovbot 8y ago
    Not in the least.
  - taneq 8y ago
    Scum is useful in some ecological niches, after all.
mortenjorck 8y ago
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 8y ago
  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.

deleted 8y ago

[deleted]

NeedMoreTea 8y ago

> 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 8y ago
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 8y ago
  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.
- jrochkind1 8y ago
  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.
holowire 8y ago
> 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.

gibolt 8y ago

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 8y ago

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 8y ago
As a player, having the same iconography in each game sounds terrible and would result in an almost clinical experience.
- kurtisc 8y ago
  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 8y ago
    In view of games as art, these are definitely mandatory stylistic choices involved in creating a unique experience for the players.
- atoav 8y ago
  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.
- Groxx 8y ago
  Also as a player: I'd love more consistency. Especially on mobile - the impossibly vast array of same-but-different is wearying, not interesting.

leokennis 8y ago

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.

combatentropy 8y ago

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 8y ago
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).
- nostoc 8y ago
  If you're building a website for more than one language, you'll need most of these anyway, for the content of the site...
  - TheCoelacanth 8y ago
    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.
- yorwba 8y ago
  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".

anitil 8y ago

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

pgl 8y ago
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 8y ago
  Fair enough, I guess I'm just not the sharing type.
rahoulb 8y ago
There’s a lot of “the latest diabetes research” and “myth buster” stuff on there which is perfect for sharing
petepete 8y ago
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.
- tonyedgecombe 8y ago
  I’m not going to look myself but I bet if you searched YouTube...
nafey 8y ago
I believe that's good for SEO and a standard in all kind of sites

deanclatworthy 8y ago

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 8y ago
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.
- b2ccb2 8y ago
  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.
  - VonGallifrey 8y ago
    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.
- deanclatworthy 8y ago
  Unfortunately it’s the law. But I completely agree. I’d argue it’s inaccessible for everyone too.

laythea 8y ago

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 8y ago
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 8y ago
  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.