01 UI Design Satzsinger and Shelly Cashman

8/13/2019 01 UI Design Satzsinger and Shelly Cashman

1/71


2/71

2Object-Oriented Analysis and Design with the Unified Process

Objectives

Understand the differences between userinterfaces and system interfaces

Explain why the user interface isthe system tothe users

Discuss the importance of the three principles

of user-centered designDescribe the historical development of the field

of human-computer interaction (HCI)


3/71


Objectives (continued)

Describe the three metaphors of human-computer interaction

Discuss how visibility and affordance affectusability

Guidelines when designing the user interface

Input and Output Design

Define the overall system structure as a menuhierarchy


4/71


Objectives (continued)

Write user-computer interaction scenarios asdialogs

Create storyboards to show the sequence offorms used in a dialog

Use UML class diagrams and sequencediagrams to document dialog designs


5/71


Overview

User interfaces handle inputs and outputs thatinvolve 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 UMLdiagrams to design user interfaces

User-interface design occurs in each iteration

Address only a few use cases at a time


6/71


Identifying and Classifying

Inputs and Outputs

Inputs and outputs are defined early in orderto:Document key inputs/outputs in business cases

Identify actorsDefine triggers and responses in an event table

Identify the system boundary in use case diagrams

Design use case descriptions and system sequence

diagramsDesign the user-interface layer

Define messages in a use case realization


7/71


User Versus System Interfaces

System interface

Involves inputs and outputs that require minimalhuman intervention

User interface

Require user interaction to produce inputs andoutputs

Most analysts separate design of systeminterfaces from user interfaces

Requires different expertise and technologies


8/71


Understanding the User

Interface

To the end user, the user interface is the systemitself

Physical devices, parts, or documents

Perceptual aspects including seeing, hearing, andtouching

Conceptual details about how to use the system

Called the users model

HCI (human-computer interaction) studies endusers and their interactions with computers


9/719Object-Oriented Analysis and Design with the Unified Process

Figure 11-1

Physical, perceptual, and conceptual aspects of the user interface


10/71


User-Centered Design

Technique that places user at center of thedevelopment process

Focus early on users and their work

Understand user styles and preferencesEvaluate designs to ensure usability

Ease of learning and use dependent on type ofuser

Use iterative development Continually return to user requirements and

evaluating the system


11/7111Object-Oriented Analysis and Design with the Unified Process

Figure 11-2

The fields contributing to the study of HCI


12/71


Metaphors for Human-

Computer Interaction

DesktopInteraction with a display screen that includes

objects commonly found on a desk

DocumentInvolves browsing and entering data on electronic

documents using hypertext and hypermedia

Dialog

Carrying on a conversation with the computer bysending and receiving messages


13/71


Figure 11-3

The desktop metaphor based on direct manipulation,

shown on a display screen


14/71


Figure 11-4

The document metaphor shown as

hypermedia in a Web browser


15/71


Figure 11-5The dialog metaphor expresses the concept that

the user and computer interact by sending messages


16/71


Figure 11-6

The users language

and the computers

language used to

implement an e-mail

application based on the

natural dialog between

manager and assistant


17/71


Guidelines for Designing User

Interfaces

Interface design guidelines must be followedfor the interface of any system

Two key principles (from HCI researcherDonald Norman)

Visibility

All controls should be visible and provide

immediate feedback to the userAffordance

Appearance of any control should suggest itsfunctionality


18/71

Designing the User Interface Guidelines for User Interface Design

Good user interface design is based on a combination

of ergonomics1, aesthetics2, and interface technology3

1. Describes how people work, learn, and interact withcomputers

2. Focuses in how an interface can be made attractive & easy

to use

3. Provides the operational structures requires to carry out the

design objectives


19/71

User Interface Design

Guidelines for User Interface DesignFollow eight basic guidelines

1. Design a Transparent Interface

2. Build an interface that is easy to learn anduse Label all controls, button and icons

Use images that user can understand easily

Dim any command that are not currently availabledifferent user command


20/71


Guidelines for User Interface Design3. Enhance User Productivity

Organize task, commands, and function ingroups

Top of the menu list: selection usedfrequently

Provide shortcuts

Use default value: default city Davao City

Use duplicate value

Provide fast-find feature: list of possiblevalues


21/71

4. Make it easy for users to obtain help orcorrect errors

Require user confirmation before deletion areyou sure?

Provide an Undo command Highlight the erroneous part


22/71

5. Minimize input data problems Create input masks

Display even-driven messages and reminders

Establish a list of predefines values that users

can click or select


23/71

6. Provide feedback to users Alert users to lengthy processing time

Let the users know whether the operationwas successful or not

Use messages that are specific

You have entered an unacceptable value

Enter a number between 1 and 5


24/71

7. Create an attractive layout and design Use color theme

Screen density is important: spaces

8. Use familiar terms and images

Red= stop, yellow= caution, green= go

File, Exit, Help; Cut, Copy, Paste


25/71


User Interface

Controls

Menu bar

Toolbar

Command button

Dialog box

Text box

Toggle button


26/71


User Interface

Controls

List boxscroll bar

Drop-down list box

Option button, or radio

button

Check boxCalendar control

Switchboard


27/71

Input Design

Input technology has changed dramatically inrecent years

The quality of the output is only as good as

the quality of the inputGarbage in, garbage out (GIGO)

Data capture

Data entry


28/71

Input Design

Input and Data Entry MethodsBatch input

Batch

Online input

Online data entry

Source data automation

RFID tags or Magnetic data strips


29/71

Input Design

Input and Data Entry MethodsTradeoffs

Unless source data automation is used, manualdata entry is slower and more expensive thanbatch input because it is performed at the timethe transaction occurs and often done whencomputer demand is at its highest

The decision to use batch or online input

depends on business requirements


30/71

Input Design

Input VolumeGuidelines will help reduce input volume

1. Input necessary data only

2. Do not input data that the user can retrievefrom system files or calculate from other data

3. Do not input constant data

4. Use codes


31/71

Input Design

Input ErrorsEight types of data validation checks

1. Sequence check: must be in apredetermined sequence

2. Existence check: mandatory data items

3. Data type check: required data type

4. Range checklimit check

5. Reasonableness check: identifies values thatare questionable, but not necessarily wrong


32/71

Input Design

Input Errorseight types of data validation checks

6. Validity checkreferential integrity

Data items, customer no of both transaction

7. Combination check: use two or more fieldsto ensure security

8. Batch controls: verify batch input, hashtotals


33/71

Input

DesignSource Documents

Form layout

Heading zone

Control zone

Instruction zone

Body zone

Totals zone

Authorization zone


34/71

Input Design

Source DocumentsInformation should flow on a form from left to

right and top to bottom to match the wayusers read documents naturally

A major challenge of Web-based form designis that most people read and interactdifferently with on-screen informationcompared to paper forms


35/71

Input Design

Input ControlEvery piece of information should be traceable

back to the input data

Audit trail

Data security

Records retention policy

Encryptedencryption


36/71

Output Design

Before designing output, ask yourself severalquestions:

What is the purpose of the output?

Who wants the information, why is it needed,and how will it be used?

What specific information will be included?

Will the output be printed, viewed on-screen,

or both? What type of device will the outputgo to?


37/71

Output Design

Before designing output, ask yourself severalquestions:

When will the information be provided, andhow often must it be updated?

Do security or confidentiality issues exist?

Your answers will affect your output designstrategies


38/71

Output Design

Types of Output

Internet-basedinformation delivery

WebcastE-mail

Blogs

Instant Messaging

Wireless Devices

Types of Output

Digital audio, images,and video

Podcasts

Automated facsimilesystems

Faxback systems

Computer outputmicrofilm (COM)

Computer output todigital media


39/71

Output Design

Types of Output Specialized Forms of Output

An incredibly diverse marketplace requires avariety of specialized output

Output from one system often becomes inputinto another systemturnaround document

Although digital technology has opened new

horizons in business communications, printedoutput still is a common type of output, andspecific considerations apply to it


40/71

Printed and Screen Output

Few firms have been able to eliminate printedoutput totally

Turnaround documents

Overview of Report DesignReports must be easy to read and well

organized

Database programs include a variety of report

design toolsCharacter-based reports


41/71

Printed and Screen OutputTypes of Reports

Detail reports

Exception reports

Summary reports


42/71


43/71


44/71


45/71


User Involvement in Report DesignPrinted reports are an important way of

delivering information to users, so recipientsshould approve all report designs in advance

To avoid problems submit each design forapproval as you complete it, rather thanwaiting until you finish all report designs

Mock-up

Report analysis form


46/71

Printed and Screen Output Report Design Principles

Printed reports must be attractive,

professional, and easy to read

Report headers and footers

Page headers and footers

Column heading alignment

Column spacing


47/71


48/71


49/71


50/71


Report Design PrinciplesField order

Fields should be displayed and grouped in alogical order

Grouping detail lines

It is meaningful to arrange detail lines ingroups

Group header Group footer

Consistent design


51/71


Report Design Example


52/71


53/71


54/71


55/71


Output Control and

Security

Output must be

accurate, complete,

current, and secure

The IT department is

responsible for output

control and security

measures


56/71


Documenting Dialog Designs

Inputs and outputs are obtained from use cases andscenarios

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 basedon use cases (i.e., system controls, user help)


57/71


Figure 11-8One overall menu hierarchy

design for the RMO

customer support system

(not all users will have all of

these options available)


58/71


Dialogs and Storyboards

Several options for documenting dialogs (no defacto standards exist)

List the key steps for each dialog with

descriptions of what the user and computer do ateach step

Write out a human and computer conversation

Used for complicated or uncertain requests

Use storyboarding to show a sequence ofsketches of a display screen during a dialog

Initial design can be a general framework


59/71


Figure 11-9

Storyboard for the

DownTown Videosrent videosdialog

Dialog Documentation with


60/71


Dialog Documentation with

UML Diagrams

Use case descriptions show a list of steps followed asa user and computer interact

Activity diagrams document a user-computer dialog

for each use caseSSDs describe sequential actor-computer messages

Class diagrams add user-interface classes for forms

Detailed sequence diagram show users interactingwith specific objects in forms


61/71


Figure 11-10

A sequence diagram for the RMOLook up item availability dialog

with the ProductQueryForm added


62/71


Figure 11-11

A class diagram showing interface classes

making up the ProductQueryForm


63/71


Figure 11-12

A sequence diagram showing specific interface objects making up the ProductQueryForm for

theLook up item availability dialog (not all problem domain objects are shown)

Designing Dialogs for Rocky


64/71


Designing Dialogs for Rocky

Mountain Outfitters

Focus on one specific dialog

Phone-order sales for customers

Scenario: Phone order representative creates

new orderTarget environment: Representatives

Windows PC

Refer to requirement models

Use case descriptionActivity diagram

System sequence diagram

Dialog Design for the RMO


65/71


Dialog Design for the RMO

Phone-Order Representatives

Coordinate user-interface design with theprocessing design from the use case realization

Write a basic dialog between the computer and

userRefine the list of forms that will be required

Define a design concept for the flow of

information from form to formModify designs through iterations to achieve

more flexibility and meet user needs

Fi 11 15


66/71


Figure 11-15

A design concept for the sequential

concept to the Create new orderdialog


67/71


Figure 11-16

A design concept for an order-centered

approach to the Create new orderdialog


68/71


Figure 11-17

Prototype forms for an order-centered approach to the dialog

a) The Main Menu form b) The Order Summary form


69/71


Summary

To the user, the user interface isthe systemDesign the interaction between the user and

the computer (HCI)

Define an overall user-interface concept forthe system early in the project

Focus on users and their work

Ensure usability

Apply iterative development


70/71


Summary (continued)

Metaphors to describe the user interface

Dialog

Emphasizes the interaction between the user

and computer

Document

Desktop

Interface design guidelines and standards


71/71

Summary (continued)

Dialog designIdentify 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 classdiagrams

Form design (window)Use guidelines for layout, controls, and

navigation