All About Website Usability Blog – Holly Phillips


Takeaways from Patric Hofmann’s “Icons & Images” presentation
January 5, 2010, 4:05 am
Filed under: confidence, customer-centered-design, scent, usability basics, visual design

I just attended a webnar on “Icons & Images” by Patrick Hofmann.  Key takeaways:

When designing an icon, strive for:

  • Simplicity – simplify the design to just the key elements that convey the message.  For example, iPhone uses only 4 buttons in an icon of a calculator, instead of showing an entire calculator face.  Use silhouettes or outlines where possible
  • Distinction – make sure the icons are clearly distinct from other icons used on that same page; use color, contrast, size , and shape to help differentiate.  Again, iPhone does a good job at this:

  • Standardization – use common icons that people already understand (eg envelope for mail; clockface for clock).  The American Society for Graphic Artists and iStock Photos are good places to look for common icons
  • Words – If needed, use one or two words (no more) in conjunction with an icon.  Some users are more text-based than visual-based so words will help, but only if the icons aren’t clear on their own, and if the addition of text won’t add clutter.  One example – a square box with the words “TV” inside is much more instantly recognizable as a TV than the more traditional box with rabbit-ears (which doesn’t mean anything to younger people).
  • Understandability across cultures  – For example, many cultures don’t understand the old-fashioned US mailbox or telephone icons; better to use more common stylized versions.  Never use hand symbols in icons!  They’re bound to be offensive in at least one country or culture (most likely a Mediterranean-bordering nation).  Things like “OK”, happy face, frowny face, etc are much better.  Red circle with a diagonal slash is universally accepted as meaning no or incorrect or prohibited.

And finally, some good sources for icons:

  • dafont.com
  • aiga.org
  • istockphoto.com
  • underconsideration.com
  • images.google.com
  • colorschemedesigner.com
Advertisements

Leave a Comment so far
Leave a comment



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s



%d bloggers like this: