In this section, we're going to look at icons and see how icons work as part of our user interface. We're very familiar with icons. We see thousands of them every day. Every app has to have a visual representation of what that app is in a small and condensed form where the user can recognize it. So, every app has an icon or symbol to represent it and those icons or symbols have to compete with each other and there are thousands of them all vying for your attention. Trying to create visual interest and trying to be recognizable. But there's another place where we also see icons and symbols working and that's in the interface itself. These icons were based on objects in the real world and it's interesting to see how little they've changed over the last 20 years where their form has been modified, the essential essence of the icon has stayed the same. One of the things that people often get confused about is the difference between an icon and a symbol. Part of this reason is we tend to use the word icon for both symbols and icons, so let's look at what the difference is between the two of them. Both of them represent other things. An icon does that by showing us a picture of the thing. It shows us a visual representation of it that is relatively realistic compared to what the object is. So, in this case, here's a set of headphones and it looks like the headphones. But a symbol doesn't necessarily look like the thing that it represents. So, for instance here's music and it's represented by notes. So, the icon is pictorial, whereas the symbol is non-pictorial. It's not an accurate visual representation of the thing that it's representing. It will be hard to represent something as broad and something as abstract as music with a fixed single visual image. So, to sum it up icons really do look like the thing that they're representing and symbols tend to not look like the thing that they're representing. One is pictorial and the other is non-pictorial. So, sometimes, you're going to want to create an icon to represent your ideas and sometimes, you're going to want to create a symbol. It really depends on what the thing is that you want to represent. For instance, a dagger is very easy to show a picture of, but if we're talking about a concept, something as abstract as thought for instance, it's quite hard for you to think of an image of that, so we have to create a symbol to represent that concept or that idea. It becomes a little confusing when things are ambiguous and can work as icons or symbols. This lightning bolt for instance could be an icon because it's a picture of lightning but it could also be a symbol for electricity. Something that doesn't necessarily have a visible form but needs a symbol to represent it. Often we can assign meaning to things that can make them work as icons and symbols. So, as an icon the magnifying glass looks like a magnifying glass, so it represents that but as a symbol, it stands in for the idea or concept of searching. What's interesting about the magnifying glass is we use this as a very common icon for two different things. We use it when we want to zoom in and zoom out, which is its iconic function, but we also use it when we want to type text into search for something, which is its symbolic function. Our interface elements can work as icons and symbols but so can our branding elements. Here is something that we instantly recognize, but not so much in its iconic form as apple the fruit but in its symbolic form as Apple the company. That's to do with our particular familiarity with this rendering of the form of an apple. It becomes a symbol that is representative of a company that we've all learned to make a connection to. We don't even see an apple and think of food anymore when we see it drawn in this way, we can only think of the company. So, the symbolic representation in this form has totally eclipsed the literal depictive value of it. Some of the best icons or symbols tend to keep hold of their literal value and their learned value. So, let's look a little bit more at how that works. We can have icons that work in a purely iconic way but they can also overlap and become a symbol, and in the same way, symbols can overlap and become icons as well. If we can enter this middle ground where we can get the value from both the iconic meaning and the symbolic meaning, it gives us a much richer element to work with. So, we're trying to connect the meaning between the icon and the symbol to create this very rich graphic element that we can use in our interface or we can use in our branding. The goal here is to combine what is known, what is visually obvious with what is learned. In other words, what is associative and might not be visually obvious. Let's look at some other examples of icons and symbols that are commonly used in interfaces. We use a pair of scissors to represent the idea of cutting and pasting but in the real world, scissors actually function just as devices for cutting and mostly just for paper, not for files or text or other things in the digital world. Likewise, a trash can is the place that we throw files away. We delete our files there, but we're not actually physically throwing anything away, we're dealing with digital files that we're deleting off our computer but a metaphor from the real world, helps us understand how to operate in the digital world. Likewise, if we wanted to send an email, it doesn't actually look anything like a letter, but we're used to seeing this symbol to represent the idea of sending electronic mail. So, we use antiquated things from the real world to represent new things in the digital world. Symbolic meanings have to be learned, so when we look at this image of a bird, we don't actually connect it to a bird, we connect it to Twitter, the company. So, we know that when we click on this bird, we're going to send a tweet. We're not going to go to a bird watching site for instance. So, there's a connection here between how our interface elements might work and have meaning and how our branding elements work and have meaning. To put it another way, quite often there's a merging between identity and interface. You can see this with something like Twitter for instance. If we look at the wide range of visual representations of that particular company in a symbolic form, where any of these things could be buttons and we'd know exactly what we were going to get if we clicked on them, we're going to get to Twitter. We're not going to get to a page that's about bird songs. In this introductory class, we're only really going to touch on these ideas of creating symbols and icons for both interface and identity. If you were doing this in the real world, this would be a specialization where you'd be really working as an icon designer and doing very little else in part of the UI/UX process. So, we can look at something like Google and see how much work goes into really extending that system across a number of different icons and creating a really strong visual identity. A lot of time and effort and precision is put into creating each of these icons or symbols. So, again, it becomes quite a specialist job within the UI/UX world. So, let's look at some simple rules for what might make a good icon. Think about what you want your icon to communicate. It needs an idea and it needs to communicate that through its aesthetics as well. Think about its functionality. It's got to work at different sizes, it's got to be clear and legible. You could think about the audience. It has to be recognizable and it has to be understandable and lastly, think about visual recognition. This could come from saturation from seeing your icon everywhere or it could come from just creating a simple striking and memorable icon.
