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

[email protected]

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



Desain Input

[email protected]



Data Capture and Data Entry (Whitten)

[email protected]

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.



Data Processing (Whitten)

[email protected]

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.



Input Implementation Methods (Whitten)

[email protected]

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



Bad flow in a form (Whitten)

[email protected]



Good flow in a form (Whitten)

[email protected]



Internal Controls for Inputs (Whitten)

[email protected]

• 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



Common GUI Controls for

Windows and Web (Whitten)

[email protected]

• Text boxes

• Radio buttons

• Check boxes

• List boxes• Drop down

lists

• Combination

boxes• Spin boxes

• Buttons



GUI Controls Uses (Whitten)

[email protected]

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



Advanced Controls,

mostly Windows interfaces -1 (Whitten)

[email protected]

• Drop downcalendars

• Slider editcontrols

• Masked edit

controls• Ellipsis controls• Alternate

numericalspinners

• Check list boxes• Check tree

boxes



[email protected]

Advanced Controls,

mostly Windows interfaces -2 (Whitten)



Input Design Process (Whitten)

[email protected]

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.



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.

[email protected]



Desain Output

[email protected]



Internal Outputs (Whitten)

[email protected]

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



Detailed report example (Whitten)

[email protected]



[email protected]

Summary report example (Whitten)



[email protected]

Exception report example (Whitten)



[email protected]

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)



Chart Types -1 (Whitten)

[email protected]

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.



[email protected]

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)



Windows/Web Media Player Output

Prototype example (Whitten)

[email protected]



[email protected]

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)



Desain Tata Menu danNavigasi (Interface Design)

[email protected]



User Interface Technology (Whitten)

[email protected]

• 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



Graphical User Interfaces Styles and

Considerations (Whitten)

[email protected]

• 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



A Classical Hierarchical Menu Dialogue(Whitten)

[email protected]



Sample Dialogue Chart (Whitten)

[email protected]



Pull-Down and Cascading Menus(Whitten)

[email protected]

menu

barCascading

menu

Ellipses indicates

dialogue boxPull-down

menu



Dialogue Box example (Whitten)

[email protected]



[email protected]

• Microsoft

Access

• CASE Tools

• Visual Studio

• Excel

• Visio

Automated Tools for User Interface Design

& Prototyping (Whitten)



The User Interface Design Process(Whitten)

[email protected]

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



Example of Main Menu - SoundStage(Whitten)

[email protected]



Terima Kasih

efausa@yahoo com

desain input output dan sistem menu.pdf

Documents