desain input output dan sistem menu.pdf

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 1/35

efausa@yahoo.com

 ANALISIS DAN DESAIN SISTEM INFORMASI

Bab-05

PEMODELAN SISTEMDESAIN INPUT, OUTPUT DAN

TATA MENU DAN NAVIGASI

(Interface Design)

Disampaikan Oleh :

Erlangga Fausa

JURUSAN TEKNIK INDUSTRI

FAKULTAS TEKNOLOGI INDUSTRI

UNIVERSITAS ISLAM INDONESIA

Tahun 2015

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 2/35

Desain Input

efausa@yahoo.com

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 3/35

Data Capture and Data Entry (Whitten)

efausa@yahoo.com

Data capture – the identification and acquisitionof new data (at its source).

 – Source documents – forms used to record businesstransactions in terms of data that describe those

transactions.

Data entry – the process of translating the sourcedata or document (above) into a computer

readable format.

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 4/35

Data Processing (Whitten)

efausa@yahoo.com

Data processing is all processing that occurs onthe data after it is input from a machine readableform.

 – In batch processing, the entered data is collected

into files called batches and processed as a completebatch.

 – In on-line processing, the captured data isprocessed immediately

 – In remote batch processing, data is entered andedited on-line, but collected into batches forsubsequent processing.

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 5/35

Input Implementation Methods (Whitten)

efausa@yahoo.com

• 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)

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 6/35

Bad flow in a form (Whitten)

efausa@yahoo.com

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 7/35

Good flow in a form (Whitten)

efausa@yahoo.com

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 8/35

Internal Controls for Inputs (Whitten)

efausa@yahoo.com

• The number of inputs should be monitored (to minimize riskof 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

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 9/35

Common GUI Controls for

Windows and Web (Whitten)

efausa@yahoo.com

• Text boxes

• Radio buttons

• Check boxes

• List boxes• Drop down

lists

• Combination

boxes• Spin boxes

• Buttons

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 10/35

GUI Controls Uses (Whitten)

efausa@yahoo.com

Text boxesWhen the input data values are unlimited in scope

Radio buttonsWhen data has limited predefined set of mutually exclusive values

Check boxesWhen value set consists of a simple yes or no value

List boxesWhen data has a large number of possible values

Drop down listsWhen data has large number of possible values and screen space istoo limited for a list box

Combination boxes

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

When need to navigate through a small set of choices or directly typinga data value

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 11/35

 Advanced Controls,

mostly Windows interfaces -1 (Whitten)

efausa@yahoo.com

• Drop downcalendars

• Slider editcontrols

• Masked edit

controls• Ellipsis controls• Alternate

numericalspinners

• Check list boxes• Check tree

boxes

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 12/35

efausa@yahoo.com

 Advanced Controls,

mostly Windows interfaces -2 (Whitten)

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 13/35

Input Design Process (Whitten)

efausa@yahoo.com

1. Identify system inputs and review logicalrequirements.

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.

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 14/35

Data Analysis dan Normalization (Whitten)

Data analysis – a technique used to improve adata 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

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 15/35

Desain Output

efausa@yahoo.com

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 16/35

Internal Outputs (Whitten)

efausa@yahoo.com

Internal output – an output intended for system owners and systemusers within an organization.

Detailed report  – an internal output that presents information with littleor no filtering

• Example: A listing of all customers

Summary report – an internal output that categorizes information formanagers

• 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 reportexceptions to some condition or standard.

• Example: A listing of customers with past due accounts

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 17/35

Detailed report example (Whitten)

efausa@yahoo.com

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 18/35

efausa@yahoo.com

Summary report example (Whitten)

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 19/35

efausa@yahoo.com

Exception report example (Whitten)

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 20/35

efausa@yahoo.com

External outputs  – an output that leaves theorganization. – Intended for customers, suppliers, partners, or

regulatory agencies.

Turnaround documents – an external outputthat may re-enter the system as an input. – Most “bills” and invoices include a stub to be

returned by the customer with payment.

External Outputs (Whitten)

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 21/35

Chart Types -1 (Whitten)

efausa@yahoo.com

Line charts show one or more series of data over a period oftime. 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 forsummarizing 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 seriesor categories of data. Each bar represents on series or

category of data.

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 22/35

efausa@yahoo.com

Pie charts show the relationship of parts to a whole. They are usefulfor 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 showmultiple 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 thanone series or category of data. Each data series is represented as ageometric shape around a central point. Multiple series are overlaid sothey can be compared.

Scatter charts are useful for showing the relationship between two ormore series or categories of data measured at uneven intervals of time.Each series is represented by data points using either different colorsor bullets.

Chart Types -2 (Whitten)

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 23/35

Windows/Web Media Player Output

Prototype example (Whitten)

efausa@yahoo.com

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 24/35

efausa@yahoo.com

Output Design Process (Whitten)

1. Identify system outputs and review logicalrequirements.

2. Specify physical output requirements.

3. As necessary, design any preprinted forms.

4. Design, validate and test outputs using somecombination 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)

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 25/35

Desain Tata Menu danNavigasi (Interface Design)

efausa@yahoo.com

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 26/35

User Interface Technology (Whitten)

efausa@yahoo.com

• 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 atime.

• Keyboards and Pointers

 – Mouse

 – Pens

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 27/35

Graphical User Interfaces Styles and

Considerations (Whitten)

efausa@yahoo.com

• 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

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 28/35

 A Classical Hierarchical Menu Dialogue(Whitten)

efausa@yahoo.com

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 29/35

Sample Dialogue Chart (Whitten)

efausa@yahoo.com

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 30/35

Pull-Down and Cascading Menus(Whitten)

efausa@yahoo.com

menu

barCascading

menu

Ellipses indicates

dialogue boxPull-down

menu

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 31/35

Dialogue Box example (Whitten)

efausa@yahoo.com

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 32/35

efausa@yahoo.com

• Microsoft

 Access

• CASE Tools

• Visual Studio

• Excel

• Visio

 Automated Tools for User Interface Design

& Prototyping (Whitten)

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 33/35

The User Interface Design Process(Whitten)

efausa@yahoo.com

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

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 34/35

Example of Main Menu - SoundStage(Whitten)

efausa@yahoo.com

7/23/2019 Desain Input Output dan Sistem Menu.pdf

http://slidepdf.com/reader/full/desain-input-output-dan-sistem-menupdf 35/35

Terima Kasih

efausa@yahoo com