Computer voice
UX podcast episode 244

James Royal-Lawson
Hello, everybody. Welcome to UX podcast coming to you from Stockholm, Sweden. We are your hosts James Royal-Lawson

Per Axbom
and Per Axbom

James Royal-Lawson
with listeners in 194 countries from Bulgaria to Estonia.

Per Axbom
Nice. And today we are bringing you for the first time in a long time a topic show. You will have to make do with James’s mine voice throughout this episode

James Royal-Lawson
trying to stick to a particular topic on that particular topic is going to be icons,

Per Axbom
icons, iconography, pictograms, what are we talking about really?

James Royal-Lawson
Well, we are talking about those little symbols that we, as designers seem to love to use when we’re making interfaces. And what sparked it, even though there’s not a link show, it was actually a link that sparked the conversation about icons. And we felt like it was time to bring it up. We’ve talked about icons a fair few times over the years, and usually around hamburger icons. The menu icon that we love to hate as designers and that one we’ve brought up in least Episode 57. And episode 201. We talked about a reasonable amount, the problems surrounding it.

Per Axbom
And we’ve also talked about them from an accessibility perspective in that it’s sometimes hard for people to understand them.

James Royal-Lawson
So, why Per? Why do we use icons?

Per Axbom
I suppose. I mean, if I talk to designers, there are different answers. One would be, they save space. And so when we have moved across to building mobile interfaces, I think a lot of designers saw an opportunity to use icons to give them more space for their design work to give people more work area space and move the menu to the side so to speak, but keep access to the menu by allowing people to access it through icons.

But I mean icons have been around it’s been the same I mean, if you look at Microsoft Word, the number of icons in the toolbar. It’s just insane. So it’s always been something that designers just loved to do. Because it creates at least some things that means it’s not just words, it actually creates some sort of experience for the user that sets it apart. So it’s a differentiator. So one app can differentiate itself from others, by the design and by the design of the iconography, which means that you can recognise apps also based on that. So they serve a purpose of recognition.

James Royal-Lawson
Yeah, the saving space thing is probably the first thing everybody will stick their hand up and say that’s something we try to do and if, if you go back to what you said the example of Word. There’s so many functions, all available in various toolbars that you couldn’t arguably do it any other way than using pictograms and icons. And aesthetics, of course, I think the branding or at least having a homogenous look and feel to something using a particular icon set or you know, you want all your icons to represent your brand or your field, your product, not something as well, which I know we’d all probably list as one of the reasons.

Per Axbom
In fact, it’s quite typical. As soon as one app changes all its icons, I remember when iOS changed all the icons in the interface. I mean, there’s an uproar across the Internet, and everybody has an opinion about it. So it’s very emotional within the design world. Which is funny because I don’t think it is as emotional amongst users.

James Royal-Lawson
No, I mean, it’s the other thing about what icons are is they often try to pictograms or icons… They try to convey meaning through pictorial resemblance to something else, usually, but not all the time physical objects. And by having that connection to the real world, and not to language, then another advantage that sometimes gets thrown up is the fact they don’t need to be translated.

Per Axbom
Right. Exactly. Yeah.

James Royal-Lawson
Words need to be translated and in an interface that usually means an extra cost or an extra step in the process.Now, yes, you don’t have to translate the words. But that means you’re requiring cultural overlap. If you’re dealing with an international product, then then whatever picture you’re using as the icon to represent something it has there has to be a cultural overlap between the countries around that symbol.

So that you do create shared understanding if there lacks a lingual overlap, but that is of course an interesting situation because a lot of symbols have a railroad of dubious cultural baggage. I mean, now I’m thinking about the it’s not a computer icon but the the Men at Work sign that so many countries still use for roadworks. It’s still a man with a shovel and a pile of dirt. We don’t have so many women at work signs or person at work signs.

Per Axbom
I mean even related to that, I think one of the most recognised symbols in the world is, is the symbol for toilet at airports because I mean, people from all around the world travel, and they need to recognise where the toilets are. But even that one is becoming controversial as it’s often not gender neutral. Which means that. It’s funny, I actually give my students this exercise in class, where they actually have to redesign the toilet symbol, and it’s funny how, how people sooner or later realise that toilet symbol is actually not the symbol of a toilet. It’s people it’s a people symbol. And it’s funny how the history of that has become the symbol for toilet but it’s really just Humans,

James Royal-Lawson
well stereotypes of humans.

Per Axbom
also, but it doesn’t represent what it is guiding you towards.

James Royal-Lawson
No, you’re quite right. I mean, the thing you had talked about how the symbol of the wheelchair is used. Yeah. Does that mean that if I’ve got a broken arm, can I go in there? So it’s a good example the toilet symbols about context and interpretation? Are they usually universally understood? Do you really know? I mean, I know that we’ve we’ve joked about the toilet signs in Lisbon airport.

That, when we were there a few years ago, someone that so the symbol for the Lisbon toilets. The female toilet symbol is a curvy thin woman. It’s representing a curvy thin woman with trousers or at least not a dress. See a lot of toilet symbols would have a dressed woman, one with a dress on. Not saying whether that’s right or wrong, but someone had gone round, every single sign that we saw in the airport that visit and drawn a dress on it.

So that was a it’s an interesting example of perhaps cultural clash, but also of something maybe not being universally understood. Did they add the dress because they found that men had gone in because it looked too much like the male symbol. Or had someone decided it should have a dress, because that’s what it always been like it’s leading to so many questions you don’t really know. But I think it’s a pretty good example of the problem with that claim that everyone understands X icon.

Per Axbom
I think the article I read many, many years ago, had come to the conclusion that really like two or three icons, maybe that could be universally understood. And one of them would be the heart sign. But even but even then,

James Royal-Lawson
That wasn’t it. That wouldn’t be one of the ones that I was expecting you to say,

Per Axbom
Oh, but the thing is they understand that it means hearts. But I mean, the function of it wasn’t what the research was about. So that’s interesting because the heart symbol in itself can sometimes be controversial. I remember when, when Twitter changed from the star symbol to the heart symbol for likes, and people were upset because they didn’t love what they were marking they were just trying to remember it.

James Royal-Lawson
exactly suddenly the heart implied a response to the content, whereas before the star was considered was more attached to to favourites which was called back then so it meant saving it whereas the heart meant expressing a like, yeah, there are very two different. they’re two different features. The magnifying glass was actually what I thought you were going to mention. That’s sometimes given as the example of a universal icon. But it really doesn’t hold up either. Because I mean, I think I’ve seen it used a fair bit to mean zoom.

Per Axbom
Exactly. Yeah.

James Royal-Lawson
I mean, even on Windows, the inbuilt Photo Viewer in Windows has a magnifying glass with plus or minus, as its icon for enlarging a photo and, and decreasing it. So if you use Photoshop, you’ll maybe have a very different understanding of whether that means search or resume compared to someone else. And I think if you’ve ever tested anything with children. They don’t necessarily have the same understanding of these universal icons.

Per Axbom
Exactly.

James Royal-Lawson
You know, it’s very, very easy to say everyone understands the hamburger icon. Everyone understands the search icon, the print icon, the Home icon, these are the kind of ones that get thrown up. I think a lot in conversations.

Per Axbom
And even within context that you sometimes don’t understand it. I remember someone telling me about how they were chatting with their mother online much in the same way that you and I are chatting now via video. And he wanted her to activate video. And so he kept saying, press the camera icon. Press the camera icon. She said I can’t see it. I can’t well, it has to be there. And five minutes later, she appears on screen with the camera on. And he was like, Oh, you found the camera icon. No, I found the fish icon. Yeah, because the the camera icon of course with the rectangle and the triangular end of course looks like a fish to some people.

James Royal-Lawson
Yeah. When I’m talking to my mom about getting into settings on our Android phone, I realised that I needed to say the flower icon. Because she can’t she can’t make out that is a cog it doesn’t understand is a cog to her. It looks like a flower. And since then, I kind of look at these cogs that we have for settings everywhere and I see flowers. So you know, it’s difficult. And one of the things they call this is the symbol grounding problem. So, this is incognitive understanding. And this is where we maybe need Steven Anderson here to talk about it or someone. But, basically our understanding of symbols, letters in alphabet and so on. And a lot of these symbols. They come from all of our learning starts at birth to recognise some of this stuff.

So you are spending an awful long time building up your cognitive ability to recognise these symbols. Now, if again, you look at schools and children, they first of all you learn capital letters. Because the the lowercase letters get a bit confusing because they look quite different. Some of them to them the uppercase ones, and then maybe if your country still does it, Sweden actually doesn’t. But if your country still does joined up writing, then that’s a third character set that you would try and learn in your country in your locality. And, you know, this takes most of your work up to 12 years old, I suppose when you get to that point where you’re really getting quite good at recognising all this writing. So some of these icons, if we’re talking about, you know, glyphs, and and letters as icons as well, you spent a good chunk of your childhood, learning what they all mean. And it’s still not always straightforward. You get something presented in a new font. You actually can’t tell the difference between certain characters.

Per Axbom
Right. Exactly. Yes

James Royal-Lawson
Yet we as designers seem to think that we can throw out new icons, you know, left, right and centre and within a few years we’re calling the universal.

Per Axbom
Hmm. I think that’s the gist of the problem. What we’re talking about really here is that we keep seeing lots of designers saying how understood some of the icons they use are and I think they are overconfident in how their users actually use those icons? It may be the case that the users are adept at using the interface. But it could be very true as at the same time that they don’t understand the icons at all. And so we sometimes misunderstand ourselves what job the icon does for the for the person using the service. Sometimes it’s just the recognition. That is interesting whether or not the the meaning of the icon is there or not. Maybe sometimes even it’s irrelevant.

James Royal-Lawson
Yeah. I mean, the article that actually starts off the conversation was about the testing of icons. And encouraging you to test your icons. Which is completely correct. You should be testing your interfaces and then see what response you get. The article in question did actually talk about testing the icons out of context.

Per Axbom
Yeah, I think that’s what got my attention in that one as well. Yeah, that you’re really, I mean, I think I’ve even fallen into this trap sometimes. I remember working with a with a chatbot last year, and they were discussing, so which icon should we use for the actual bot? The person per se that you’re talking to? Should it be a robot? Should it be the face of a person, a sketched face of a person. And so they set out to actually test all those icons independently of the interface of the chat bot. Which of course means they are completely out of context. So what you would get in a study like that, or in research, like that is an understanding of that icon, and what it means to a person without everything around it.

James Royal-Lawson
or you’re going to have a question. I mean, that’s the thing when you present those icons, there’s going to be a bit of text presumably above it, which says, choose which of the following best represents x. So you are creating some kind of context, but it’s not the context of the actual interface.

Per Axbom
In that case it was actually done person to person so we were showing the icons to people so he’s just holding up the image and asking for responses to what they were feeling around it.

James Royal-Lawson
like you get kind of like a nice almost like a some kind of psychology thing where you’re gonna get all kinds of things about their childhood and kind of, [laughter]

Per Axbom
it’s like a Rorschach blob really. So that tells you really nothing about how people respond to that icon within the context of in that case, it was a health bot, within the context of actually feeling ill going online finding a service where you describe your symptoms. I mean, you would never understand the icon in the same way when you’re doing that, as when you’re seeing a big of course high resolution image of that icon in a completely different context. I think we put we placed too much value in the meaning of icons out side, the wrong context.

James Royal-Lawson
Yeah, I mean, I remember when I’ve done eye tracking tests, and something which is used to see all the time was people fix it on words and faces. That was something you could pretty much, I could guarantee you pretty much. Show me a picture and I’d say, oh, that that that and that they’d look at based on whether it was the kind of keywords of the task they were doing or whether it was a person’s face. Icons on the other side. That was more the position of them that was relevant. That I mean some listeners out there can be in test this themselves, you can switch the icon on a button, but keep its position. And regular users, at the very least, would not notice.

Per Axbom
Yes, exactly.

James Royal-Lawson
I mean, if you’re doing an enterprise product, which a typical user would be handling, like 80 to 120 cases every single day using the system. And, you know, they don’t think about what’s on buttons, they just know where that button is at that point in the flow. Because they’ve done it so many times and doing it five days a week, at 120 times a day. That’s hundreds of times a week. So that’s a lot of muscle memory.

Per Axbom
Exactly. That actually makes me. When you were saying there about icons also change meaning. The icon’s vicinity, how close it is to other icons means that it can help take on the meaning. I wish I had a good example but I know I worked on an interface a long time ago, where the distance to the actually it was a magnifying glass icon to the search field, the distance to the search field, made people interpret it in different ways. Because when it was too far away, they didn’t understand it was a search box was something along those lines. But I’m assuming now also, as I’m thinking about it, that if you have different types of meaning icons next to each other, the closer they are, they will mean different things because they help each other take on the meaning of the other one.

James Royal-Lawson
Yes. And if we connect back to the symbols at Lisbon airport. When you see those symbols for the toilets, in isolation, it’s difficult to tell that the female one was actually female. It’s only when you saw, there’s a sign where all four of the symbols they use are around the same side, then the male and female symbols together suddenly become different to each other. You can actually see the difference and you’d start to understand are like they’ve made the female figure curvy, they’ve added some hair to it, right? But without the male figure to contrast it to. You don’t get the same level of understanding.

Per Axbom
So what we tend to say in design is that I mean, to help people fully understand the meaning of icons if they need to, you also need to label you need to complement with labels. Because when you do that, the meaning of the icon, of course becomes apparent because it also read the meaning of it. The problem is that when people decide that, no, we don’t have space for that, and so we’re going to avoid it. I’m seeing this as a many part process where you help people understand your interface, and then allow them to remove parts that they don’t need anymore, such as turning off labels would be an example of that.

James Royal-Lawson
But at the same time, the label is essential to have that you can’t not design the label .You can’t not think about the level because from an accessibility point of view it needs to be included, even if you are turning it visually. There is actually. While there is very few standards to do with icons, atleast in the digital space, we don’t have a huge amount of standards to go on.

But there is ISO 7001, which is the standard for public information symbols. And that specifies graphical symbols for for signage is used as public information. you’ll recognise things like the exit symbol, you know, that dangerous chemicals, all those kind of ones that we see on lorries and things and public buildings, those symbols are all defined in the ISO set of 7001:2007 I think it is.

But what was interesting or what was an interesting aspect of that is for a pictogram to be accepted as part of the standard. They have an acceptance criteria, and it was that 80% of people need to correctly recognise the pictogram at least, and less than 10% of people can’t get the incorrect so the reverse meaning. So if we take the toilet example again, if you have the symbol for a female toilet, then 80% of people have to be able to read look at that and go, Ah, that’s the female toilet. And less than 10% have to say, that’s the male toilet. Yeah. I guess that you know, because 80 plus 10 is only 90. So I guess there’s a kind of pot though people go I don’t know. I’m not actually kind of maybe okay. Because don’t know, he’s not the same as being confident is the opposite.

Per Axbom
But even 10% saying the opposite. That’s quite a lot.

James Royal-Lawson
Yeah. 80% saying the correct thing is pretty high as well.

Per Axbom
It is. It’s very high.

James Royal-Lawson
Yeah. So so maybe, but that’s actually an interesting thing to take into usability testing. You know, can you can you get that kind of level of acceptance of your icon or understanding of your pictograms and icons when you’re testing them? It’s a useful thing to bring up in a, in a test, or to observe how many people do get it.

Per Axbom
And I think even then, I mean, also, you have to start thinking about things like not only the metaphor that you’re trying to have it describe, but also, what colour are you making your icon because that also, you know, not only plays into accessibility, but I guess certain icons can mean different things depending on what colour they are. Because we always use red for warnings. But if the symbol itself means warning, and you’re using another colour, does still mean the same thing. So there’s so many aspects of just this small, tiny thing that are really important, but I think we, we treat them quite carelessly. We depend on them a lot, without really understanding how that can if they can affect people’s interpretation, or even their feelings towards you, depending on whether you have tested that icon in another cultural context where the icon itself can mean something completely different. And even be offensive.

James Royal-Lawson
Yeah, again, talk I’m going on a lot about the Lisbon toilet signs. But one of the issues there, I think there’s a Reddit thread about it as well, that because it’s a thin, curvy woman, it’s like how does that make people feel who are not thin and curvy? And can it trigger? Could even trigger anxiety issues for someone when they see that symbol and kind of feel excluded by… So we have a lot of responsibility. When it comes to designing icons, you know, they’re universal icons that span all ages, all languages, and all cultures.

That’s a big ask.

We need to be really careful as designers when we start saying about universally understood icons, and veryone knows what a hamburger icon is. Everyone knows what a setting icon is. Because they don’t.

Per Axbom
And we’re now venturing into like a space where we’re using icons and communication with all our emojis. And I see that people are making more and more use of even emojis in titles of blog posts in newsletters when they’re communicating with their users in different contexts. They’re adding emojis without considering the effect of that emoji, whether people understand it or not. If the laughing face is really crying as some people think that is a tear, or is it crying from laughter. That can have immense consequences for a person trying to understand if you’re being ironic or if you’re actually expressing care. But people use them again. They love to use them because they’re fun, and they they create attention. And and I’m guessing Now again, you’re starting to measure stuff and it shows that if you have an emoji in the title of your newsletter, Subject line, it will convert better

James Royal-Lawson
That’s an interesting point it makes me think of as well the history and how we’ve applied or we’ve kind of put icons into our interfaces that if we look at the web age then icons originally I guess we were using gifs and image files that were used in the in the webpages then we went through a phase of using sprites. You remember you made those canvases with several icons all in one image? And with CSS you move the sprite that visible area. Yeah, yeah. So you saw the visible area in the window. So you see through and move all around.

And then we had a phase, I think I still used a lot of places, things like Font Awesome. Where you use like, you know, actual, web fonts that instead of having letters in them, you’ve changed all the letters to various symbols. Which I know that has kind of all kinds of weirdness for screen readers, because of coursethey read it. So you can end up with, with your icon that’s filled in the slot of an A being read out as an A, even though it’s kind of maybe the settings.

But now though, we’re using more and more svgs Scalable Vector Graphics, in design and the devices. And they’re really good because they’re, they’re just XML. They’re just code. They’re just kind of instructions on how you can draw something. So they, they scale really nicely. They look wonderful on giant screens and wonderful on tiny screens. But the something that gets missed there is you the accessibility again, that you need to label them and you need to give details about them. So that they’re, they’re understood by various technologies that help people.

Per Axbom
Exactly. So I mean, essentially what you’re saying is that I’m There’s no set standard. I mean, yes, it’s more more people are moving towards svgs. But most people aren’t there yet. And if you’re just an editor on a web page, you’re not using svgs for adding your icons or emojis or whatever. So there, it’s the complexity of it is actually growing, especially from an accessibility point of view that understanding it based on on on context and based on your own experience and your own understanding of the icon, but also, can you even see it? Can you even read it? Do the colours match? Are you colorblind? I mean, how do we even get it right?

James Royal-Lawson
Well, I think what you’ve just said that basically means that you’ve got to use words, or at least, you’ve got to, you’ve got to start with the words and make sure those are the words are included in all the necessary places. Yeah, and you’ve got to remember that your icon is an add on. Yeah. Your icon is something which you’re, you’re you’re extending the meaning with it with an eye Because you’re not, you’re not replacing the textual description of that function with the icon. Exactly. Because as soon as you start taking away the words, then you have lost people, you will cause confusion.

Per Axbom
But then we are also saying, because I mean, that that constitutes almost, I mean, 80% of the apps you download and start up, a lot of them have only icons as their menu bars. And which is a huge problem. I mean, you can add the accessibility aspect of it. And actually, if you you activate screen readers, you can actually touch the icons and have it read to you. But if you don’t know how to do that, then you’re stuck with an interface with icons that you just have to go through and test and see what they mean. And also, what’s the Menu icon.

James Royal-Lawson
That’s one thing I know we talked about. just just just now, in front of me as I’m talking to you. I’ve got I’ve got three dots horizontally. I’ve got three dots vertically I’ve got a little arrow pointing downwards. I’ve got a hamburger I can see over there as well. I mean, without even moving a window on my desktop, I can see like four or five different things that symbolise. Yeah. Because I know because I’ve pressed on them before I remembered it. They symbolise opening up a menu.

Per Axbom
Yeah. And it’s sort of like, in the end, you stop caring, but you sort of know where to click.

James Royal-Lawson
When you click on them all until you find the one that opens at the right thing. Yeah. I just hope it doesn’t delete something.

Per Axbom
So what’s our message to all designers out there? about doing going about this in the correct way?

James Royal-Lawson
Never say universal. And if someone does say universal, then be ready to take up the argument. And, and think about how it might not be universal.

Per Axbom
Yeah, and Don’t test your icons out of context. Because that tells you nothing about how they will be used within context.

James Royal-Lawson
And always remember text text is you are textually describing things. So the icons are not replacement for that.

Per Axbom
But also, I mean, the positiveness, I think, I mean, you still have fun with them, but with it with your users, not at your users, I mean, they can create lots and lots and lots of fun stuff as well and make people feel joy. That’s what a lot of pictures are for. But do it carefully.

James Royal-Lawson
I mean, I know I have a lot of fun with the slack status icons, but you can really icon in slack to whatever you like. So, you know, in this in the spring, when I’m growing in the garden, I have a carrot. Now under the summer I’ve had a kind of big, big sun hat. So you know, allowing, allowing your users to plan to use stuff to choose things themselves can can be can be a real plus

Per Axbom
So, if you want something to listen to Next, you can actually go all the way back to you found one episode 31 Yeah. Oh, that has to be. I mean 2012 or something?

James Royal-Lawson
Yeah, it’s it’s a long, long, long time ago. It’s when it’s 2012. Right. It’s November 28 2012 when we talked to Derek Featherston. And we talked to him about infographics. Yeah. And how you make them more accessible.

Per Axbom
scary thing is that’s a hugely relevant still.

James Royal-Lawson
Yeah, I mean, I remember that. I think it was you that you created an infographic about inclusion or something. Oh, yes.

I mocked you for the fact that you would created an inaccessible infographic about inclusion as I love to this about myself and remember the details.

Per Axbom
So then, of course, we talked to Derek

James Royal-Lawson
Yeah, who is an expert in accessibilty, and has been for many decades now. If you can spare a little bit of your time, then you can join our little community of volunteers. We’re always looking for help with transcripts and also with publishing. So, just get in touch with us. Anywhere where you know you can from email to Twitter, or even Facebook or LinkedIn.

Per Axbom
Remember to keep moving.

James Royal-Lawson
See you the other side.

Per Axbom
So, James, why did the man fall down the well?

James Royal-Lawson
I don’t know. Why did the man fall down the well?

Per Axbom
Because he could not see that well.

James Royal-Lawson
It’d be like to live maybe it like to text level