← Writing

Designing Icons for User Interfaces

Originally published on Medium

November 13, 2020 · 10 min read

Have you ever stared at your keyboard and wondered how your brain could recognize and associate actions with the vast array of glyphs? Or how all of the icons on Apple products, even though they represent the same thing, look different from icons on Google products? Are you a designer that was just tasked with creating a new icon for an existing icon family and doesn’t know where to start? Well then, you’re in luck. We’ll be covering all of those things and more!

In this article, we’ll be dissecting,

• How icons work

• Why create icons? How are they useful in user interface design?

• A few myths surrounding icons and usability

• How to effectively create and validate an icon design

How Icons Work

User interface (UI) icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.

UI icons employ visual metaphors to speed comprehension by transferring properties from something we already understand. UI icons are typically created on a square (1:1) canvas and follow a strict set of rules to ensure consistency. Illustrations, on the other hand, also use visual metaphors to accomplish a similar goal. However, they often tend to be more free-form in visual representation and don’t always follow strict rules that icons adhere to.

In some cases, the metaphor is literal. The alarm icon in the Carbon Design System, created by IBM, for example, represents a classic mechanical alarm clock with bells, carrying over functionality we’d expect — it rings to wake us up on time.

Sometimes, the metaphor is a little outdated but understandable through repeated use. In the early days of personal computing, we used floppy disks to save and backup our files. Though we don’t use this technology anymore, many applications still use a floppy disk icon to indicate a save action.

Other times, the metaphor is a little more abstract. The shuffle icon and undo icon communicate their meaning through the implied movement of the arrows.

Using Icons in User Interfaces

Here are some examples of how icons can enhance the ability of your users to complete tasks successfully:

Icons can:

• Create a common visual language that effectively bridges language gaps.

• Be used to improve a design’s visual interest and help direct a user’s attention.

• Provide functionality and feedback. Imagine a video player with the words play and pause compared to the icons currently used.

• Enable us to communicate an idea quickly.

• Support the notion of a product family by providing another medium for the brand identity to be expressed.

UX Myth: Icons Can Enhance Usability

According to the Nielsen Norman Group,

“A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.”

Research has shown icons are hard to memorize and are often highly inefficient. In most projects, icons are formidable to get right and need a lot of testing. When it comes to representing complex or abstract concepts, icons rarely work well.

UX Myths, a blog that collects the most frequent user experience misconceptions and explains why they don’t hold true, curated a list of studies and articles on the myth mentioned above that “icons can enhance usability.” Here are the highlights:

1. UIE conducted two experiments to test how users use icons. They first changed the pictures of icons in a toolbar but kept them in the same location. Users quickly adapted to this change. Afterward, they kept the images but shuffled their location in the toolbar. This change confused the users, and it slowed them down, and, in several cases, they could not complete common tasks.

2. Michael Zuschlag says that “icons, contrary to intuition, do not necessarily help the user find a menu item better than a text label alone. It’s not worth it.” He also discusses his views on UX Exchange.

3. The former icon-only toolbar in Microsoft Outlook had poor usability, and changing the icons or their positioning didn’t help much. The introduction of text labels next to the icons immediately fixed the usability issues, and users started to use the toolbar. Another test revealed people remember a button’s position instead of the graphic interpretation of the function. — The Importance Of Labels

4. A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity. — Icon Usability

5. In the battle of clarity between icons and labels, labels always win. — Labels always win.

6. “When in doubt, always remember this: the best icon is a text label.”

7. Don Norman says that “Inscrutable icons litter the face of the [Apple] devices even though the research community has long demonstrated that people cannot remember the meaning of more than a small number of icons. Icon plus label is superior to icon alone or label alone. Who can remember what each icon means? Not me.”

8. In another study, the team at UIE observed that people remember a button’s position instead of the graphic interpretation of the function.

There are a few more items UX Myths present in their findings, but they repeat the same sentiments like the ones listed above. If you like, you can read the entire list here.

Although icon usage is not likely to substantially impact your product’s usability, it can help provide a better user experience.

Icon Grids

There are always clear, established rules for consistent but flexible positioning of graphic elements within an icon family. These rules usually take the form of an icon grid. They delineate the icon’s dimensions, the underlying pixel grid, and key gridlines — or keylines — to follow.

Icon grids are composed of 5 elements,

• Pixel grid

• Keylines/shapes

• Orthogonal

• Mask

• Safe/trim area

Pixel Grid

Pixel grids help you draw in specific increments if you are snapping to a grid. A 1px increment has been the digital standard for some time now. However, because of improvements to screen resolutions, subpixel hinting, and anti-aliasing, a half-pixel increment has recently become more frequently adopted.

Pixel-snapping helps render icons sharp on lower resolution screens but has become less critical as hardware rendering has improved.

Keylines and Keyshapes

Keylines are used to vertically or horizontally align lines and shapes in the icon grid. Drawing along an icon grid’s keylines helps ensure visual consistency in an icon set.

Keyshapes provide template shapes to start from. Four basics are standard: a landscape rectangle, circle, portrait rectangle, and a square.

In their Carbon Design System, IBM uses these four keyshapes to draw icons for Email, Next, Hourglass, and Calendar.

You can think of keyshapes as a starter kit, providing just enough to set the standard while leaving room for flexibility and creativity. The intention is not for every icon to map perfectly to a basic shape, but rather to build a place to start and drive consistency.

Orthogonal

Orthogonal is a term derived from mathematics, meaning “at right angles.” It’s related to orthogonal projection, another method of drawing three-dimensional objects. In the context of icon grids, orthogonal refers to the keylines that intersect the icon’s center point and create additional vertices to use. These lines commonly slice the canvas at 90° and 45°. When different angles are needed, increments of 15° and 5° are usually the next steps.

Mask

A mask customizes the container of an icon from the default square canvas. Masks may be embedded in the asset itself or applied afterward using CSS styling. Here you can see how Apple’s App Store uses a rounded rectangle mask across all its icons, the app icon for Spotify.

Safe/Trim Area

The safe area or live area shows where the icon’s important content should live, while the inverse — the trim area — shows the area to avoid. In some cases, the safe area is more of a suggestion, but the safe area is strict when the content will be cropped.

Optics > Grids

A quick word of advice for icon grids, as with any grid, is meant to be used as guides, not hard rules. Drop them when they stop working for you. Always check for the optical balance. The example below shows how the curve for the forward-5 icon doesn’t quite match up with the circle keyshape.

It’s often necessary to deviate from the grid for visual balance. Follow what looks optically right, not strict metric values.

For more information on optical effects, this article by Slava Shestopalov: Optical Effects in User Interfaces: An Illustrated Guide is an excellent introduction to the subject.

Implementing Icons in a User Interface

Context is everything when it comes to icon design. Start with the user and where the user will encounter the icon. Reference user personas, demographic information, etc., as your contextual starting point. What language do they speak? What countries do they come from? What accessibility considerations are involved? Will they view the icon on their phone or a highway sign?

Like most tasks associated with user experience design, creating a high-quality icon requires a thoughtful approach, a trained eye, a bit of iteration, and a lot of practice.

A good process for designing icons starts with quick thumbnail sketches. It’s essential to generate as many as possible within a short period. It’s helpful to timebox these things, so to start, try generating 20 thumbnails and spend no longer than a minute on each.

Then, choose three of those sketches that best communicate the idea and product brand. Next, try to sketch at least five adaptations of each thumbnail idea selected, spending no more than 5 minutes on each sketch.

With these 15 or so, new sketches pick — or often consult with another designer to get a second opinion — the top 3 ideas from this group. Then redraw these ideas to work within the product’s icon grid. At this stage, utilizing keylines and keyshapes helps ensure your sketches work visually within the icon set.

Brand Alignment

Finally, it’s optimal if icons fit nicely into the design and enhance the aesthetics rather than working against it. Evaluate your icon designs against your company’s brand guidelines. Does this aesthetic align with your brand’s personality and tone?

The aesthetic appeal can also be tested via a preference test, which heavily depends on your audience’s opinions and tastes.

Validating Icons

Now with these refined compositions, it’s time to evaluate if users understand the new icon. Here’s a list of the key attributes that you can test for, with some questions that a user might ask of an interface, like a file manager:

Findability

First of all, your user has to be able to find the icon in your design.

“How do I delete this file? Where’s the delete button?”

Both the navigation test and first click test are great for testing findability, critical to measuring in-context. The rest of the interface is an integral part of how a user finds an icon, so testing without it makes it hard to get accurate findability data.

Recognizability

Second, your user has to identify the form of the icon — be it a real-world object like a floppy disk or a metaphorical device like an arrow or network node.

“Is this icon a trash can or a cup of tea?”

Comprehensibility

Next, a user must be able to interpret the functionality that the icon is shorthand for. Can the user quickly determine what the icon does, rather than what it is?

“Does a trash can mean that I’m deleting this forever? Or can I go back and recover it in the future?”

Recognizability and comprehensibility can be tested in a variety of ways:

• Design surveys give you unstructured, free-text feedback from participants.

• Five-second tests measure how memorable the icon is.

• Preference tests help you discover the icon that is the most understandable to participants.

• First click or navigation tests give you a view of the icon’s overall performance.

Further Learning

This guide provides a general outline of the topic, so I encourage you to explore it. Here is a list of resources for further learning:

Material Design Principles

Optical Effects in User Interfaces

Material System Icons

Apple Human Interface Guidelines

IBM Carbon Design System Icon Guidelines

References:

Nielsen Norman Group, Icon Usability

Material Android Icon Guidelines

Material System Icon Guidelines

Carbon Design System Icon Guidelines

UX Myths, Icons Enhance Usability

A small favor

Was anything I wrote confusing, outdated, or incorrect? Please let me know! Just write a few words below and I’ll be sure to amend this post with your suggestions.