17.ppt

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

[email protected]

Slide 17.2


CHAPTER 17

USER-INTERFACE DESIGN

Slide 17.3


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


Input and Output Devices

Major input devices include– Keyboard– Mouse– Telephone

Major output devices include– Printer– Screen– Telephone

Slide 17.5


Input and Output Devices (contd)

A user makes a telephone call to a bank computer

Slide 17.6



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



The user now hears the following choices:

Slide 17.8



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


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


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


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


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


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


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


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


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


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


Metaphors (contd)

The desktop metaphor for user interfaces of operating systems includes folders, trash can, and files

Slide 17.19


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


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


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


Metaphors (contd)

The window metaphor with scroll bars

Slide 17.23


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


Metaphors (contd)

The icon metaphor

Slide 17.25


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


Radio buttons and check boxes

Metaphors (contd)

Slide 17.27


Layout and Aesthetics

Use whitespace freely

Figure with poor use of whitespace

Slide 17.28


Layout and Aesthetics (contd)

The same figure but with better use of whitespace

Slide 17.29



Color– Use as few colors as possible, and– Use them consistently

Slide 17.30



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


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


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


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


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


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


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



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



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



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



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



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


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

Documents

17.ppt