CS 501: Software Engineering
Lecture 11
Designing for Usability I
1
CS 501 Spring 2002
Administration
Requirements Presentation next week
Sign up with Rosemary Adessa for a time.
2
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?
3
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
4
CS 501 Spring 2002
Levels of Usability
interface design
conceptual
model
functional design
data and metadata
computer systems and networks
5
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
6
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
7
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
8
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
9
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
10
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)
11
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)
12
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
13
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
14
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
15
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.
16
CS 501 Spring 2002
User Interfaces: Iterative Design
17
Evaluation
Requirements
Implementation
(prototype)
Design
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
18
CS 501 Spring 2002