You are on page 1of 86

8

1
Output
(Output Design Objectives)
Design Output to serve the intended purpose
output
Design Output to fit the user
user
Deliver the appropriate quantity of output
output
Make sure that the output is where it is needed
output
Provide the output on time
output

Choose the right output method
output
Output
Internal Output : Output output



External Output : Output

Turnaround output : Output



Output Technology
1. Printed output
Tabular output presents information in columns.
Zoned output places text and numbers into designated
areas
2. Screen output
Graphic output is the use of pictorial charts to convey
information in ways that demonstrate trends and
relationships that cannot be easily seen in tabular formats.
3. Audio
4. CD-ROM
5. Electronic Output

(Choosing Output Technology)



Output
Output
Output
Output
Output
Output
Technology
Output


1.



Supplier




2. limit
200,000,000

limit ->
limit ->

3. graphic
scale


35
8a.
30
25
Car A
20
Car B
15
Car C
10
5
0
North South East West

35
8b.
30

25 Car A
Car B
20
Car C
15

10
North South East West

Graphical Scaling

1.
2.

3.


1. (Heading)
2. (Details)
3. (Summary)
4. (Remark)
(Heading)





1/2


(Details)

(Control break)
1 , 2549 30 2549
Control break

(Summary)

(Remark)



(Report)
Detailed reports present information with
little or no filtering.
Summary reports categorize information for
managers who do not want to wade through
details.
Increasingly presented inn graphical
formats using charts.
Exception reports filter detailed information
before presenting it.

(Tabular Format)
(Graph Format)
(Using Icon)
Table
Graph
External Document
Turnaround Document
Chapter 11.

(User Interface & Design)


System Development Life
Cycle : SDLC

1.
2. GUI
3.

User Interface

User Interface



Dialogues








(Batch)
(Online)

Keyboard
Mouse
Touch screen
Touch-tone telephone
(Graphic input device)




Prompt
(Combination screen)











Gebhardt & Stellmacher (1978) 8
1. (Simplicity)





2. (Clarity)




3. (Uniqueness)



4. (Comfortable language)





5.
(Other comfort)





6. (Evidence & reusability)



7. (Stability)


8. (Data security)
Interfaces
(Layouts)
(Structure Data Entry)
(Controlling Data Input)
(Providing Feedback)
(Help)

(Dialogue Design)

1. :
2. :
3. :
4. :
5. :
6. :
7. :







(intensity)
(marking)
(size & fonts)
(inverse video & blinking)
(color)
(audio)







































cursor

Bad Flow in a Form
Good Flow in a Form

1. (Cursor)

(Cursor)


2.

3.

4. Enter


5.

6. 0

7. ,

8. (Default)
(Default)

9.


10.
11.


(Cursor)

(Exit)
(Help)

(Structure Data Entry)




(Entry)
(Default Value)
Running
Number
(Unit)

(Caption)

(Format)

(Justify)

(Help) F1

(GUI)

(Graphic User Interface: GUI)
GUI Input Control



GUI
1. Text Box
2. Radio Button
3. Check Button
4. List box
5. Drop-down List Box
6. Combination Box
(Combo Box)
7. Spin Box (Spinner Box)
8. Menu bars
9. Toolbars
10. Dialog boxes
11. Toggle buttons
12. Scroll bars
13. Calendars
14. Status Bar
Graphic User Interface

Radio Button
TextBox ListBox

ComboBox
Common GUI Components
Text box
List
box

Drop
Radio down
button list
Can edit
Check Spin
box box

Button
Advanced GUI Components
Advanced GUI Components
Input Prototype for
Data Maintenance
Input Prototype for Transaction
Input Prototype for Data Maintenance
Input Prototype for Web Interface
Input Prototype for Web Interface

(Controlling Data Input)







(Providing Feedback)

3
1. (Status Information)
2. (Prompting Cues)
3. (Error/Warning Messages)

(Status Information)

Combination of Text and Graphics for End User feedback



(Prompting Cues)

Login cursor username

:_ _ _-_ _ _
(Error/Warning
Messages)



(Help)
Help
1. (Simplicity)
2. (Organization)
3. (Example)
Help
Poorly designed help display Improved designed help display
Help

1.
(View/Subschema)
2. (Authorization Rules)
3. (Encryption Procedures)
4. (Authentication schemas)


User Interface
(Dialogues Diagram)
3
1. :
2. :
3. :
Dialogues Diagram

Dialogues Diagram




Dialogue diagram for Customer Information
System
Dialogue diagram for e-commerce
Dialogue diagram



()
( )
(
)
.....






....

You might also like