June 5, 2007Mohamad Eid Design Guidelines Chapter 10.

June 5, 2007 Mohamad Eid

Design Guidelines

Chapter 10


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


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!


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


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


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


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


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.


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


Hue and Saturation

demonstrate the control that the Saturation has over colour

Original image(un-retouched)

+ 25 Saturation

+ 40 Saturation - 40 Saturation


Hue and Saturation

demonstrate the control that the Hue has over colour

Original image(un-retouched)

- 20 Hue

- 40 Hue

+ 100 Hue

+/- 180 Hue


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


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)


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)


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


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


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


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



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



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



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


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


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


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


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


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.


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.


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


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


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


متشکرم

谢谢

ありがとう

Date post:	16-Jan-2016
Category:	Documents
Upload:	roderick-richardson
View:	215 times
Download:	0 times