1

University of Sadat City

Faculty of Computers and Artificial Intelligence (FCAI)

System Analysis & Design-2 (IS306)

Lecture 6

Presented By:
Dr. Ahmed Tealeb

Information Systems Department

1st Semester 2022-2023
 Chapter 9

User Interface Design

SYSTEMS ANALYSIS AND DESIGN

SEVENTH EDITION

DENNIS, WIXOM, AND ROTH

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.

Copyright ©2019 John Wiley & Sons, Inc. 3

Organize the Interface (1 of 2)
• 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
• Like DFD in using boxes and lines
• Boxes denote screens
• Lines show movement from one to another
• Different from DFD in having no standard rules or format

Copyright ©2019 John Wiley & Sons, Inc. 32

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

• A mock-up or simulation of screens, forms, or reports

• Common methods include:
• Paper sketches
• Wireframe diagrams
• Storyboarding
• Wireflow diagrams
• HTML prototype
• Language prototype

Copyright ©2019 John Wiley & Sons, Inc. 37

Wireframe Diagram for DrōnTeq

Copyright ©2019 John Wiley & Sons, Inc. 38

Storyboard Example

Copyright ©2019 John Wiley & Sons, Inc. 39

Language Prototype Example

Copyright ©2019 John Wiley & Sons, Inc. 40

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

Copyright ©2019 John Wiley & Sons, Inc. 41

Navigation Design
Providing a seamless interaction

Copyright ©2019 John Wiley & Sons, Inc. 42

Basic Principles of Navigation Design (1 of 2)
• Assume users
• Have not read the manual
• Have not attended training
• Do not have external help readily at hand
• All controls should be clear and understandable and placed
in an intuitive location on the screen.

Copyright ©2019 John Wiley & Sons, Inc. 43

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

Copyright ©2019 John Wiley & Sons, Inc. 44

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

Copyright ©2019 John Wiley & Sons, Inc. 45

Message Tips
• Common message types include:
• Error message
• Confirmation message
• Acknowledgment message
• Delay message
• 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)

Copyright ©2019 John Wiley & Sons, Inc. 46

Input Design

Entering New Data Into The System

Copyright ©2019 John Wiley & Sons, Inc. 47

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

Copyright ©2019 John Wiley & Sons, Inc. 48

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

Copyright ©2019 John Wiley & Sons, Inc. 49

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

Copyright ©2019 John Wiley & Sons, Inc. 50

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

Copyright ©2019 John Wiley & Sons, Inc. 51

Minimize Keystrokes
• Keyboard entry is slow and error-prone
• Never ask use to key-enter information that can be
obtained other ways
• Lookups
• Dropdown lists
• Default values

Copyright ©2019 John Wiley & Sons, Inc. 52

Input Tips (1 of 3)
Utilize selection controls whenever possible to minimize keystrokes.
Type of Selection Control When to Use Notes
Check box selection list When several items can be Check boxes are not mutually exclusive.
Presents a complete list selected from a list of Do not use negatives for box labels.
of choices, each with a items Check box labels should be placed in some logical
square box in front. order, such as that defined by the business process,
or failing that, alphabetically or most commonly
used first.
Use no more than 10 check boxes for any particular
set of options. If you need more boxes, group them
into subcategories.
Radio button selection list When only one item can Use no more than six radio buttons in any one list; if
Presents a complete list be selected from a set of you need more, use a drop-down selection list.
of mutually exclusive mutually exclusive items If there are only two options, one check box is
choices, each with a circle usually preferred to two radio buttons, unless the
in front. options are not clear.
Avoid placing radio buttons close to check boxes to
prevent confusion between different selection lists.

Copyright ©2019 John Wiley & Sons, Inc. 53

Input Tips (2 of 3)
Type of Selection Control When to Use Notes
On-screen selection list Seldom or never—only if This box can permit only one item to be selected (in
Presents a list of choices in there which case it is an ugly version of radio buttons).
a box is insufficient room for This box can also permit many items to be selected
check (in which case it is an ugly version of check boxes),
boxes or radio buttons but users often fail to realize that they can choose
multiple items.
This box permits the list of items to be scrolled, thus
reducing the amount of screen space needed.
Drop-down selection list When there is insufficient This box acts like radio buttons, but is more compact.
Displays selected item in room to display all choices This box hides choices from users until it is opened,
one-line box that opens to which can
reveal list decrease ease of use; conversely, because it shelters
of choices. novice
users from seldom-used choices, it can improve ease
of use.
This box simplifies design if the number of choices is
unclear,
because it takes only one line when closed.

Copyright ©2019 John Wiley & Sons, Inc. 54

Input Tips (3 of 3)
Type of Selection When to Use Notes
Control
Combo box selection Shortcut for This box acts like a drop-down list, but is
list experienced users faster for experienced
A special type of drop- users when the list of items is long.
down list
box that permits user
to type as
well as scroll the list.
Up-down numeric When entering a Beginning and ending range values and
control numeric value increments can
Scroll arrows move up be defined.
or down Best for entering values with narrow value
through numeric ranges, such as
range. “Quantity Ordered.”

Copyright ©2019 John Wiley & Sons, Inc. 55

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

Copyright ©2019 John Wiley & Sons, Inc. 56

Output Design
Conveying The Information The User Needs

Copyright ©2019 John Wiley & Sons, Inc. 57

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

Copyright ©2019 John Wiley & Sons, Inc. 58

After reading and studying this chapter,
you should be able to: (1 of 2)
• Identify and describe the five basic rules of user interface
design.
• Describe the concept of usability with respect to a system’s
user interface. Why is this concept important to the
interface designer?
• Explain three unique aspects of designing for a touch
screen user interface.
• Discuss the five components of the user interface design
process.

Copyright ©2019 John Wiley & Sons, Inc. 59

After reading and studying this chapter,
you should be able to: (2 of 2)
• Explain the particular issues associated with design of the
system’s navigation mechanism.
• Discuss ways to improve the quality of input data captured
by the system.
• Explain the best ways to produce output from the system.

Copyright ©2019 John Wiley & Sons, Inc. 60

Copyright
Copyright © 2019 John Wiley & Sons, Inc.
All rights reserved. Reproduction or translation of this work beyond that permitted in
Section 117 of the 1976 United States Act without the express written permission of the
copyright owner is unlawful. Request for further information should be addressed to the
Permissions Department, John Wiley & Sons, Inc. The purchaser may make back-up
copies for his/her own use only and not for distribution or resale. The Publisher assumes
no responsibility for errors, omissions, or damages, caused by the use of these programs
or from the use of the information contained herein.

Copyright ©2019 John Wiley & Sons, Inc. 61