Information System Development

TOPIC 7:
USER INTERFACE,
INPUT & OUTPUT
DESIGN

Phase 3 : Systems Design

2

Course Learning Outcome

(CLO3)
Design and develop information
systems using relational databases
(C5).
TOPIC OUTLINE:
User Interface, Output & Input
Design
3
4
Systems Design Phase
 The third of five phases in the SDLC
 Now, you will work on a physical design
that will meet the specifications
described in the system requirements
document
 Tasks will include data design, user
interface design, and system architecture
 Deliverable from this phase is system
design specification
USER INTERFACE
DESIGN
 User Interface (UI)
6

 Describes how users interact with a

computer system
 Consists of all the hardware, software,
screens, menus, functions, outputs, and
features that affect two-way
communications between the user and the
computer
 The UI is the key to usability, which includes
user satisfaction, support for business
functions and system effectiveness.
Evolution of The User
Interface
 Processing-
Centered
System

 User-Centered
System
 Primary focus is upon
the user
 Requires understanding
of Human Computer
Interaction
Evolution of The User
Interface
 Processing-Centered System
 Design printed and screen output first and then work
on the inputs to produce results.
 The screens allow the user to send commands to
system that transform input data to structured output.

 User-Centered System
 The distinction blurs between input, output and the
interface itself.
 Users work with a varied mix of input, screen output
and data queries as they perform day-to-day
operations.
 All those works require interaction with the computer
system which is through user interface.
User Interface Design
 User Interface Design is based on

 Human-Computer Interaction
Principles

 User-Centered Design Principles

Human Computer
Interaction (HCI)
 Human-Computer Interaction (HCI)
 HCI describes the relationship between
computers and people who use them to perform
business-related tasks
 Main objective is to create a user-friendly
design that is easy to learn and use
 HCI concepts apply to everything from a PC desktop
to the main menu for a global network.
 All the communications & instructions necessary to
enter input to the system to obtain output in the
form of screen display or printed reports
 Graphical user interface (GUI)
Human Computer
Interaction
 10 Users’ Rights
Principles of User-Centered
Design
 7 Basic Principles of User-Centered Design
(The 7 Habits of Successful Interface
Designers)
1. Understand The Business
2. Maximize Graphical Effectiveness
3. Think Like A User
4. Use Models And Prototypes
5. Focus On Usability
6. Invite Feedback
7. Document Everything
Principles of User-Centered
Design
1. Understand The Business
 The interface designer must understand the underlying business
functions and how the system supports individual, departmental
and enterprise goals.
 The overall objective is to help users to perform their jobs.
 Starting from the diagram such as functional decomposition
diagram (FDD).

2. Maximize Graphical Effectiveness

 Studies show that people learn better visually.
3. Think Like A User
 A system analysts should understand user experience,
knowledge and skills levels.
 The interface should be flexible enough to accommodate
novices as well as experienced users.
 Principles of User-Centered
Design
4. Use Models And Prototypes
 It is essential to construct models and prototypes for user approval.
 Storyboard: A sketch that show the general screen layout and
design.
 Usability metrics: A software that can record and measure user
interaction with the system.
5. Focus On Usability
 The user interface should include all tasks, commands and
communications between users and the information system.
 Often, an effective strategy is to present the most common choice
as default, but allow the user to select other options.
6. Invite Feedback
 Even after the system is operational, it is important to monitor
system usage and solicit user suggestions by observing and
surveying users.
7. Document Everything
 All screen designs should be documented for later use by
programmers.
Designing the User
Interface
 8 Basic Guidelines for User Interface
Design
1. Design a transparent interface
2. Create an interface that is easy to
learn and use
3. Enhance user productivity
4. Make it easy for users to obtain help
or correct errors
5. Minimize input data problems
6. Provide feedback to users
7. Create an attractive layout and design
8. Use familiar terms and images
 Designing the User
16
Interface
1. Design a Transparent Interface
 Transparent interface means does not distract the
user.
 You can see right through the interface to your own
work.
 Facilitate the system design objectives, rather than
calling attention to the interface
 Create a design that is easy to learn and remember
 Design the interface to improve user efficiency and
productivity
 Write commands, actions, and system responses
that are consistent and predictable
 Designing the User
17
Interface
2. Create an Interface that Is Easy to
Learn and Use
 Clearly label all controls, buttons, and icons
 Select only those images that users can
understand easily, and provide on-screen
instructions that are logical, concise, and
clear
 Show all commands in a list of menu items
 Make it easy to navigate
 Designing the User
18
Interface
3. Enhance User Productivity
 Organize tasks, commands, and functions
in groups that resemble actual business
operations
 Create alphabetical menu lists
 Provide shortcuts so experienced users can
avoid multiple menu levels
 Use default values if the majority of values
in a field are the same
Designing the User
Interface
4. Make It Easy
for Users to
Obtain Help or
Correct Errors
 Ensure that Help is
always available
 Provide user-
selected Help and
context-sensitive
Help

19
 Designing the User
20
Interface
5. Minimize Input Data Problems
 Create input masks (template or pattern
that restricts data entry and prevent errors)
 Display event-driven messages and
reminders
 Establish a list of predefined values that
users can click to select
 Build in rules that enforce data integrity
 Designing the User
21
Interface
6. Provide Feedback to Users
 Display messages at a logical place on the
screen
 Alert users to lengthy processing times or
delays
 Allow messages to remain on the screen
long enough for users to read them
 Let the user know whether the task or
operation was successful or not
 Designing the User
22
Interface
7. Create an Attractive Layout and
Design
 Use appropriate colors to highlight different
areas of the screen
 Use special effects sparingly
 Use hyperlinks that allow users to jump to
related topics
 Group related objects and information
 Designing the User
23
Interface
8. Use Familiar Terms and Images
 Remember that users are accustomed to a
pattern of red=stop, yellow=caution, and
green=go
 Provide a keystroke alternative for each
menu command
 Use familiar commands if possible
 Provide a Windows look and feel in your
interface design if users are familiar with
Windows-based applications
 Designing the User
Interface
 User Interface Controls
 Menu bar
 Toolbar
 Command button
 Dialog box
 Text box
 Toggle button
Designing the User
Interface
 Add Control
Features Switchboard
 List box – scroll bar
 Drop-down list box
 Option button, or
radio button
 Check box
 Calendar control
 Switchboard

Data Entry Screen

25
 User Interface Controls
26
 Menu Hierarchy
29

This menu hierarchy shows tasks, commands, and functions organized into logical
groups and sequences. The structure resembles a FDD, a model of business
functions and processes.
INPUT DESIGN
 Input Design
31

 The quality of the output is only as good

as the quality of the input
 Garbage in, garbage out (GIGO)
 Objective of input design is to ensure the
quality, accuracy, and timeliness of input
data
 Good input design requires attention to
human factors as well as technology issues
 Source Documents and
Forms
 Source document collects
input data, triggers or
authorizes an input action and
provides a record of the
original transaction
 During the input design stage,
you develop source documents
that are easy to complete and
use for data entry
 Form layout makes the form
easy to complete and provides
enough spaces, both vertically
and horizontally for users to
enter the data
 The Placement of Information on
a Form
Company name or Codes, identification
logo and the title information, numbers
and number of the and dates that are
form used for storing
completed forms
Instructions for
Contains captions
completing the form
and areas for
entering variable
data

Total value (if it is

included)
Exampl
e:
 Data Entry Screens (Input
Data)
 Data capture uses an
automated or manually
operated device to
identify source data and
convert it into computer-
readable form – credit
card scanner, bar code
readers

 Data entry is the process

of manually entering
data into the system –
keystrokes, mouse clicks,
touch screen, spoken
words
 Data Entry Processing
36
Methods
 2 types of Data Entry Processing
Methods:-
 Batch input
 Process where data entry is performed on a specified time
schedule, such as daily, weekly, monthly, or longer.
 E.g, batch input occurs when a payroll department collects
time cards at the end of the week and enters the data as
a batch.
 Online input
 Source data automation
 A popular online input method which combines online data
entry and automated data capture using input devices
such as magnetic data strips, or swipe scanners.
 e.g: POS, ATMs
 Source Data Automation
Slide
37

 Can be obtained by using the following technologies:

 bar code readers
 optical character recognition
 magnetic stripe readers
 smart cards
 Example Scenarios:
 Point-to-sale (POS) terminals equipped with bar code scanners
and magnetic swipe scanners to input credit card data.
 Automatic teller machines (ATMs) that read data strips on bank
cards.
 Factory employees who use magnetic ID cards to clock on and
off specific jobs so the company can track production costs
accurately.
 Hospitals that imprint bar codes on patient identification
bracelets and use portable scanners when gathering data on
patient treatment and medication.
 Retail stores that use portable bar code scanners to log new
shipments and update inventory data.
 Libraries that use handheld scanners to read optical strips on
books.
 Designing Data Entry
Screens
Should resemble the source document
 Restrict user access to  For numeric fields, no
screen locations where leading zeroes need
data is entered to be entered by users
 Provide a descriptive  For numbers that include
caption for every field, decimals, no trailing
and show the user where zeroes need to be
to enter the data and the entered by users
required or maximum field  Display default values
size so operators can press
 Display a sample the ENTER key to accept
format if a user must the suggested value
enter values in a field in a  Allow users to add,
specific format change, delete, and
 Require an ending view records
keystroke for every field
 Designing Data Entry
Screens
 Use a default value  Provide users with an
when a field value will opportunity to confirm
be constant for successive the accuracy of input
records or throughout the data before entering it
data entry session  Provide a means for users
 Display a list of to move among fields on
acceptable values for the form
fields, and provide
meaningful error  Design the screen form
messages layout to match the
 Provide a way to leave layout of the source
the data entry screen at document
any time without entering  Provide a method to allow
the current record users to search for
specific information
Validation Rules
 Reducing the number of input errors improves
data quality
 At least eight types of data validation checks
1. Sequence check – when the data must be in some predetermined
sequence
2. Existence check – for mandatory data items
3. Data type check – fits the required data type (numeric,
characters)
4. Range check / limit check – to verify the value is specified
minimum and maximum value
5. Reasonableness check – identifies values that are questionable
but not necessarily wrong (daily hours worked value 0 to 24)
6. Validity check – referential integrity – is used for data items
that must have certain values
7. Combination check – performed on 2 or more fields to ensure that
they are consistent or reasonable.
8. Batch controls – hash totals – to verify batch input (for
Input Volume Reduction
 To reduce input volume, you must reduce
the number of data items required for each
transaction.
 General Guidelines for input data:
 Input only necessary data
 Let the system calculate or derive data
 Do not input constant data (use current
system date)
 Use Business Codes where appropriate
because codes are shorter than the data
they represent
 Which one is entered by the USER, generated by the system &
which one is calculated by the system

42
OUTPUT DESIGN
 Output Design Issues
Slide
44

 Before designing output, ask yourself several

questions:
 What is the purpose of the output?
 Who wants that information, why it is 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 output go to?
 When will the information be provided, and how
often must it be updated?
 Do security or confidentiality issues exist?
Input
Data Store
d
Data

Proce
ss

Outpu
t
 Types of Outputs / Output
46
Technology
 Types of Report
 Detail reports
 Produces one or more lines of output for each record processed.
Produces one or more lines of output for each record processed.
 Each line of output printed is call detail line.

 Exception reports
 Displays only those records that meet a specific condition or
conditions.
 Useful when the user wants information only on records that might
require action, but does not need to know the details.

 Summary reports
 Usually used by upper-level manager to see total figures and do not
need supporting details.
 Reports used by individuals at higher levels in the organization
include less detail than reports used by lower-level employee.
 Sample of Detail Report
tember 5, 1998 Student and Course Report Page 1 of 348 Fall Semester 1998

ast, First Name Student ID Course ID Units Section

Adams, Mary 387-33-8610 Bio101 3 2
Eng100 3 1
Soc105 3 1
Phl108 3 1
Eco104 3 3
Total 15

Aherns, Madhi 559-68-0348 Act102 3 1

Bio101 3 2
Chm109 3 2
Phl108 3 1 Detail
PEd118 1 5 lines
Total 13

Banks, Jamal 371-49-3256 Chm109 3 1

Eco104 3 2
Eng100 3 1
MIS111 3 2
Mkt114 3 1
Soc105 3 1
Total 18
 Sample of Exception Report

An exception report that shows information only for employees who worked overtime.
 Sample of Summary
Report

A summary report- lists subtotal and grand totals.

Report Design Principles
 To produce a well-designed report, the
analyst must consider several topics,
including:
 Reports must be attractive, professional,
and easy to read
 Report headers and footers
 Page headers and footers
 Column heading and alignment
 Column spacing
 Field order
 Grouping detail lines.
Report Design
Four different column heading alignment options
 Security & Control
54

 Every information should be traceable back to the

input data:
 Audit trail
 Records the source of each data item & when it
entered the system.
 Data security
 Data security protects data from loss or damage &
recovers data when it is lost or damaged.
 Records retention policy
 A records policy designed to meet all legal
requirements & business needs.
 Encrypted – encryption
 A process where data is coded so that only those with
the required authorization can access the data
(usually via decoding software).
SUMMARY

55
 Chapter Summary
56

 The purpose of systems design is to create a physical model of the

system that satisfies the design requirements that were defined
during the systems analysis phase
 The chapter began with a discussion of user interface design and
human-computer interaction (HCI) principles
 Discussion of input design began with a description of source
documents and the various zones in a document
 The discussion of data entry screen design explained the use of
input masks and validation rules to reduce data errors
 You also learned about batch and online input methods, and input
volume
 Various types of printed reports, including detail, exception, and
summary reports
 Finally, you learned about security and control
 Chapter Summary
57

 Discussion of input design began with a

description of source documents and the
various zones in a document
 The discussion of data entry screen design
explained the use of input masks and
validation rules to reduce data errors
 You also learned about batch and online
input methods, and input volume
 Finally, you learned about security and
control
 References
58

 Shelly, Cashman, Rosenblatt, System

Analysis and Design. Shelly Cashman
Series, 9th Edition, 2012.
 i-learn system