แผนการจัดการเรียนรู้ ที่ 4 · Web viewหน วยท 4 การใช ส ตรคำนวณในตารางทำงาน
หน วยท ี่ 9cit.snru.ac.th/UserFiles/File/OOAD1_51/Unit09(1).pdf · 2009. 7. 10. ·...
Transcript of หน วยท ี่ 9cit.snru.ac.th/UserFiles/File/OOAD1_51/Unit09(1).pdf · 2009. 7. 10. ·...
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 พรอมระบรุายละเอียดของคลาสและออบ
เจ็คที่ใช