HFI Usability Home

Usable. Experience. Design.

HFI Usability Home About HFI - Usability Experts Usability Consulting Usability Training & Certification Usability Tools & Standards Usability Newsletter Executives Only  

Contact Us | 1-800-242-4480

 
UI Design Newsletter
Current Issue
Past Issues
Reader Comments
Subscribe
Change Address
divider
HFI Webcasts
June 2008 Webcast
Upcoming Webcasts
Past Webcasts / Podcasts
divider
Ask Eric
Questions & Answers
Ask your question
divider
Readings
Published HFI Articles
White Papers
Intranet Standards
GUI Standards
Quantitative Usability
e-Commerce Usability
GUI Design
IVR
divider
Just Fun
Cartoons
Mouse Maze
10 Web Usability Tips
Usability Quiz
Web Usability Quiz
Contextual Innovation Quiz
Persuasive Design Quiz
Persuasion Flow Symbols
History of HFI Buttons
divider
Resources
Persuasion Flow Symbols
Accessibility
Bibliography
Usability Links
HCI Degree Programs

ICONS: Much Ado About Something

GUI Articles List | Print this page | Email this page

 

<<Previous | 1 | 2 | 3 | Next>>

Eric Schaffer

Eric Schaffer,
Ph.D., CPE, is CEO and Founder of Human Factors International, Inc. He has been involved in creating and teaching software design for more than 14 years. He can be reached by e-mail at

John Sorflaten

John Sorflaten,
Ph.D., CPE, started out writing and directing training films and documentaries then switched to UI design. "A screen is a screen," he says. He works at Human Factors International, Inc. and can be reached by email at

Every battle has a psy-ops component, otherwise known as psychological operations. Each side attempts to demoralize the other and re-moralize it's own troops. In UI design, the battle against GUIs from hell is no different. Recall the evil influence of cryptodesign – design ideas that work for certain situations but get misapplied in other, quite different circumstances. We've seen a lot of developer trauma associated with icon design: cryptohyperinconitis. But hang on. This article gives you, the troops in the field, some psycho-innoculation against the cryptic IMFAP syndrome (Icon Mania, Fetish, and Phobia)!

ICONS WERE MEANT TO BE HANDLED According to the dictionary, an icon is either:

  1. an image; esp. a religious image painted on a wood panel, or,
  2. a small picture on a computer display that suggests the purpose of an available function.

Think about a folder icon. You can drag a document icon to it and the document pops into the folder. You can drag the folder and pop it into another folder. Ergo: icons were meant to be handled. The folder and the document icons suggest the purpose of their "available function": the folder stores the document. Stretch the folder metaphor, and a folder can also store a folder. However, stretch the metaphor even more, you can click on a folder and it turns into a window! Oops! (or OOPS for our object-oriented friends). Thus, there are many uses of icons, although some may require considerable suspension of disbelief. But that's okay if it works.

In summary, icons provide the benefit of being "directly manipulated." They can be dragged, they can be dropped--all activities that are natural to our kinesthetic, non-verbal intellect. This augments the analytic, verbal intellect. We can do both kinds of thinking at once. It's called "dual task processing." What better satisfaction than dragging a document to a shredder (or trash can) while talking to someone on the phone? We can do neat things in a few motions that would otherwise require prohibitive amounts of attention-diverting verbal commands. "Soul design" brings this satisfactory outcome from that small iconic picture on your computer display.

CRYPTO ICONS SNEAK ATTACK In our GUI design seminar, we survey participants for their ideas on what icons do for users. Here's one list:

  1. Save time (users doesn't need to "read" a label)
  2. Save space (a picture is worth a thousand words)
  3. Cross cultural (pictures transcend language)
  4. Usable by illiterates (again, the picture thing)
  5. "Easy"
  6. and "Flashy."

Here's a test: Enter the function of each of the icons in Figure 1.

A hint: They are used for text formatting and printing functions.

 

<<Previous | 1 | 2 | 3 | Next>>

 

GUI Articles List

divider line

PDF Icon

ICONS Article
Download (85K pdf file)

Get Acrobat