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