Usability & Design II 19 th February

Effective 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 world Visibility of status Nielsen’s Heuristics

Design Model Planning/Requirements Design Build/Develop Evaluate

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

Requirements – Planning Concepts 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 ing Casting a net e.g., discussion groups Online sales e.g., online coupons and discounts Search engines E-information Visualisation Analysis Reverse engineering

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 Prototypes Prototyping

In web site design it can be (among other things): a series of screen sketches a storyboard, i.e. a cartoon-like series of scenes a Powerpoint slide show a video simulating the use of a system a lump of wood (e.g. PalmPilot) a cardboard mock-up a piece of software with limited functionality written in the target language or in another language Prototyping What is a Prototype?

Fidelity refers to the level of detail: Low Fidelity Medium Fidelity High Fidelity Prototyping Type 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’ notes storyboards Prototyping Low Fidelity Prototypes

Prototyping Storyboards

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 Prototypes

Prototyping with a computer simulate some but not all features of the interface engaging for end usersPurpose provides sophisticated but limited scenario for the user to try can test more subtle design issuesDangers 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 Prototypes

Design Model Planning/Requirements Design Build/Develop Evaluate

Evaluation When to evaluate: Throughout design Design 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 & Testing XHTML validators are used to check web pages against XHTML published specifications Example: Validators enhance the accessibility of web pages Another method is linting, which looks for common mistakes e.g., poor formatting Evaluation Issues

Design Elements Colour Design of graphic elements Design Elements

Colour 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

Colour Problems with Colour attention Colour has an extremely high attention getting capacity  Users might search for relationships and differences that do not exist  Bewilderment etc. Christmas tree effect Varying sensitivity of the eye  All colours are not equal  the 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

Colour Problems with Colour Varying sensitivity of the eye From: Brightness determined mainly by R+G Hard to deal with blue edges & blue shapes Blue not suitable for text or small objects

Colour Problems with Colour Colour viewing deficiencies  8% males,.4% females are colour-blind  red - green most common  red - orange confused with green - yellow Cross-disciplinary/cultural differences  colours have different meanings across situations/cultures  blue Financial managers - corporate qualities or reliability Health care professionals - death Nuclear reactor monitors - coolness or water Design Elements

Colour Problems with Colour Design Elements

Colour Guidelines for Colour Design Elements conservativelyUse colour conservatively LimitLimit the number and amount of colors powerRecognise the power of color to speed or slow tasks supportColour coding should support the task minimalColour coding should appear with minimal user effort user controlColour coding should be under user control monochrome firstDesign for monochrome first colour-deficient usersConsider the needs of colour-deficient users formattingColour can help in formatting consistentBe consistent in colour coding expectationsBe alert to common expectations about color codes color pairingsBe alert to problems with color pairings status changesUse colour changes to indicate status changes information densityUse colour in graphic displays for greater information density

Design of Graphic Elements Primary Graphic Elements in a GUI Windows Menus Icons Design Elements

Design of Graphic Elements 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 Elements Menus 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 Elements Icons Good icon design is difficult Meaning of icons is cultural and context sensitive Some tips:  always draw on existing traditions or standards  concrete objects or things are easier to represent than actions From clip art, what do these mean to you? Design Elements

Design of Graphic Elements Design Elements

References 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