1. 1 CS 501 Spring 2006 CS 501: Software Engineering Lectures 11 & 12 Usability

2. 2 CS 501 Spring 2006 Course Administration Quiz 2 on Thursday Same format as the first quiz Quiz 3 will be on March 16

3. 3 CS 501 Spring 2006 Presentations Project Presentations First presentation is next week, Tuesday through Thursday. Meeting room is at 301 College Avenue. For instructions, read the Assignments page. Schedule your presentation now!!!! Available time slots are on the Home page. Your client must attend the presentation unless you have special permission.

4. 4 CS 501 Spring 2006 Design Requirements Operation and Maintenance Implementation Design Feasibility and Planning Your understand the requirements, now to design the system.

5. 5 CS 501 Spring 2006 Software Design The design phase is the most creative part of software development. The design must: Meet the requirements Satisfy the users Provide flexibility for changing requirements Be suitable for implementation with available resources Be testable and maintainable Fit within the style of the organization(s)

6. 6 CS 501 Spring 2006 Lectures on Design LecturesTopic 11-12Usability 13-14System Architecture 15-18Object Oriented Design

7. 7 CS 501 Spring 2006 Usability: Reading Reading: Mitchell Kapor, A Software Design Manifesto. Dr. Dobbs Journal, 1991. http://hci.stanford.edu/bds/1- kapor.html "Software design is not the same as user interface design." "Architects, not construction engineers, are the professionals who have overall responsibility for creating buildings.... in the actual process of designing and implementing the building, the engineers take direction from the architects."

8. 8 CS 501 Spring 2006 Usability: The Design/Evaluate Loop Evaluate ? Design Build Analyze requirements

9. 9 CS 501 Spring 2006 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?

10. 10 CS 501 Spring 2006 Design from a System Viewpoint interface design functional design data and metadata computer systems and networks mental model

11. 11 CS 501 Spring 2006 Mental Model The mental (conceptual) model is the user's internal model of what the system provides: The desk top metaphor -- files and folders The Web model -- pages with hyperlinks

12. 12 CS 501 Spring 2006 Mental Model What a person thinks is true about a system, not necessarily what is actually true Similar in structure to the system that is represented Allows a person to predict the results of his actions Simpler than the represented system. A mental model includes only enough information to allow accurate predictions (i.e. no data structures) Also called conceptual model

13. 13 CS 501 Spring 2006 Interface Design The interface design is the appearance on the screen and the actual manipulation by the user Fonts, colors, logos, key board controls, menus, buttons Mouse control or keyboard control? Conventions (e.g., "back", "help") Examples: Screen space utilization in Acrobat. Number of snippets per page in Web search.

14. 14 CS 501 Spring 2006 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 should be offered shortcuts; beginners should have simple, well-defined options The user should feel in control

15. 15 CS 501 Spring 2006 Functional Design The functional design, determines the functions that are offered to the user Selection of parts of an object Searching a list or sorting the results Help information Manipulation of objects on a screen Pan or zoom There may be many user interface choices for the same function, e.g., Macintosh v. Windows desktop

16. 16 CS 501 Spring 2006 Data and metadata Structural data and metadata stored by the computer system enable the functions and the interface Effectiveness of searching depends on the type and quality of data that is indexed (free-text, controlled vocabulary, etc.) 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)

17. 17 CS 501 Spring 2006 Computer systems and networks The performance, reliability and predictability of computer systems and networks is crucial to usability

18. 18 CS 501 Spring 2006 Non-functional Requirements Performance, Reliability, Scalability, Security… Example: Response time 0.1 sec – the user feels that the system is reacting instantaneously 1 sec – the user will notice the delay, but his/her flow of thought stays uninterrupted 10 sec – the limit for keeping the user's attention focused on the dialogue

19. 19 CS 501 Spring 2006 Style of User Interfaces: Command Line Interfaces User interacts with computer by typing commands Allows complex instructions to be given to computer Facilitates formal methods of specification & implementation Skilled users can input commands quickly Requires learning or training Can be adapted for people with disabilities Can be multi-lingual Suitable for scripting / non-human clients

20. 20 CS 501 Spring 2006 Style of User Interfaces: Direct Interaction User interacts with computer by manipulating objects on screen Can be intuitive and easy to learn Users get immediate feedback Not suitable for some complex interactions Does not require typing skills Straightforward for casual users, slow for skilled users Icons can be language-independent Difficult to build scripts Only suitable for human users

21. 21 CS 501 Spring 2006 Design for Direct Manipulation metaphors and mental models: Conceptual models, metaphors, icons, but there may not be an intuitive model navigation rules: How to move among data functions, activities and roles in a large space conventions: Familiar aspects that do not need extra training. => scroll bars, buttons, help systems, sliders => good for users, good for designers look: characteristics of the appearance that convey information feel: interaction techniques that provide an appealing experience

22. 22 CS 501 Spring 2006 Design for Direct Manipulation: Menus Easy for users to learn and use Certain categories of error are avoided Enables context-sensitive help Major difficulty is structure of large choices Scrolling menus (e.g., states of USA) Hierarchical Associated control panels Menus plus command line Users prefer broad and shallow to deep menu systems

23. 23 CS 501 Spring 2006 Help System Design Help system design is difficult! Must prototype with mixed users Categories of help: => Overview and general information => Specific or context information => Tutorials (general) => Cook books and wizards => Emergency ("I am in trouble...") Must have many routes to same information Never blame the user! *

24. 24 CS 501 Spring 2006 Information Presentation Simple is often better than fancy Text precise, unambiguous fast to compute and transmit Graphical interface simple to comprehend / learn uses of color shows variations

25. 25 CS 501 Spring 2006 Information Presentation: Separation of Presentation from Content Information to be displayed Presentation software Display Presentation software Display PDF Acrobat html Firefox

26. 26 CS 501 Spring 2006 System Considerations of User Interfaces Personal computer cycles are there to be used Any network transfer involves delay Shared systems have unpredictable performance Data validation often requires access to shared data Mobile code poses security risks

27. 27 CS 501 Spring 2006 Evaluation The process of determining the worth of, or assigning a value to, the usability on the basis of careful examination and judgment. Making sure that a system is usable before launching it. Iterative improvements after launch. Categories of evaluation methods: –Analytical evaluation: without users –Empirical evaluation: with users –Measurements of operational systems

28. 28 CS 501 Spring 2006 Evaluation How do you measure usability? Usability comprises the following aspects: Effectiveness – the accuracy and completeness with which users achieve certain goals Measures: quality of solution, error rates Efficiency – the relation between the effectiveness and the resources expended in achieving them Measures: task completion time, learning time, clicks number Satisfaction – the users’ comfort with and positive attitudes towards the use of the system Measures: attitude rating scales From ISO 9241-11

29. 29 CS 501 Spring 2006 Evaluation without Users Assessing systems using established theories and methods Evaluation techniques Heuristic Evaluation (Nielsen, 1994) –Evaluate the design using “rules of the thumb” Cognitive Walkthrough (Wharton et al, 1994) –A formalized way of imagining people’s thoughts and actions when they use the interface for the first time Claims Analysis – based on scenario-based analysis –Generating positive and negative claims about the effects of features on the user

30. 30 CS 501 Spring 2006 Measurement Basic concept: log events in the users' interactions with a system Examples from a Web system Clicks (when, where on screen, etc.) Navigation (from page to page) Keystrokes (e.g., input typed on keyboard) Use of help system Errors May be used for statistical analysis or for detailed tracking of individual user.

31. 31 CS 501 Spring 2006 Evaluation based on Measurements Analysis of system logs Which user interface options were used? When was was the help system used? What errors occurred and how often? Which hyperlinks were followed (click through data)? Human feedback Complaints and praise Bug reports Requests made to customer service

32. 32 CS 501 Spring 2006 Evaluation with Users Testing the system, not the users! Stages of evaluation with users: Preparation Sessions conduct Analysis of results User testing is time-consuming and expensive.

33. 33 CS 501 Spring 2006 Evaluation with Users Preparation Determine goals of the usability testing “The user can find the required information in no more than 2 minutes” Write the user tasks “Answer the question: how hot is the sun?” Recruit participants Use the descriptions of users from the requirements phase to detect potential users

34. 34 CS 501 Spring 2006 Usability Laboratory Concept: monitor users while they use system Evaluators User one-way mirror

35. 35 CS 501 Spring 2006 Evaluation with Users Sessions Conduct Conduct the session –Usability Lab –Simulated working environment Observe the user –Human observer(s) –Video camera –Audio recording Inquire satisfaction data

36. 36 CS 501 Spring 2006 Evaluation with Users Results Analysis If possible, use statistical summaries Pay close attention to areas where users –were frustrated –took a long time –couldn't complete tasks Respect the data and users' responses, don't make excuses for designs that failed Note designs that worked and make sure they're incorporated in the final product

37. 37 CS 501 Spring 2006 Evaluation Example: Eye Tracking

38. 38 CS 501 Spring 2006 Evaluation Example: Eye Tracking

39. 39 CS 501 Spring 2006 Refining the design based on evaluation Designers and evaluators need to work as a team Designers are poor evaluators of their own work, but know the requirements, constraints, and context of the design: Some user problems can be addressed with small changes Some user problems require major changes Some user requests (e.g., lots of options) are incompatible with other requests (e.g., simplicity) Do not allow evaluators to become designers

40. 40 CS 501 Spring 2006 The Importance of User Interface Design Good support for users is more than a cosmetic flourish Elegant design, appropriate functionality, & responsive system: => a measurable difference to their effectiveness A system that is hard to use: => users may fail to find important results, or mis-interpret what they do find => user may give up in disgust A computer system is only as good as the interface it provides to its users

41. 41 CS 501 Spring 2006 User Interface Design Examples of change: 1990 to 2006

42. 42 CS 501 Spring 2006 1990

43. 43 CS 501 Spring 2006 1995

44. 44 CS 501 Spring 2006 2003

45. 45 CS 501 Spring 2006 2003

46. 46 CS 501 Spring 2006 1995

47. 47 CS 501 Spring 2006 2006

48. 48 CS 501 Spring 2006 1995

49. 49 CS 501 Spring 2006 2003

50. 50 CS 501 Spring 2006 1995

51. 51 CS 501 Spring 2006 2006