53
1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

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

  • View
    218

  • Download
    0

Embed Size (px)

Citation preview

Page 1: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

1 CS 501 Spring 2007

CS 501: Software Engineering

Lectures 11 & 12

Usability

Page 2: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

2 CS 501 Spring 2007

Course Administration

Quiz 2 on Thursday

Same format as the first quiz

No office hours on Thursday

Page 3: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

3 CS 501 Spring 2007

Presentations

Project Presentations

First presentation is next week, Tuesday through Thursday.

Meeting room is at 301 College Avenue.

For instructions, read the Assignments page.

Your client must attend the presentation unless you have special permission.

Page 4: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

4 CS 501 Spring 2007

Design

Requirements

Operation andMaintenanceImplementation

Design

Feasibility andPlanning

Your understand the requirements, now to design the system.

Page 5: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

5 CS 501 Spring 2007

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)

Page 6: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

6 CS 501 Spring 2007

Lectures on Design

Lectures Topic

11-12 Usability

13-14 System Architecture

15-18 Object Oriented Design

Page 7: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

7 CS 501 Spring 2007

Reading

Reading:  Mitchell Kapor, A Software Design Manifesto. Dr. Dobbs Journal, 1991. http://hci.stanford.edu/bds/1-kapor.html

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

"Software design is not the same as user interface design."

Page 8: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

8 CS 501 Spring 2007

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

Page 9: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

9 CS 501 Spring 2007

Usability: The Design/Evaluate Loop

Evaluate

?Design

Build

Analyze requirements

Page 10: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

10 CS 501 Spring 2007

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?

Page 11: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

11 CS 501 Spring 2007

Design from a System Viewpoint

interface design

functional design

data and metadata

computer systems and networks

mentalmodel

Page 12: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

12 CS 501 Spring 2007

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 -- one vast collection of pages with hyperlinks

Page 13: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

13 CS 501 Spring 2007

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

Page 14: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

14 CS 501 Spring 2007

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.

Page 15: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

15 CS 501 Spring 2007

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

Page 16: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

16 CS 501 Spring 2007

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

Page 17: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

17 CS 501 Spring 2007

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)

Page 18: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

18 CS 501 Spring 2007

Computer systems and networks

The performance, reliability and predictability of computer systems and networks is crucial to usability

Page 19: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

19 CS 501 Spring 2007

Non-functional Requirements

Performance, Reliability, Scalability, Security…

Example: Response time0.1 sec – the user feels that the system is reacting instantaneously1 sec – the user will notice the delay, but his/her flow of thought stays uninterrupted10 sec – the limit for keeping the user's attention focused on the dialogue

Page 20: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

20 CS 501 Spring 2007

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

Page 21: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

21 CS 501 Spring 2007

Command Line Interfaces

SEARCH I NSPEC Dat abase- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Type keywor ds and pr ess RETURN - - orent er a command

Def aul t i s ADJ : aci d f r ee- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Set #3: aci d adj f r e 0 r ecor ds I NSPEC Dat abase

Set #4: aci d adj f r ee 5 r ecor ds I NSPEC Dat abase

Set #5: aci d and paper 448 r ecor ds I NSPEC Dat abase

Set #6: deaci di f i cat i on 4 r ecor ds I NSPEC Dat abase- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Page 22: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

22 CS 501 Spring 2007

Command line interfaces andText-only menus

Command line interfaces and text-only menus had become almost entirely replaced by graphical interfaces, but are returning:

• Devices with small form factor or other special features, e.g. cell phone, PDA, etc.

• Interfaces for simple tasks with general users, e.g. automated bank teller (ATM)

Page 23: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

23 CS 501 Spring 2007

Style of User Interfaces:Graphical interfaces and 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

Page 24: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

24 CS 501 Spring 2007

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

Page 25: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

25 CS 501 Spring 2007

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

Page 26: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

26 CS 501 Spring 2007

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!*

Page 27: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

27 CS 501 Spring 2007

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

variations show different cases

Page 28: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

28 CS 501 Spring 2007

Information presentation: Separation of presentation from content

Information to be displayed

Presentation software Display

Presentation software

Display

PDF

Acrobat

html

Firefox

Page 29: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

29 CS 501 Spring 2007

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

Page 30: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

30 CS 501 Spring 2007

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

Page 31: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

31 CS 501 Spring 2007

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

Page 32: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

32 CS 501 Spring 2007

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 themMeasures: task completion time, learning time, clicks number

• Satisfaction – the users’ comfort with and positive attitudes towards the use of the systemMeasures: attitude rating scales

From ISO 9241-11

Page 33: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

33 CS 501 Spring 2007

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

Page 34: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

34 CS 501 Spring 2007

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.

Page 35: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

35 CS 501 Spring 2007

Evaluation with UsersPreparation

• 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

Page 36: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

36 CS 501 Spring 2007

Usability Laboratory

Concept: monitor users while they use system

Evaluators User

one-way mirror

Page 37: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

37 CS 501 Spring 2007

Evaluation with UsersSessions Conduct

• Conduct the session– Usability Lab– Simulated working

environment

• Observe the user– Human observer(s)– Video camera– Audio recording

• Inquire satisfaction data

Page 38: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

38 CS 501 Spring 2007

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

Page 39: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

39 CS 501 Spring 2007

Evaluation Example: Eye Tracking

Page 40: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

40 CS 501 Spring 2007

Evaluation Example: Eye Tracking

Page 41: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

41 CS 501 Spring 2007

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

Page 42: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

42 CS 501 Spring 2007

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.

Page 43: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

43 CS 501 Spring 2007

Changes in user interface design

Examples of change: 1995 to 2007

Page 44: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

44 CS 501 Spring 2007

1990

SEARCH I NSPEC Dat abase- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Type keywor ds and pr ess RETURN - - orent er a command

Def aul t i s ADJ : aci d f r ee- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Set #3: aci d adj f r e 0 r ecor ds I NSPEC Dat abase

Set #4: aci d adj f r ee 5 r ecor ds I NSPEC Dat abase

Set #5: aci d and paper 448 r ecor ds I NSPEC Dat abase

Set #6: deaci di f i cat i on 4 r ecor ds I NSPEC Dat abase- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Page 45: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

45 CS 501 Spring 2007

1995

Page 46: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

46 CS 501 Spring 2007

2003

Page 47: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

47 CS 501 Spring 2007

2003

Page 48: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

48 CS 501 Spring 2007

1995

Page 49: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

49 CS 501 Spring 2007

2006

Page 50: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

50 CS 501 Spring 2007

1995

Page 51: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

51 CS 501 Spring 2007

2003

Page 52: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

52 CS 501 Spring 2007

1995

Page 53: 1 CS 501 Spring 2007 CS 501: Software Engineering Lectures 11 & 12 Usability

53 CS 501 Spring 2007

2006