Part F - Design

Improving Usability

List examples of culturally sensitive UI components
Describe the selection and design of icons for usability
Introduce design standards, guidelines, and patterns

Culture | Icons | Standards | Exercises



Many of us have encountered products that are cumbersome and confusing to operate as well as products that are obvious in how they are used and a joy to use.  We prefer one product over another based on comfort level and ease of use, even though its functionality may be identical to that of many other products. 

The ease of use of a product has a major impact on how well that product does in the marketplace.  Ease of use is one area where the manufacturer can distinguish their product from competing products. 

In this chapter, we review cultural sensitivity, describe important principles in the selection and design of icons, and discuss the standards and guidelines that promote usability. 


Cultural Sensitivity

Studies have been done to determine what type of User Interface components are more user firendly in different cultural settings.  These results provide some elements for designing user interfaces to meet cultural expectations. 

Power Distance

Metaphors

  • High: images of government or corporate institutions and buildings, schools, monuments, etc.
  • Low: informal and popular institutions or buildings, Montessori schools, public parks, etc.

Mental Models

  • High: complex, highly organized structures, organization charts
  • Low: informally organized data with less rigid structure

Navigation

  • High: predefined choices, authentication, passwords
  • Low: open access, multiple options, many different paths to follow

Interaction

  • High: strong error messages: Entry Forbidden; use of wizards
  • Low: supportive error messages, interactive help facilities

Appearance

  • High: images of leaders, national or corporate logos, formal speech
  • Low: images of people or groups, daily activities, popular music, informal speech

Collectivism versus Individualism

Metaphors

  • Individualist: action oriented, tool oriented
  • Collectivist: relationship oriented, content oriented

Mental Models

  • Individualist: product or task oriented
  • Collectivist: role oriented

Navigation

  • Individualist: individual paths, popular choices, celebrity choices
  • Collectivist: group-oriented official choices

Interaction

  • Individualist: keyword searches, customizable
  • Collectivist: access to official devices, role driven

Appearance

  • Individualist: images of product or people, dynamic speech, market driven topics
  • Collectivist: images of groups or organizations, static speech, institution driven topics

Masculinity versus Femininity

Metaphors

  • Masculine: sports, competition, work oriented
  • Feminine: shopping carts, family oriented, people oriented

Mental Models

  • Masculine: work or business structures, high level executive views
  • Feminine: social structures, detailed views, relationship oriented

Navigation

  • Masculine: limited choices
  • Feminine: multiple choices, multitasking

Interaction

  • Masculine: competitive, game oriented, mastery oriented
  • Feminine: practical, function oriented, cooperation oriented

Appearance

  • Masculine: masculine colours, shapes, and sounds
  • Feminine: feminine colours, shapes, and sounds

Uncertainty Avoidance

Metaphors

  • High: familiar, stable references to daily life
  • Low: novel, unusual references, abstraction

Mental Models

  • High: simple, explicit, clear; limited choices; simple logic
  • Low: tolerance for ambiguity, implicit relationships, complex or fuzzy logic

Navigation

  • High: limited, organized options; controls to allow the user to master or direct the situation
  • Low: tolerance for unclear operations, simple searches, "I feel lucky" button

Interaction

  • High: precise, complete; detailed input and feedback
  • Low: general, limited; ambiguous input and feedback

Appearance

  • High: consistent imagery and terminology; repetition of cues
  • Low: less consistent imagery and terminology, fewer cues

Long-Term Orientation

Metaphors

  • High: stable family references, institutions, and organizations
  • Low: interchangeable roles; less concrete, abstract metaphors

Mental Models

  • High: love, devotion; social coherence; responsibility
  • Low: liberty, social incoherence, irresponsibility

Navigation

  • High: tolerance for long paths, reliance on advisor, context-oriented
  • Low: bread crumb trails, clear taxonomies, quick results

Interaction

  • High: face-to-face communication, personalized messages, live chats
  • Low: distance-communication tolerated, anonymous-communication tolerated, conflict tolerated

Appearance

  • High: flags, national colours and images; warm, fuzzy images; suggestions of intimacy
  • Low: minimal or focused images

Selection and Design of Icons

The design of an icon aims for universality and requires familiarity with the conventions that may be imported into its meaning by users from different cultures. 

Icons are usually square and typically created in sizes ranging from 16 x 16, 32 x 32, 64 x 64, to 128 x 128 pixels. 

icons example

Sample Icons (source: David Vignoni Wikipedia 2006 GPL)

Icons are often designed in sets.  Each set has unifying features that associate one member with other members of the set:

  • similar theme
  • similar compositions
  • similar patterns - striping, circles, oblongs, rectangles
  • similar lighting - light on dark vs dark on light
  • similar framings or shadowings
  • similar color contrasts
  • similar levels of detail

Icons and icon sets are available both commercially and as freeware.  Check out

You can find some interesting tutorials on how to make some of the more popular icons at Speckyboy.

Benefits of Icons

Well-designed icons

  • are compact - save space
  • improve user productivity - speed searching
  • enable faster reading than text
  • provide immediately apparent meaning
  • express complex ideas in a small space
  • convey a message that is independent of written languages

Save Space

Icons occupy less screen real estate than their equivalent word labels.  This allows more space to be used for data display and less for controls.

icons example

Speed Searching

Icons with distinctive shapes can be found more quickly than text.  The visual distinction is based on major characteristics like shape or color.  It is better to use icons with transparent backgrounds so that the shape is more apparent. 

Consider the following icons:

speed searching

Each icon

  • has a distinctive shape
  • is non-rectangular
  • is easily identifiable

Recognizable

Once we have learnt an icon, we remember it easily.  We recognize it in a glance.  Subjects were shown 2500 pictures for 10 seconds each.  They were then shown pairs of pictures and asked which they had seen before.  The subjects were correct 85-95%.

Memorable

We remember images better than words.  Most of us remember faces better than names.  Most of us recognize icons faster than text.

Icons are memorable because shapes are more visually distinct than words.  We name symbols and use both visual and verbal memories to remember the icons and the names linked with them.  These memories are tightly linked to one another. 

Computers are now being used by many with poor reading skills, such as those with dyslexia or poor vision.  Computers can also be used by those who speak languages other than the host language. 

Identification

Identifying an icon is a four-step process.  For an icon to be successful, the user must be able to

  • decode it
  • recognize it
  • locate it
  • activate it

The icon is unsuccessful if any one of these activities is missing.

Decoding

An infant recognizes human faces, the color red and snakes.  The infant must decode all other images.  Decoding involves breaking the images into their constituent parts. 

We decompose images automatically so often that we hardly notice decoding until we encounter a difficult image.  Decoding involves no less than two stages:

  • dividing the complex image into a set of simple symbols
  • dividing the simple symbols into graphical elements, such as points, lines and areas

Recognizing

We can easily recognize an icon amongst a large number of icons.  Our friends look similar but we can easily tell them apart. 

To make icons more recognizable

  • show simplifications of concrete real-world objects
  • clearly depict the object
  • make the icon conceptually distinct from others
  • select an image strongly associated with the concept it represents

Locating

To find an icon on a crowded screen, the user must know what the icon looks like and the icon must be distinct from other objects.  Visual distinction is best ensured by using a distinctive shape or color.

Activating

Once a user has found an icon, the user needs to activate it

  • click on the icon using a mouse
  • select the icon using a finger on a touch screen
  • press the key associated with the icon

Regardless of how the user activates the icon, the technique should be consistent throughout the interface.

Design Considerations

The design of an icon is not straightforward and usually requires a significant amount of work.  Several aspects are fundamental to its design:

  • the image should be as general as possible
  • localizations that privatize the image should be avoided
  • standard guidelines should be followed to avoid misinterpretation

Generalize the Image

Generalization removes of as much detail from the icon as possible without losing the essence of the image.  Everyone has a phone but one phone often looks slightly different from another.  Avoid showing any detail that distinguishes one from the other. 

Show images of generic people.  Do not show race, gender, age or social class.  Do not show uniforms, since they may only be known regionally.

Remove all auxiliary aspects of the image.  Where a hand holds an object, remove the hand if possible.  Highlight the object that a hand is manipulating.  In many images, you do not need to show the hand at all.  You can simply show the object being manipulated. 

Highlight the Most Common Form

Show the most common form that is likely to be recognized throughout the world:

Object Icon Object Icon Object Icon
a boxy car boxy car a delivery truck delivery truck a ruler ruler
a fastener boxy car a file folder delivery truck a file cabinet ruler
an old key old key an old lock old lock an old alarm clock old alarm

Different Versions

Some symbols take different forms in different regions of the world. 

Rather than showing one form and thereby localizing the icon, show several common forms to enable the viewer to generalize the meaning on their own.

Meaning currency users religion
Icon currency users religions

Abstract Symbols

Use abstract symbols and geometric shapes wherever possible.  Many abstract symbols and geometric shapes are free of cultural connotations. 

use abstract symbols and geometric shapes

Abstract Symbols and Geometric Shapes

International Symbols

International icons make products available to the largest possible customer base.  The use of icons can make internationalization easier than the use of pure text. 

Use natural forms all people observe.  Use common forms of things which are available everywhere. 

international symbols more international symbols even more international symbols

International Symbols

There are many standardized international signs which can and should be used where appropriate.  These are readily understood around the world. 

international signs

International Signs

Use Hands Sparingly

There are some pitfalls associated with internationalized icons that must be avoided. 

Be careful to show hands doing something: recognizable work or tasks. 

show the action

Show the Action Being Done

Include the object pointed to if you show a hand pointing to something. 

show the object

Show the Target Object

Draw hands that are gender neutral. 

show no gender

Neither Male nor Female

Draw hands that are colourless.  Do nothing to indicate the color of the skin. 

show no color

Neither Black nor White

If a task can be performed left or right handed, show it being done right handed.  Many cultures consider the left hand unclean. 

Avoid Localization

Features that easily distract from the generality of an icon and localize an icon include:

  • verbal analogies
  • hand gestures
  • mythological and religious
  • animal
  • colour
  • body part
  • provincial
  • reading direction
  • hands

The same image will trigger different associations based on the user's culture. 

Selecting images that do not have undesired connotations in other cultures, requires familiarity with each culture within which the image will be viewed.

Verbal Analogies

What may be a verbal analogy in one language is not necessarily the same analogy in any other language.


Icon Intended Meaning Problem
balance scale analogy Scale of a Map The words for balance, scale, and the relationship between distances in the world and the map are not the same in every language.
post parcel analogy Post entries in an accounting program Posting a package means mailing it, but posting data means writing it into a ledger. Such different actions will not have the same name in every language.
mouse analogy The mouse that controls the pointer on the screen In some languages the name for the box that controls the screen pointer is not the same as that of a small rodent

Hand Gestures

Almost any hand gesture is obscene in some culture.  If you must show a hand at all, have it perform a specific action such as pointing or pressing. 

Icon Intended Meaning Problem
thumb Yes, OK In Sicily, this is an invitation to insert the thumb into a private part of the anatomy.
forefinger Precisely, yes In France, this means zero or worthless. In Japan, it is a reference to money. In South America, it means that the observer is a part of the human anatomy of this shape.
palm Stop, halt In Greece, this gesture, which goes back to Byzantine times, means "Here's excrement in your face"

Mythological and Religious Symbols

Symbols from mythology are not necessarily known in all cultures.  Symbols from religion might be interpreted as offensive or sacrilegious. 

Icon Intended Meaning Problem
gabriel Fatal error Would someone raised a Hindu, Buddhist, or Zoroastrian recognize the grim reaper?
bat Minor glitch Some may not recognize this as a gremlin, but see instead a bat with a long tail. A gremlin can be a symbol of a minor problem or a monstrous evil.
first aid First aid Images incorporating crosses and six-point stars can offend in Arabic countries. In such countries, the local version of the Red Cross is the Red Crescent.
forefinger Transform The magician's wand has its roots in sorcery.

Some mythological and religious symbols can have local symbols substituted to avoid offense or misinterpretation. 

Animals

Different cultures attribute different characteristics to different animals. 

Icon Intended Meaning Problem
dog Loyalty, search retrieve To Americans, dogs are pets or hunting companions. To many Asians, they are food.
owl wisdom, expert system, training In southeastern Asia, the owl is considered a particularily brutal and stupid bird.
rabbit copy, reproduce rapidly Rabbits are also symbols of sexual promiscuity. In Germany, a rabbit is a dinner entree. In Australia, rabbits are vermin.
piglet Savings account To Muslims and many Jews, the pig is considered unclean and unholy.
snake Deception In the orient, the snake is considered a symbol of life and rebirth.

Colours

Different colours suggest different emotional states in different regions of the world.

Colour Europe Japan China Arabia
Red Danger Anger Danger Joy Festivity  
Yellow Caution Cowardice Grace Gaiety Honor Royalty Happiness Prosperity
Green Safe Sour Future Energy Fertility Strength
Blue Masculine Calm Villainy Virtue Truth
White Purity Virtue Death Mourning Death Mourning
Black Death Evil

Body Parts

Since there is no universal standard of modesy, referring to any body part may be dangerous.  The symbolic meaning of body parts changes from one culture to another.  Some cultures forbid the depiction of the human face or the human form.  Some cultures take offence at the depiction of certain body parts.

Icon Intended Meaning Problem
feet move ahead The underside of the foot can offend in the Orient.  Showing bare feet can also seems crude and unprofessional.
evil eye inspect examine This looks like the "evil eye"
hail welcome Take care of body language, especially conventional poses.  This figure could be waiting to ask a question, hailing a taxi, delivering an insult or giving a Nazi salute.

Provincialism

Symbols familiar to you might be unknown or misunderstood outside your particular region of the globe.

provincial

Provincial Symbols

Reading Direction

Middle-Eastern countries read right-to-left, so an assumed direction of left-to-right is unnatural to them.  Chinese read top to bottom and their books have their covers on what North Americans would call the back. 

You should not assume a left-to-right order in the usage of any icon.

Note how these two keyboard icons assume left to right reading of text:

left to right reading of symbols

Left to Right Reading Assumption

Note how these toolbar icons also assume left to right reading of text:

left to right assumption

Left to Right Writing Assumption

Use arrows to show clearly which way to read an icon. 

show direction of reading

Show Which Way to Read

Arrange sequences vertically since presumably all cultures read top to bottom. 

all cultures read top to bottom

All Cultures Read Top to Bottom

Where order is not implied, arrange objects symmetrically so that no order will need to be read into the image. 

no order implied

No Order needs to be Read into this Image

Hands

Due to the many obscene gestures associated with hands, hands are best avoided altogether. 

no hand necessary

Hand is Often Redundant

Do not show hands by themselves performing an action since they are easily misinterpreted. 

no hand necessary

Hands are Easily Misinterpreted


Text in Icons

Wherever text appears, it introduces localization and needs translation. 

Text

It is not uncommon to include text in icons.  The text should be either removed or translated, which involves the editing of the icon bitmaps.  Changes in word length might make the editing impossible.

text in icons

Letters

It is also not uncommon to use letters in the icons themselves.  The letters need to be replaced by the initial letters in the translated words. 

letters as icons

Notice how the design of the following icons has assumed the use of the Roman alphabet.

letters within icons

Punctuation

Not all languages use English punctuation marks.  Many languages use different marks or have different interpretations of the English marks.  Avoid such marks wherever possible.

punctuation

Translation

It is important to plan for the translation and to leave enough space for possibly longer words.  It is also important to support a variety of character sets. 

Translation is required for

  • labels
  • menus
  • icons that contain any letters, words, or punctuation

Use translators

  • whose native language is the target language
  • who have lived in the target culture for some time
  • who understand the target culture


Standards, Guidelines, and Patterns

Standards

Standards are issued by national or international bodies to ensure compliance with design rules by a large community.  Most of the existing standards address hardware concerns.  A few standards address software concerns.  The software standards are notably vaguer.

Guidelines

Guidelines are less prescriptive than standards.  Guidelines are issued by companies and manufacturers and are directed towards a smaller community of users.  Surveys have been compiled that list many guidelines issued by different companies.

Many guidelines come from software companies to ensure that people writing for their platforms have a common look and feel to their software. Examples include:

  • Microsoft
  • Apple
  • Sun Microsystems

Patterns

Patterns are solutions to recurring problems that have been generalized so that they can be applied to similar problems when they are encountered.  Software design patterns have become more accepted in the last few years.  HCI patterns have appeared that provide solutions to interface design problems.

Most patterns are stated in a stylized form that makes them easier to read

  1. name of the pattern
  2. when it might be used
  3. how the solution can be implemented
  4. references to related patterns

Breadcrumbs

  1. Problem: the user needs to know where s/he is in a hierarchical structure
  2. Use when: sites with a large hierarchical information structure, typically more than 3 levels deep.  Such sites are medium to large sized and include shops, catalogs, portals, corporate sites etc.  The site has got a main navigation scheme that allows users to traverse the hierarchy.  Users may want to jump several steps back instead of following the hierarchy. Users may be unfamiliar with the hierarchical structure of the information.  Users may need to know where they can go.  Users need to know how they arrived at their current location.
  3. Solution: Show the path from the top level to the current page
     Home > Next Level > Next Level > Current Page
           
    The path shows the location of the current page in the total information structure.  Each level of the hierarchy is labeled and functions as a link to that level.  The current page is marked in order to give the users feedback about where they are now.  Don't use the current page name in the breadcrumb as the only way to show section title, add a title anyway.

The path shows that a top-down path is traversed by using appropriate separators such as > or \ that suggest a downward motion.  If the path becomes too long to fit in the designated place, some of the steps can be replaced by an ellipsis e.g. "...".  The path is placed in a separate "bar" that preferably spans the entire width of the content area.  It is placed close to the content area, preferably above the content area but below the page header.

Why

Bread crumbs show the users where they are and how the information is structured.  Because users see the way the hierarchy is structured they can learn it more easily.  By making each label a link, the users can quickly browse up the hierarchy.  They take up minimal space on the page and leave most of the space for the real content.

breadcrumbs on sun site

This example is taken from Sun's web site and shows the use of bread crumbs in product pages.  The path from the top level is visible and the users can go to any of the other higher level product categories.


Exercises