Transcript Slide 1

สว่ นที่ 4
System Design
การออกแบบระบบ
Chapter 11
Graphic User Interface
การออกแบบสว่ นติดต่อผู ้ใช ้
System Development Life Cycle : SDLC
กิจกรรมในขนตอนนี
ั้
ไ้ ด้แก่
1. การออกแบบฟอร์มและรายงาน
2. การออกแบบ GUI
3. การออกแบบฐานข ้อมูล
11.2
Learning Objectives


11.3
อธิบายกระบวนการออกแบบสว่ นติดต่อกับผู ้ใช ้ และแผนภาพ
ื่ มโยงจอภาพได ้
แสดงลาดับการเชอ
สามารถประยุกต์ใชข้ ้อแนะนาในการออกแบบสว่ นติดต่อกับผู ้ใช ้
ึ ษาได ้
กับระบบงานทีท
่ าการศก
Topics
 กระบวนการในการออกแบบ User Interface
 รูปแบบของสว่ นติดต่อกับผู ้ใช ้
 การออกแบบ Interface
 ออกแบบการควบคุมการเข ้าถึงข ้อมูลของผู ้ใช ้
ื่ มโยงจอภาพ
 การออกแบบลาดับการเชอ
11.4
กระบวนการในการออกแบบ
User Interface
 User Interface หมายถึง
– สว่ นติดต่อระหว่างผู ้ใชกั้ บระบบ
้
– เพือ
่ การเตรียมสารสนเทศและการนาสารสนเทศนัน
้ ไปใชโดยการตอบโต
้
กับคอมพิวเตอร์
 Dialogues หมายถึง
ื่ มโยงจอภาพซงึ่ จะทาให ้ทราบว่าจอภาพหนึง่ จะเชอ
ื่ มโยงไป
– ลาดับการเชอ
ยังจอภาพใดต่อไป
11.5
รูปแบบของ User Interface
้
ิ ธิภาพ
 เพือ
่ ให ้ผู ้ใชงานสามารถโต
้ตอบกับระบบอย่างมีประสท
้
 นิยมใชแบบกราฟิ
ก (Graphic User Interface :GUI)
 มีรป
ู แบบดังนี้ คือ
– การโต ้ตอบด ้วยคาสงั่ (Command Language Interaction)
– การโต ้ตอบด ้วยเมนูคาสงั่ (Menu Interaction)
– การโต ้ตอบด ้วยแบบฟอร์ม (Form Interaction)
– การโต ้ตอบด ้วยการทางานเชงิ วัตถุ (Object-Based Interaction)
– การโต ้ตอบด ้วยภาษามนุษย์ (Natural Language Interaction)
11.7
การโต้ตอบด้วยคาสง่ ั (Command
Language Interaction)
• เป็ นการโต ้ตอบกับระบบโดยที่
้
ผู ้ใชจะต
้องพิมพ์คาสงั่ ลงใน
่ งป้ อนคาสงั่ เพือ
ชอ
่ กระตุ ้นให ้
เกิดการทางานในระบบ
้
• ผู ้ใชจะต
้องจาคาสงั่ ไวยากรณ์
และกฎเกณฑ์ตา่ งๆ
่ ผู ้ใชที
้ ช
• เชน
่ านาญการใช ้
ระบบปฏิบต
ั ก
ิ าร DOS
• ลดความนิยมในปั จจุบน
ั
คาสง่ ั copy ไฟล์จาก drive c: ไปย ัง drive a:
C:\copy ex1.doc a:ex1.doc
11.7
การโต้ตอบด้วยเมนูคาสง่ ั (Menu
Interaction)
้ จาเป็ นต ้องป้ อน
• เป็ นการโต ้ตอบกับระบบด ้วยการแสดงเมนูคาสงั่ โดยผู ้ใชไม่
คาสงั่ เอง
• รูปแบบเมนูมด
ี งั นี้ คือ
• Pull-down Menu
• Pop-up Menu
11.8
การโต้ตอบด้วยเมนูคาสง่ ั (Menu
Interaction)
Pull-down Menu เมนูแสดง
คาสงั่ โดยแบ่งรายการของคาสงั่
้ กจะ
เป็ นหมวดหมู่ เมือ
่ ผู ้ใชคลิ
แสดงรายการคาสงั่ จากบนลงล่าง
11.9
การโต้ตอบด้วยเมนูคาสง่ ั (Menu
Interaction)
Pop-up Menu เมนูแสดงคาสงั่
้ กเลือกวัตถุ
เมือ
่ ผู ้ใชคลิ
หรือ object ใด ๆ ในจอภาพ คาสงั่
หรือคุณสมบัตท
ิ เี่ กีย
่ วข ้องกับ
object นัน
้ จะถูกแสดงออกมา
11.10
หล ักเกณฑ์ในการออกแบบเมนูคาสง่ ั






11.11
ื่ ความหมายได ้ชด
ั เจน
แต่ละเมนูคาสงั่ ควรเลือกใชค้ าสงั่ ทีส
่ อ
ควรมีการใชตั้ วอักษรพิมพ์ใหญ่หรือตัวอักษรพิมพ์เล็กตามความเหมาะสม
ควรมีการจัดกลุม
่ คาสงั่ ทีม
่ ค
ี วามเกีย
่ วข ้องกันไว ้ในกลุม
่ เดียวกัน
ไม่ควรมีจานวนเมนูคาสงั่ มากเกินไป
ควรมีเมนูยอ
่ ยสาหรับเมนูคาสงั่ ทีม
่ ก
ี ารทางานย่อยภายในมากเกินไป
ี รากฏทีเ่ มนูคาสงั่ ทีถ
เมือ
่ มีการเลือกเมนูคาสงั่ ควรออกแบบให ้มีแถบสป
่ ก
ู
เลือก
การโต้ตอบด้วยแบบฟอร์ม
(Form Interaction)
้
่ งว่างทีอ
• เป็ นการโต ้ตอบทีผ
่ ู ้ใชระบบจะต
้องป้ อนข ้อมูลลงในชอ
่ ยูใ่ นแบบฟอร์มที่
แสดงหน ้าจอคอมพิวเตอร์
• คล ้ายการกรอกแบบฟอร์มลงในกระดาษ
ื่ ของชอ
่ งป้ อนข ้อมูลต ้องสอ
ื่ ความหมาย
• ชอ
• แบ่งสว่ นของข ้อมูลบนฟอร์มให ้เหมาะสม
่ งป้ อนข ้อมูลทีต
• ควรแสดงข ้อมูลเริม
่ ต ้นให ้กับชอ
่ ้องใชข้ ้อมูลนัน
้ บ่อยครัง้
่ งป้ อนข ้อมูลไม่ควรยาวมากจนเกินไป
• ชอ
11.12
การโต้ตอบด้วยแบบฟอร์ม
(Form Interaction)
11.13
การโต้ตอบเชงิ ว ัตถุ
(Object-Based Interaction)
ั ลักษณ์
• เป็ นการโต ้ตอบกับระบบทีใ่ ชส้ ญ
ั ลักษณ์เป็ นตัวแทนคาสงั่ ทีใ่ ชในการปฏิ
้
• สญ
บต
ั งิ าน
ั ลักษณ์รป
• สญ
ู ภาพแทนคาสงั่ การทางานเรียกว่า ไอคอน
(Icon)
• ประหยัดพืน
้ ทีบ
่ นหน ้าจอ
11.14
การโต้ตอบด้วยภาษามนุษย์
(Natural Language Interaction)
้ ย
ี งพูดของผู ้ใชระบบ
้
• เป็ นการโต ้ตอบกับระบบด ้วยการใชเส
้ ย
ี งพูดทัง้ การนาข ้อมูลเข ้าและออกจากระบบ
• ใชเส
11.15
การออกแบบ Interfaces







การออกแบบการจัดวาง (Layouts) ของหน ้าจอ
โครงสร ้างของการป้ อนข ้อมูล (Structure Data Entry)
การควบคุมความถูกต ้องในระหว่างป้ อนข ้อมูล (Controlling Data Input)
การตอบสนองของระบบ (Providing Feedback)
การแสดงสว่ นชว่ ยเหลือ (Help)
การออกแบบการควบคุมการเข ้าถึงข ้อมูลของผู ้ใช ้
ื่ มโยงจอภาพ (Dialogue Design)
การออกแบบลาดับการเชอ
11.16
การออกแบบการจ ัดวางของหน้าจอ







11.17
้
ื่ ของเอกสารหรือฟอร์มนัน
สว่ นหัวเรือ
่ ง: ใชแสดงช
อ
้ ๆ
้
สว่ นแสดงลาดับและวันที:่ ใชแสดงเลขล
าดับและวันทีห
่ รือเวลา
้ บายข ้อแนะนาการใชฟอร์
้
สว่ นแนะนาหรือแนวทางในการใช:้ ใชอธิ
ม
้
สว่ นรายละเอียดข ้อมูล: ใชแสดงสาระส
าคัญของเอกสารหรือฟอร์ม
้
่ ยอดเงิน ยอดขาย เป็ นต ้น
สว่ นแสดงผลรวม: ใชแสดงค่
าผลรวม เชน
้
สว่ นการลงนามผู ้มีอานาจ: ใชแสดงนามผู
้มีอานาจของเอกสารหรือฟอร์ม
้
สว่ นแสดงความคิดเห็น: ใชในการเขี
ยนข ้อความทีเ่ ป็ นความคิดเห็น
การออกแบบการจ ัดวางของหน้าจอ
11.18
การออกแบบการจ ัดวางของหน้าจอ
11.19
การออกแบบการจ ัดวางของหน้าจอ
 การออกแบบหน ้าจอทัง้ หมดมีจด
ุ มุง่ หมาย 2 อย่าง คือ เพือ
่ นาเสนอข ้อมูลและ
้
ชว่ ยในการปฏิบต
ั งิ านในการใชระบบ
มีแนวทางมากมายในการออกแบบทีต
่ ้อง
้
พิจารณาคือหน ้าจอทัง้ หมดทีป
่ รากฏควรดึงดูดใจให ้อยากใชงาน
ไม่ควรแน่น
เกินไป
 การออกแบบหน ้าจอของฟอร์มหรือรายงานต่างๆ ควรจะจัดวางรูปแบบให ้
เหมือนกับเอกสารมากทีส
่ ด
ุ
ื่ มโยงการป้ อนข ้อมูลในแต่ละรายการหรือแต่ละฟิ ลด์
 การเชอ
ื่ มโยงในการป้ อนข ้อมูลในแต่ละฟิ ลด์
 ต ้องลาดับการเชอ
 การกรอกจะคล ้ายกับการกรอกบนเอกสารจริง
้
 เริม
่ กรอกจากซายไปขวา
และจากบนลงล่าง
 ควรมีความยืดหยุน
่ และสอดคล ้องในการทางาน สามารถย ้าย Cursor ไป
มาระหว่างฟิ ลด์ทต
ี่ ้องการแก ้ไข
11.20
การออกแบบหน้าจอร ับข้อมูล
1. เมือ
่ เข ้าไปทีห
่ น ้าจอรับข ้อมูลเคอร์เซอร์ (Cursor) ต ้องอยูท
่ ต
ี่ าแหน่งแรกของ
้ อ หลังจากผู ้ใช ้
ข ้อมูลรับตามเนือ
้ หาของหน ้าจอนัน
้ ตาแหน่งนัน
้ ควรอยูม
่ ม
ุ บนซายมื
่ ้อมูลแล ้วเคอร์เซอร์ (Cursor) ควรเลือ
่ งรับข ้อมูลถัดไปเสมอ คือ
ใสข
่ นไปทีช
่ อ
้
ด ้านล่างหรือด ้านข ้างถัดไปเพือ
่ ให ้การป้ อนข ้อมูลเป็ นธรรมชาติจากบนซายไปขวา
แล ้วจึงลงมาบรรทัดใหม่
่ งรับข ้อมูลต ้องมีคาอธิบาย โดยแสดงกากับทีช
่ งนัน
2. ทุกชอ
่ อ
้ ซงึ่ จะต ้องระบุให ้
ั เจนและอยูใ่ นตาแหน่งทีถ
้ สบ
ั สน
ชด
่ ก
ู ต ้องและควรมีรป
ู แบบเดียวกันเพือ
่ ให ้ผู ้ใชไม่
ในการทางาน
่ งรับข ้อมูลนัน
3. ถ ้าชอ
้ มีรป
ู แบบเฉพาะให ้แสดงรูปแบบเฉพาะนัน
้ เพือ
่ ใหผู้ ้ใชป้้ อน
ข ้อมูลไม่ผด
ิ พลาด
่ งรับข ้อมูลนัน
้ “Enter” เพือ
4. ในทุกครัง้ ทีป
่ ้ อนข ้อมูลในชอ
้ ครบถ ้วนให ้ผู ้ใชกด
่ ไป
่ งรับข ้อมูลถัดไปหรือในกรณีทใี่ สข
่ ้อมูลเท่าจานวนของข ้อมูลนัน
ยังชอ
้ แล ้ว เคอร์
่ งรับข ้อมูลถัดไปอัตโนมัตเิ พือ
เซอร์ควรไปยังชอ
่ รับข ้อมูลถัดไป เพือ
่ อานวยความ
สะดวก
11.21
การออกแบบหน้าจอร ับข้อมูล
่ วั อักษร
5. กรณีข ้อมูลรับเข ้าเป็ นตัวอักษรพิเศษแล ้วควรออกแบบให ้สามารถใสต
้ ต ้องใสเ่ อง
พิเศษอัตโนมัตโิ ดยผู ้ใชไม่
้ ต ้อง
6. กรณีข ้อมูลรับเข ้าต ้องการแสดงผลรับเป็ นเลข “0” ให ้แสดงโดยผู ้ใชไม่
ป้ อนเอง
7. กรณีทข
ี่ ้อมูลรับเข ้าเป็ นจานวนเลขทีน
่ าไปคานวณค่าควรมี “,” คัน
่ หลักพันหรือ
จุดทศนิยมขึน
้ อัตโนมัต ิ
่ งรับข ้อมูลนัน
8. กรณีชอ
้ มีคา่ ทีส
่ ามารถกาหนด (Default) ได ้ ระบบนัน
้ ควรแสดง
่ งนัน
ค่าทีก
่ าหนดนัน
้ (Default) ทีช
่ อ
้
9. สาหรับข ้อมูลรับทีเ่ ป็ นรหัสทีต
่ ้องมีการตรวจสอบก่อนบันทึก คือ ค่านัน
้ มี
ั พันธ์กบ
ความสม
ั ค่าอืน
่ ทีบ
่ น
ั ทึกไว ้เดิมแล ้ว เมือ
่ มีการป้ อนรหัสนัน
้ ต ้องรับค่านัน
้ ไป
ตรวจสอบทีแ
่ ฟ้ มข ้อมูลทีอ
่ ้างถึง
้
10. ควรมีปมค
ุ่ าสงั่ ต่าง ๆ ตามความเหมาะสมของการใชงานหน
้าจอนัน
้
11. หลังจากป้ อนข ้อมูลในหน ้าจอนัน
้ ๆ สมบูรณ์แล ้วและได ้รับการตรวจสอบแล ้ว
้ ้ตรวจสอบและยืนยันหรือยกเลิกก่อนบันทึกข ้อมูลเข ้าเครือ
ควรมีการใชผู้ ้ใชได
่ ง
11.22
การออกแบบหน้าจอร ับข้อมูล
11.23
การออกแบบหน้าจอร ับข้อมูล
11.24
สงิ่ ทีต
่ อ
้ งเตรียมความสามารถของหน้าจอ
ป้อนข้อมูล




การควบคุมตัวกระพริบ (Cursor)
การแก ้ไขตัวเลขหรือข ้อมูล
การใชค้ าสงั่ ออก (Exit)
มีสว่ นชว่ ยเหลือ (Help)
11.25
โครงสร้างของการป้อนข้อมูล
(Structure Data Entry)
การออกแบบโครงสร ้างการป้ อนข ้อมูล คือ การออกแบบเพือ
่ กาหนดรูปแบบ
่ งป้ อนข ้อมูล เพือ
่ การ
หรือลักษณะของชอ
่ เตรียมความสะดวกให ้กับผู ้ใช ้ เชน
กาหนดค่าเริม
่ ต ้น การจัดวางข ้อมูล เป็ นต ้น
11.26
หล ักเกณฑ์การออกแบบ
 การป้อนข้อมูล (Entry) พยายามให ้ผู ้ใชป้้ อนข ้อมูลเท่าทีจ
่ าเป็ นเท่านัน
้
 ค่าเริม
่ ต้น (Default Value) ค่าของข ้อมูลใดทีส
่ ามารถกาหนดค่าเริม
่ ให ้ได ้
้ นที เพือ
่ วันที่ หรือหมายเลข Running
ควรใสใ่ ห ้ผู ้ใชทั
่ เพิม
่ ความสะดวก เชน
Number เป็ นต ้น
ั เจน เชน
่ บาท ดอลลาร์
 หน่วยของข้อมูล (Unit) ระบุหน่วยข ้อมูลให ้ชด
กิโลกรัม เป็ นต ้น
่ งป้อนข้อมูล(Caption) แสดงคาอธิบายฟิ ลด์
 คาอธิบาย หรือ คาอธิบายชอ
้ ข
่ ้อมูลอะไร เป็ นจัดวางให ้เหมาะสม
ว่าต ้องการให ้ผู ้ใชใส
ั ลักษณ์พเิ ศษ ควรเตรียม
 รูปแบบของข้อมูล (Format) ถ ้าต ้องการให ้มีสญ
ั ลักษณ์เหล่านีใ้ ห ้อัตโนมัต ิ
สญ
่
 การจ ัดวางข้อมูล(Justify) ออกแบบให ้มีการจัดวางข ้อมูลโดยอัตโนมัต ิ เชน
ิ ขวา ข ้อความชด
ิ ซาย
้ เป็ นต ้น
ตัวเลขชด
11.27
หล ักเกณฑ์การออกแบบ
่ ยเหลือ (Help) เตรียมสว่ นชว่ ยเหลือระหว่างผู ้ใชป้้ อนข ้อมูล เชน
่ ปุ่ ม
 สว่ นชว
F1 เพือ
่ ขออ่านคาอธิบาย
 การติดต่อก ับผูใ้ ชใ้ นการป้อนข้อมูลด้วยกราฟิ ก (GUI)
11.28
้ บบกราฟิ ก
การติดต่อก ับผูใ้ ชแ
(Graphic User Interface: GUI)




เทคโนโลยีทน
ี่ ามาใช ้ เรียกว่า GUI Input Control
้
้
ชว่ ยให ้ผู ้ใชระบบสามารถใช
งานระบบได
้ง่ายขึน
้
ชว่ ยให ้ข ้อมูลทีน
่ าเข ้าสูร่ ะบบมีรป
ู แบบเดียวกัน
ชว่ ยป้ องกันความผิดพลาดในระหว่างการป้ อนข ้อมูล
11.29
้ บบกราฟิ ก
การติดต่อก ับผูใ้ ชแ
(Graphic User Interface: GUI)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
11.30
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
้ บบกราฟิ ก
การติดต่อก ับผูใ้ ชแ
(Graphic User Interface: GUI)
Radio Button
TextBox
ComboBox
11.31
ListBox
การควบคุมความถูกต้องในระหว่างป้อน
ข้อมูล (Controlling Data Input)





ควรตรวจสอบชนิดของข ้อมูล
ควรตรวจสอบการป้ อนข ้อมูลไม่ครบตามทีร่ ะบุไว ้
ควรตรวจสอบรูปแบบทีป
่ ้ อนข ้อมูล
ควรตรวจสอบค่าสูงสุดและตา่ สุดของข ้อมูล
ควรตรวจสอบความครบถ ้วนของข ้อมูลในแต่ละฟิ ลด์
11.32
การตอบสนองของระบบ
(Providing Feedback)
มีอยูด
่ ้วยกัน 3 ชนิด คือ
1. แจ ้งสถานะการทางาน (Status Information)
2. แสดงความพร ้อมในการรับคาสงั่ (Prompting Cues)
3. ข ้อความแจ ้งหรือเตือนเมือ
่ มีข ้อผิดพลาด (Error/Warning Messages)
11.33
แจ้งสถานะการทางาน
(Status Information)
้
่
 แจ ้งให ้ผู ้ใชทราบถึ
งความสถานะปั จจุบน
ั ในกาทางานของระบบ เชน
 แสดงเลขหน ้าทีก
่ าลังทางานอยู่
 แสดงความคืบหน ้าในการประมวลผล
Combination of Text and Graphics for End User feedback
11.34
แสดงความพร้อมในการร ับคาสง่ ั
(Prompting Cues)
 เป็ นการออกแบบเพือ
่ แจ ้งสถานะความพร ้อมในการรับคาสงั่
่ หน ้า Login เข ้าระบบ cursor กระพริบรอรับ username
 เชน
 หรือ กรุณาป้ อนรหัสวิชา :_ _ _-_ _ _
11.35
ข้อความแจ้งหรือเตือนเมือ
่ มีขอ
้ ผิดพลาด
(Error/Warning Messages)
 การแสดงข ้อความเมือ
่ เกิดข ้อผิดพลาด และแนะแนวทางในการแก ้ไข เพือ
่
้
อธิบายให ้ผู ้ใชสามารถแก
้ไขปั ญหาด ้วยตนเองได ้
11.36
่ นชว
่ ยเหลือ (Help)
การแสดงสว
แนวทางการใช ้ Help มีลก
ั ษณะ ดังนี้
้
1. สามารถใชงานง่
าย (Simplicity)
2. มีการจัดรูปแบบอย่างเป็ นระเบียบ (Organization)
3. มีการแสดงตัวอย่าง (Example)
11.37
่ นชว
่ ยเหลือ (Help)
การแสดงสว
Poorly designed help display
11.38
Improved designed help display
การออกแบบควบคุมการเข้าถึง
ข้อมูลของผูใ้ ช ้
1.
2.
3.
4.
11.39
จากัดความสามารถในการมองเห็นข ้อมูลจากฐานข ้อมูล
(View/Subschema)
ิ ธิในการเข ้าถึงข ้อมูล (Authorization Rules)
สท
การเข ้ารหัส (Encryption Procedures)
้
การตรวจสอบการเข ้าใชระบบ
(Authentication schemas)
ื่ มโยงจอภาพ
การออกแบบลาด ับการเชอ


้
เป็ นการออกแบบลาดับของการแสดงสว่ นติดต่อกับผู ้ใชของโปรแกรม
หรือ
ลาดับของการแสดงสว่ น User Interface ทางหน ้าจอคอมพิวเตอร์
ื่ มโยงจอภาพ (Dialogues Diagram) ประกอบ
แผนภาพแสดงลาดับการเชอ
ไปด ้วย 3 สว่ น คือ
1. สว่ นบน: เลขลาดับหน ้าจอ
ื่ หน ้าจอการทางาน
2. สว่ นกลาง: ชอ
3. สว่ นล่าง: เลขลาดับหน ้าจอทีอ
่ ้างอิงมา ต่อไป หรือ ย ้อนกลับ
เลขลาดับหน ้าจอ
ื่ หน ้าจอการทางาน
ชอ
เลขลาดับทีอ
่ ้างอิงมา
11.40
Reference Book and Text Book
ตาราอ้างอิง
 การวิเคราะห์และออกแบบระบบ กิตติ ภักดีวฒ
ั นกุล และพนิดา
พานิชกุล
 Modern Systems Analysis & Design : Jeffrey A. Hoffer,
Joey F.George, Joseph S. Valacich
11.41
Q&A
11.42