Objectives
Understand the differences between user interfaces
and system interfaces
Explain why the user interface is the system to the
users
Discuss the importance of the three principles of
user-centered design
Describe the historical development of the field of
human-computer interaction (HCI)
Object-Oriented Analysis and Design with the Unified Process
2
Objectives (continued)
Describe the three metaphors of human-computer
interaction
Discuss how visibility and affordance affect
usability
Apply the eight golden rules of dialog design when
designing the user interface
List the key principles used in Web design
Define the overall system structure as a menu
hierarchy
Object-Oriented Analysis and Design with the Unified Process
3
Objectives (continued)
Write user-computer interaction scenarios as dialogs
Create storyboards to show the sequence of forms
used in a dialog
Use UML class diagrams and sequence diagrams to
document dialog designs
Design window forms and browser forms that are
used to implement a dialog
Object-Oriented Analysis and Design with the Unified Process
4
Overview
User interfaces handle inputs and outputs that
involve the system user directly
Design inputs and outputs involved for each use case
Interactions with the user and computer (HCI) can
be modeled with dialog designs
Use metaphors, standard guidelines, and UML
diagrams to design user interfaces
User-interface design occurs in each iteration
Address only a few use cases at a time
Object-Oriented Analysis and Design with the Unified Process
5
Identifying and Classifying
Inputs and Outputs
Inputs and outputs are defined early in order to:
Document key inputs/outputs in business cases
Identify actors
Define triggers and responses in an event table
Identify the system boundary in use case diagrams
Design use case descriptions and system sequence
diagrams
Design the user-interface layer
Define messages in a use case realization
Object-Oriented Analysis and Design with the Unified Process
6
User Versus System Interfaces
System interface
Involves inputs and outputs that require minimal
human intervention
User interface
Require user interaction to produce inputs and outputs
Most analysts separate design of system interfaces
from user interfaces
Requires different expertise and technologies
Object-Oriented Analysis and Design with the Unified Process
7
Understanding the User
Interface
To the end user, the user interface is the system itself
Physical devices, parts, or documents
Perceptual aspects including seeing, hearing, and
touching
Conceptual details about how to use the system
◘ Called the user’s model
HCI (human-computer interaction) studies end users
and their interactions with computers
Object-Oriented Analysis and Design with the Unified Process
8
Figure 11-1
Physical, perceptual, and conceptual aspects of the user interface
Object-Oriented Analysis and Design with the Unified Process
9
User-Centered Design
Technique that places user at center of the
development process
Focus early on users and their work
◘ Understand user styles and preferences
Evaluate designs to ensure usability
◘ Ease of learning and use dependent on type of user
Use iterative development
◘ Continually return to user requirements and
evaluating the system
Object-Oriented Analysis and Design with the Unified Process
10
Human-Computer Interaction
as a Field of Study
Evolved from human factor engineering
(ergonomics)
Important contributions by Xerox
Work on the usability of machines
Research at Xerox PARC led to first OO language
(Smalltalk)
First personal computer with GUI (Xerox Star)
Dependent on several disciplines
Object-Oriented Analysis and Design with the Unified Process
11
Figure 11-2
The fields contributing to the study of HCI
Object-Oriented Analysis and Design with the Unified Process
12
Metaphors for HumanComputer Interaction
Desktop
Interaction with a display screen that includes
objects commonly found on a desk
Document
Involves browsing and entering data on electronic
documents using hypertext and hypermedia
Dialog
Carrying on a conversation with the computer by
sending and receiving messages
Object-Oriented Analysis and Design with the Unified Process
13
Figure 11-3
The desktop metaphor based on direct manipulation,
shown on a display screen
Object-Oriented Analysis and Design with the Unified Process
14
Figure 11-4
The document metaphor shown as
hypermedia in a Web browser
Object-Oriented Analysis and Design with the Unified Process
15
Figure 11-5
The dialog metaphor expresses the concept that
the user and computer interact by sending messages
Object-Oriented Analysis and Design with the Unified Process
16
Figure 11-6
The user’s language
and the computer’s
language used to
implement an e-mail
application based on the
natural dialog between
manager and assistant
Object-Oriented Analysis and Design with the Unified Process
17
Guidelines for Designing User
Interfaces
Interface design guidelines must be followed for
the interface of any system
Two key principles (from HCI researcher Donald
Norman)
Visibility
◘ All controls should be visible and provide
immediate feedback to the user
Affordance
◘ Appearance of any control should suggest its
functionality
Object-Oriented Analysis and Design with the Unified Process
18
Figure 11-7
The eight golden rules for designing interactive interfaces
Object-Oriented Analysis and Design with the Unified Process
19
Documenting Dialog Designs
Inputs and outputs are obtained from use cases and
scenarios
Menus reflect the overall system structure from the
standpoint of the user
Each subsystem might be represented as a menu, with
each menu option representing a use case
Menus might have several versions based on user type
Menus should also include options that are not based
on use cases (i.e., system controls, user help)
Object-Oriented Analysis and Design with the Unified Process
20
Figure 11-8
One overall menu hierarchy
design for the RMO
customer support system
(not all users will have all of
these options available)
Object-Oriented Analysis and Design with the Unified Process
21
Dialogs and Storyboards
Several options for documenting dialogs (no de facto
standards exist)
List the key steps for each dialog with descriptions of
what the user and computer do at each step
Write out a human and computer conversation
◘ Used for complicated or uncertain requests
Use storyboarding to show a sequence of sketches of a
display screen during a dialog
◘ Initial design can be a general framework
Object-Oriented Analysis and Design with the Unified Process
22
Figure 11-9
Storyboard for the
DownTown Videos
rent videos dialog
Object-Oriented Analysis and Design with the Unified Process
23
Dialog Documentation with
UML Diagrams
Use case descriptions show a list of steps followed as
a user and computer interact
Activity diagrams document a user-computer dialog
for each use case
SSDs describe sequential actor-computer messages
Class diagrams add user-interface classes for forms
Detailed sequence diagram show users interacting
with specific objects in forms
Object-Oriented Analysis and Design with the Unified Process
24
Figure 11-10
A sequence diagram for the RMO Look up item availability dialog
with the ProductQueryForm added
Object-Oriented Analysis and Design with the Unified Process
25
Figure 11-11
A class diagram showing interface classes
making up the ProductQueryForm
Object-Oriented Analysis and Design with the Unified Process
26
Figure 11-12
A sequence diagram showing specific interface objects making up the ProductQueryForm for
the Look up item availability dialog (not all problem domain objects are shown)
Object-Oriented Analysis and Design with the Unified Process
27
Guidelines for Designing
Windows and Browser Forms
Principles the same for Microsoft Windows, XWindows (UNIX), and Macintosh environments
Two types of forms
Windows forms are programmed in a full-featured
programming language
Browser forms are programmed using HTML,
script languages, and server-side processing
◘ Companies can use the same browser form for both
intranet and Internet purposes
Object-Oriented Analysis and Design with the Unified Process
28
Form Layout and Formatting
Prototype various alternatives and allow users to
test them to ensure good layout and ease of use
Design considerations
Consistency of all forms in look and feel
Clear headings, labels, and logos
Distribution and order of data-entry fields and
buttons according to traditions
Judicious use of font sizes, highlighting, and colors
Object-Oriented Analysis and Design with the Unified Process
29
Figure 11-13
The RMO Product Detail form used to look up information about a
product, select size and color, and then add the product to an order
Object-Oriented Analysis and Design with the Unified Process
30
Data Keying and Data Entry
Objective: require as little data entry as possible
Text boxes accept keyboard data entry
List boxes contain a list of acceptable entries
Spin boxes display entries in a text box
Combo boxes permit users to enter a new value
Radio buttons enable the user to select one option
from a group
Check boxes enable the user to select multiple
options from a group
Object-Oriented Analysis and Design with the Unified Process
31
Figure 11-14
Examples of data-entry controls on an input form
Object-Oriented Analysis and Design with the Unified Process
32
Navigation and Support
Controls
Standard window interface contain controls for
navigation and window manipulation
Maximize, Minimize, and Close buttons
Scroll bars
Record selection and record navigation arrows
Designers should add controls to move screens,
close open windows, and to find and search
Browser forms also provide navigation and
support controls that applications should support
Object-Oriented Analysis and Design with the Unified Process
33
Help Support
Tutorials
Assists in training new users
Indexed list of help topics
Invoked through a keyword search or a help wizard
Context-sensitive help
Automatically displays the appropriate help topic
based on the location of the cursor
Object-Oriented Analysis and Design with the Unified Process
34
Ten Good Deeds in Web Design
Place organization’s name and logo on every page
and make the logo a link to he home page
Provide a search function if the site is more than
100 pages
Write straightforward headlines and page titles
Structure the page to facilitate reader scanning
Use hypertext to structure the content space
Object-Oriented Analysis and Design with the Unified Process
35
Ten Good Deeds in Web Design
(continued)
Use product photos with thumbnails on the
primary page
Use relevance-enhanced image reduction
Use link titles to provide users with a link preview
Ensure accessibility for users with disabilities
Do (Design) the same as everyone else
Object-Oriented Analysis and Design with the Unified Process
36
Web Site Design Principles
Web site design include many facets
A Web-design book by Joel Sklar suggests that
designers should focus on three aspects of Web
design
Designing for the computer medium
Designing the whole site
Designing for the user
Object-Oriented Analysis and Design with the Unified Process
37
Designing for the Computer
Medium
Craft the look and feel of the pages to take
advantage of the medium
Make the design portable
Design for low bandwidth
Plan for clear presentation and easy access to
information
Reformat information from other sources for
online presentation
Object-Oriented Analysis and Design with the Unified Process
38
Designing the Whole Site
Craft the look and feel of the pages to match the
impression desired by the organization
Create smooth transitions between Web pages
Lay out each page using a grid pattern to provide
visual structure
Leave a reasonable amount of blank space on each
space between groups of information
Object-Oriented Analysis and Design with the Unified Process
39
Designing for the User
Design for dynamic interaction
Guide the user’s eye to important information
Keep a flat hierarchy
Use hypertext to facilitate navigation
Do not clutter the pages
Design for accessibility for a diverse group of users
Object-Oriented Analysis and Design with the Unified Process
40
Designing Dialogs for Rocky
Mountain Outfitters
Focus on one specific dialog
Phone-order sales for customers
Scenario: Phone order representative creates new
order
Target environment: Representative’s Windows PC
Refer to requirement models
Use case description
Activity diagram
System sequence diagram
Object-Oriented Analysis and Design with the Unified Process
41
Dialog Design for the RMO
Phone-Order Representatives
Coordinate user-interface design with the
processing design from the use case realization
Write a basic dialog between the computer and user
Refine the list of forms that will be required
Define a design concept for the flow of information
from form to form
Modify designs through iterations to achieve more
flexibility and meet user needs
Object-Oriented Analysis and Design with the Unified Process
42
Figure 11-15
A design concept for the sequential
concept to the Create new order dialog
Object-Oriented Analysis and Design with the Unified Process
43
Figure 11-16
A design concept for an order-centered
approach to the Create new order dialog
Object-Oriented Analysis and Design with the Unified Process
44
a) The Main Menu form
b) The Order Summary form
Figure 11-17
Prototype forms for an order-centered approach to the dialog
Object-Oriented Analysis and Design with the Unified Process
45
Dialog Design for the RMO
Web Site
The Web site version provides more information,
flexibility, and ease of use
Browsing capabilities, pictures, organized display
of information, user preferences
Follow guidelines for visibility and affordance
Use a well thought-out visual theme
Favor speed over too much animation or fancy
graphics
Emphasize direct customer interaction
Object-Oriented Analysis and Design with the Unified Process
46
Figure 11-18
Rocky Mountain Outfitters’ home page
Object-Oriented Analysis and Design with the Unified Process
47
Figure 11-20
The shopping cart page from the Rocky Mountain Outfitter Web site
Object-Oriented Analysis and Design with the Unified Process
48
Summary
To the user, the user interface is the system
Design the interaction between the user and the
computer (HCI)
Define an overall user-interface concept for the
system early in the project
Focus on users and their work
Ensure usability
Apply iterative development
Object-Oriented Analysis and Design with the Unified Process
49
Summary (continued)
Metaphors to describe the user interface
Dialog
◘ Emphasizes the interaction between the user and
computer
Document
Desktop
Interface design guidelines and standards
Norman’s visibility and affordance guidelines
Shneiderman’s eight golden rules
Object-Oriented Analysis and Design with the Unified Process
50
Summary (continued)
Dialog design
Identify dialogs based on use cases
Add dialogs and designs for integrity controls, user
preferences, and menu hierarchies
Tools include dialog sequence, storyboards, and
sequence, collaboration, and class diagrams
Form design (window and browser)
Use guidelines for layout, controls, and navigation
Web forms require additional guidelines
Object-Oriented Analysis and Design with the Unified Process
51