icon checklist

Ten Question Icon Usability Checklist

Posted on design, usability

I’ve put together ten questions that will help designers and developers QA their next project. I created this quick checklist based on discussions with other professionals and computer science students. I hope you find it helpful.

First, what are icons and why do we use them?

Icons are a quick way for us to visually take information in and decide what to do. At their best they are visual shortcuts. At their worst they cause us to pause and think to much about what to do.

The Merriam Webster Dictionary defines icons as:                                                                                                          “A small picture on a computer screen that represents a program or function”

Icons used in product and application design are part of the user experience:

  • Guide the user (navigation, “scent trails”)
  • Inform (warning & info blocks in apps)
  • Bring attention to goals or key details
  • Quick representation of common actions (share, save, etc.)

We are human. Sometimes we don’t spend time and attention on keeping others safe. Emergencies can seem like an edge case and warnings a formality. Look around you and you will quickly see many areas where we could improve the safety for ourselves and others:

  • Fire escape/elevator signs.
  • App warnings / confirmation dialogs
  • medical alerts
  • on/off switches

When planning projects, there are a few key things to remember:

  • Context, context, context
  • Culture matters! Symbols are not “universal” they are taught.
  • People are busy, make it EASY
  • Don’t make them think (if possible)
  • Use text with icons
  • Train people with contextual help

Icon checklist

When reviewing icons as part of the user interface, ask yourself the following questions:

  1. When people want to perform a task, what symbol do they expect? (Trash can vs. Toilet)
  2. Are there regulatory or industry standards?
  3. Will the icon be added to an existing library?
  4. Does a universal symbol exist?
  5. Is there a strong, easy to understand analogy?
  6. Do the icons work as a family?
  7. Do the icons match your goals?
  8. Do you have fall back/text options?
  9. Did you include text below or next to the icon?
  10. Did the users understand them? (You did some user testing, right?)

 

Resources

Don’t have icons? Need more icons? Need someone who knows icon design? Check out these resources.

  • Glyphter (https://glyphter.com)
  • IcoMon (https://icomoon.io/docs.html )
  • Glyphsapp https://glyphsapp.com/tutorials/creating-an-icon-webfont
  • Font Awesome (http://fontawesome.io)
  • The Noun project (https://thenounproject.com)
  • Kyle Adams, Icon designer http://kyleadams.me/essentials/ (icon pack)
  • https://hackdesign.org
  • http://css-tricks.com/icon-fonts-vs-svg/
  • Google Materials Icon Guide: https://google.github.io/material-design-icons/