Archive for the ‘UX design’ Category

Designing for Trust and Confidence online course

I’m creating a new online course called Designing for Trust and Confidence and I’m looking for a small group of people who would like to help out.

Designing for trust and confidence is an interesting topic that goes beyond ordinary usability. The idea is that trust and confidence are critical ingredients to certain tasks that we often overlook. For an example from an everyday social interaction, consider asking for directions. While getting directions, you are also evaluating the trustworthiness of the person giving them. If the person doesn’t earn your trust, you won’t follow their directions regardless of how clear and easy they are to follow. For another example involving a CO detector, check TUX or SUX. If a task requires the user’s trust and that trust has not been earned, usability doesn’t matter.

I’m looking for people who are interested in the subject and are willing to review course material and give feedback on ideas. Your compensation will be what you learn from the experience, a free pass to the finished course, and my eternal gratitude.

If you are interested, please contact me. Please tell me a bit about your background and why you are interested in participating. Thank you!



UX Design Training Survey

I need your help to make our UX design training courses more effective. Please fill out this UX Design Training Survey so that we can better fulfill your UX design training goals.



Take the UX Design IQ Challenge

I like quizzes because they are a fun way to learn. I prefer quizzes that are challenging—so you have to know your stuff and think about the questions carefully—but not so challenging that they are impossible or trivial.

With this in mind, I’ve created the UX Design IQ Challenge. I’ve carefully selected questions that are challenging but not impossible. I hope you find this quiz to be a great way to learn, or even prepare for your next job interview.

Please give it a try!

This quiz is a work in progress. It currently has 15 questions, but I’m aiming for 30. I’d love to get your feedback on other good UX design questions or ways to improve the existing questions. I’d especially love to hear your favorite UX design job interview questions. Feel free to email me or post comments below. If I get enough material, I’d like to break this into separate targeted quizzes.



UX Design Trivia Quiz #1

Which of the following common household items has had an extraordinary influence in modern consumer electronics design?

  1. The portable radio
  2. The toilet
  3. The light switch
  4. The remote control
  5. The toothbrush

Give up? Here’s the answer.



Icon design for non-designers

Quick question: what’s a good icon for fidelity? For intelligence? Taxes? Change?

My quick answer: There isn’t one…so you shouldn’t try too hard to make one.

A picture is worth a thousand words…unless it’s an icon

If it’s an icon, then it’s worth up to three words—at best! The oft-cited cliché is very misleading because icons are a very poor way to communicate. With the exception of well known standard icons, people understand text labels much faster than icons.

The ribbon UI, introduced by Microsoft Office 12, is much easier to understand and use than traditional toolbars primarily because it takes extra space to give nearly every command an explicit label. (The exceptions in Word: Fonts, Paragraph, Quick launch are unlabeled.) Office also uses many preview-based graphics (such as Styles that preview the effect of the style), but those are really thumbnails not icons.

Take the icon challenge

Don’t believe that icons are a poor way to communicate? Take the “icon challenge” by removing all command labels and seeing if you can correctly determine what the commands do based on the icon alone. For example, try to figure out the labels for the Insert tab in Word:

When I tried this, I scored only 10 out of 24 for this ribbon tab. Keep in mind that Word is a familiar program and Office uses excellent iconography, so I would expect the typical score to be even lower.
BTW: I recommended using this approach to evaluate your product’s icons.

Recognition vs. comprehension

If icons are so poor at communicating, why bother with them? First, I should reiterate that well known standard icons communicate their 1 – 3 words quite effectively. It’s the not well known, non-standard icons—the ones that require time and thought to figure out—that are the ones in question.

Such icons have value not because they communicate their purpose well, but because they help users recognize and distinguish commands visually.  It’s all about efficient visual recognition. So while users understand text labels quickly, they can recognize and distinguish between icons faster still. For example, users might remember that  the command they are looking for has a globe on it and locate it immediately, even though they might not know what the globe means. When there are many commands (as on a typical ribbon), the icon + label combination works well because the icon enables quick visual recognition and the text label enables quick comprehension.

Efficient recognition is extremely valuable—just keep in mind that it’s no substitute for comprehension.  If your target user’s comprehension of your icons is low, it’s likely that you need to reconsider your labeling strategy more than the icon design itself.

Icon design types

The user’s ability to understand an icon is primarily determined by the icon type. The follow icon types are usually easy to understand:

  • Standard symbols.
  • Preview of results.
  • Simple nouns.
  • Simple nouns doing simple verbs.
  • Simple nouns showing simple adjectives.
  • Well known logos.
  • All of the above with a single standard overlay (error, warning, disabled, blocked).

Standard and simple works well. This list reveals an interesting challenge to icon design: Icons are pictures, and pictures show nouns. Yet, icons are used to represent commands, and commands are usually verbs. Consequently, most icons boil down to a noun representing or doing the verb.

The following icon types are moderately difficult to understand:

  • Metaphors When an object with similar behaviors or properties  is used as a substitute.
  • Metonyms When a completely different but related object is used as a substitute.
  • Synecdoche When a part represents the whole.

Metonyms and synecdoche are related to metaphors, but I listed them explicitly because, contrary to popular belief, metaphors aren’t the only game in town. Using a fork on a map to represent a restaurant is a synecdoche, not a metaphor. Again, simplicity and familiarity is the key to success here. For example, a star is a successful metonym for “favorite” because people often rate things they like using stars.

The following icon types are difficult to understand:

  • Unfamiliar nouns.
  • Complex, detailed icons.
  • Abstract concepts.
  • Multiple overlays.
  • Puns.

Going back to my original question, “fidelity” is an abstract concept, so it’s very difficult (I would argue, impossible) to create an understandable icon to represent it. One could try: Dogs are known for having fidelity to their masters, but a dog icon is far more likely to be interpreted literally.

In addition to type, context plays an important role by allowing users to easily deduce meaning. For example, a zebra icon (an unfamiliar noun, icon-wise) is meaningless out of context, but in the context of monkey, turtle, bird, and snake icons, a zebra most likely represents savanna animals.

Everett’s Laws of Icon Design

I have a couple laws for icon design:

The longer it takes to come up with an idea for an icon, the less comprehensible the icon is going to be.

And

If an icon requires a tooltip to understand, it’s not comprehensible. At best, using it helps recognition.

If you’re wracking your brain trying to come up with an idea for a good icon, most likely it’s because there isn’t one. Once you’ve made this realization (and you really must have an icon), better to focus on the recognition consolation prize.

What to do if your icons aren’t good

Consider the following, in priority order:

  • Reconsider the need. Simply put, icons are overrated and are rarely required. Text labels work just fine when there are only a few commands, and icons help recognition when there are many. But when they aren’t really needed, icons just add visual clutter. You can design a great experience without them. Check out modern web-based apps like FreshBooks and Wufoo, which use few icons and aren’t missing anything.
  • Reconsider consistency. Using icons somewhere doesn’t mean that you have to use them everywhere. Note how Outlook only uses the well known standard icons in the File menu.

    Not only does that eliminate the need for icons with low comprehension, it makes the frequently used icons stand out.
  • Hire an icon design specialist. Icon design is a specialized talent, so you’ll need to hire a specialist to design professional, comprehensible icons. Keep in mind that creating custom icons is very time intensive, so don’t expect to get off cheap. (And whatever you do, don’t attempt to design them yourself.)

Use preexisting icons consistently with their meaning

Given the challenge and expense of creating meaningful icons, it’s important to reuse icons whenever appropriate (as opposed to creating new ones). To reinforce their meaning (instead of diluting it), choose preexisting icons based on their meaning, not their appearance. If a design detail has a different meaning, use another design.  So, use scissors to mean Cut, not Office supplies; use binoculars to mean Find, not Zoom; use a gleam overlay to mean New, not Glossy.

To show how inconsistent reuse can dilute meaning, consider the ‘x’ overlay. Currently, there’s no consistency at all, either in terms of meaning (does it mean delete, error, cancel, close, exit, stop, clear, disconnected, or not available?) or presentation (red, black, or while; normal vs. script; alone vs. within a circle). Consequently, you can’t be sure of its meaning based on the design alone—all you know is that the overlay indicates a state that isn’t positive.  (BTW: The design community should fix this: Delete should always be a black, script x (never red!); Error should always be a red, normal x; etc.)

Bottom line: To preserve meaning, these design details aren’t arbitrary choices.

If you do only one thing:
Reconsider the need for icons. While icons are helpful for comprehension and recognition, users’ ability to comprehend icons is vastly overrated. Consequently, prefer icons that are standard, simple, and familiar. With the exception of well-known, standard icons, label all icons either in-place or with a tooltip. If you really need custom icons, use an icon design specialist.



For more information, please contact info@uxdesignedge.com

All Content Copyright © UX Design Edge