Using Icons in Interfaces

With the proliferation of mobile devices, icons play an increasingly important role in interface design. Icons can help aid in scannability, save space at smaller screen sizes, and afford clear, tappable targets. That said, icons can cause user confusion and frustration when used poorly. A solid foundation of heuristic icon design principles will save a lot of time on user research and help lead to the success of a product.

  1. In Defense of Floppy Disks: The Vocabulary of the Interface

    Lis Pardi does some user research to test comprehension of icons' meanings. Find an application that makes use of both familiar and unfamiliar icons. Take the icons out of context and show a few people to see if they understand what the icons represent.

  2. Designing Intuitive Toolbar Icons for Mobile Interfaces by Considering Context and Metaphor Redundancy

    Taylor Carrigan discusses contextual meaning in toolbar icons without labels. Find an interface with actions represented with text labels and then try sketching a set of icons for those actions. Show your sketches (without text labels) to a few people and see whether or not they can guess the meaning of the icons in context.

  3. Icons vs Labels vs Both

    Edward Sanchez digs through some research to better explain how icons and labels aid in perceived usefulness and ease-of-use. Find a mobile app that uses icons without labels. Consider how often the target audience is likely to use the app and how likely users are to learn the meaning of the icons. Is there anything you would do differently? Sketch out options and share them with other designers to have them critique your options.

  4. Icon Only Interfaces

    In Matt D. Smith's response to Layer Vault's progressive reduction article, he stresses using caution with icon-only interfaces. Sketch an iPhone-style tab bar navigation with icons and labels. Consider the meaning of the icons as well as the language used for labels. Take a step back and consider a few different approaches to how information is organized across your application and how it's represented in the navigation bar, keeping the goals of your users in mind.

  5. 9 Rules to Make Your Icons Clear and Intuitive

    Read through the different guidelines in this article. Does it make you reconsider any of the work you did in the previous tasks? Iterate on the sketches you've done so far and try to apply some of the rules outlined in this article.

Finally, an easy to follow design course

Receive a design lesson in your inbox each week, hand crafted by a design pro. Learn at your own pace, and apply it to your real life work – no fake projects here.

No spam ever. We promise.