Usability & Design Usability & Design IIII

19th February

Effective Web DesignEffective Web Design

Planning your web site Designing your web site Evaluating your web site Design elements

Principles

Help

Simplicity

User control

error prevention

Consistency

Errors mgt

Recognition

Flexibility

Match to worldVisibilityof status

Nielsen’s HeuristicsNielsen’s Heuristics

Design ModelDesign Model

Design Model

Planning/Requirements

Design

Build/Develop

Evaluate

RequirementsRequirements

A requirement is something the product must do or a quality that the product must have

Requirements

Requirements – Planning Requirements – Planning ConceptsConcepts

Requirements

URL choice Choose a domain name and web host.

URL should be easy to remember. Web host could be company or a web hosting vendor

Branding E-mailing Casting a net e.g., discussion groups Online sales e.g., online coupons and discounts Search engines E-information Visualisation Analysis Reverse engineering

Design ModelDesign Model

Design Model

Planning/Requirements

Design

Build/Develop

Evaluate

“Users can’t tell you what they want, but when they see something and use it, they soon know what they don’t want”

A prototype is an invaluable design tool for testing ideas, clarifying requirements and initiating user input and feedback

Core component of iterative design

PrototypesPrototypes

Prototyping

In web site design it can be (among other things):

a series of screen sketchesa storyboard, i.e. a cartoon-like series of scenes a Powerpoint slide showa video simulating the use of a systema lump of wood (e.g. PalmPilot)a cardboard mock-upa piece of software with limited functionality written in the target language or in another language

Prototyping

What is a Prototype?What is a Prototype?

Fidelity refers to the level of detail:•Low Fidelity

•Medium Fidelity

•High Fidelity

Prototyping

Type of PrototypesType of Prototypes

•Uses a medium which is unlike the final medium, e.g. paper, cardboard

•Is quick, cheap and easily changed

•Examples:sketches of screens, task sequences, etc‘Post-it’ notesstoryboards

Prototyping

Low Fidelity PrototypesLow Fidelity Prototypes

•

Prototyping

StoryboardsStoryboards

•This weeks lab:•Create a web-site with index.html as your homepage and hobbies.html that links to it

•Use lists, hyperlinks and anchors ….

•Insert the following image as an image map

•Next weeks lab•Redesign your web page using tables, layers & frames…

•This will ensure that your web page is not all left-aligned

Do a storyboard and a sketch of your screen

Prototyping

Low Fidelity PrototypesLow Fidelity Prototypes

Prototyping with a computerPrototyping with a computer•simulate some but not all features of the interface•engaging for end users

PurposePurpose•provides sophisticated but limited scenario for the user to try•can test more subtle design issues

DangersDangers•user’s reactions often “in the small”•users reluctant to challenge designer•Users reluctant to touch the design•management may think its real!

Prototyping

Medium Fidelity PrototypesMedium Fidelity Prototypes

Design ModelDesign Model

Design Model

Planning/Requirements

Design

Build/Develop

Evaluate

EvaluationEvaluationWhen to evaluate:Throughout designDesign proceeds through iterative cycles of ‘design-test-redesign’Evaluation is a key ingredient for a successful design.Evaluation techniques:

Expert reviews

Usability testing

Surveys

Evaluation Issues

Validation & TestingValidation & Testing

XHTML validators are used to check web pages against XHTML published specifications

Example: http://validator.w3.org/

Validators enhance the accessibility of web pages

Another method is linting, which looks for common mistakes e.g., poor formatting

Evaluation Issues

Design ElementsDesign Elements

Colour

Design of graphic elements

Design Elements

ColourColour

Design Elements

YELLOW ON DARK BLUE WORKS WELL

WHITE ON BLACK OR VICE VERSA WORKS WELL

WHITE ON GREEN WORKS WELL

BLACK ON ORANGE WORKS WELL

LIGHT COLOR ON LIGHT COLOR IS POOR

DARK COLOR ON DARK COLOR IS POOR

RED, GREEN, AND OTHER COLORS CLASH

ColourColour

Problems with ColourProblems with ColourColour has an extremely high attentionattention getting capacity

Users might search for relationships and differences that do not existBewilderment etc. Christmas tree effect

Varying sensitivity of the eyeAll colours are not equalthe eye is more sensitive to colours in the middle of the visual spectrum (yellow and green) (see next slide)some combinations can strain the eye

blue - front, red - behind retina

Design Elements

ColourColour

Design Elements

Problems with ColourProblems with Colour Varying sensitivity of the eye

From: http://www.cs.gsu.edu/classes/hypgraph/color/coloreff.htm

•Brightness determined mainly by R+G

•Hard to deal with blue edges & blue shapes

•Blue not suitable for text or small objects

ColourColourProblems with ColourProblems with ColourColour viewing deficiencies

8% males, .4% females are colour-blindred - green most commonred - orange confused with green - yellow

Cross-disciplinary/cultural differencescolours have different meanings across situations/culturesblue

Financial managers - corporate qualities or reliabilityHealth care professionals - deathNuclear reactor monitors - coolness or water

Design Elements

ColourColourProblems with ColourProblems with Colour

Design Elements

ColourColourGuidelines for ColourGuidelines for Colour

Design Elements

•Use colour conservativelyconservatively •LimitLimit the number and amount of colors •Recognise the power power of color to speed or slow tasks •Colour coding should supportsupport the task •Colour coding should appear with minimalminimal user effort •Colour coding should be under user controluser control •Design for monochrome firstmonochrome first •Consider the needs of colour-deficient userscolour-deficient users•Colour can help in formattingformatting •Be consistentconsistent in colour coding •Be alert to common expectationsexpectations about color codes •Be alert to problems with color pairingscolor pairings•Use colour changes to indicate status changesstatus changes •Use colour in graphic displays for greater information densityinformation density

Design of Graphic Design of Graphic ElementsElements

Primary Graphic Elements in a GUI

•Windows

•Menus

•Icons

Design Elements

Design of Graphic Design of Graphic ElementsElementsWindows Windows

Users need to consult multiple sources rapidly

Must minimally disrupt user's task

Need to offer users sufficient information and flexibility to accomplish task, while reducing window housekeeping actions:

opening, closing, moving, changing size time spent manipulating windows instead of on task

Design Elements

Design of Graphic Design of Graphic ElementsElementsMenusMenus

When designing menus some questions to be asked are:

How long is the menu to be?In what order will the items appear?How is the menu to be structured, e.g. when to use sub-menus, dialog boxes?What categories will be used to group menu items?How will division into groups be denoted, e.g. different colors, dividing lines?How many menus will there be?What terminology to use? (results of requirements activities will indicate this)How will any physical constraints be accommodated, e.g. mobile phone?

Design Elements

Design of Graphic Design of Graphic ElementsElementsIconsIcons

Good icon design is difficultMeaning of icons is cultural and context sensitiveSome tips:

always draw on existing traditions or standardsconcrete objects or things are easier to represent than actions

From clip art, what do these mean to you?

Design Elements

Design of Graphic Design of Graphic ElementsElements

Design Elements

ReferencesReferences

Shneiderman, B. & Plaisant, C. (2005) Designing the User Interface

Preece, J. et al. (2002) Interaction Design

Benyon, D. et al (2005) Designing Interactive Systems

Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript

References