ANALISIS DAN DESAIN SISTEM INFORMASI

Bab-05
PEMODELAN SISTEM

DESAIN INPUT, OUTPUT DAN

TATA MENU DAN NAVIGASI
(Interface Design)
Disampaikan Oleh :

Erlangga Fausa

JURUSAN TEKNIK INDUSTRI

FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS ISLAM INDONESIA
Tahun 2015
efausa@yahoo.com

Desain Input

efausa@yahoo.com

Data Capture and Data Entry (Whitten)

Data capture the identification and acquisition
of new data (at its source).
Source documents forms used to record business
transactions in terms of data that describe those
transactions.

Data entry the process of translating the source

data or document (above) into a computer
readable format.

efausa@yahoo.com

Data Processing (Whitten)

Data processing is all processing that occurs on
the data after it is input from a machine readable
form.
In batch processing, the entered data is collected
into files called batches and processed as a complete
batch.
In on-line processing, the captured data is
processed immediately
In remote batch processing, data is entered and
edited on-line, but collected into batches for
subsequent processing.
efausa@yahoo.com

Input Implementation Methods (Whitten)

Keyboard
Mouse
Touch Screen
Point-of-sale terminals (POS application)
Sound and speech
Automatic data capture :

Optical mark recognition (OMR) - Barcode

Optical character recognition (OCR)
Magnetic Ink
Electromagnetic transmission
Smart cards
RFID card
Biometric (fingerprint, retina scan, etc)
efausa@yahoo.com

Bad flow in a form (Whitten)

efausa@yahoo.com

Good flow in a form (Whitten)

efausa@yahoo.com

Internal Controls for Inputs (Whitten)

The number of inputs should be monitored (to minimize risk
of lost transactions).
For batch processing
Use batch control slips
Use one-for-one checks against post-processing detail reports

For on-line systems

Log each transaction as it occurs to a separate audit file

Validate all data

Existence checks
Data-type checks
Domain checks
Combination checks
Self-checking digits
Format checks

efausa@yahoo.com

Common GUI Controls for

Windows and Web (Whitten)

Text boxes
Radio buttons
Check boxes
List boxes
Drop down
lists
Combination
boxes
Spin boxes
Buttons
efausa@yahoo.com

GUI Controls Uses (Whitten)

Text boxes
When the input data values are unlimited in scope

Radio buttons
When data has limited predefined set of mutually exclusive values

Check boxes
When value set consists of a simple yes or no value

List boxes
When data has a large number of possible values

Drop down lists

When data has large number of possible values and screen space is
too limited for a list box

Combination boxes
To provide user with option of selecting value from a list or typing a
value that may or may not appear in the list

Spin boxes
When need to navigate through a small set of choices or directly typing
a data value
efausa@yahoo.com

Advanced Controls,
mostly Windows interfaces -1 (Whitten)

Drop down
calendars
Slider edit
controls
Masked edit
controls
Ellipsis controls
Alternate
numerical
spinners
Check list boxes
Check tree
boxes

efausa@yahoo.com

Advanced Controls,
mostly Windows interfaces -2 (Whitten)

efausa@yahoo.com

Input Design Process (Whitten)

1. Identify system inputs and review logical
requirements.
2. Select appropriate GUI controls.
3. Design, validate and test inputs using some
combination of:
a) Layout tools (e.g., hand sketches, spacing charts, or CASE
tools.
b) Prototyping tools (e.g., spreadsheet, PC DBMS, 4GL)

4. As necessary design source documents.

efausa@yahoo.com

Data Analysis dan Normalization

(Whitten)

Data analysis a technique used to improve a

data model for implementation as a database.
Goal is a simple, nonredundant, flexible, and
adaptable database.

Normalization a data analysis technique that

organizes data into groups to form nonredundant,
stable, flexible, and adaptive entities.

efausa@yahoo.com

Desain Output

efausa@yahoo.com

Internal Outputs (Whitten)

Internal output an output intended for system owners and system
users within an organization.
Detailed report an internal output that presents information with little
or no filtering
Example: A listing of all customers

Summary report an internal output that categorizes information for

managers
Do not have to wade through details.
Increasingly presented in graphical formats using charts
Example: A count of customers by region

Exception report An internal output that filters data to report

exceptions to some condition or standard.
Example: A listing of customers with past due accounts

efausa@yahoo.com

Detailed report example (Whitten)

efausa@yahoo.com

Summary report example (Whitten)

efausa@yahoo.com

Exception report example (Whitten)

efausa@yahoo.com

External Outputs (Whitten)

External outputs an output that leaves the
organization.
Intended for customers, suppliers, partners, or
regulatory agencies.

Turnaround documents an external output

that may re-enter the system as an input.
Most bills and invoices include a stub to be
returned by the customer with payment.

efausa@yahoo.com

Chart Types -1 (Whitten)

Line charts show one or more series of data over a period of
time. They are useful for summarizing and showing data at
regular intervals. Each line represents one series or category
of data.
Area charts are similar to line charts except that the focus is
on the area under the line. That area is useful for
summarizing and showing the change in data over time. Each
line represents one series or category of data.

Bar charts / Column charts are useful for comparing series

or categories of data. Each bar represents on series or
category of data.

efausa@yahoo.com

Chart Types -2 (Whitten)

Pie charts show the relationship of parts to a whole. They are useful
for summarizing percentages of a whole within a single series of data.
Each slice represents one item in that series of data.

Donut charts are similar to pie charts except that they can show
multiple series or categories of data, each as its own concentric ring.
Within each ring, a slice of that ring represents one item in that series
of data.

Radar charts are useful for comparing different aspects of more than
one series or category of data. Each data series is represented as a
geometric shape around a central point. Multiple series are overlaid so
they can be compared.

Scatter charts are useful for showing the relationship between two or
more series or categories of data measured at uneven intervals of time.
Each series is represented by data points using either different colors
or bullets.
efausa@yahoo.com

Windows/Web Media Player Output

Prototype example (Whitten)

efausa@yahoo.com

Output Design Process (Whitten)

1. Identify system outputs and review logical
requirements.
2. Specify physical output requirements.
3. As necessary, design any preprinted forms.
4. Design, validate and test outputs using some
combination of:
1. Layout tools (e.g., hand sketches, spacing charts, or CASE
tools.
2. Prototyping tools (e.g., spreadsheet, PC DBMS, 4GL)
3. Code generating tools (e.g., report writer)

efausa@yahoo.com

Desain Tata Menu dan

Navigasi (Interface Design)

efausa@yahoo.com

User Interface Technology (Whitten)

Operating Systems and Web Browsers
GUI
Windows, Macintosh, UNIX, Linux, Palm OS, Windows CE
Growing importance of platform independence

Display Monitor
Regular PC monitors
Non-GUI terminals
Growing importance of devices such as handhelds
Paging Display complete screen of characters at a time.
Scrolling Display information up or down a screen one line at a
time.

Keyboards and Pointers

Mouse
Pens
efausa@yahoo.com

Graphical User Interfaces Styles and

Considerations (Whitten)
Windows and frames
Menu-driven interfaces

Pull-down and cascading menus

Tear-off and pop-up menus
Toolbar and iconic menus
Hypertext and hyperlink menus

Instruction-driven interfaces
Language-based syntax
Mnemonic syntax
Natural language syntax

Question-answer dialogue

efausa@yahoo.com

A Classical Hierarchical Menu Dialogue

(Whitten)

efausa@yahoo.com

Sample Dialogue Chart (Whitten)

efausa@yahoo.com

Pull-Down and Cascading Menus

(Whitten)

Cascading
menu

Ellipses indicates
dialogue box
Pull-down
menu

efausa@yahoo.com

menu
bar

Dialogue Box example (Whitten)

efausa@yahoo.com

Automated Tools for User Interface Design

& Prototyping (Whitten)
Microsoft
Access
CASE Tools
Visual Studio
Excel
Visio

efausa@yahoo.com

The User Interface Design Process

(Whitten)
1. Chart the user interface dialogue.
State Transition Diagram a tool used to depict the
sequence and variation of screens that can occur during a
user session.

2. Prototype the dialogue and user interface.

3. Obtain user feedback.

Exercising (or testing) the user interface

4. If necessary return to step 1 or 2

efausa@yahoo.com

Example of Main Menu - SoundStage

(Whitten)

efausa@yahoo.com

Terima Kasih

efausa@yahoo.com