Why You Should Start Learning More About Icons

Posted: 15 Mar 2016 05:30 AM PDT

One of the challenges in designing websites for smartphones is the small screen size. It can be difficult to fit even basic things like navigation labels on smaller screens and when you do fit them all in there's often a lack of space between links leading you to click one you didn't intend.

In my own personal experience, I find the apps I use are often easier to navigate than the sites I visit. I think one of the reasons is that the apps tend to use more icons, where the websites took a desktop first approach and crammed a few too many links into a small space or hid them behind a navicon.

It's led me to think about icons in general and hamburger icons in particular. I haven't used a lot of icons in my work over the years, but as I'm thinking about it more, I wanted to learn a little about how and what icons communicate. A little research led me to the topic of semiotics, the study of signs, symbols, and their use and interpretation.

I want to talk about signs and symbols over the next few weeks, starting today with some general talk about icons. Next week I'll focus specifically on the hamburger icon and in the weeks that follow I'll dig a little into the world of signs and semiotics.

Icons are Everywhere

If you haven't already noticed, icons are everywhere. They're in the apps we use and they're on the websites we visit. I currently have two applications (Ulysses and Firefox) visible on my laptop screen. Also visible is the Mac menu bar. Here are the icons I see.

The Apple logo in the upper left that serves to reveal system wide menu options.
14 icons in the menu bar (most of which I specifically added) to open various apps or operating system functionality. One of these icons opens a drawer to reveal additional icons that I've tucked away.
3 icons each (for a total of 6) at the top left of both apps to close, minimize, and resize the windows.
7 icons in the navigation bar in Ulysses to access different functions of the apps.
19 icons, mostly for extensions, in Firefox; the last being a hamburger icon to reveal even more icons that I can add.
25 favicons to the left of most of the tabs I have open in Firefox.

I haven't even mentioned what’s present on the web page displayed in Firefox, but given it's an article about icons, I didn't think it fair to include. Even without the article itself, I count 72 icons, which is hopefully enough to make my point that they are everywhere.

Why Icons?

It begs the question why so many icons and I think the answer is relatively simple. It's because they generally take up less space to communicate something than words might need to communicate the same thing. They also add visual interest and can get a message across quicker than words.

I'm sure you've heard the expression a picture is worth 1,000 words. Looking at an image takes less time than reading 1,000 words. Quicker doesn't automatically mean better, of course. It just means quicker.

Still an icon communicates quicker and if we agree on the definition of that icon and what it means, then it will also communicate more effectively.

Remove the word stop from a stop sign and I think we'd still know it was a stop sign because of our familiarity with their shape and color. You'd see it out of the corner of your eye and your foot would hit the brakes in a Pavlovian response as you look around to make sure no cops saw you stopping late.

Or would we all recognize it?

It depends on where you live and what stop sign is used in your country. There are actually two standard designs for stop signs and both came about from the 1968 Vienna Convention on Road Sigs and Signals.

Think about that for a moment. Stops signs are pretty close to universal, but that wasn't always the case. Look at some of the old stop signs on the Wikipedia page I linked to in the last paragraph. The old stop signs have the shapes of octagons, circles, triangles, squares, and arrows.

In other words we now have mostly universal stop signs, because we agreed in advance on what stop signs should look like. It's that agreement, that shared understanding of the meaning of the sign, that led to the standard, which is what leads to an instantly recognizable symbol.

Now imagine you encounter a stop sign, but instead of the word stop it includes the word go. I'm willing to bet you'd automatically stop when the sign came into your vision, despite the word go instead of the word stop.

That's why icons. Because once we agree on its meaning, an icon communicates quicker and more effectively than the words we would otherwise use. That agreement is a pretty big if, and we'll talk more about it later in this series.

That doesn't mean I think we should give up words in favor of icons. Some things are still better communicated verbally rather than visually. However, I expect the use of icons will more likely increase than decrease in the coming years.

Again, that's not to say everything will or should be replaced by an icon. Too many reduces the effectiveness of all of them. However, I suspect they’ll grow in use and it makes sense to learn a few things about them.

Closing Thoughts

I hope it's clear that mobile devices are now the primary computing device most people use. Smaller screens lead to more icons given the lack of screen real estate.

That doesn't automatically mean icons have to be carried through to wider laptop and desktop screens, but if more people use smaller screens, it stands to reason they're going to be more familiar with the conventions of the small screen than the bigger one, which suggests we should be more familiar with them too.

Over the next few weeks I want to take a look at icons and more generally signs as icons are really one type of sign. I want to walk through the basics of semiotics and how semiotics can help us communicate more effectively.

However, first I want spend next week talking about an icon that some designers are trying to push toward a standard with a shared and universal meaning, while others curse its use as the greatest evil facing the world today. Next week I want to talk about the hamburger icon.

Download a free sample from my book Design Fundamentals.

Join me as I share my creative process and journey as a writer.