Understanding why icons are important for successful UI design

Understanding why icons are important for successful UI design

In a short walk down your street, you pass numerous symbols such as the red octagon stop sign, the United States Postal Service bird on blue mailboxes, the yellow and black walk sign.

What these symbols and icons convey helps you immediately recognize and know something or take an action, without massive wording, such as: “You must stop right here and look around or you’ll get hit by a car!”

Icons are part of the larger umbrella of user UI design, something we’re affected and surrounded by every single day.

Introduction to UI design

The world of user interface (UI) design is so broad that students can spend entire bachelor’s degree programs mastering the subject (and then move on to master’s degrees in that subject!)

According to Worcester Polytechnic Institute, UI design can be broken down into three main missions

  • Organize (tell the user something easy to understand and make this message consistent across the site, app, etc)
  • Economize (tell the user your message as directly as possible)
  • Communicate (give the user this message by keeping elements of UI design such as color, font, readability, and typography in harmony)

The good

Not to sound all sales-y or like we’re rushing down Wall Street, but good user interface design is all about “Always Be Closing.”

Nope, not in the high-pressure sketchy way (see “The Illegal” below), but in the idea that your design has a purpose, to get someone to do something. It could be as simple as just reading your new blog. It could be to get him to call you.

The University of Maryland calls this “designing to yield closure.” Whatever it takes to communicate your desire to get someone to do something (other than the “Click here” blinkies of the early 2000s) should be high on your UI design checklist.

The ugly

Bad news: Crappy UI design can live forever in infamy, even being taught in school.

You do not want your site or app to get aggregated into a meme, listicle, or other online posts upon which your mistakes can haunt you way past the point of you fixing them.

The illegal

Can poor UI design get you thrown in jail?

The AOGA, a collective of designers and graphics experts, reports on how easy it is to fall into a trap of manipulating, trickery, and deceit. 

This could include sites that aren’t designed with the user’s interest in mind (only the user’s credit card or even identity details), with icky factors such as bait and switch, heavy pressure to buy something, or claims that are untrue but hit sensitive spots (“fat free,” “100% natural,” “not tested on animals”).

One way that you can ensure your UI design is built for the masses, as well as the protected classes, is to spend some time on usability testing.

This is sort of like an electronified focus group, where you bring in outside people (because your developers and designers have spent way too much time building and staring at their work to have an impartial feeling) to click, swipe, type, save, and actually try to break your code.  

Stop

Icons: Hieroglyphics of the modern age

Way before the word “emoji” took over and gave texters even more shortcuts than they really needed, small pictorial images had taken over all of our devices and screens. We call these icons visual cues.

Usability.gov, the government’s branch dedicated to computer and device accessibility, defines icons as a “simplified image {that is} an intuitive symbol used to help {people} navigate.”

In other words, an icon is an easy to understand picture that people can instantly see and know what it is indicating they do.

The site notes that icons can be both navigational or informational, with navigational icons usually being something you can click and go elsewhere and informational icons being something you click to get further details.

Why use icons

When you’re trying to prevent a person from walking into oncoming traffic, what would you choose: A message he has to read and process or a graphic image that conveys that message to the brain 60,000 times faster

We thought so.

Benefits of icons

Not to be ironic, but icons can be iconic. (Sorry, we couldn’t resist.)

One of the biggest benefits of icons is that they can be universal. When you add a red “X” to your user interface design, just about every single user will understand that clicking that icon makes whatever it is on disappear.

Icons cross boundaries and demographics. An icon is a picture communicating something instantly, unambiguously (most of the time, though not always).

Icons can also support your UI design in big ways. They may get a lot of attention because they’re small and pack a powerful punch, but they do work hard in your applications:

  • They can make your lists look more engaging. Instead of basic bullets or drop-downs filled with words, design a themed group of icons for another way to capture instant attention.
  • Icons can quickly draw the eye. If you want users to do something immediately upon opening your application, submitting information, or navigating somewhere, try an icon during your UI testing process and see if it directs behavior where you want it to go. 
  • Cross boundaries. Even if you have an extremely niche product, your users may be more diverse than you think. Chances are, though, most of them will understand that if you place an icon of a question mark in your application (particularly in the top-right corner, where many people have become conditioned to look), they will almost all know that clicking it gets them some sort of help, whether it be live chat, a search/index pop-up, or trigger an email to open.

Worried about words?

Don’t be.

UI design doesn’t dictate that you can’t have words in your icons, or even make your entire icon out of words.

Many of the examples on the Awwwards graphic design website have textual icons. But note how the user interface design makes those letters far more than just text on a background.

Mobile Apps

Pop over to our site

Feel ready to get your icon into the iconosphere?

Or need a little more help, inspiration, or direction to really capture the perfect UI design?

Contact us here and we will help you get on your way.


Vector icons a la carte from only $.99

Samples

Shop from thousands of high quality vector icons, providing a consistent look for your project. No subscriptions. Great prices. And free icon sets too.

Shop For Vector Icons


If you like this, please share!


Leave a comment

Comments will be approved before showing up.


Also in The Icon Blog

Where Does Intuition Come From?
Where Does Intuition Come From?

Intuition plays a key role in design, technology, and our everyday lives. But what is intuition really? Where does intuition come from? 

Continue Reading →

Why symmetry is so important in modern design
Why symmetry is so important in modern design

The role of symmetry has significant benefits when studying and composing modern designs. Continue reading to learn more about the importance of symmetry.

Continue Reading →

What Car Symbols Really Mean...
What Car Symbols Really Mean...

Continue Reading →