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

หนวยที่ 9

การออกแบบสวนปฏิสัมพันธกับผูใช (Human Computer Interaction

Layer Design)

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

วัตถุประสงคเพื่อใหนักศึกษา

เขาใจหลกัการพื้นฐานในการออกแบบสวนติดตอผูใช

เขาใจกระบวนการออกแบบสวนติดตอผูใช

เขาใจหลกัการและเทคนคิในการออกแบบองคประกอบตางๆ ของสวนติดตอผูใช

สามารถออกแบบสวนติดตอผูใชได

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

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

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

สวนติดตอผูใชแบบกราฟกGraphical user interface (GUI) เนนการใชจัดการกับออบเจ็คบนหนาจอที่เปรียบเปนพื้นโตะทํางานโดยใชเมาส เปนรปูแบบการตดิตอกบัผูใชที่มักพบในปจจุบัน

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

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

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

กระบวนการออกแบบสวนติดตอผูใชพัฒนา

แผนการใชงาน

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

สรางตนแบบการออกแบบ

สวนติดตอผูใช

ออกแบบโครงสราง

สวนติดตอผูใช

ออกแบบมาตรฐาน

สวนติดตอผูใช

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

พัฒนาแผนการใชงานแผนการใชงาน (use scenario) = รางขัน้ตอนที่ผูใชแสดงเพื่อทํางานสวนหนึง่ของตนใหสําเร็จสรางจากยูสเคสสรางแผนการใชงานมกัที่เกดิขึ้นมากที่สุด

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

ตัวอยางแผนการใชงาน (use scenario): ผูซื้อที่รีบเรง ผูใชรูสิ่งทีต่องการ และตองการดวน

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

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

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

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

ตัวอยาง

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

ออกแบบมาตรฐานสวนติดตอผูใชมาตรฐานสวนติดตอ (interface standards) = องคประกอบพืน้ฐานที่ใชรวมกันระหวางหนาจอ ฟอรม และรายงานแตละตัวในระบบประกอบดวย

TemplatesMetaphorsObjectsActionsIcons

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

สรางตนแบบการออกแบบสวนติดตอผูใชสตอรีบอรด (Storyboard)ตนแบบทีใ่ช HTML (HTML Prototype)ตนแบบทีใ่ชภาษาโปรแกรม (Language Prototype)

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

ประเมินสวนติดตอผูใชการประเมนิสวนติดตอผูใช (Interface Evaluation)ตรวจสอบเทียบกบัหลักการออกแบบ (Heuristic)ทําตาม (Walkthrough)ปฏิสัมพันธ (Interactive)

ทดสอบการใชงานอยางเปนทางการ (Formal Usability Testing)

5-10 คน

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

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

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

หลักการพื้นฐานงายตอการเรียนรูคาดวาผูใชไมตองอานคูมือไมตองผานการอบรมไมมีตวัชวยภายนอก

ตัวควบคุมทัง้หมดควรชดัเจน และเขาใจงาย และวางไวในตําแหนงที่เหมาะสม

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

หลักการพื้นฐานปองกันความผิดพลาดจํากัดทางเลือกไมแสดงคําสั่งที่ใชไมได หรอืไมใหเลือกไดใหยืนยนักระทําทีไ่มสามารถยอนกลับได

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

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

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

เมนูการควบคุมโดยตรง (Direct Manipulation)กระทาํกับออบเจ็คโดยตรง

เพื่อเปดโปรแกรมเพื่อยอ/ขยายขนาด

ไมสามารถใชไดกบัทุกคาํสั่ง

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

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

Types of Menus

Menu barDrop-down menuPop-up menuTab menuToolbarImage map

WhenWould YouUse Each ofThese MenuTypes?

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

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

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

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

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

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

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

การออกแบบเมนูกวาง และตื้น

แตละเมนูไมควรมีเกิน 8 คําสั่ง

ใช “hot keys”เพื่อจาํนวนการคลิก หรือกดคียใหเหลอืนอย

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

ขอแนะนําในการใชเมสเสจควรชดัเจน กระชบั และสมบูรณควรถูกตองการหลกัภาษา และไมมคีําเฉพาะหรือคํายออยาใชถอยคําในเชงิลบ

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

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

Types of Messages

Error messageConfirmation messageAcknowledgment messageDelay messageHelp message

WhenWould YouUse Each ofThese MessageTypes?

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

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

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

การบันทึกการออกแบบเนวิเกชัน ใช window navigation diagram (WND)

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

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

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

หลักการพื้นฐานวัตถุประสงคคือ เพือ่ใหนําขอมูลที่ถกูตองแมนยําเขาสูระบบทําไดงายหลกัการสะทอนถึงธรรมชาติของขอมูลทีน่ําเขา

Online processingBatch processing

หาวิธีรับขอมูลที่งายและสะดวกการรับขอมูลตรงจากแหลงลดจํานวนการกดคีย

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

การรบัขอมูลตรงจากแหลงขอดีลดการทํางานซ้าํลดเวลาประมวลลดตนทนุลดโอกาสในการเกิดขอผิดพลาด

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

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

การรับขอมูลจากแหลงแบบอัตโนมัติ (Source Data Automation)การใชอุปกรณพิเศษเพือ่รับขอมลูโดยไมใชการพิมพ เชน การใชเทคโนโลยี

bar code readersoptical character recognitionmagnetic stripe readerssmart cards

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

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

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

ประเภทของขอมูลนําเขา (Input)ตัวอักษรตัวเลขตัวเลอืก

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

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

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

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

Types of Boxes

Check boxRadio buttonOn-screen list boxDrop-down list boxCombo boxSlider

WhenWould YouUse Each ofThese BoxTypes?

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

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

Types of Validation

Completeness checkFormat checkRange checkCheck digit checkConsistency checkDatabase checks

WhenWould YouUse Each ofThese ValidationMethods?

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

ออกแบบ Inputฟอรมไมแนนเกินไปฟอรมหนีง่ไมควรแยกเปนหลายหนาเรียงองคประกอบเปนลําดับกําหนดอปุกรณรับขอมลูกําหนดวิธีรับขอมลูจากแหลงขอมูลโดยตรงผานตวักลาง

กําหนดการตรวจสอบอนิพุต

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

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

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

หลักการพื้นฐานวัตถุประสงคเพือ่นําเสนอขอมลูในรปูที่ผูใชเขาใจไดถูกตอง โดยใชความพยายามนอยหลกัการเขาใจการใชงานรายงาน

เพื่ออางอิง หรืออานโดยละเอียดความถี่ในการรายงาน (Real-time หรือ batch reports?)

จัดการปรมิาณขอมูลใหเหมาะสมทุกขอมูลที่ตองการ ไมมีนอกเหนือ

จํากัดความลําเอยีง

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

Bias in Graphs

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

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

Types of Reports

Detail reportsSummary reportTurnaround documentGraphs

WhenWould YouUse Each ofThese ReportTypes?

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

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

Electronic

Versus Paper

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

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

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

แบบฝกหัดออกแบบอินเตอรเฟส (3 คน)

Use scenario: ผูซื้อทีค่นหาสินคา ผูใชไมแนใจวาตองการซื้ออะไร และอาจเลือกดซูีดีหลายแบบ

1. กําหนดขั้นตอนใน Use scenario2. ออกแบบโครงสรางและมาตรฐาน3. วาด Storyboard พรอมระบรุายละเอียดของคลาสและออบ

เจ็คที่ใช