หนวยที่ 11: การสวนปฏิสัมพันธกับผูใช

(Human Computer Interaction

Layer Design)

ดร.สุขสถิต มีสถิตย
การวิเคราะหและออกแบบเชิงวัตถุ
2/2550

1 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 วัตถุประสงค

z เพื่อใหนก
ั ศึกษา
– เขาใจหลักการพื้นฐานในการออกแบบสวนติดตอ
ผูใช
– เขาใจกระบวนการออกแบบสวนติดตอผูใช
– เขาใจหลักการและเทคนิคในการออกแบบ
องคประกอบตางๆ ของสวนติดตอผูใช
– สามารถออกแบบสวนติดตอผูใชได

2 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 สวนประกอบพื้นฐานของสวนติดตอ
ผูใช

z กลไกเนวิเกชัน -> วิธีการทีผ่ ูใชในการบอกระบบวาตองทํา

อะไร
z กลไกอินพุต -> วิธีที่ระบบรับขอมูล
z กลไกเอาทพุต -> วิธีทรี่ ะบบแสดงขอมูลตอผูใ ชหรือระบบ
อืน
่

3 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 สวนติดตอผูใ ชแบบกราฟก

z Graphical user interface (GUI)

– เนนการใชจัดการกับออบเจ็คบนหนาจอที่เปรียบเปนพื้น
โตะทํางานโดยใชเมาส
– เปนรูปแบบการติดตอกับผูใชที่มักพบในปจจุบัน

4 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 หลักการออกแบบสวนติดตอผูใช

z การแบงสวนของพื้นที่
z การตระหนักในเนื้อหา
z ความสม่ําเสมอ (Consistency)
z ความสวยงาม
z ประสบการณของผูใช
z ลดการทํางานของผูใช

5 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 กระบวนการออกแบบสวนติดตอผูใช

พัฒนา
แผนการใชงาน

ออกแบบ
ประเมิน
โครงสราง
สวนติดตอผูใช
สวนติดตอผูใช

สรางตนแบบการ ออกแบบ
ออกแบบ มาตรฐาน
สวนติดตอผูใช สวนติดตอผูใช

6 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 พัฒนาแผนการใชงาน

z แผนการใชงาน (use scenario) = รางขัน ้ ตอนที่

ผูใชแสดงเพื่อทํางานสวนหนึง่ ของตนใหสําเร็จ
z สรางจากยูสเคส
z สรางแผนการใชงานมักที่เกิดขึ้นมากที่สุด

7 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 ตัวอยาง

z แผนการใชงาน (use scenario): ผูซื้อที่รีบเรง ผูใช

รูสิ่งที่ตองการ และตองการดวน
1. ผูใชจะคนหาศิลปนหรือซีดห ี นึง่ โดยเฉพาะ
2. ผูใชจะดูราคา และอาจดูขอมูลอืน ่
3. ผูใชจะสัง่ ซื้อ หรือทําการคนหาอื่น

8 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 ออกแบบโครงสรางสวนติดตอผูใ ช

z กําหนดองคประกอบพื้นฐานของสวนติดตอผูใช
และการทํางานรวมกันขององคประกอบ
z ใช window navigation diagram (WND)

9 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 ตัวอยาง

10 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 ออกแบบมาตรฐานสวนติดตอผูใช

z มาตรฐานสวนติดตอ (interface standards) =

องคประกอบพืน
้ ฐานที่ใชรวมกันระหวางหนาจอ
ฟอรม และรายงานแตละตัวในระบบ
z ประกอบดวย
– Templates
– Metaphors
– Objects
– Actions
– Icons

11 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 สรางตนแบบการออกแบบ
สวนติดตอผูใช

z สตอรีบอรด (Storyboard)
z ตนแบบที่ใช (HTML Prototype)
z ตนแบบที่ใชภาษาโปรแกรม (Language Prototype)

12 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 ประเมินสวนติดตอผูใ ช

z การประเมินสวนติดตอผูใช (Interface
Evaluation)
– ตรวจสอบเทียบกับหลักการออกแบบ (Heuristic)
– ทําตาม (Walkthrough)
– ปฏิสัมพันธ (Interactive)
z ทดสอบการใชงานอยางเปนทางการ (Formal
Usability Testing)
– 5-10 คน

13 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 การออกแบบระบบเนวิเกชัน
(NAVIGATION DESIGN)

14 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 หลักการพืน
้ ฐาน
z งายตอการเรียนรู
– คาดวาผูใช
z ไมตองอานคูมือ
z ไมตองผานการอบรม
z ไมมีตัวชวยภายนอก
– ตัวควบคุมทั้งหมดควรชัดเจน และเขาใจงาย และวางไวในตําแหนง
ที่เหมาะสม

15 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 หลักการพืน
้ ฐาน

z ปองกันความผิดพลาด
– จํากัดทางเลือก
– ไมแสดงคําสั่งที่ใชไมได หรือไมใหเลือกได
– ใหยืนยันกระทําที่ไมสามารถยอนกลับได
z งายตอการแกไขเมือ
่ กระทําผิดพลาด
z ใชรูปแบบการสั่งงานที่สม่าํ เสมอ
z จํากัดขั้นตอนในการสั่งงาน
– การสั่งงานหนึ่งงานไมคลิกเมาสเกิน 3 เมาสจากเมนู
หลัก

16 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 ประเภทของการควบคุมเนวิเกชัน (Types
of Navigation Control)

z ภาษา
– ภาษาคําสั่ง
– ภาษาธรรมชาติ
z เมนู
z การควบคุมโดยตรง (Direct Manipulation)
– กระทํากับออบเจ็คโดยตรง
z เพื่อเปดโปรแกรม
z เพื่อยอ/ขยายขนาด
– ไมสามารถใชไดกบ
ั ทุกคําสั่ง

17 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 ประเภทของเมนู

Types of Menus When

Would You
Menu bar
Drop-down menu
Use Each of
Pop-up menu These Menu
Tab menu Types?
Toolbar
Image map

18 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 ตัวอยางเมนูของโปรแกรมบน UNIX

19 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 ประเภทของเมนู

20 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 ตัวอยางของ Image Map

21 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 การออกแบบเมนู

z กวาง และตื้น
z แตละเมนูไมควรมีเกิน 8 คําสั่ง
z ใช “hot keys”
เพื่อจํานวนการคลิก หรือกดคียใหเหลือนอย

22 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 ขอแนะนําในการใชเมสเสจ

z ควรชัดเจน กระชับ และสมบูรณ

z ควรถูกตองการหลักภาษา และไมมค
ี ําเฉพาะหรือ
คํายอ
z อยาใชถอ
 ยคําในเชิงลบ

23 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 ประเภทของเมสเสจ

Types of Messages When

Would You
Error message
Use Each of
Confirmation message These
Acknowledgment message Message
Delay message Types?
Help message

24 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 ตัวอยางการเขียน Error Message

25 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 การบันทึกการออกแบบเนวิเกชัน

z ใช window navigation diagram (WND)

26 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 การออกแบบการรับขอมูล
(INPUT DESIGN)

27 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 หลักการพื้นฐาน

z วัตถุประสงคคือ เพือ ่ ใหนําขอมูลที่ถก

ู ตองแมนยํา
เขาสูร ะบบทําไดงาย
z หลักการ
– สะทอนถึงธรรมชาติของขอมูลทีน
่ ําเขา
z Online processing
z Batch processing
z หาวิธีรับขอมูลที่งายและสะดวก
– การรับขอมูลตรงจากแหลง
– ลดจํานวนการกดคีย

28 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 การรับขอมูลตรงจากแหลง

z ขอดี
– ลดการทํางานซ้าํ
– ลดเวลาประมวล
– ลดตนทุน
– ลดโอกาสในการเกิดขอผิดพลาด
z การรับขอมูลจากแหลงแบบอัตโนมัติ (Source
Data Automation)
z การรับขอมูลตรงแหลงผานการพิมพ

29 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 การรับขอมูลจากแหลงแบบอัตโนมัติ
(Source Data Automation)

z การใชอุปกรณพิเศษเพือ
่ รับขอมูลโดยไมใชการ
พิมพ เชน การใชเทคโนโลยี
– bar code readers
– optical character recognition
– magnetic stripe readers
– smart cards

30 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 ลดจํานวนการกดคีย

z ไมถามขอมูลทีส ่ ามารถหาจากทางอื่นได
z การเลือกจากรายการ มีประสิทธิภาพมากกวาการ
ปอนขอมูล
z ใชคาปกติเมือ
่ เปนไปได

31 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 ประเภทของขอมูลนําเขา (Input)

z ตัวอักษร
z ตัวเลข
z ตัวเลือก

32 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 ประเภทของเครื่องมือรับขอมูล (Input
Boxes)

33 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 ประเภทของเครื่องมือตัวเลือก (Selection
Boxes)

Types of Boxes When

Would You
Check box
Radio button
Use Each of
On-screen list box These
Drop-down list box Box
Combo box Types?
Slider

34 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 ประเภทของการตรวจสอบอินพุต (Input
Validation)

Types of Validation When

Would You
Completeness check
Format check
Use Each of
Range check These
Check digit check Validation
Consistency check Methods?
Database checks

35 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 ออกแบบ Input

z ฟอรมไมแนนเกินไป
z ฟอรมหนีง่ ไมควรแยกเปนหลายหนา
z เรียงองคประกอบเปนลําดับ
z กําหนดอุปกรณรับขอมูล
z กําหนดวิธีรับขอมูล
– จากแหลงขอมูลโดยตรง
– ผานตัวกลาง
z กําหนดการตรวจสอบอินพุต

36 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 การออกแบบการแสดงผล
(OUTPUT DESIGN)

37 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 หลักการพื้นฐาน

z วัตถุประสงคเพือ
่ นําเสนอขอมูลในรูปที่ผูใชเขาใจ
ไดถูกตอง โดยใชความพยายามนอย
z หลักการ
– เขาใจการใชงานรายงาน
z เพื่ออางอิง หรืออานโดยละเอียด
z ความถี่ในการรายงาน (Real-time หรือ batch reports?)
– จัดการปริมาณขอมูลใหเหมาะสม
z ทุกขอมูลที่ตองการ ไมมีนอกเหนือ
– จํากัดความลําเอียง

38 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 Bias in Graphs

39 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 ประเภทของรายงาน

Types of Reports When

Would You
Detail reports
Use Each of
Summary report These
Turnaround document Report
Graphs Types?

40 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 สื่อแสดงรายงาน

Electronic

Versus Paper

41 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 ออกแบบ Output

z รายละเอียดชัดเจน
z แบงสวนตามลําดับ
z กําหนดสือ
่

42 OOAD 1/2550 ดร.สุขสถิต มีสถิตย

 แบบฝกหัด

z ออกแบบอินเตอรเฟส (3 คน)
– Use scenario: ผูซ ื้อทีค
่ นหาสินคา ผูใชไมแนใจวา
ตองการซือ้ อะไร และอาจเลือกดูซด ี ีหลายแบบ
1. กําหนดขั้นตอนใน Use scenario
2. ออกแบบโครงสรางและมาตรฐาน
3. วาด Storyboard พรอมระบุรายละเอียดของคลาสและ
ออบเจ็คที่ใช

43 OOAD 1/2550 ดร.สุขสถิต มีสถิตย