Slide 17.1
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
An Introduction toObject-Oriented
Systems Analysis and Design with UML and
the Unified Process
McGraw-Hill, 2004
Stephen R. Schach
Slide 17.2
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
CHAPTER 17
USER-INTERFACE DESIGN
Slide 17.3
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Chapter Overview
Input and Output Devices Consistency Correcting Mistakes Metaphors Layout and Aesthetics Dynamic Interfaces The Unified Process and the User Interface
Slide 17.4
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Input and Output Devices
Major input devices include– Keyboard– Mouse– Telephone
Major output devices include– Printer– Screen– Telephone
Slide 17.5
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Input and Output Devices (contd)
A user makes a telephone call to a bank computer
Slide 17.6
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Input and Output Devices (contd)
The user wants checking account information– The user presses 1
Now the user is asked for account number and “PIN number” – The user enters these numbers correctly
Slide 17.7
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Input and Output Devices (contd)
The user now hears the following choices:
Slide 17.8
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Input and Output Devices (contd)
The user want to know the account balance, but– The user accidentally presses the 2 button
The user now hears the following menu:
The user has no choice but to hang up the phone
Slide 17.9
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Consistency
Compare the three telephone menus– To have the current menu repeated, the user is told to
press 5, 9, or 3
This extremely poor design practice– Leads to errors, frustration, and a strong negative attitude
toward the bank
Slide 17.10
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Consistency (contd)
In every printed report– The date should always appear in the same place and in
the same format
Buttons on screens need to have– The same size in all screens– Letters in the identical font– Consistent coloring
Toolbars always need to be in the same place
Slide 17.11
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Consistency (contd)
Icons denoting the same functionality– Must be identical on all screens
The user interfaces of Macintosh applications are consistent
They can be used without studying the user manual, – Because the same commands have the same meaning
Slide 17.12
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Consistency (contd)
Consistency within an information system is insufficient
What is needed is consistency within all screens of all information systems used by that company
Slide 17.13
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Correcting Mistakes
There are two types of incorrect input
– Giving an incorrect command» Example: Bank user presses 2 instead of 1
– Supplying incorrect data» Example: Bank user enters wrong PIN
Slide 17.14
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Correcting Mistakes (contd)
In a well-designed user interface, a user must be given
– A few tries to submit data correctly » An unlimited number of tries is not allowed for security reasons
– The opportunity to recover from issuing an incorrect command
– The opportunity to reconsider before an irreversible command is executed
Slide 17.15
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Metaphors
The word menu was repeatedly used in the context of the bank user interface– Until about 25 years ago, a menu meant a list of choices
open to a diner
Now this metaphor has become widely accepted
Slide 17.16
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Metaphors (contd)
A metaphor is a figure of speech in which a word used literally in one context is used to imply the same concept in a different context
Slide 17.17
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Metaphors (contd)
Example: A “menu” in the context of a restaurant is a printed card with a list of dishes from which the diner can choose
The word “menu” is used in the user-interface context to imply a list of choices
That is, the word is used– Literally in the restaurant context, but – Metaphorically in the user-interface context
Slide 17.18
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Metaphors (contd)
The desktop metaphor for user interfaces of operating systems includes folders, trash can, and files
Slide 17.19
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Metaphors (contd)
Other metaphors used in user interfaces of operating systems include– Menus, and– Direct manipulation
» (Or point-and-click, or drag-and-drop)
Operating systems make use of more than one metaphor at a time– Users have no problems with mixed metaphors
Slide 17.20
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Metaphors (contd)
Word processors also make use of more than one metaphor
– Sheet of paper» Menu choices like Cut, Paste, Page Layout
– Typesetting metaphor» Terminology like Font, Tab, Footnote, Header, and Print
Slide 17.21
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Metaphors (contd)
The window metaphor
– Consistent with the metaphor are the» Term: active window, and » Commands: Open, Close a window
– Inconsistent with the metaphor are the» Feature: scroll bars, and » Commands: Resize, Minimize a window
Slide 17.22
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Metaphors (contd)
The window metaphor with scroll bars
Slide 17.23
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Metaphors (contd)
The icon metaphor– A symbol that stands for a folder, a document, a
spreadsheet, a program, a window, and so on
Double-clicking on an icon causes it to open– Point-and-click metaphor
Slide 17.24
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Metaphors (contd)
The icon metaphor
Slide 17.25
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Metaphors (contd)
A graphical user interface (or GUI)
– Utilizes a combination of the metaphors already mentioned, including » Windows» Menus» Point-and-click, and» Icons
– It often also utilizes other metaphors, such as» Radio buttons, and» Check boxes
Slide 17.26
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Radio buttons and check boxes
Metaphors (contd)
Slide 17.27
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Layout and Aesthetics
Use whitespace freely
Figure with poor use of whitespace
Slide 17.28
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Layout and Aesthetics (contd)
The same figure but with better use of whitespace
Slide 17.29
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Layout and Aesthetics (contd)
Color– Use as few colors as possible, and– Use them consistently
Slide 17.30
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Layout and Aesthetics (contd)
Fonts– Use as few fonts as possible, and– Use them consistently
If variation is needed– Use the same font in different sizes– Use the same size font but in boldface– Use the same size font but in italics
Slide 17.31
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Dynamic Interfaces
One common user interface is sometimes inappropriate – A user interface must be tailored to the skill level of its
intended users– Also, different interfaces are needed to cater for users with
more or less experience with the information system
Switching to a more appropriate set of screen can be performed dynamically by the information system
Slide 17.32
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
The Unified Process and the User Interface
The design of the user interface is an integral part of the Unified Process– The use cases are the foundation for user-interface design
Slide 17.33
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Requirements Workflow
Generalized use case – The point at which the line from the Actor to the Activity
intersects the rectangle models the user interface
Slide 17.34
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Prototyping the User Interface
While performing the requirements workflow, the user interface is prototyped– This is not a rapid prototype
» Rapid prototyping is not part of the Unified Process
Purpose– To be sure that, after delivery, the user will be able to
perform each use case effectively
The prototype user interface may be a rough sketch that depicts just the user interface (screen or report)
Slide 17.35
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
User-Interface Design
Design of a user interface using the Unified Process consists of five steps:
Step 1: Decide on the elements of the user interface – Many of these elements will be attributes of the relevant
boundary class– The designer starts with one actor and finds all the use
cases in which that actor participates– For each use case, the elements are listed
Slide 17.36
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
User-Interface Design (contd)
Example: – Buy a Painting use case of the Osbert Oglesby case study– The first paragraph of the description:
Slide 17.37
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
User-Interface Design (contd)
Nine elements of the user interface are clear from this paragraph
The remaining elements of the user interface can be deduced from the rest of the use case
Slide 17.38
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
User-Interface Design (contd)
Step 2: Put together a preliminary design that incorporates just the bare elements themselves– One way: Put the name of each element on a Post-it note
and arrange the notes on a board
Slide 17.39
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
User-Interface Design (contd)
Step 3: Check that this preliminary version of the elements of the user interface is adequate– The set of elements must provide all the information
necessary for the user to perform the required actions– An outline of the help information for that screen is added– The user’s responses must result in all the necessary data
being supplied to the information system
Slide 17.40
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
User-Interface Design (contd)
Step 4: The designer determines how to express those elements in terms of– Metaphors– Aesthetic issues
» Such as font, color, and layout
Slide 17.41
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
User-Interface Design (contd)
Step 5: Produce the prototype user interface– First, sketch the various interfaces
» A pencil sketch encourages the client and users to suggest improvements
– Second, use a screen generator or report generator to generate the prototype user interface
Slide 17.42
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
Iteration
As the Unified Process proceeds– The use cases are analyzed, designed, implemented,
tested, and installed
The user interface for each use case similarly undergoes iteration and incrementation
Top Related