1 cs 501 spring 2005 cs 501: software engineering lecture 11 usability 1

1 CS 501 Spring 2005

CS 501: Software Engineering

Lecture 11

Usability 1


Course Adminstration

Quiz 2 on Thursday

Same format as the first quiz


Presentations

Project Presentations

First presentation is next week, Wednesday through Thursday (note change of date).

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.


Planning for the Presentation

How will you use the time?

This is a presentation to the client, with the Instructor as a secondary audience. Possible topics:

• Overview of project and progress against plan

• Presentation of assumptions, decisions

• Summary of requirements in moderate detail

• What has been learned since feasibility study. Changes in plans

Allow 15 minutes for questions. Expect interruptions.

"This is our understanding of your requirements."


Planning for the Presentation

Logistics

Have a rehearsal, check visual aids and demonstrations. Then change nothing.

Check out the equipment in the meeting room. What network will you use (if any). How will you connect a computer (if you do)? What about firewalls?

Will one person act as chair and call on other members of the team? Never interrupt your colleagues.

Not everybody is a great presenter, but everybody can be well-prepared.


Design

Requirements

Operation andMaintenanceImplementation

Design

Feasibility andPlanning

Your understand the requirements, now to design the system.


What is Design?

Design is conscious

Design keeps human concerns in the center

Design is a dialog with materials

Design is creative

Design is communication

Design has social consequences

Design is a social activity

Terry WinogradBringing Design to Software, 1996


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)


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

10 CS 501 Spring 2005

Lectures on Design

Lectures Topic

11-12 Usability

13-14 System Architecture

15-16 Object Oriented Design

17-18 Tools and Techniques

11 CS 501 Spring 2005

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?

12 CS 501 Spring 2005

User Interface Design

The user 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")

13 CS 501 Spring 2005

Same Functions, Different Interface

The user interface design is different from the functionality provided.

Example 1: Microsoft Word on Windows and Macintosh:

• Different user interfaces for the same functionality.

Example 2: 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)

14 CS 501 Spring 2005

User Interface Design

Examples of change: 1990 to 2004

15 CS 501 Spring 2005

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

16 CS 501 Spring 2005

1995

17 CS 501 Spring 2005

2003

18 CS 501 Spring 2005

1995

19 CS 501 Spring 2005

2003

20 CS 501 Spring 2005

1995

21 CS 501 Spring 2005

2003

22 CS 501 Spring 2005

1995

23 CS 501 Spring 2005

2003

24 CS 501 Spring 2005

User Interface Design: 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.

USER INTERFACES MUST BE TESTED WITH USERS

25 CS 501 Spring 2005

The Design/Evaluate Loop

Evaluate

?Design

Build

Analyze requirements

26 CS 501 Spring 2005

Mock-up Example

27 CS 501 Spring 2005

Methods for Specifying Usability Requirements and Evaluation of Usability

Initial Mock-up Prototype Production

Client's opinions

Competitive analysis

Expert opinion

Focus groups

Observing users

Measurements

28 CS 501 Spring 2005

Focus Group

A focus group is a group interview

• Interviewer

• Potential users

Typically 5 to 12

Similar characteristics (e.g., same viewpoint)

• Structured set of questions

May show mock-ups

Group discussions

• Repeated with contrasting user groups

29 CS 501 Spring 2005

Usability Laboratory

Monitor users while they use system (or a prototype)

Evaluators User

one-way mirror

30 CS 501 Spring 2005


31 CS 501 Spring 2005


Observing techniques

• Human observer

• Video camera

• Tape recording

Study techniques

• Human protocol (user talks aloud while using system)

• User carries out specified list of tasks

• Software designer presents story board (mock-up) to user

32 CS 501 Spring 2005

Eye Tracking

33 CS 501 Spring 2005

Eye Tracking

34 CS 501 Spring 2005

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.

35 CS 501 Spring 2005

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

36 CS 501 Spring 2005

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

37 CS 501 Spring 2005

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

38 CS 501 Spring 2005

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

39 CS 501 Spring 2005

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

40 CS 501 Spring 2005

2003

41 CS 501 Spring 2005

2004

42 CS 501 Spring 2005

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

1 cs 501 spring 2005 cs 501: software engineering lecture 11 usability 1

Documents