Usability & Design I 13th February Effective Web Design Introduction to usability issues Evaluation and analysis of web-sites What is Usability? Usability is NOT Usability IS Just common sense intuitive, safe, error-free, enjoyable all art (and no science) best designed in from the beginning stumbled onto by accident best achieved by knowing your users tacked on at the end free “The best predictor of customer satisfaction” “The next competitive frontier” What is Usability? Usability can be defined as: “the capacity to be used by humans easily and effectively where, easily = to a specified level of subjective assessment effectively = to a specified level of human performance” (Shackel, 1990) Usability affords the user easy access to the product’s functions Usability Issues Users User Groups Computer skills & knowledge Disabilities Age Cultural Nielsen’s Heuristics Nielsen defined 10 usability principles that can be applied to any system, although frequently used for web applications Similar in aim to usability goals, except slightly more prescriptive Used mainly as the basis for evaluating systems Provide a framework for usability evaluation Nielsen’s Heuristics Visibility of status Match to world User control Flexibility Help Consistency Errors mgt error prevention Simplicity Recognition Nielsen’s Heuristics 1. Visibility of system status Always keep users informed about what is going on, -> provide appropriate timely feedback within reasonable time – e.g. when screen button clicked on provides sound or red highlight feedback: “ccclichhk” Nielsen’s Heuristics 2. Match between system and the real world 1. Speak the users’ language 2. Don’t use system oriented terms 3. Use real world conventions to make information appear in a natural and logical order Use a technique called mapping: Relationship between controls and their movements and the results in the world Nielsen’s Heuristics •Why is this a poor mapping of control buttons? •Why is this a better mapping Nielsen’s Heuristics 3. User control and freedom Provide ways of allowing users to easily escape and navigate to/from places they unexpectedly find themselves e.g. page forward / backward hold cancel end / stop help resume undo Nielsen’s Heuristics 4. Consistency and standards Avoid making users wonder whether different words, situations or actions means the same thing Design interfaces to have similar operations and use similar elements for similar tasks Main benefit is consistent interfaces are easier to learn, use and remember Nielsen’s Heuristics Follow platform conventions Avoid confusion over whether different words, situations, or actions mean the same thing to user No custom link colours. They may conflict with rest of Web and make site hard to use. Web "standards" Follow HTML specifications Deviations from the standards results in unusable features creeping in Nielsen’s Heuristics 5. Help users recognise, diagnose and recover from errors Use plain language to describe the nature of the problem and suggest a way of solving it Careful design is better than good error messages prevents problems from occurring in the first place Nielsen’s Heuristics 6. Recognition rather than recall Make objects, actions, and options visible. Don’t force user to recall information Instructions should be visible or retrieved easily when needed. From point of view of the Web, this heuristic is closely related to system status Users won’t get lost if they can see where they are by looking at clues given by on current page. No need to recall their path to the home page. Good labels & descriptive links are essential for recognition. Use images for links, but they need to be well designed. Nielsen’s Heuristics 7. Error prevention Prevent them occurring in first place if possible Key question: Does the system prevent users from making serious errors, and if they do make an error, does it permit them to recover easily Nielsen’s Heuristics 8. Flexibility and efficiency of use Provide accelerators that are invisible to novice users, but allow more experienced users to carry out tasks more quickly: Use accelerators (keyboard shortcuts) Web Browser provides good accelerators e.g. bookmarks Design for effective book-marking contents of site can easily be linked to users create specialized views of a site for specific tasks Nielsen’s Heuristics 9. Aesthetic and minimalist design Avoid using info that is irrelevant or rarely needed No irrelevant or rarely needed information in dialogues -> diminishes visibility Extraneous information on a page distracts user & slows them down. Use progressive levels of detail. Support different uses of content. No brochures. Nielsen’s Heuristics 10. Help and documentation Provide information that can be easily searched and provides help in a set of concrete steps that can easily be followed Better if the system can be used without documentation it may be necessary to provide help and documentation Make it easy to search, focused on the user's task, list concrete steps to be carried out, and not too large. Pros and Cons: Heuristic Evaluation Advantages detects both major (42%) and minor (32%) problems in UI more effective than single specialist can be used on designs “realistic” approach “severity rating” helps to set priorities Disadvantages groups can develop their own bias doing it properly is not that cheap new technologies (Web, Multimedia, Virtual Reality) may have specific problems not covered by The Heuristics Analyse this using Nielsen’s Heuristics Analyse this using Nielsen’s Heuristics Analyse this using Nielsen’s Heuristics Analyse this using Nielsen’s Heuristics Analyse this using Nielsen’s Heuristics 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 References