Transcript Chapter 14

Designing the User
Interface
Overview
• User interfaces handle input and output that
involve a system user directly
• Focus on interaction between user and computer,
called human-computer interaction (HCI)
• Metaphors to describe the user interface
• Usability and Web-based development guidelines
• Approaches to documenting dialog designs,
including UML diagrams from OO approach
2
Identifying and Classifying
Inputs and Outputs
• Identified by analyst when defining system scope
• Requirements model produced during analysis
– Event table includes trigger to each external event
– Triggers represent inputs
– Outputs are shown as responses to events
3
Traditional and OO Approaches to
Inputs and Outputs
• Traditional approach to inputs and outputs
– Shown as data flows on context diagram, data flow
diagram (DFD) fragments, and detailed DFDs
• OO approach to inputs and outputs
–
–
–
–
Defined by message entering or leaving system
Included in event table as triggers and responses
Actors provide inputs for many use cases
Use cases provide outputs to actors
4
User versus System Interface
• System interfaces: I/O requiring minimal human
interaction
• User interfaces:
– I/O requiring human interaction
– User interface is everything end user comes into
contact with while using the system
– To the user, the interface is the system
• Analyst designs system interfaces separate from
user interfaces
• Requires different expertise and technology
5
Understanding the User Interface
• Physical Aspects of the User Interface
– Devices touched by user, manuals, documentation,
and forms
• Perceptual Aspects of the User Interface
– Everything else user sees, hears, or touches such as
screen objects, menus, and buttons
• Conceptual Aspects of the User Interface
– What user knows about system and logical function of
system
6
Aspects of the User Interface
7
User-Centered Design
• Focus early on the users and their work by
focusing on requirements
• Usability - system is easy to learn and use
• Iterative development keeps focus on user
– Continual return to user requirements and evaluate
system after each iteration
• Human-computer interaction (HCI)
– Study of end users and interaction with computers
– A field of study evolved from the study of ergonomics
• Human factors engineering (ergonomics)
– The study of human interaction with machines in
general
8
Fields Contributing to the Study of
HCI
9
Metaphors for
Human-Computer Interaction
• Direct manipulation metaphor
• Document metaphor
• Dialog metaphor
10
Direct Manipulation Metaphor
• User interacts with objects on display screen
instead of typing commands on a command line.
• Desktop metaphor
– A direct manipulation approach in which the display
screen includes an arrangement of common objects
found on a desk
• A notepad, a calendar, a calculator, and folders containing
documents
11
Desktop Metaphor Based on Direct
Manipulation Shown on Display Screen
12
Document Metaphor
• Interaction with the computer involves with
browsing and entering data on electronic
documents
– WWW: based on the document metaphor; everything
at a Web site is organized as pages that are linked as
hypertext
– Hypertext: document that allow the user to click on a
link and jump to a different part of the document or to
another document
– Hypermedia: technology that extends the hypertext
concepts to include multimedia content such as
graphics, video, and audio
13
Document Metaphor Shown as
Hypermedia in a Web Browser
14
Dialog Metaphor
• Much like carrying on a conversation or dialog
• A way of thinking about human-computer
interaction
– Computer listens to and response to user questions or
comments
– User listens to and response to the computer’s
questions
15
Dialog Metaphor Expresses the
Messaging Concept
16
Guidelines for Designing
User Interfaces
• Visibility
– All controls should be visible
– Provide immediate feedback to indicate control is
responding
• Affordance
– Appearance of control should suggest its functionality
– purpose for which it is used
• System developers should use published
interface design standards and guidelines
17
Eight Golden Rules for
Interactive Interface Design
18
Strive for Consistency
• Forms, names, menu, size and shape of icons, and
sequence followed to carry out tasks should be
consistency throughout the system.
• Easy to learn
• Increase productivity
• If the user is interacting with multiple applications in
separate windows, a different visual appearance may
help the user differentiate them
• When the user is learning several applications in on
session, some difference in the interfaces may help the
user remember which application is which.
19
Strive for Consistency
• Standard operation is achieved by:
– Keeping header and footer information in the same locations for
all screens.
– Using the same keystrokes to exit a program.
– Using the same keystroke to cancel a transaction.
– Using a standard key for obtaining help.
– Standardized use of icons when using graphical user interface
screens.
– Consistent use of terminology within a screen or Web site.
– Providing a consistent way to navigate through the dialog.
– Consistent font alignment, size, and color on a Web page.
20
Enable Frequent Users to Use
Shortcuts
• As the frequency of use increases, so do the
user’s desires to reduce the number of
interactions and to increase the pace of
interaction.
• Abbreviations, special keys, hidden commands,
and macro facilities are appreciated by
knowledgeable users
• Fast response times and fast display rates are
other attractions for frequent users.
21
Offer informative Feedback
• For every user action, there should be system
feedback.
• For frequent and minor actions, the response can
be modest where as for infrequent and major
actions, the response should be more substantial.
22
Offer informative Feedback
Feedback to the user is necessary in seven distinct
situations:
–
–
–
–
–
–
–
The computer has accepted the input.
The input is in the correct form.
The input is not in the correct form.
There will be a delay in processing.
The request has been completed.
The computer cannot complete the request.
More detailed feedback is available.
23
Design Dialogs to Yield Closure
• Each dialog with the system should be organized
with a clear sequence (beginning, middle, and
end).
• A well-defined task has a beginning, middle, and
end, so user’s tasks on the computer should also
feel this way.
• The user often focuses on a task.
24
Offer Simple Error Handling
• The systems designer must prevent the user from
making errors whenever possible.
• The ways to do this is
– to limit available options and allow the user to choose
from valid options
– to provide adequate feedback
– to provide mechanism to handling errors
• If an error does occur, the system must help the
user correct the error.
25
Permit Easy Reversal of Actions
• Users need to feel that they can explore options
and take actions that can be canceled or
reversed without difficulty.
• The designers should be sure to
– include cancel buttons on all dialog boxes
– allow users to go back one step at any time
– delete something substantial
• a file, a record, a transaction
– ask the user to confirm the action
26
Support Internal Locus of Control
• Experienced users want to feel that they are in
charge of the system and the system responds to
their commands.
• Designers can provide much of this comfort and
control through the wording of prompts and
messages.
– Writing out a dialog like the manager and assistant
message dialog will lead to a design that conveys the
feeling of control.
27
Reduce Short-Term Memory Load
• People have many limitations, and short-term
memory .
• People can remember only about 7 chunks of
information at a time.
• The interface designer cannot assume that the
user will remember anything from form to form, or
dialog box, during an interaction with the system.
28
Documenting Dialog Designs
• Done simultaneously with other system activities
• Based on inputs and outputs requiring user
interaction
• Used to define menu hierarchy
– Allows user to navigate to each dialog
– Provides overall system structure
• Storyboards, prototypes, and UML diagrams
29
Documenting Dialog Designs
• The structure charts for subsystems (transaction
analysis) include details about menu structure of the
interactive parts of the system.
• The structure charts for each event (transform analysis)
includes details about the dialog with the user.
• The menu reflect the overall system structure from the
standpoint of the user.
• Each menu contains a hierarchy of options, and often
arranged by subsystem or by actions on objects.
• Each menu might include duplicate functions.
30
Overall Menu Hierarchy Design
31
Documenting Dialog Designs
• Sometimes several versions of the menus are
needed based on the type of user.
• Menus should include options that are not
activities from the event list.
– backup, recovery, user account maintenance, user
preferences, help
32
Virious Types Of Menu Configurations
33
Dialogs and Storyboards
• Many methods exist for documenting dialogs
– Written descriptions following flow of events
– Narratives
– Sketches of screens
– Storyboarding – showing sequence of sketches of
display screen during a dialog
34
Storyboard for Downtown Videos
35
Sections of a Dialog Diagram Box
36
Dialog Diagram Illustrating Sequence, Selection,
And Iteration
37
Dialog diagram for the Customer Information
System
38
Guidelines for Designing
Windows and Browser Forms
• Each dialog might require several window forms
• Standard forms are widely available
– Windows forms: Visual Basic, C++, Java
– Browser forms: HTML, VB-Script, JavaScript, ASP or
Java servlets
• Implementation
– Identify objectives of form and associated data fields
– Construct form with prototyping tools
39
Forms Design Issues
• Form layout and formatting consistency
– Headings, labels, logos
– Font sizes, highlighting, colors
– Order of data-entry fields and buttons
• Data keying and data entry (use standard control)
– Text boxes, list boxes, combo boxes, etc.
• Navigation and support controls
• Help support: tutorials, indexed, context-sensitive
40
Proper Flow Between Data Entry Fields
41
Poor Flow Between Data Entry Fields
42
Standard Control
•
•
•
•
•
•
•
•
Text boxes
Radio buttons
Check boxes
List boxes
Drop down lists
Combination boxes
Spin boxes
Buttons
43
Standard Control
• Text boxes
– When the input data values are unlimited in scope
• Radio buttons
– When data has limited predefined set of mutually exclusive values
• Check boxes
– When value set consists of a simple yes or no value
• List boxes
– When data has a large number of possible values
• Drop down lists
– When data has large number of possible values and screen space is
too limited for a list box
• Combination boxes
– When need to provide the user with option of selecting a value from a
list or typing a value that may or may not appear in the list
• Spin boxes
– When need to navigate through a small set of choices or directly typing
a data value
44
Standard Control
•
•
•
•
•
Drop down calendars
Slider edit controls
Masked edit controls
Ellipsis controls
Alternate numerical
spinners
• Check list boxes
• Check tree boxes
45
Standard Control
46
Sample of Input Form
47
Navigation and Support Controls
• Minimize, maximize and close buttons in the topright corner.
• Horizontal and vertical scroll bars, the record
selection bar on the left panel.
• Record navigation arrows at the bottom of the
window
48
Help Support
• Tutorial
– Assist in training new users
– Can be organized by task
• Indexed list of help topics
– Can be invoked either through a keyword search or with a help
wizard
• Help wizard is simply a program that does an automatic keyword
search based on words found in a question or sentence
• Context-sensitive help
– Can be based on indexed list of help, but it is invoked differently
– Automatically displays the appropriate help topic based on the
location of the cursor.
49
Guidelines for Designing Web Sites
• Draw from guidelines and rules for designing
Windows forms and browser forms
• Website uses:
– Corporate communication
– Customer information and service
– Sales, distribution, and marketing
• Must work seamlessly with customers 24/7
50
10 Good Deeds in Web Design
•
•
•
•
•
•
•
•
•
•
Place the organization’s name and logo on every page.
Provide a search function if the site has more than 100 pages.
Write simple headlines and page titles that clearly explain what the page is
about.
Structure the page to facilitate reader scanning and help users ignore large
chunk of the page
Use hypertext to structure the content.
Use product photos, but avoid cluttered and bloated product family pages
with lots of photos.
Use relevance-enhanced image reduction when preparing small photos and
images.
Use link titles to provide users with a preview of where each link will take
them before they have clicked on it.
Ensure that all important pages are accessible for users with disabilities.
Do the same as everybody else.
51
Web Site Design Principles
• 3 broad aspect of Web design
– Designing for the computer medium
– Designing the whole site
– Designing for the user
52
Designing for the Computer Medium
• Designers can select from a wide array of video display
fonts, colors, and layouts, but the look of the site should
flow from its function and organization’s goals
– Craft the look and feel of the pages to take advantages of the
medium.
– Make the design portable since it will be accessed with a wide
range of technology.
– Design for low bandwidth since users will not want to wait for a
page to load.
– Plan for clear presentation and easy access to information to
ease user’s navigation through the site.
– Reformat information for on-line presentation when it comes from
other sources.
53
Designing the Whole Site
• The entire site must have unifying themes and a
structure.
– Craft the look and feel of the pages to match the
impression desired by the organization.
– Create smooth transitions b/w Web pages so users
are clear about where they have been and where they
are going.
– Lay out each page using a grid pattern to provide
visual structure for related groups of information
– Leave a reasonable amount of white space on each
page b/w groups of information.
54
Designing for the User
• It is important to focus Web design efforts on the users
and their needs.
– Design for interaction b/c Web users expect sites to be
interactive and dynamic.
– Guide the user’s eye to information on the page that is the most
important.
– Keep a flat hierarchy so that user does not have to drill down too
deeply to find detailed information.
– Use the power of hypertext linking to help users move around
and through the site.
– Decide how much content per page is enough based on the
characteristics of the typical user.
– Design for accessibility for a diverse group of users, including
those with disabilities.
55
Dialog Design for RMO Phone-Order
•
Steps in dialog models
1. Record customer information
2. Create new order
3. Record transaction details
4. Produce order confirmation
•
Traditional approach – produce structure chart
•
OO approach – expand SSD to include forms
56
Required Forms for RMO
• Main menu
• Customer
• Item search
• Product detail
• Order summary
• Shipping and payment options
• Order confirmation
57
Design Concept for Sequential
Approach to Create New Order Dialog
58
Design Concept for Order-Centered
Approach to Create New Order Dialog
59
Prototype Forms for an OrderCentered Approach to the Dialog
60
Prototype Forms for an Order-Centered
Approach to the Dialog (continued)
61
Dialog Design for RMO Web Site
• Basic dialog between user and customer similar
to phone-order representative
• Web site will provide more information for user,
be more flexible, and be easier to use
• More product pictures are needed
• Information needs are different for customer than
for phone-order employees
• Guidelines for visibility and affordance are used
to convey positive company image
62
RMO’s Home Page
63
Product Detail Page from RMO Web
Site
64
Shopping Cart Page from RMO Web
Site
65
Summary
• User interface is everything user comes into
contact with while using the system
– Physically, perceptually, and conceptually
• To some users, user interface is the system
• User-centered design means:
– Focusing early on users and their work
– Evaluating designs to ensure usability
– Applying iterative development
66
Summary (continued)
• User interface is described with metaphors
(desktop, document, dialog)
• Interface design guidelines and standards are
available from many sources
• Dialog design starts with events, adds dialogs for
integrity controls, user preferences, help, menus
• OO approach provides UML models to document
dialog designs, including sequence diagrams,
collaboration diagrams, and class diagrams
67