Transcript User Interface

่ นติดต่อผูใ้ ช ้
บทที่ 5 การออกแบบสว
(Interfaces and Dialogues)
1
ตัวอย่างการโต ้ตอบด ้วยแบบฟอร์ม
2
การโต้ตอบเชงิ ว ัตถุ
(Object-Based Interaction)




ั ลักษณ์
เป็ นการโต ้ตอบกับระบบทีใ่ ชส้ ญ
ั ลักษณ์เป็ นตัวแทนคาสงั่ ทีใ่ ชในการ
้
สญ
ปฏิบต
ั งิ าน
ั ลักษณ์รป
สญ
ู ภาพแทนคาสงั่ การทางาน
เรียกว่า ไอคอน (Icon)
ประหยัดพืน
้ ทีบ
่ นหน ้าจอ
3
การโต้ตอบด้วยภาษามนุษย์
(Natural Language Interaction)
 เป็ นการโต ้ตอบกับระบบด ้วยการใช ้
ี งพูดของผู ้ใชระบบ
้
เสย
้ ย
ี งพูดทัง้ การนาข ้อมูลเข ้าและออก
 ใชเส
จากระบบ
4
การออกแบบ Interfaces







การออกแบบการจัดวาง (Layouts) ของหน ้าจอ
โครงสร ้างของการป้ อนข ้อมูล (Structure Data Entry)
การควบคุมความถูกต ้องในระหว่างป้ อนข ้อมูล (Controlling
Data Input)
การตอบสนองของระบบ (Providing Feedback)
การแสดงสว่ นชว่ ยเหลือ (Help)
การออกแบบการควบคุมการเข ้าถึงข ้อมูลของผู ้ใช ้
ื่ มโยงจอภาพ (Dialogue Design)
การออกแบบลาดับการเชอ
5
การออกแบบการจ ัดวางของหน้าจอ
1.
2.
3.
4.
5.
6.
7.
ส่ วนหัวเรื่ อง: ใช้แสดงชื่อของเอกสารหรื อฟอร์ มนั้น ๆ
ส่ วนแสดงลาดับและวันที่: ใช้แสดงเลขลาดับและวันที่หรื อเวลา
ส่ วนแนะนาหรื อแนวทางในการใช้: ใช้อธิบายข้อแนะนาการใช้ฟอร์ ม
ส่ วนรายละเอียดข้อมูล: ใช้แสดงสาระสาคัญของเอกสารหรื อฟอร์ม
ส่ วนแสดงผลรวม: ใช้แสดงค่าผลรวม เช่น ยอดเงิน ยอดขาย เป็ นต้น
ส่ วนการลงนามผูม้ ีอานาจ: ใช้แสดงนามผูม้ ีอานาจของเอกสารหรื อฟอร์ม
ส่ วนแสดงความคิดเห็น: ใช้ในการเขียนข้อความที่เป็ นความคิดเห็น
6
รูปแบบของเอกสารต ้นฉบับ
7
REGISTRATION FORM
KASETSART
UNIVERSITY
Last Name
Student Number
First Name
Street Address
Course
Subj. Number
Initial
Local Telephone Number
City
Section
(A, A1, 01)
Cr
Semester/Year
Days
Date
State
Times
Zip
Room Bidg.
Total Credits =
Date Received/Initial
Advisor Approval
Date
8
heading
zone
GALLAGHER IMPORTS
EXPENSE VOUCHER
EMPLOYEE
EMPLOYEE NUMBER
DEPARTMENT
control
zone
List each expense separately. Attach receipts for all expenses except those for meals, personal car use, parking, tolls,taxis, and tips.
Date
Automobile
Miles Cost
Meals
Br/Lun/Din Cost
Lodging
Other
Description Cost
Total
Expense
body
zone
Totals:
I certify that this statement of account is correct.
authorization
Signature of Employee
zone
Approved By
Date
Date
totals
zone
Less Advance
Net Total
9
BATES VIDEO CLUB-- MEMBERSHIP APPLICATION
Print the following information:
Name
Address
City
State
Zip Code
Home Phone
Work Phone
Security: Check the applicable box
VISA [ ] Card#
MasterCard [ ]
American Express [ ]
Other [ ] Expiration Date
I agree to the following video club membership terms:
1. I may keep no rented video for longer than seven (7) days.
2. I may have no more than ten (10) rented videos at any one time.
3. If I fall to comply with the above terms, I understand that I will be obligated to return all
rented videos at once, and that my video club membership may then be terminated.
Signed
Date
For office use only:
Accepted: [ ]
Member Number: [
] Date: [
]
10
Rejected: [ ]
BATES VIDEO CLUB - VIDEO RENTAL FORM
Member Number
Date
Title
ID#
Rental Fee Date Returned
Total Rental Amount:
I agree to return the above rented videos within seven (7) days.
Signed:
11
12
การออกแบบหน้าจอ
การออกแบบหน ้าจอทัง้ หมดมีจด
ุ มุง่ หมาย
2 อย่าง คือ เพือ
่ นาเสนอข ้อมูลและชว่ ยในการ
้
ปฏิบต
ั งิ านในการใชระบบ
มีแนวทางมากมายใน
การออกแบบทีต
่ ้องพิจารณาคือหน ้าจอทัง้ หมด
้
ทีป
่ รากฏควรดึงดูดใจให ้อยากใชงาน
ไม่ควร
แน่นเกินไป
13
การออกแบบการจ ัดวางของหน้าจอ


การออกแบบหน ้าจอของฟอร์มหรือรายงานต่างๆ ควร
จะจัดวางรูปแบบให ้เหมือนกับเอกสารมากทีส
่ ด
ุ
ื่ มโยงการป้ อนข ้อมูลในแต่ละรายการหรือแต่ละ
การเชอ
ฟิ ลด์




ื่ มโยงในการป้ อนข ้อมูลในแต่ละฟิ ลด์
ต ้องลาดับการเชอ
การกรอกจะคล ้ายกับการกรอกบนเอกสารจริง
้
เริม
่ กรอกจากซายไปขวา
และจากบนลงล่าง
ควรมีความยืดหยุน
่ และสอดคล ้องในการทางาน สามารถย ้าย
cursor ไปมาระหว่างฟิ ลด์ทต
ี่ ้องการแก ้ไข
14
การออกแบบหน้าจอร ับข้อมูล
1.
เมือ
่ เข ้าไปทีห
่ น ้าจอรับข ้อมูลเคอร์เซอร์ (Cursor)
ต ้องอยูท
่ ต
ี่ าแหน่งแรกของข ้อมูลรับตามเนือ
้ หาของ
้ อ
หน ้าจอนัน
้ ตาแหน่งนัน
้ ควรอยูม
่ ม
ุ บนซายมื
้ ข
่ ้อมูลแล ้วเคอร์เซอร์ (Cursor) ควร
หลังจากผู ้ใชใส
่ งรับข ้อมูลถัดไปเสมอ คือ ด ้านล่างหรือ
เลือ
่ นไปทีช
่ อ
ด ้านข ้างถัดไปเพือ
่ ให ้การป้ อนข ้อมูลเป็ นธรรมชาติ
้
จากบนซายไปขวา
แล ้วจึงลงมาบรรทัดใหม่
่ งรับข ้อมูลต ้อมีคาอธิบาย โดยแสดงกากับที่
2. ทุกชอ
่ งนัน
ั เจนและอยูใ่ นตาแหน่งที่
ชอ
้ ซงึ่ จะต ้องระบุให ้ชด
้
ถูกต ้องและควรมีรป
ู แบบเดียวกันเพือ
่ ให ้ผู ้ใชไม่
ั สนในการทางาน
สบ
15
การออกแบบหน้าจอร ับข้อมูล
Back
Next
่ งรับข ้อมูลนัน
3. ถ ้าชอ
้ มีรป
ู แบบเฉพาะให ้แสดง
รูปแบบเฉพาะนัน
้ เพือ
่ ให ้ผู ้ใชป้้ อนข ้อมูลไม่
ผิดพลาด
่ งรับข ้อมูลนัน
4. ในทุกครัง้ ทีป
่ ้ อนข ้อมูลในชอ
้
้ “Enter” เพือ
่ ง
ครบถ ้วนให ้ผู ้ใชกด
่ ไปยังชอ
่ ้อมูลเท่า
รับข ้อมูลถัดไปหรือในกรณีทใี่ สข
จานวนของข ้อมูลนัน
้ แล ้ว เคอร์เซอร์ควรไป
่ งรับข ้อมูลถัดไปอัตโนมัตเิ พือ
ยังชอ
่ รับ
ข ้อมูลถัดไป เพือ
่ อานวยความสะดวก
16
การออกแบบหน้าจอร ับข้อมูล
5. กรณีข ้อมูลรับเข ้าเป็ นตัวอักษรพิเศษแล ้วควร
่ วั อักษรพิเศษ
ออกแบบให ้สามารถใสต
้ ต ้องใสเ่ อง
อัตโนมัตโิ ดยผู ้ใชไม่
6. กรณีข ้อมูลรับเข ้าต ้องการแสดงผลรับเป็ นเลข
้ ต ้องป้ อนเอง
“0” ให ้แสดงโดยผู ้ใชไม่
7. กรณีทข
ี่ ้อมูลรับเข ้าเป็ นจานวนเลขทีน
่ าไป
คานวณค่าควรมี “,” คัน
่ หลักพันหรือจุด
ทศนิยมขึน
้ อัตโนมัต ิ
่ งรับข ้อมูลนัน
8. กรณีชอ
้ มีคา่ ทีส
่ ามารถกาหนด
(Default) ได ้ ระบบนัน
้ ควรแสดงค่าที่
17
่ งนัน
กาหนดนัน
้ (Default) ทีช
่ อ
้
การออกแบบหน้าจอร ับข้อมูล
9. สาหรับข ้อมูลรับทีเ่ ป็ นรหัสทีต
่ ้องมีการ
ตรวจสอบก่อนบันทึก คือ ค่านัน
้ มี
ั พันธ์กบ
ความสม
ั ค่าอืน
่ ทีบ
่ น
ั ทึกไว ้เดิมแล ้ว
เมือ
่ มีการป้ อนรหัสนัน
้ ต ้องรับค่านั น
้ ไป
ตรวจสอบทีแ
่ ฟ้ มข ้อมูลทีอ
่ ้างถึง
10. ควรมีปมค
ุ่ าสงั่ ต่าง ๆ ตามความเหมาะสม
้
ของการใชงานหน
้าจอนัน
้
11.หลังจากป้ อนข ้อมูลในหน ้าจอนัน
้ ๆ
สมบูรณ์แล ้วและได ้รับการตรวจสอบแล ้ว
้ ้ตรวจสอบและยืนยัน
ควรมีการใชผู้ ้ใชได
หรือยกเลิกก่อนบันทึกข ้อมูลเข ้าเครือ
่ ง
18
การออกแบบหน้าจอ
Back
Next
การออกแบบหน ้าจอทัง้ หมดมีจด
ุ มุง่ หมาย
2 อย่าง คือ เพือ
่ นาเสนอข ้อมูลและชว่ ยในการ
้
ปฏิบต
ั งิ านในการใชระบบ
มีแนวทางมากมายใน
การออกแบบทีต
่ ้องพิจารณาคือหน ้าจอทัง้ หมด
้
ทีป
่ รากฏควรดึงดูดใจให ้อยากใชงาน
ไม่ควร
แน่นเกินไป
19
การออกแบบหน้าจอร ับข้อมูล
Back
Next
1. เมือ
่ เข ้าไปทีห
่ น ้าจอรับข ้อมูลเคอร์เซอร์
(Cursor) ต ้องอยูท
่ ต
ี่ าแหน่งแรกของข ้อมูลรับ
ตามเนือ
้ หาของหน ้าจอนัน
้ ตาแหน่งนั น
้ ควร
้ อ หลังจากผู ้ใชใส
้ ข
่ ้อมูล
อยูม
่ ม
ุ บนซายมื
่ งรับ
แล ้วเคอร์เซอร์ (Cursor) ควรเลือ
่ นไปทีช
่ อ
ข ้อมูลถัดไปเสมอ คือ ด ้านล่างหรือด ้านข ้าง
ถัดไปเพือ
่ ให ้การป้ อนข ้อมูลเป็ นธรรมชาติ
้
จากบนซายไปขวา
แล ้วจึงลงมาบรรทัด
ใหม่
่ งรับข ้อมูลต ้อมีคาอธิบาย โดยแสดง
2. ทุกชอ
่ งนัน
ั เจน
กากับทีช
่ อ
้ ซงึ่ จะต ้องระบุให ้ชด
และอยูใ่ นตาแหน่งทีถ
่ ก
ู ต ้องและควรมี
20
การออกแบบหน้าจอร ับข้อมูล
Back
Next
่ งรับข ้อมูลนัน
3. ถ ้าชอ
้ มีรป
ู แบบเฉพาะให ้แสดง
รูปแบบเฉพาะนัน
้ เพือ
่ ให ้ผู ้ใชป้้ อนข ้อมูลไม่
ผิดพลาด
่ งรับข ้อมูลนัน
4. ในทุกครัง้ ทีป
่ ้ อนข ้อมูลในชอ
้
้ “Enter” เพือ
่ งรับ
ครบถ ้วนให ้ผู ้ใชกด
่ ไปยังชอ
่ ้อมูลเท่า
ข ้อมูลถัดไปหรือในกรณีทใี่ สข
จานวนของข ้อมูลนัน
้ แล ้ว เคอร์เซอร์ควรไป
่ งรับข ้อมูลถัดไปอัตโนมัตเิ พือ
ยังชอ
่ รับข ้อมูล
ถัดไป เพือ
่ อานวยความสะดวก
21
การออกแบบหน้าจอร ับข้อมูล
Back
Next
5. กรณีข ้อมูลรับเข ้าเป็ นตัวอักษรพิเศษแล ้วควร
่ วั อักษรพิเศษ
ออกแบบให ้สามารถใสต
้ ต ้องใสเ่ อง
อัตโนมัตโิ ดยผู ้ใชไม่
6. กรณีข ้อมูลรับเข ้าต ้องการแสดงผลรับเป็ น
้ ต ้องป้ อนเอง
เลข “0” ให ้แสดงโดยผู ้ใชไม่
7. กรณีทข
ี่ ้อมูลรับเข ้าเป็ นจานวนเลขทีน
่ าไป
คานวณค่าควรมี “,” คัน
่ หลักพันหรือจุด
ทศนิยมขึน
้ อัตโนมัต ิ
่ งรับข ้อมูลนัน
8. กรณีชอ
้ มีคา่ ทีส
่ ามารถกาหนด
(Default) ได ้ ระบบนัน
้ ควรแสดงค่าทีก
่ าหนด
22
่ งนัน
นัน
้ (Default) ทีช
่ อ
้
การออกแบบหน้าจอร ับข้อมูล
9. สาหรับข ้อมูลรับทีเ่ ป็ นรหัสทีต
่ ้องมีการ
ตรวจสอบก่อนบันทึก คือ ค่านัน
้ มี
ั พันธ์กบ
ความสม
ั ค่าอืน
่ ทีบ
่ น
ั ทึกไว ้เดิมแล ้ว
เมือ
่ มีการป้ อนรหัสนัน
้ ต ้องรับค่านั น
้ ไป
ตรวจสอบทีแ
่ ฟ้ มข ้อมูลทีอ
่ ้างถึง
11. ควรมีปมค
ุ่ าสงั่ ต่าง ๆ ตามความเหมาะสม
้
ของการใชงานหน
้าจอนัน
้
11.หลังจากป้ อนข ้อมูลในหน ้าจอนัน
้ ๆ
สมบูรณ์แล ้วและได ้รับการตรวจสอบแล ้ว
้ ้ตรวจสอบและยืนยัน
ควรมีการใชผู้ ้ใชได
หรือยกเลิกก่อนบันทึกข ้อมูลเข ้าเครือ
่ ง
23
แสดงการป้อนข้อมูลตามการจ ัดเรียง
ทีไ่ ม่ถก
ู ต้อง
START
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
24
แสดงการป้อนข้อมูลตามการจ ัดเรียง
ทีถ
่ ก
ู ต้อง
START
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
25
Bad Flow in a Form
26
Good Flow in a Form
27
การออกแบบหน้าจอร ับข้อมูล
28
หน้าจอดาต้าเอนทรี (Data Entry Screen)
29
สงิ่ ทีต
่ อ
้ งเตรียมความสามารถของหน้าจอป้อนข้อมูล
 การควบคุมตัวกระพริบ
(Cursor)
 การแก ้ไขตัวเลขหรือข ้อมูล
้ าสงั่ ออก (Exit)
 การใชค
่ นชว่ ยเหลือ (Help)
 มีสว
30
โครงสร้างของการป้อนข้อมูล
(Structure Data Entry)
การออกแบบโครงสร ้างการป้ อนข ้อมูล คือ การ
่ งป้ อน
ออกแบบเพือ
่ กาหนดรูปแบบ หรือลักษณะของชอ
่ การ
ข ้อมูล เพือ
่ เตรียมความสะดวกให ้กับผู ้ใช ้ เชน
กาหนดค่าเริม
่ ต ้น การจัดวางข ้อมูล เป็ นต ้น
31
มีหลักเกณฑ์การออกแบบดังนี้








การป้อนข้อมูล (Entry) พยายามให ้ผู ้ใชป้้ อนข ้อมูลเท่าทีจ
่ าเป็ นเท่านัน
้
ค่าเริม
่ ต้น (Default Value) ค่าของข ้อมูลใดทีส
่ ามารถกาหนดค่าเริม
่ ให ้ได ้ ควรใส่
้ นที เพือ
่ วันที่ หรือหมายเลข Running Number เป็ น
ให ้ผู ้ใชที
่ เพิม
่ ความสะดวก เชน
ต ้น
ั เจน เชน
่ บาท ดอลลาร์ กิโลกรัม
หน่วยของข้อมูล (Unit) ระบุหน่วยข ้อมูลให ้ชด
เป็ นต ้น
่ งป้อนข้อมูล(Caption) แสดงคาอธิบายฟิ ลด์วา่
คาอธิบาย หรือ คาอธิบายชอ
้ ข
่ ้อมูลอะไร เป็ นจัดวางให ้เหมาะสม
ต ้องการให ้ผู ้ใชใส
ั ลักษณ์พเิ ศษ ควรเตรียม
รูปแบบของข้อมูล (Format) ถ ้าต ้องการให ้มีสญ
ั ลักษณ์เหล่านีใ้ ห ้อัตโนมัต ิ
สญ
่
การจ ัดวางข้อมูล(Justify) ออกแบบให ้มีการจัดวางข ้อมูลโดยอัตโนมัต ิ เชน
ิ ขวา ข ้อความชด
ิ ซาย
้ เป็ นต ้น
ตัวเลขชด
่ นชว
่ ยเหลือ (Help) เตรียมสว่ นชว่ ยเหลือระหว่างผู ้ใชป้้ อนข ้อมูล เชน
่ ปุ่ ม F1
สว
เพือ
่ ขออ่านคาอธิบาย
การติดต่อก ับผูใ้ ชใ้ นการป้อนข้อมูลด้วยกราฟิ ก (GUI)
32
้ บบกราฟิ ก
การติดต่อก ับผูใ้ ชแ
(Graphic User Interface: GUI)




เทคโนโลยีทน
ี่ ามาใช ้ เรียกว่า GUI Input Control
้
้
ชว่ ยให ้ผู ้ใชระบบสามารถใช
งานระบบได
้ง่ายขึน
้
ชว่ ยให ้ข ้อมูลทีน
่ าเข ้าสูร่ ะบบมีรป
ู แบบเดียวกัน
ชว่ ยป้ องกันความผิดพลาดในระหว่างการป้ อนข ้อมูล
33
รูปแบบของ GUI
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
Text Box
Radio Button
Check Button
List box
Drop-down List Box
Combination Box
(Combo Box)
Spin Box (Spinner
Box)
Menu bars
Toolbars
Dialog boxes
Toggle buttons
Scroll bars
Calendars
Status Bar
34
้ ทนเมนูหล ัก
ต ัวอย่างการใช ้ GUI ทีใ่ ชแ
ของระบบการให้เกรด น.ศ.
Back
Next
35
เมนูพลูดาวน์ (Pull-Down Menu)
36
หน้าต่างป๊อบอ ัฟ
(Pop-up Window)
37
แสดงเทคนิคทาง GUI 8 แบบในการนาข้อมูล
เข้าหรือเลือกคาสง่ ั
38
ตัวอย่าง Graphic User Interface
Radio Button
TextBox
ListBox
ComboBox
39
40
Common GUI Components
Text box
List
box
Drop
down
list
Can edit
Spin
box
Radio
button
Check
box
Button
41
Advanced GUI Components
42
Advanced GUI Components (continued)
43
Input Prototype for Data Maintenance
44
Input Prototype for Transaction
45
Input Prototype for Data Maintenance
46
Input Prototype for Web Interface
47
Input Prototype for Web Interface
48
การควบคุมความถูกต้องในระหว่าง
ป้อนข้อมูล (Controlling Data Input)





ควรตรวจสอบชนิดของข ้อมูล
ควรตรวจสอบการป้ อนข ้อมูลไม่ครบตามทีร่ ะบุไว ้
ควรตรวจสอบรูปแบบทีป
่ ้ อนข ้อมูล
ควรตรวจสอบค่าสูงสุดและตา่ สุดของข ้อมูล
ควรตรวจสอบความครบถ ้วนของข ้อมูลในแต่ละฟิ ลด์
49
การตอบสนองของระบบ
(Providing Feedback)
มีอยูด
่ ้วยกัน 3 ชนิด คือ
1.
2.
แจ ้งสถานะการทางาน (Status Information)
แสดงความพร ้อมในการรับคาสงั่ (Prompting
Cues)
3.
ข ้อความแจ ้งหรือเตือนเมือ
่ มีข ้อผิดพลาด
(Error/Warning Messages)
50
แจ ้งสถานะการทางาน (Status
Information)

้
่
แจ ้งให ้ผู ้ใชทราบถึ
งความสถานะปั จจุบันในกาทางานของระบบ เชน
แสดงเลขหน ้าทีก
่ าลังทางานอยู่

แสดงความคืบหน ้าในการประมวลผล

Combination of Text and Graphics for End User feedback
51
แสดงความพร ้อมในการรับคาสงั่
(Prompting Cues)

เป็ นการออกแบบเพือ
่ แจ ้งสถานะความพร ้อมในการรับคาสงั่
่ หน ้า Login เข ้าระบบ cursor กระพริบรอรับ username
เชน

หรือ กรุณาป้ อนรหัสวิชา :_ _ _-_ _ _

52
ข ้อความแจ ้งหรือเตือนเมือ
่ มีข ้อผิดพลาด
(Error/Warning Messages)

การแสดงข ้อความเมือ
่ เกิดข ้อผิดพลาด และแนะแนวทางในการ
้
แก ้ไข เพือ
่ อธิบายให ้ผู ้ใชสามารถแก
้ไขปั ญหาด ้วยตนเองได ้
53
่ นชว
่ ยเหลือ (Help)
การแสดงสว
แนวทางการใช ้ Help มีลก
ั ษณะ ดังนี้
1.
2.
3.
้
สามารถใชงานง่
าย (Simplicity)
มีการจัดรูปแบบอย่างเป็ นระเบียบ
(Organization)
มีการแสดงตัวอย่าง (Example)
54
ตัวอย่าง Help
Improved designed help display
Poorly designed help display
55
ตัวอย่าง Help
56
การออกแบบควบคุมการเข้าถึงข้อมูลของผูใ้ ช ้
1.
2.
3.
4.
จากัดความสามารถในการมองเห็นข ้อมูลจากฐานข ้อมูล
(View/Subschema)
ิ ธิในการเข ้าถึงข ้อมูล (Authorization Rules)
สท
การเข ้ารหัส (Encryption Procedures)
้
การตรวจสอบการเข ้าใชระบบ
(Authentication schemas)
57
ื่ มโยงจอภาพ
การออกแบบลาด ับการเชอ


เป็ นการออกแบบลาดับของการแสดงสว่ นติดต่อกับ
้
ผู ้ใชของโปรแกรม
หรือลาดับของการแสดงสว่ น
User Interface ทางหน ้าจอคอมพิวเตอร์
ื่ มโยงจอภาพ (Dialogues
แผนภาพแสดงลาดับการเชอ
่ น คือ
Diagram) ประกอบไปด ้วย 3 สว
1.
2.
3.
สว่ นบน: เลขลาดับหน ้าจอ
ื่ หน ้าจอการทางาน
สว่ นกลาง: ชอ
สว่ นล่าง: เลขลาดับหน ้าจอทีอ
่ ้างอิงมา ต่อไป หรือ
ย ้อนกลับ
58
Dialogues Diagram


Dialogues Diagram เป็ นแผนภาพแสดงลาดับการ
ื่ มโยงของจอภาพ
เชอ
ั ลักษณ์
สญ
เลขลาดับหน ้าจอ
ื่ หน ้าจอการทางาน
ชอ
เลขลาดับทีอ
่ ้างอิงมา
59
ตัวอย่าง Dialogue diagram for Customer Information System
60
แบบฝึ กหัด

ื้ Pizza โดยมี
ออกแบบ User Interface หน ้าจอรับคาสงั่ ซอ
รายละเอียดดังนี้





ื้ ทีร่ ้าน
ลูกค ้าโทรมาสงั่ Pizza หรือมาซอ
ั ท์ทเี่ คยโทรมา
ถ ้าโทรมาสงั่ สามารถตรวจสอบทีอ
่ ยูจ
่ ากเบอร์โทรศพ
ก่อนหน ้า ถ ้าเป็ นลูกค ้าใหม่ต ้อง input ข ้อมูลของลูกค ้าใหม่ด ้วย
ั่
แจ ้งข ้อมูลรายการ Pizza และโปรโมชน
ื้ และบอกราคารวม
เมือ
่ ลูกค ้าเลือกรายการเรียบร ้อยแล ้ว ทวนคาสงั่ ซอ
ิ้ และเวลาการจัดสง่
ทัง้ สน
และออกแบบใบเสร็จรับเงิน
61