Icons provide visual cues to help users navigate

Icons provide visual cues to help users navigate

Form and function. It’s the sweet spot for the developer and the designer in their search for the balance of usability and cool factor in UI design. Generally, the user interface should be based on it's intended function.

The (relatively) recent reintroduction of the hamburger icon in mobile interfaces, along with James Foster’s popular a/b tests (and subsequent calls to both embrace and kill it) highlight, but don’t really do much much to clear up the question:

How do we find the right, intuitive balance between text and visuals?

Symbols, signs and icons play a prominent role in our day to day lives. They have become such a part of our culture, language and navigation that we often fail to notice them at all.

There are images that have become such a part of our world that they require no context, and we all know exactly what they represent.

Universal Icons

I’m creating this content in Google Docs, and there are no fewer than sixty icons displayed on the screen of my laptop. Almost any place I want to go or any action that I want to take is just a tap or click away.

The context of my browser and my Docs interface helps to convey the action / intent on a subconscious level. Editing icons, regardless of their position provide an array of easily understood and readily applied actions.

Iconography is communication that in its most effective and efficient form is intuitive. When it requires little-to-­no conscious thought for fluency, it’s an innate second language.

Unfortunately, most of the design and development implementation of icons isn’t going to exist in an interface that has this type of initial, intuitive context.

Universally understood icons are rare.

Hamburger Menus
The hamburger icon is striving to become universally known.

Without design context, the user will try to fill the void, and user-interpretation (or even worse, disengagement) is the enemy of an effective user interface.

Lists and text are certainly effective to make clear and concise navigation. Text provides clarity and allows for the adjectives and adverbs that create context around instruction.

But, we all know that text and lists aren’t user-friendly in our interface.

Text is clunky and visually unappealing, and there have been numerous studies showing that up to 90% of information is consumed visually and that images register in a little as 1/10th of a second.

Fortunately, we can find a happy medium and bridge context gaps through labeling. Icon labels do a good job of providing context around what may otherwise be an arbitrary or unclear image.

Text labels alongside of icons clarify their meaning.

Navigation Menus
Icons provide visual cues to help users navigate.

Take a look at the home screen of your mobile device and you probably recognize the majority of the icons by sight. You use them on a regular basis and have developed familiarity with them.

Now dig a screen or two back. Here are the apps that you use less frequently, and without the labels you likely have no idea what many of them are or what they do.

There is plenty of room for artistic license within your design, provided that you are diligent in providing the appropriate context through the implied functionality of the interface or the thoughtful use of concise text.

The trick is finding the right balance of art, design, clarity and functionality. Fortunately, you can readily find the perfect, stylistic icons for your project to live in the sweet spot between form and function.


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 →