CS 501: Software Engineering
Lecture 11
Usability 1
1
CS 501 Spring 2005
Course Adminstration
Quiz 2 on Thursday
Same format as the first quiz
2
CS 501 Spring 2005
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.
3
CS 501 Spring 2005
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."
4
CS 501 Spring 2005
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.
5
CS 501 Spring 2005
Design
Feasibility and
Planning
Requirements
Your understand the
requirements, now to
design the system.
Design
Implementation
6
Operation and
Maintenance
CS 501 Spring 2005
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 Winograd
Bringing Design to Software, 1996
7
CS 501 Spring 2005
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)
8
CS 501 Spring 2005
Reading
Reading: Mitchell Kapor, A Software Design Manifesto.
Dr. Dobbs Journal, 1991. http://hci.stanford.edu/bds/1kapor.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."
9
CS 501 Spring 2005
Lectures on Design
10
Lectures
Topic
11-12
Usability
13-14
System Architecture
15-16
Object Oriented Design
17-18
Tools and Techniques
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?
11
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")
12
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)
13
CS 501 Spring 2005
User Interface Design
Examples of change: 1990 to 2004
14
CS 501 Spring 2005
1990
SEARCH
I NSPEC Da t a b a s e
--------------------------------------Ty p e k e y wo r d s a n d p r e s s RETURN - - o r
e n t e r a c o mma n d
De f a u l t i s ADJ : a c i d f r e e
--------------------------------------Se t # 3 :
0 r e c or ds
a c i d a dj f r e
I NSPEC Da t a b a s e
Se t # 4 :
5 r e c or ds
a c i d a dj f r e e
I NSPEC Da t a b a s e
Se t # 5 :
448 r e c or ds
a c i d a nd pa pe r
I NSPEC Da t a b a s e
Se t # 6 :
de a c i di f i c a t i on
4 r e c or ds
I NSPEC Da t a b a s e
---------------------------------------
15
CS 501 Spring 2005
1995
16
CS 501 Spring 2005
2003
17
CS 501 Spring 2005
1995
18
CS 501 Spring 2005
2003
19
CS 501 Spring 2005
1995
20
CS 501 Spring 2005
2003
21
CS 501 Spring 2005
1995
22
CS 501 Spring 2005
2003
23
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
24
CS 501 Spring 2005
The Design/Evaluate Loop
Design
Analyze
requirements
?
Build
Evaluate
25
CS 501 Spring 2005
Mock-up Example
26
CS 501 Spring 2005
Methods for Specifying Usability
Requirements and Evaluation of Usability
Initial
Client's opinions

Competitive analysis

Expert opinion


Focus groups


Observing users
Measurements
27
Mock-up Prototype Production







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
28
CS 501 Spring 2005
Usability Laboratory
Monitor users while they use system (or a
prototype)
Evaluators
User
one-way
mirror
29
CS 501 Spring 2005
Usability Laboratory
30
CS 501 Spring 2005
Usability Laboratory
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
31
CS 501 Spring 2005
Eye Tracking
32
CS 501 Spring 2005
Eye Tracking
33
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.
34
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
35
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
36
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
•
•
•
•
•
•
37
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
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
38
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
39
CS 501 Spring 2005
2003
40
CS 501 Spring 2005
2004
41
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!
*
42
CS 501 Spring 2005