1. Usability & Design II 19 th February

2. Effective Web Design Planning your web site Designing your web site Evaluating your web site Design elements

3. Principles Help Simplicity User control error prevention Consistency Errors mgt Recognition Flexibility Match to world Visibility of status Nielsen’s Heuristics

4. Design Model Planning/Requirements Design Build/Develop Evaluate

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

6. 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 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

7. Design Model Planning/Requirements Design Build/Develop Evaluate

8. “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

9. 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?

10. Fidelity refers to the level of detail: Low Fidelity Medium Fidelity High Fidelity Prototyping Type of Prototypes

11. 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

12. Prototyping Storyboards

13. 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

14. 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

15. Design Model Planning/Requirements Design Build/Develop Evaluate

16. 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

17. Validation & Testing XHTML validators are used to check web pages against XHTML published specifications Example: http://validator.w3.org/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

18. Design Elements Colour Design of graphic elements Design Elements

19. 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

20. 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

21. Colour Problems 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

22. 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

23. Colour Problems with Colour Design Elements

24. 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

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

26. 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

27. 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

28. 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

29. Design of Graphic Elements Design Elements

30. 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