June 5, 2007 Mohamad Eid
Design Guidelines
Chapter 10
June 5, 2007 Mohamad Eid
Design Guidelines1. A General Meta-Guideline2. Interaction Styles vs. Interaction Elements3. Coding Techniques and Visual Design4. Response Time5. Feedback and Error Handling6. Command-Based Interfaces7. Menu Driven Systems8. Keyboard Shortcuts9. Forms-Based Interfaces10. Organizing a Windowing Interface11. Question and Answer Interfaces12. Information Query Interfaces13. Voice I/O14. Natural Language Interfaces15. Other Types of I/O16. Localization and Internationalization17. On-Line Help18. Guidelines and Standards Documents
June 5, 2007 Mohamad Eid
A General Meta-Guideline
Don’t trust these guidelines!
Think in terms of the user and his/her taske.g. perform task analysis and cognitive walkthroughs
Evaluate, evaluate, evaluateYou will discover exceptions to the guidelines
Understand the reasoning behind the guidelines
Also, the guidelines are not exhaustive!
June 5, 2007 Mohamad Eid
Interaction Styles vs. Interaction Elements
Interaction style:The pattern or collection of techniques whereby a user
interacts with a computer system.General schemes throughout the UI for such things as:
Command entry Menus Forms
Interaction elements are the components: Individual commands and argumentsSpecific menu labels, submenus, menu itemsSpecific fields, captions, radio buttons
June 5, 2007 Mohamad Eid
Interaction Styles vs. Interaction Elements
Historically, interaction styles have matched tasksas best as they can within technological constraints
Early command-based interfaces Designed to be used by experts
(the only computer users were experts) Form-fill interfaces
Designed to be used by clerks Today’s more supportive interfaces
Needed by a wider variety of users Avoid requiring users to mix too many different interaction
styles command + menu + forms + question-and-answer
June 5, 2007 Mohamad Eid
Coding Techniques and Visual
Design
Ways of encoding information: Blinking - can cause epileptic seizures Borders (around groups of items) Brightness Colour Font (family, boldness, italics etc.) Icons Text labels Layout (e.g. indentation) Shading and 3-D effects (depth) Shape (e.g. symbols) Size (bigger items vs. smaller items) Graphs or other diagrams
June 5, 2007 Mohamad Eid
3. Coding Techniques and Visual
Design
Combine coding techniques
No information should be lost if one coding technique (e.g. colour) were removed
E.g. use colour, icons or brightness to emphasize something that is said using text
Don’t use more than 2-3 coding techniques at once
Hire a graphics designer or artist to optimize visual designs
June 5, 2007 Mohamad Eid
Use of Colour
Colours are produced from three primary colours:Red, Green and Blue
Our eye is fooled into thinking there is just one colourIndependent dimensions of colour that can be used for
coding (the HSV system)Hue
Position of the colour in the spectrum: blue, violet, red, orange, yellow, green
A coding scheme for hue might follow the spectrum: starting with red at 0 green at 0.33 blue at 0.66 and wrapping around back to red at 1.0.
June 5, 2007 Mohamad Eid
Use of Colour
Saturation: Purity of the colour – pastel shades are impure, they mix red, green and
blue pure red vs. pink vs. white pure green vs. pale green vs. white
Value or brightness: Amount of light: Intensity. It is a measure of how 'bright' the colour is.
black vs. dark green vs. bright green black vs. dark red vs. bright red
more less
more less
June 5, 2007 Mohamad Eid
Hue and Saturation
demonstrate the control that the Saturation has over colour
Original image(un-retouched)
+ 25 Saturation
+ 40 Saturation - 40 Saturation
June 5, 2007 Mohamad Eid
Hue and Saturation
demonstrate the control that the Hue has over colour
Original image(un-retouched)
- 20 Hue
- 40 Hue
+ 100 Hue
+/- 180 Hue
June 5, 2007 Mohamad Eid
Relationships between RGB & HSV RGB is often measured on a scale of 0-100 Html uses a hexadecimal scale of 00 to FF (0-255) HSV often uses a scale of:
0-360 degrees for hue (R=0, G=120, B=240) 0-100% for saturation 0-100% for value
The following figure shows 100% value with saturation indicated by the radius and hue by the angle
June 5, 2007 Mohamad Eid
Relationships between RGB & HSV (Cont’d)
The following is the same figure with Value at 66%
Conversion formulae: Value
= max(R, G, B)
Saturation = 100 * (V - min(R, G, B)) / V
Hue = angle of the vector addition of R, G, and B components = atan( R - cos(60) * G - cos(60) * B, sin(60) * G - sin(60) * B) = atan (R-0.5(G+B), 0.866(G-B))
Note that three equal vectors will always give a saturation of zero (the origin)
June 5, 2007 Mohamad Eid
Rules of using Colours
Use colour for the following purposesTo draw attention
Helps in searching tasksTo communicate organization and relationship
Which items go together: e.g. all inpatients, vs. all outpatients e.g. every third line in a list e.g. all the key points on this slide
To indicate state e.g. which elements are ‘ready’
To sell the system (users like colour)
June 5, 2007 Mohamad Eid
Rules of using Colours (Cont’d)
Use colour sparingly Colour can be distracting if not used properly Design in monochrome first
Use standard fill-patterns if necessary (to substitute for colours) Remember that some people are colour-blind
Use at most 2-4 colours for normal applications Only colour a few items
Provide a legend to indicate what colours mean Allow users to tailor their preferred colours Use colours with consistent meanings throughout an application Choose the set of colours carefully
They should mutually differ in hue, saturation and brightness Except when using these as independent coding techniques
June 5, 2007 Mohamad Eid
Rules of using Colours (Cont’d)
Use colours to help express information as follows: To express contrast, use contrasting colours:
Use light colours on dark background Use dark colours on light background
To express similarity, use similar colours To emphasize, use bright, saturated colours (e.g., Red) To de-emphasize, use dark, unsaturated colours (e.g., Grey) Use a range of hues (blue to red) to indicate a continuum To express heaviness or depth, use saturated, dark colours To express closeness, use saturated, bright and/or redder colours
Consider the emotional effects of colours Users generally prefer pastel shades and slightly darker colours Bright saturated colours ‘shout’ and are annoying Reds, oranges and brighter colours appear more cheerful
June 5, 2007 Mohamad Eid
The Meaning of Colour in Cultures
Colour Western Europe &
USA
China Japan Middle East
Danger, Anger, Stop
Joy, Festive Occasions
Anger, Danger Danger, Evil
Caution, Cowardice
Honour, Royalty
Grace, Nobility, Childish, Gaiety
Happiness, Prosperity
Sexual Arousal, Safe, Go
Youth, Growth Future, Youth, Energy
Fertility, Strength
Purity, Virtue Mourning, Humility
Death, Mourning Purity, Mourning
Masculinity, Calm, Authority
Strength, Power
Villainy, (dirty work)
Masculinity, Calm
Death, Evil Evil Evil Mystery, Evil
June 5, 2007 Mohamad Eid
Effects on physical colour perception
Saturated colours and opposing colours (red/green, yellow/blue) cause after-images when used together
Stare at this image for at least 20 seconds
June 5, 2007 Mohamad Eid
Effects on physical colour perception
What you see here is a called an after image
People see the opposite colours, or a negative imagebecause staring at one colour for an extended
period will fatigue the eyes rods & cones
June 5, 2007 Mohamad Eid
Effects on physical colour perception
Consider background/foreground relationships: Foreground and background should contrast in hue, saturation and
brightness
blue text on a black background, are difficult to read due to the low level of contrast
between figure and ground
some colour combinations, such as blue and red,
cause illusions when positioned together
Yellow text on a
white background or
June 5, 2007 Mohamad Eid
Effects on physical colour perception
Display colour images on an achromatic background: black, grey or white
Display achromatic images on a colour background Bright backgrounds help users distinguish coloured objects in the
foreground The foreground objects appear more saturated
Remember Colour-Blind Users (Mostly by MEN): (back-/foreground colours)
red-green (most common form ) yellow-blue (rarer version)
Consult ISO9241 for international standards on colour use
June 5, 2007 Mohamad Eid
Use of Fonts Things that can be expressed using different fonts:
Mood (jocular, serious, old-fashioned etc.) Importance Organization of material
e.g. typed input vs. instructions vs. headings
Limit the number of fonts and styles in any screen to 2 or 3 Use a sans-serif font for most on-screen text
Especially small characters At low screen resolutions, serifs cause confusion
This is a serif font (Times) This is a sans-serif font (Arial) This is really tiny text in a serif font This is really tiny text in a sans-serif font
Use a serif font for most printed text Avoid ‘fancy’ fonts Give a consistent meaning to each font and size
June 5, 2007 Mohamad Eid
Use of Icons
A few good icons help reinforce the user’s mental model Always, always, always user-test all icons!!!
Don’t use an icon unless 95% of users familiar with the task can identify it Keep icons as simple as possible
Enough information to convey the message and no more Don’t use fancy borders or frills Too much detail causes users to
take longer in recognition become interested in the pretty picture
Keep icons distinct from each other Perform tests to ensure each icon can only be interpreted as meaning
one command
June 5, 2007 Mohamad Eid
Use of Icons (Cont’d)
If using perspective or ‘lighting’, keep the direction and orientation consistent
Keep the number of icons on a screen low ( <= 7) Carefully think about the size of icons
Make icons small when: They are permanently displayed There are many possible options the user can choose
Make icons big when The user has to chose from just one or two icons The icon is a central part of a message the user must look at now
Only add colour to icons as highlight Base icons on black & white wire-frames Only use one or two colours per icon
June 5, 2007 Mohamad Eid
Icon Screen Design Issues
Allow for different icon states Avoid jaggy lines be aware of background patters Consider different pixel shapes Stick to a platform's graphical style Design with the lowest screen quality in mind Be careful of colour Use subtle colours Use a small palette
Don't rely on colour to convey information Don't forget monochrome monitors Design distinguishable icon sets
June 5, 2007 Mohamad Eid
Advantages of using Icons
Recognition People can recognise things easier than they can recall written
information Recognising an icon on the screen is much easier than trying to
remember a text command. Searching on a screen
It is generally quicker to find the appropriate icon more quickly than a function in a text list
Compactness Icons normally take up less room on the screen than if the
corresponding functions were described using text Comprehensibility
If the icon has been carefully chosen, an icon can usually be easily understood by an ‘average’ user.
June 5, 2007 Mohamad Eid
Advantages of using Icons
UniversalityMany icons are relatively language and/ or culturally
independent, so they can be used on “international” versions of software without costly process of translation and rewriting
Cultural differences Occidental students use faces for emotions, Oriental students don't
AvailabilityNot too difficult to obtain ready-made icons, for practically
any function, from media such as WWW and collections of clip-art.
June 5, 2007 Mohamad Eid
Disadvantages of using Icons
• Ambiguity• If the icon has not been well designed, there may be no way
for the average user to even guess what it represents.• Dependency
• on user, task & context• Every individual assigns their own meaning to an icon, and this
meaning will depend on what that individual already knows
• Cannot always completely replace words• In complex situations
• Cost• It is difficult and costly to design a brand new icon that one
can be sure will be interpreted properly by the users
June 5, 2007 Mohamad Eid
Factors Affecting Meaningfulness of Icons
Context If the context is a fairly specific task, then it should be relatively simple to
design an effective and unambiguous icon E.g. Selecting text colour – fairly specific E.g. Undo – difficult to represent graphically
Text Sometimes addition of text can aid in for the interpretation of the icon. Can be included permanently or may appear when the pointer is placed over
the icon Concept
Concrete’ representing real object or ‘abstract’ Concrete easier than abstract
E.g. Printing a documents is a fairly concrete operation Objects easier than actions
Discriminable No two icons should be so similar that the user might mistake one for the other
E.g. one should be able to easily discriminate between icons
June 5, 2007 Mohamad Eid
SunWeb: User Interface Design for Sun Microsystem's Internal Web
Intended Meaning: What's new (bulletin board) Test Users' Interpretations: Bulletin board, bulletin board, bulletin board,
laundry
• Intended Meaning: Benefits. Test Users‘• Interpretations: Health field, money, health care is
expensive, Clinton's health plan, hospital, don't know, benefits
• Intended Meaning: Product catalogue, Test Users‘• Interpretations: System oriented, disk, CD,
Computer, CD-ROM, CD-ROM
• Intended Meaning: Specialized tools (toolbox). Test • Users' Interpretations: Briefcase, personal info,
briefcase, toolbox, briefcase
• Intended Meaning: Geographic view of the company (branch offices in different locations).
• Test Users' Interpretations: World, global view, planet, the world, Earth
June 5, 2007 Mohamad Eid
متشکرم
谢谢
ありがとう
Top Related