User Interface Design

SYSTEMS ANALYSIS AND DESIGN, 6 T H EDITION

DENNIS, WIXOM, AND ROTH

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 1

Learning Objectives
 Explain the concept of usability with regard to the user interface.
 Describe several fundamental user interface design principles.
 Explain the process of user interface design.
 Explain ways to understand the perspectives of the users of the user interface.
 Describe ways to define the structure of the user interface.
 Explain the standards that should be established for the user interface.
 Describe various ways to prototype the user interface.
 Discuss ways to evaluate and test the user interface.
 Discuss special concerns associated with touch-screen-enabled user interfaces.
 Be able to design a highly usable user interface.

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 2

Key Definitions
System Interface: “connections” with other systems, where systems exchange information with
each other. Designed as a part of program design.
User Interface: “connections” with users. Focus of this chapter.
◦ The navigation mechanism provides the way for users to tell the system what to do
◦ The input mechanism defines the way the system captures information
◦ The output mechanism defines the way the system provides information to users or other systems

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 3

Key Definitions, con’t.
Graphical user interface (GUI): most common type of interface in use today.

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 4

Usability Concept
 The system is easy to use and easy to learn
 Tasks are completed more efficiently and with more accuracy
 Mistakes with system are reduced
 User satisfaction with new system is increased
 Adoption of system is more likely

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 5

Interface Design
Principles
GENERAL GUIDELINES FOR USER INTERFACE DESIGN

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 6

Principles for User Interface Design
Layout
Content awareness
Aesthetics
Usage level
Consistency
Minimize user effort

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 7

Layout Concepts
The screen is often divided into three boxes
◦ Navigation area (top)
◦ Status area (bottom)
◦ Work area (middle)

Information can be presented in multiple areas

Like areas should be grouped together

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 8

More Layout Concepts
Areas and information should minimize user movement from one to another
Ideally, areas will remain consistent in
◦ Size
◦ Shape
◦ Placement for entering data
◦ Reports presenting retrieved data

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 9

Model Layout
for Web Page
o Note use of multiple layout areas
for site navigation

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 10

Content Awareness
All interfaces should have titles
Menus should show
◦ where you are
◦ where you came from to get there
It should be clear what information is within each
area
Fields and field labels should be selected carefully
Use dates and version numbers to aid system users
© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 11
Content
Awareness
o Note the use of highlighting to
indicate menu selections
o Breadcrumbs provide additional
clues on navigational path

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 12

Aesthetics
Interfaces need to be functional and inviting to use
Avoid squeezing in too much, particularly for novice users
Design text carefully
◦ Be aware of font and size
◦ Avoid using all capital letters

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 13

More Aesthetics
Colors and patterns should be used carefully
◦ Test quality of colors by trying the interface on a black/white
monitor
◦ Use colors to separate or categorize items

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 14

Usage Level
 Some people will be frequent, heavy users of the system
 Frequent users desire ease of use – quick and easy completion of
job tasks
 Other people may use the system infrequently
 Infrequent users desire ease of learning – quick and easy ways to
figure out what to do.

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 15

Usage Level
 User interface design should anticipate the types of users expected.
 For systems primarily used by frequent users, include ways to
perform tasks directly (hot keys, short-cut keys, etc.).
 For systems primarily used by infrequent users, include careful
menu designs, tool tips, and extensive help systems.
 For systems with both user types, incorporate both user preferences
in design as much as possible

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 16

Consistency
Elements are the same throughout the application
Enables users to predict what will happen
Reduces learning curve
Considers elements within an application and across
applications
Pertains to many different levels
◦ Navigation controls
◦ Terminology
◦ Report and form design

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 17

Example of
Inconsistent
Elements
Note the different button styles, colors,
and font styles.

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 18

Minimize Effort
Three clicks rule
◦ Users should be able to go from the start or main menu of a system to the information or action they
want in no more than three mouse clicks or three keystrokes

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 19

Special Issues of Touch Screen Design
 Ideal for information display but not data entry.
 Place content at top and navigation controls at bottom so finger
does not obscure content area.
 Place labels on top of navigation controls.
 Size objects correctly for “fat fingers.”
 Include adequate spacing between objects.

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 20

Special Issues of Touch Screen Design,
con’t.
 Consider needs of left-handed and right-handed users.
 Bright colors/backgrounds can help reduce glare and hide
fingerprints.
 Use each device’s standardized gesture interactions to enhance the
user’s ease of learning and ease of use.

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 21

Android Device
Common Hand
Gestures

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 22

User Interface Design
Process
THE PATH TO A SUCCESSFUL USER INTERFACE

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 23

User Interface
Design Process
o Understand the Users

o Organize the Interface

o Define Standards

o Develop Prototypes

o Evaluation / Testing

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 24

Understand the Users
 Users likely will have very different goals and intentions when
using the system.
 Use personas to develop characterizations of various user groups.
o Interests
o Typical behaviors
o Goals and objectives
o Expectations
 Plan a user interface that will be satisfying for that particular user
group.

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 25

Personas for
Tune Source

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 26

Understand the Users, con’t.
 Use scenarios outline the steps that the users perform to
accomplish some part of their work.
 Presented in a simple narrative tied to the related DFD.
 Document the most common paths through the use case so
interface designs will be easy to use for those situations.

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 27

Use Scenarios
for Tune Source

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 28

Organize the Interface
 Define the basic components of the interface and how they work
together to provide functionality to users.
 Use Interface Structure Diagram (ISD)
 Shows how all screens, forms, and reports are related
 Shows how user moves from one to another
 Similar to DFD in using boxes and lines
o Boxes denote screens
o Lines show movement from one to another
 Different from DFD in having no standard rules or format

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 29

Interface
Structure
Diagram for
Tune Source

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 30

Organize the Interface, con’t.
 For Web sites, use site map.
 Show how all the information on the site fits together.
 Helps establish the hierarchy of information on the site.

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 31

Site Map for
Tune Source

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 32

Define Standards
 Clarify decisions on all key interface elements to ensure
consistency:
o Basic common elements across individual screens, forms, and reports
within the application
o Interface metaphor (e.g., calendar, checkbook, shopping cart)
o Interface objects (e.g., customer/client; employee/associate)
o Interface actions (e.g., buy/purchase/check out; exit/quit)
o Interface icons (pictures) representing status or actions (e.g., trashcan for
delete; disk for save)
o Interface templates (layout guide for all screens)

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 33

Interface Design Prototyping
 A mock-up or simulation of screens, forms, or reports
 Common methods include:
o Paper sketches
o Wireframe diagrams
o Storyboarding
o Wireflow diagrams
o HTML prototype
o Language prototype

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 34

Wireframe
Diagram for
Tune Source

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 35

Storyboard
Example

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 36

Language
Prototype
Example

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 37

Interface Evaluation Methods
 Heuristic evaluation
o Compare design to checklist
 Walkthrough evaluation
o Team simulates movement through components
 Interactive evaluation
o Users try out the system
 Formal usability testing
o Expensive
o Detailed use of special lab testing

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 38

Navigation Design
PROVIDING A SEAMLESS INTERACTION

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 39

Basic Principles of Navigation Design
 Assume users
o Have not read the manual
o Have not attended training
o Do not have external help readily at hand

 All controls should be clear and understandable and

placed in an intuitive location on the screen.

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 40

Basic Principles of Navigation Design
 Prevent mistakes
o Limit choices
o Never display commands that can’t be used (or “gray them
out”)
o Confirm actions that are difficult or impossible to undo
 Simplify recovery from mistakes
 Use consistent grammar order (action-object, object-
action)

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 41

Menu Tips
 Menus enable users to select action from an organized display of
action categories and options
 Broad and shallow design is preferred
 Logical categories can be objects (customers; orders) or actions
(insert, design)
 Common menu formats include menu bars, drop-down menus,
popup menus, tab menus, icon tool bars, and image maps.
 Menus may become less popular with trend toward touchscreens

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 42

Message Tips
 Common message types include:
o Error message
o Confirmation message
o Acknowledgment message
o Delay message
o Help message
 Strive for clear, concise, and complete messages
 Should be grammatically correct and free of jargon and abbreviations (unless
they are the users’)
 Avoid negatives and humor (it gets old)

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 43

Input Design
ENTERING NEW DATA INTO THE SYSTEM

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 44

Basic Principles of Input Design
 The goal is to simply and easily capture accurate information for
the system
 Reflect the nature of the inputs
 Find ways to simplify their collection

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 45

Online versus Batch Processing
 Online processing immediately records the transaction in
the appropriate database
 Batch processing collects inputs over time, holds them
temporarily, and then processes all the transactions at one
time in a batch
 Batch processing simplifies data communications and
other processes; but master files are not updated real time

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 46

Capture Data at the Source
 Reduces duplicate work
 Reduces processing time
 Decreases cost
 Decreases probability of error

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 47

Source Data Automation
 Can be obtained by using the following technologies:
o bar code readers / scanners
o optical character recognition
o magnetic stripe readers
o smart cards
o RFID (Radio Frequency Identification) tags

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 48

Minimize Keystrokes
 Keyboard entry is slow and error-prone
 Never ask for information that can be obtained other ways
o Lookups
o Dropdown lists
o Default values

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 49

Input Tips
Utilize selection controls whenever
possible to minimize keystrokes.

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 50

Input Validation
 Apply a judicious amount of input validation to ensure accuracy.
 Types include:
o Completeness check
o Format check
o Range check
o Check digit check
o Consistency check
o Database checks

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 51

Output Design
CONVEYING THE INFORMATION THE USER NEEDS

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 52

Basic Output Design Principles
 Understand report usage
o Reference or cover-to-cover?
o Frequency?
o Real-time or batch reports?
 Manage information load
o All needed information, no more
 Minimize bias
 Utilize various report types (detail, summary, exception, graphical)
and media to satisfy users’ output requirements.

© 2015 JOHN WILEY & SONS. ALL RIGHTS RESERVED. 53