Transcript
00:49 Hey, good to see you.
00:50 Thanks for coming.
00:51 Here’s another episode of wireframe.
00:53 And today I’m going to be talking about icons.
00:57 All right.
00:57 So I have some notes for us tonight.
00:59 Basically a whole bunch of different things about icons that I want to go
01:01 over starting with accessibility.
01:05 So accessibility should be the first thing that we think about.
01:09 Overall, when we’re talking about user experience, of course, and when folks
01:14 are making these interfaces, it’s very common for someone to go ahead and say,
01:20 Oh, well, I don’t have enough room here.
01:22 So we’re just going to put an icon in here.
01:24 And we see this often with navigation.
01:28 Bars and items and elements that typically will change, the text that should have
01:33 been there into some icon that typically means nothing to the user, right?
01:38 We see this all the time where a user has to hover over an icon if they have
01:43 the ability to just to find out what that icon is meant to mean, right?
01:49 And it is typically better to put some text there instead, or to really
01:55 reconsider the use of that icon.
01:58 Now I’m not saying that you can replace everything where
02:03 icons are with text, right?
02:05 There are certain places that we have come to be familiar with
02:10 when it comes to icons, right?
02:13 So we can imagine like toolbars that do left and center
02:16 and right alignment, right?
02:17 That’s a very common thing to be doing in user interface design.
02:22 So icons that represent that left align, center align, and right align we kind
02:27 of recognize those these days, right?
02:29 It’s important to really take a step back and second guess yourself when you
02:35 are considering putting icons in places where text really should be going.
02:40 And that’s not just to say about individual thoughts or
02:44 ideas to represent that icon.
02:46 But even talking about things like providing help, right?
02:49 Cause you have like that question mark that appears in a circle to provide
02:53 extra information about something.
02:55 And maybe you, you know, put that information in a tool tip.
02:59 And I believe that it’s probably going to be better off for
03:03 you to put that text inline.
03:05 Forgo the icon, just put that text alongside the element
03:09 that you’re trying to describe.
03:11 Or, even better, reconsider the interface in a way that’s more intuitive, so
03:15 you don’t need the additional text to describe what you’re trying to convey.
03:19 A little bit of a hot take there, but wanted to kind
03:23 of mention that off the bat.
03:24 Speaking of that question mark icon Something that a lot of people
03:28 actually don’t know is that in right to left languages you expect
03:32 many things to be reversed, right?
03:34 So we’re talking about things like punctuation and you would imagine
03:38 that in right to left languages the question mark would also be reversed.
03:42 And in right Some of them, that is the case, yes, but actually
03:48 in Hebrew, it is not the case.
03:51 So in Hebrew, which is a right to left language, the question mark in that
03:55 language is meant to be left to right.
03:57 So You’d need to do your research when you consider what kind of icon
04:02 that you’re putting in a particular spot for localization purposes.
04:06 There’s actually a really great article that I’ll link to in the show
04:09 notes 1 that talks about some of the blunders when identifying what icons
04:14 to potentially use in your interface.
04:17 As an example hand gestures that you might consider in your neck of the
04:21 woods to be all right, or a sign of something good could be something.
04:26 Very different in another culture.
04:28 So something to pay attention there.
04:30 It also mentions about animals and what they mean for different cultures.
04:34 I think one of the examples was using an owl thinking that it
04:38 means wise in some other cultures that actually means not wise.
04:42 So something to pay attention to as well.
04:44 It’s not.
04:46 Just a matter of what you think it means, but you really have to
04:49 consider the greater worldwide meaning of some of these symbols, right?
04:55 Now there is actually an ISO standard that attempts to make sense of icons.
05:00 It is the ISO IEC 11581.
05:04 I actually haven’t seen it because for whatever reason, it’s a paid resource.
05:09 I guess ISO needs to make money somehow.
05:11 But I was taking a peek on the internet to see if I could find that PDF
05:14 somewhere just to take a gander at it.
05:16 But if you are someone who is really into icons I highly recommend that
05:21 you look out for that document.
05:23 I imagine that there’s going to be some really good information in
05:26 there, but again, I can’t tell you for certain because I didn’t actually
05:29 get an opportunity to read it.
05:33 Okay, well, all that being said, don’t use icons right no.
05:37 We’re going to actually move forward because yes, there will be points
05:40 where you’ll need to use icons.
05:41 And the next thing I kind of want to talk about is the design of those icons.
05:45 I mean, admittedly, we’ve just talked about, you know, the things that
05:48 you need to take care of when you’re actually thinking about a particular
05:52 icon that you could be creating.
05:54 But let’s say that you actually do need to create an icon, right?
05:57 And you probably have seen out there these icon grids and the purpose
06:03 of those icon grids, by the way, is meant for optical alignment.
06:07 So a play button is a really good example of if you were to just center the play
06:12 button box, the way that you would design that without the grid when you place it
06:17 inside of an element, that play button is going to look off balanced immediately.
06:23 And what you’re meant to do instead of just, you know, creating that triangle is
06:29 to put that triangle inside of this icon grid that you’ll find on the internet.
06:33 It’s very simple to find and I’ll put a sample of it in the show notes, I suppose. 2
06:39 But what that’s meant to do is meant to help with the optical alignment.
06:42 And in fact, there’s actually a good video on YouTube that talks
06:47 about different kinds of centering when it comes to geometric figures.
06:51 It might not be entirely helpful for all symbols that you might make in a icon
06:58 system, but I think there’s a lot of interesting information in that video.
07:02 So I’ll make sure to link that in the show notes as well.
07:06 But, as you’re creating this icon, obviously, there’s going to be
07:09 some sort of style that you’re trying to apply to this icon.
07:12 Maybe the icon is outlined, or maybe it’s filled.
07:15 Maybe the stroke width is thin or thick.
07:18 Maybe there’s a certain amount of rounding to these edges and corners.
07:22 Maybe the, there’s a miter edge on some of these angles.
07:25 Right, there’s lots of different decisions that you’ll be making in your icon set.
07:30 And it’s really kind of important that if you are making an icon set or even
07:34 attempting to collect icons for your own app, if you’re not an icon designer,
07:39 to really look for icons that are meant to be in the same family that
07:43 are meant to work together in unison.
07:47 Now that can be a step further, because I believe that your icons
07:51 should also work really nicely with the font that you expect to use.
07:56 Okay?
07:56 So you can imagine that if you have a bold weight that you should also have
08:01 some sort of bold weight icon, whether that be an outline or a filled icon.
08:06 So, trying to keep that in sync is actually a really difficult thing.
08:09 Difficult thing to do, right?
08:10 Especially if you are relying on lots of icons to help convey
08:15 messaging in your interface.
08:17 Right?
08:18 That exercise of aligning your typography and your typeface to
08:22 icons can be a little overwhelming.
08:25 So but of course you might be making your own and that’s fine.
08:28 And admittedly like I said earlier, I’m not an expert in creating icons past
08:32 knowing some of the very basics of what’s important when creating those icons.
08:37 But I think the material design icon set is a really great resource.
08:41 I’ve used it on a couple of my projects for a couple of small icons.
08:45 We’re talking, you know, things like social icons or the close icon,
08:50 menu icons, very simple kind of.
08:54 Almost universal icons.
08:56 Speaking of universal icons, that’s a research study that
09:00 I’ve always wanted to do.
09:01 I’ve wanted to do it since like 2018 and try to identify what icons
09:06 could be meant as universal, right?
09:09 When we see that X, I think at this point we all, Kind of have expectations
09:15 about that icon and what it’s meant to represent at this point, right?
09:19 It’s meant to close something.
09:21 I think user interface design has come a long way over the decades
09:25 that we’ve been doing it to recognize that that X actually does mean close.
09:29 So I would like to think that there’s other icons that are like that,
09:32 that are universally understood.
09:36 And to identify those would be really great as a research study so that there
09:41 would be a library of things that folks can look toward to then align as a
09:46 baseline for their own icon sets, right?
09:48 A place to start from.
09:50 I imagine, of course, the X is probably the first icon in most places because it,
09:54 it is meant to close items that are open.
09:57 I’m excited to potentially dive into that at some point.
10:01 So, going on with the designing of the icon, another decision that you’re going
10:06 to be potentially making is if this is a monochrome icon or multicolored.
10:11 Now, I will Say from my experience that most icons that we have in
10:16 our systems today are monochromatic because it’s a lot easier for us to
10:21 maintain from a systematic standpoint.
10:23 Additionally, multicolored icons, when you reduce the size of those, end up losing
10:28 fidelity and end up actually being a little bit harder to identify as an icon..
10:33 You want it to be simple and really straight to the point about
10:36 what it’s meant to represent.
10:37 And the more stylistic choices and accessories that you end up putting
10:42 onto the icon, The less it’s discernible about what it’s trying to convey you
10:47 would think that it’s more because you’re putting more detail in it But in such a
10:50 small area, it’s really hard to create those finer details especially folks
10:55 who are vision impaired that are going to be trying to identify these small
11:00 glyphs in the page and suddenly have blurry color mixed in between of that.
11:06 So keeping them as a monochrome symbol is going to be really helpful
11:11 for you as opposed to trying to think about multicolored icons.
11:15 I imagine that there’s probably ways of handling that, but.
11:19 You know, keeping it simple is really going to go a long way in that way.
11:22 All right.
11:23 So that’s going to be enough.
11:24 I think about designing icons as much as I can really talk about it.
11:28 Right.
11:28 The next thing I kind of want to talk about is serving icons.
11:31 And this is going to be coming from a web perspective.
11:34 It’s not going to be coming from a native iOS or Android perspective.
11:38 I know that there’s different ways and expectations of serving icons
11:43 to those platforms, but what I’m.
11:46 Familiar with, of course, is the web, and I think there’s also a lot of nuance when
11:50 it comes to serving icons on the web.
11:53 Now, for a long time, we’ve had something called Font Awesome.
11:57 And that was an example of a font icon library, which basically meant that
12:02 all the icons were distributed as a font, so that if you had a particular
12:07 glyph that you were going to show in this library, instead of, typing out,
12:12 a character on your keyboard, you would actually get a different glyph.
12:16 So maybe it was like a battery icon for the letter K that’s just top of my head.
12:20 I don’t actually know if that was accurate, but that was the general gist
12:24 there and the benefit of that, of course, is that it’s really easy from a developer
12:28 experience side of things to get the icon that you need right on the page, visible.
12:34 With really no fuss because we are familiar with the way that
12:38 we would load fonts today, right?
12:41 It’s pretty easy to load a font on the web at this point, you know the font
12:43 face declaration So just putting a link to your font set was really easy and
12:49 then having you know A symbol that’s inside of your HTML that represents
12:54 that glyph was really great A couple of caveats with this number one is that
12:59 that symbol is kind of inaccessible and it’s really important going all
13:04 the way back to the accessibility part.
13:05 Is that really any icon is going to be inaccessible because it’s
13:10 just, you know, an image, right?
13:12 You need to have helper text with it, but is especially problematic
13:15 when you have letters or other symbols that end up in your markup
13:20 that the screen reader might read.
13:23 By mistake and really confuse someone that’s using assistive technology.
13:27 So it’s super important to make sure that you hide Those symbols from those screen
13:32 readers, maybe even setting them as role presentation in some cases to again Make
13:37 it a little bit easier for folks using assistive technologies to understand
13:41 the meaning behind that stuff, right?
13:44 But distributing as a font was one way of doing it.
13:46 It’s one of the ways that material design does distribute their fonts.
13:50 But on top of that, Material design also distributes ligatures.
13:54 Now, the interesting thing about the ligatures is that when you combine the
13:59 right characters together in that icon font, you will actually display an
14:04 icon and what’s really powerful about that is that in the perfect cases, the
14:12 letters that you would combine together, which would represent that icon, right?
14:17 Would be the word.
14:19 That would represent the icon.
14:20 So you could imagine the word close as a ligature would then actually
14:26 present a X visually in the HTML.
14:31 Now, I think that’s really cool.
14:33 There is again, a gotcha in there is, and that gotcha is if that word close is
14:40 translated into something else certainly that icon will no longer be there.
14:44 Behave like you expected it to.
14:46 So again, you might look at the ligatures and go, that’s a really cool idea.
14:51 I think that would be really helpful in terms of just again, typing out
14:54 the word close and getting an icon.
14:55 I think again, that developer experience is really nice because
14:58 there’s a lot less lookup, but again, think about that localization piece.
15:02 And how you might translate those characters into something else
15:07 and then your ligature breaks.
15:09 So just pay attention to that.
15:11 Now.
15:13 Continuing on with the serving icons topic, what we typically
15:18 do now is our icons these days are usually served as SVGs.
15:23 Okay, Scalable Vector Graphics, usually small ones.
15:26 And there’s lots of different ways of serving SVGs to your webpages.
15:33 One of them, of course, is inline, right?
15:35 Because SVGs are actually markup just like HTML, and you could put
15:39 that markup right in the page.
15:42 Now, depending on the number of icons that you expect to have on the
15:46 page, it might be A little bit more performant or potentially a better
15:52 experience to actually put all the icons that you expect to use in a
15:56 page inside of a symbol element.
15:59 And there’s a great CSS tricks article, 3 actually a series of them that
16:04 describe how to compose that symbol element and what you might use it for.
16:08 But essentially you can think of that symbol as an SVG sprite sheet.
16:12 That you can actually reference an icon from that sprite sheet up in your markup.
16:17 And it’s almost like copying an instance of the icon into a
16:22 location without duplicating nodes.
16:25 So you can imagine, our normal interfaces and us making copies of
16:29 nodes and, you know, div soup all the way down, the amount of elements
16:33 that are on the page are potentially going to hinder performance, right?
16:37 But imagine the ability to actually just copy an instance of a node.
16:42 And I think that’s really cool.
16:43 In fact, I think that would be really great for web components, but
16:46 that’s a separate thing entirely.
16:50 So that’s one way of doing it.
16:51 Another way of serving these SVGs is actually externally.
16:55 And as CSS tricks also talks about serving SVGs externally as well.
17:02 Now you can imagine that when you serve SVGs externally as icons the difficulty
17:08 there of course, is that that’s an additional network request, right?
17:11 Because if you’re doing it on the page, that means that those SVGs are there
17:15 when the page is initially loaded.
17:17 It’s part of the markup.
17:18 When you do it as an external request, that means that you have
17:21 another request going down to your server or another server to get
17:26 these SVG icons after the fact.
17:27 And that means that, once the page is loaded, it’s entirely possible
17:31 that there’s like a flash of unstyled content or additional elements that
17:36 are popping into the page because there’s other requests happening.
17:40 But if you do that internal sheet, you kind of need to have
17:43 all of the icons available.
17:45 Unless, you know exactly what pages are using what icons.
17:50 Now you might know, or think that you know, what icons are being used on what
17:54 pages, but from a component shareability standpoint, it’s a lot harder.
17:59 And the reason it’s a lot harder is because these components that
18:03 could be shared or composed from other larger experiences, they might
18:08 not disclose that there’s an icon part of that experience just yet.
18:12 It might be added dynamically.
18:14 So there’s a lot of challenges in there, right?
18:18 I personally tried to tackle this myself.
18:20 There’s a package called savager that I made a few years ago. 4
18:24 That was an exploration on how we might actually solve for this.
18:28 And what I do in there is I kind of generate a a sprite sheet, but I use
18:33 a manifest of all the icons kind of upfront, so I know what to be used.
18:37 And then you can import the icon, you know, the top of the file.
18:41 And then if it’s not on the page, we’ll go and find it.
18:44 But if it is on the page, then.
18:46 it’s all good So you could also preload that sprite sheet with, the common use
18:50 icons just up front and then other ones that you would need after the fact,
18:54 you know, will be pulled in as needed.
18:57 So you can take a look at it if you like.
19:00 It’s in the show notes.
19:01 And admittedly, I’m not maintaining it.
19:03 It’s been a while.
19:03 I don’t think anyone’s using it.
19:05 I used it on a site a few years ago and it seemed like it was
19:09 working, but again, haven’t really kicked the tires in a while.
19:12 So Maybe use your own risk, of course.
19:16 So another thing I wanted to kind of talk about as well is
19:19 optimizing these SVGs, right?
19:21 Because if you’re creating SVGs in a art program like a Figma or Illustrator,
19:28 a lot of the times what’ll happen is when you export that icon, there’s
19:31 a lot of additional metadata that really doesn’t need to be in there.
19:34 And there are tools out there that help you optimize your SVGs.
19:40 There is a Tool called SVGO, which you can send SVGs through and pipe
19:47 them to be transformed into more optimized versions of themselves.
19:53 So it basically reduces all of the extraneous markup that you
19:56 don’t need while still maintaining the visual style of your SVGs.
20:02 It’s really important that you just don’t do that blindly because sometimes
20:07 the way that it might reduce your Data will actually lose some fidelity.
20:13 So make sure that you’re, you’re set the settings, right.
20:17 And you know, double check that the output is correct before you put
20:20 it, that it’s production, right.
20:22 A tool that’s using SVGO that is on the web that Jake Archibald,
20:27 I think his name is right.
20:29 I think, let me just do a quick check.
20:32 So Jake Archibald made a tool that’s I use all the time, which is SVG OMG. 5
20:39 And it’s basically a web UI that has SVGO under the hood.
20:44 And it’s really easy to use.
20:46 I use it all the time for my Icons and other illustrations that I have
20:51 that I really want to quickly just pop in, get a formatted version of
20:55 the SVG out and keep moving, right?
20:57 It’s not often that I have an entire set of SVGs that I need to have optimized.
21:02 But imagine if you have a process that you’re putting all your SVGs through,
21:07 all the new ones, you’ll definitely want.
21:09 to use the NPM package SVGO to process all that stuff.
21:15 But for a person that’s just going to go ahead and, you know,
21:18 do them one at a time, I think the web UI is really helpful.
21:23 Okay.
21:23 So the last thing that I want to talk about is a little
21:28 bit about user experience.
21:30 And one of the things that I look at is education in design systems.
21:36 And when it comes to icons.
21:39 It’s really ends up being a challenge for trying to find the right icon, right?
21:47 We already talked about accessibility and localization when it comes
21:49 to icons and how much trouble that it is there, of course.
21:51 But even when you think that you have the right icon in mind, sometimes
21:56 it’s really hard to find, right?
21:58 Because sometimes the naming convention in that system is done by.
22:03 The expected purpose for that icon, and sometimes the icon is underneath
22:09 a name that is more describing the shape of that icon, right?
22:14 So that’s the difference between the word close for the X icon, and
22:18 the word X for the X icon, right?
22:21 Or the word cross, or something of that nature.
22:23 So Now, granted, a better system, of course, is to have aliasing
22:28 that could represent both of those things in your system, right?
22:32 So that you could have different tags that represent icons so that someone that’s
22:35 searching for an icon can look for all the different aliases that it might be,
22:40 and then be able to show some suggestions about some things that are close.
22:46 I actually remember Font Awesome doing a pretty good job at this, where
22:50 when you do search for icons on font awesome it gives you things that are
22:53 potentially direct matches as well as things that might be not so direct,
22:58 but still up your alley, right?
23:01 It might be a little bit off, right?
23:02 So it’s
23:03 the ability to search for icons, I think could be improved or.
23:11 Maybe not improved as much as I would say different.
23:16 Because I don’t know how much of an improvement it would be.
23:19 What I have in mind is not searching for icons via text.
23:25 I think that it would be interesting to search icons via drawing.
23:32 Or, well, describing what you’re expecting.
23:36 Right?
23:37 So, there are tools out there today.
23:41 One of them is called Shape Catcher. 6
23:43 That allow you to draw a symbol.
23:46 And after that symbol is drawn, it will provide you a list of
23:51 suggestions that match that symbol.
23:55 And I think that’s really interesting.
23:57 Because then, instead of attempting to describe what you have in mind using your
24:01 words, you have a vision of what this icon is meant to represent already, right?
24:08 There’s something in your mind that says, Ooh, I’ve seen this same
24:11 sort of, you know, symbol before, but I don’t know the name of it.
24:16 I wish I could just draw it out and get it, right?
24:20 Well, that’s kind of what Shape Catcher does.
24:22 And I believe actually Google had something similar to it.
24:24 If I could find it, I’ll put that in the show notes as well.
24:27 But these were the abilities to search basically by drawing.
24:33 And these are early instances of us doing like a search by image, right?
24:38 That’s a, you know, standard Google thing of being able to search by image.
24:41 But to be able to get a specific symbol based on that image is
24:45 actually really interesting.
24:46 So, I imagine, you know, Whether or not it’s an improved experience because maybe
24:53 it’s hard to draw using a laptop or a mouse, you know, or what does it mean to
25:00 be an accessible drawing experience for identifying an icon, I’m not sure, again,
25:06 it’s a very rudimentary thought about how to find the icons that you’re looking
25:11 for past trying to think of a name for it, but I think it could be interesting.
25:18 And I think it would be worth exploring what that might look like as a
25:24 mechanism to find appropriate icons.
25:27 So I think that’s about all I know about icons.
25:30 Icons are actually really their own system in and of themselves, right?
25:35 Because they have their own designs.
25:37 They have their own ways of distribution.
25:39 They have their own localization parts in them.
25:42 But yeah, what do you think?
25:43 Tell me about your, I don’t know, your favorite icon.
25:46 Do you have a favorite icon out there?
25:47 What is my favorite icon?
25:49 I don’t know.
25:50 I think that that X icon because it’s so ubiquitous.
25:52 I think that’s probably one of my favorites because it’s just, you know,
25:55 you know, you’re going to need it and it’s going to be in there in the first place.
25:58 Maybe tell me about your favorite menu icon because there’s so many of them and
26:04 they all basically mean the same thing.
26:06 So yeah, tell me about that one too, if you’re interested.
26:08 But other than that, thanks for joining me on this one again, and
26:11 I’ll see you on the next one later.