The Thing About Icons

icons-4

We love icons and we want them in our apps. Woohoo, let’s add some icons! But wait. Where should we use them? When should we use them?

Consider the VIMM model (Visual, Intellectual, Memory and Motor) and its impact on the user experience. For kicks I’ve added typical comments you might hear when discussing icons with your team.

We should use icons everywhere for consistency.”

(sounds like visual clutter)

We’ll need a version of that icon for a similar but different function

(getting difficult to remember)

What does that icon represent?

(feels like intellectual or cognitive load)

These conversations can quickly lead to frustration between designers and stakeholders.  That’s why you should have a set of guiding design principles that are understood by team members and supported by stakeholders.

Consider the following guidelines the next time you plan to use icons in your app.

Icons should support VIMM…

  1. Reduce Visual Work
    • Use sparingly to improve scanning and avoid visual clutter
    • Use as visual cues to accent priority content and functionality
    • Style so they are easily recognizable as part of a family or set
    • Position and scale so they do not visually compete with content
  2. Reduce Intellectual Work
    • Use similarly styled metaphors in sets
    • Use metaphors that mimic familiar objects or tasks
    • Avoid mixing nouns with verb forms (things vs. actions) in sets
  3. Reduce Memory Work
    • Pair with a label wherever possible (labels are recognized faster and easier to remember)
    • Logically group and consistently position in the interface
  4. Reduce Motor Work
    • Make icon labels selectable text
    • Make icons larger when not paired with text

Learn more…