Using Icons in Interfaces
Brent Jackson
Lesson 24
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.
-
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.
-
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.
-
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.
-
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.
-
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.
Brent Jackson
Designer
I'm a UX designer and proponent of simplicity – emphasizing future-friendly thinking, heuristics, qualitative and quantitative research, and designing from the gut. You can find me on Twitter @jxnblk or see some of my work at jxnblk.com.
