The Trouble with Icons

Transcript

Carl Gratiot:
From Bravery Media, this is Appendix B. Candid conversations about Higher Ed in ten minutes or less. On this week’s episode, uh oh! The trouble with icons. And now here are your hosts, Kristin Van Dorn and Joel Goodman.

Joel Goodman:
A lot of times when we are designing websites, we’ll get asked to include a bunch of icons. It’s like kind of like a default go-to, like within content. And I don’t usually like them because you end up using the same icons that everyone else has used on their sites. But I’m wondering… if there are other problems with using icons in ways that are generic, I mean is it simply that I don’t like them or is it that we’re actually doing something kind of wrong with them?

Kristin Van Dorn:
We’re doing something wrong with them. Icons are terrible! No, they’re not terrible. But there’s two reasons why I hate icons in web design. The first one is that I think especially in Higher Education when it can be expensive and time-consuming to get really rich images that describe the concepts that we’re laying out for students, usually they’re like active photos or photos that are directly relevant to statistics or something like that, we’ll use icons as like a cheap illustration rather than develop our own creative.

And I think that this causes a lot of downstream problems. One is that icons are never intended to take that spot of an illustration. So when you’re looking to create some sort of like visual imagery to give people’s eyes a break from reading big blocks of text, to give them complimentary visual information text in your content, and if you use an icon to replace that, you’re usually using an image that maybe isn’t structured visually to take that space. So oftentimes we’ll see icons that are blown up to be a little bigger, and icons aren’t designed for usage that way.

Joel:
Right. So I think there are a couple of ways that icons can be used and a couple of appropriate ways, but it’s appropriate within the context of your design and maybe inappropriate as well. I think if it’s in wayfinding, a lot of times icons are good. I mean arrow icons and things like that, little carrots, things that indicate that there’s an action or that there’s sort of movement backward or forward, which that’s a whole other weird semiotic temporal, temporal sort of signifier that jumps in. I think back in the day true accessibility standards for code, a lot of times the idea was you can use an icon alongside your navigation to give it additional meaning for people that may not understand what terminology you’re using. But the other way to fix that is just to use better terminology that your users understand.

But I do think you’re right. There’s a big problem when we use icons to be a placeholder for illustration or for photos or for things that actually should be communicating more. And, you know, there are cultural reasons for that. It looks not great, too. But and it’s cheaper to use icons, but cheaper isn’t necessarily better in that sense. And I think to your point, it’s difficult to add anything when you’re using a lot of text alongside an icon or, you know, like a chunk of information. Like just use words. That’s the easier way to do it.

Kristin:
Yeah, I think you’re hitting on a big point, which is icons tend to be conveying a concept in a really simple… quick to identify form. So oftentimes that is for an action we want our users to take, or it’s to signify something that presents a new hierarchy of information. So a lot of times people will use icons to note that something needs to be paid attention to, or to try to make it a memorable for the user. It’s just that the problem with also using them as like these mini illustrations that complement your text versus using an image, for example, is that you’re also looking for the right icon to fit a notion, you know, and what may end up happening is you end up using these icons inconsistently and is just like breaking the whole playing field. You know, I once worked on a project with a learning management system in UX where they had used like a little outline of an eye in several different locations, but sometimes it would mean they’ve turned the view on and off for students.

Joel:
Oh, like an eyeball, not like, yeah, yeah.

Kristin:
Not like the letter I. And sometimes they would use it as a pay attention to this or you’re viewing this, but like, it was so inconsistently applied across different views that what we found in the learning management system is that we were putting information at risk, that faculty could potentially share information out that they weren’t intending to, just because the icon was no longer functioning the way that it was intended, which was to give someone a direct cue about the state that they were looking at the product in. And so that can happen across our websites too, if we use icons inconsistently. Like if you, for example, start using like a little, magnifying glass for something to pay attention to and people. obviously associate that with search, but then it breaks their search experience, so then they just never return to try to search, they just assume search is broken.

Joel:
Well, it’s a very important piece of how semiotics work. And, you know, it’s everyone brings their own baggage and understanding along with them to the interfaces, to the experiences, to the websites, the places that they visit. And so if you’re using iconography that is normally purposed for actions, is normally purposed for wayfinding, is normally purposed for these kind of more user interface things, and you’re trying to apply them into a general content strategy, you’re breaking the usability side of the interface, right? While also just confusing people because they already have expectations for what those icons signify.

So in the cases that you’re talking about, sure it might be appropriate to like if you have a fact call out to put a little information icon with the italic letter I in a circle like cool, like that kind of makes sense, you know, or, you know, there are other instances where it might be like a, you know, a warning or an alert message and you want to put an exclamation point inside of a triangle because that’s a caution symbol and that’s, you know, international sort of thing. But like accompanying some of those smaller purposed icons with a chunk of text that’s giving a deeper message only muddles the perceived understanding of what that’s supposed to signify.

And so you’re trying to pack more information into a symbol that already has a meaning, already has a purpose, is already pointing to things from a cultural standpoint, from to your point, a consistency standpoint with other systems and it definitely undermines what you’re trying to say with your content and undermines the usability of everything because you’re just not taking into account the person that’s there and what they understand that sort of an icon, that sort of a symbol to mean already.

Kristin:
Yeah, it’s a lot like emojis, where the meaning of them change over time, but if you use the wrong emoji, you can really send the wrong message in a text, and you can really confuse people on what your intentions are.

Joel:
Totally.

Kristin:
And I think similarly, that same kind of breakdown happens when you’re using icons, especially when you’re using them outside of creating that short, conceptual wayfinding device, you know, like that is to help people navigate your website, to know what’s important, to quickly ascertain what they need to do, what their next steps are, and when you start using icons as just sort of a way to kind of brighten up your page because you don’t have a lot of other design elements or you don’t have a lot of creative, so you’re hoping that an icon will sort of solve the problem for you, you’re creating those instances where just like if you were to use the wrong emoji in a text, you’re going to be potentially using the wrong emoji to convey something to your audience in your website.

Carl:
Thank you so much for listening to Appendix B. If you wanna hear more from Bravery, please check out our newsletter, Higher Ed Hot Takes, at bravery.co/newsletter. Also, if you wanna leave us a review on Apple Podcasts or Spotify, that really helps too. Thank you and we’ll see you next week. Bye bye.