1. 1 CS 501 Spring 2002 CS 501: Software Engineering Lecture 11 Designing for Usability I

2. 2 CS 501 Spring 2002 Administration Requirements Presentation next week Sign up with Rosemary Adessa for a time.

3. 3 CS 501 Spring 2002 Design for Usability Usability of a computer system is a combination of factors: User interface design Functionality Performance Help systems and documentation Freedom from errors Anything else?

4. 4 CS 501 Spring 2002 Elements of an Interface metaphors: terms, images, concepts that can be learned mental model: organization and representation of data, functions, tasks and roles navigation rules: how to move among data functions, activities and roles look: characteristics of the appearance that convey information feel: interaction techniques that provide an appealing experience Marcus (1993) quoted by Pfleeger

5. 5 CS 501 Spring 2002 Levels of Usability interface design functional design data and metadata computer systems and networks conceptual model

6. 6 CS 501 Spring 2002 The Conceptual Model The conceptual model is the user's internal model of what the system provides: The desk top metaphor -- files and folders The web model -- click on hyperlinks The library model -- search and retrieve The form filling model -- fill form, submit Example: The Mercury page turner

7. 7 CS 501 Spring 2002 Interface Design The interface design is the appearance on the screen and the actual manipulation by the user (look and feel) Fonts, colors, logos, key board controls, menus, buttons Mouse control or keyboard control? Conventions (e.g., "back", "help") Example: Screen space utilization in the Mercury page turner

8. 8 CS 501 Spring 2002 Principles of Interface Design Interface design is partly an art; there are general principles: Consistency -- in appearance, controls, and function. Feedback -- what is the computer system is doing? why does the user see certain results? Users should be able to interrupt or reverse actions Error handling should be simple and easy to comprehend Skilled users offered shortcuts; beginners have simple, well-defined options The user should feel in control

9. 9 CS 501 Spring 2002 Disabilities What if the user: is visually impaired or color blind? does not speak English? is a poor typist? There is a tradition of blind programmers Navigation of web sites need not be only visual You may have a legal requirement to support people with disabilities

10. 10 CS 501 Spring 2002 Functional Design The functional design, determines the functions that are offered to the user Selection of parts of a digital object Searching a list or sorting the results Help information Manipulation of objects on a screen Pan or zoom

11. 11 CS 501 Spring 2002 Same Functions, Different Interface Example: The desk top metaphor Mouse -- 1 button (Macintosh), 2 button (Windows) or 3 button (Unix) Close button -- left of window (Macintosh) right of window (Windows)

12. 12 CS 501 Spring 2002 Data and Metadata Data and metadata stored by the computer system enable the functions and the interface The desktop metaphor has the concept of associating a file with an application. This requires a file type to be stored with each file: -- extension to filename (Windows and Unix) -- resource fork (Macintosh) Data validation often requires that a user interface has access to a database (e.g., names and addresses)

13. 13 CS 501 Spring 2002 Computer Systems and Networks The performance, reliability and predictability of computer systems and networks is crucial to usability Response time instantaneous for mouse tracking and echo of key stroke 5 seconds for simple transactions Example: Pipelined algorithm for the Mercury page turner Quality of Service for real time information

14. 14 CS 501 Spring 2002 Design Tensions in Networked Systems Client computers and network connections vary greatly in capacity Client software may run on various operating systems; it may be current or an earlier version System designers wish to control clients; users wish to configure their own environments

15. 15 CS 501 Spring 2002 Usability and Cost Performance may be expensive in hardware or special software development User interface development may be a major part of a software development project Costs are multiplied if a user interface has to be used on different computers or migrate to different versions of systems Web browsers provide a general purpose user interface that others maintain

16. 16 CS 501 Spring 2002 Usability: Requirements and Refinement It is very difficult to specify and comprehend an interactive interface in a textual documents. Requirement documents benefit from sketches, comparison with existing systems, etc. Design documents should definitely include graphical elements and often benefit from a mock-up or other form of prototype. Implementation plans should include evaluation of user factors and time to make changes.

17. 17 CS 501 Spring 2002 User Interfaces: Iterative Design Requirements Design Implementation (prototype) Evaluation

18. 18 CS 501 Spring 2002 Methods for Specifying Requirements and Evaluation of Usability Observing users (user protocols) Focus groups Measurements effectiveness in carrying out tasks speed Expert review Client's opinions Competitive analysis