OOAD 1/2550 ดร.สขสถต มสถตย1
หนวยท 11: การสวนปฏสมพนธกบผใช (Human Computer Interaction Layer Design)
ดร.สขสถต มสถตยการวเคราะหและออกแบบเชงวตถ2/2550
OOAD 1/2550 ดร.สขสถต มสถตย2
วตถประสงค
เพอใหนกศกษา
– เขาใจหลกการพนฐานในการออกแบบสวนตดตอผใช
– เขาใจกระบวนการออกแบบสวนตดตอผใช
– เขาใจหลกการและเทคนคในการออกแบบองคประกอบตางๆ ของสวนตดตอผใช
– สามารถออกแบบสวนตดตอผใชได
OOAD 1/2550 ดร.สขสถต มสถตย3
สวนประกอบพนฐานของสวนตดตอผใช
กลไกเนวเกชน -> วธการทผใชในการบอกระบบวาตองทาอะไรกลไกอนพต -> วธทระบบรบขอมลกลไกเอาทพต -> วธทระบบแสดงขอมลตอผใชหรอระบบอน
OOAD 1/2550 ดร.สขสถต มสถตย4
สวนตดตอผใชแบบกราฟก
Graphical user interface (GUI) – เนนการใชจดการกบออบเจคบนหนาจอทเปรยบเปนพนโตะทางานโดยใชเมาส
– เปนรปแบบการตดตอกบผใชทมกพบในปจจบน
OOAD 1/2550 ดร.สขสถต มสถตย5
หลกการออกแบบสวนตดตอผใช
การแบงสวนของพนทการตระหนกในเนอหาความสมาเสมอ (Consistency)ความสวยงามประสบการณของผใชลดการทางานของผใช
OOAD 1/2550 ดร.สขสถต มสถตย6
กระบวนการออกแบบสวนตดตอผใช
พฒนาแผนการใชงาน
ประเมนสวนตดตอผใช
สรางตนแบบการออกแบบ
สวนตดตอผใช
ออกแบบโครงสราง
สวนตดตอผใช
ออกแบบมาตรฐาน
สวนตดตอผใช
OOAD 1/2550 ดร.สขสถต มสถตย7
พฒนาแผนการใชงาน
แผนการใชงาน (use scenario) = รางขนตอนทผใชแสดงเพอทางานสวนหนงของตนใหสาเรจสรางจากยสเคสสรางแผนการใชงานมกทเกดขนมากทสด
OOAD 1/2550 ดร.สขสถต มสถตย8
ตวอยาง
แผนการใชงาน (use scenario): ผซอทรบเรง ผใชรสงทตองการ และตองการดวน
1. ผใชจะคนหาศลปนหรอซดหนงโดยเฉพาะ2. ผใชจะดราคา และอาจดขอมลอน3. ผใชจะสงซอ หรอทาการคนหาอน
OOAD 1/2550 ดร.สขสถต มสถตย9
ออกแบบโครงสรางสวนตดตอผใช
กาหนดองคประกอบพนฐานของสวนตดตอผใชและการทางานรวมกนขององคประกอบใช window navigation diagram (WND)
OOAD 1/2550 ดร.สขสถต มสถตย10
ตวอยาง
OOAD 1/2550 ดร.สขสถต มสถตย11
ออกแบบมาตรฐานสวนตดตอผใช
มาตรฐานสวนตดตอ (interface standards) = องคประกอบพนฐานทใชรวมกนระหวางหนาจอ ฟอรม และรายงานแตละตวในระบบประกอบดวย– Templates– Metaphors– Objects– Actions– Icons
OOAD 1/2550 ดร.สขสถต มสถตย12
สรางตนแบบการออกแบบสวนตดตอผใช
สตอรบอรด (Storyboard)ตนแบบทใช (HTML Prototype)ตนแบบทใชภาษาโปรแกรม (Language Prototype)
OOAD 1/2550 ดร.สขสถต มสถตย13
ประเมนสวนตดตอผใช
การประเมนสวนตดตอผใช (Interface Evaluation)– ตรวจสอบเทยบกบหลกการออกแบบ (Heuristic)– ทาตาม (Walkthrough)– ปฏสมพนธ (Interactive)
ทดสอบการใชงานอยางเปนทางการ (Formal Usability Testing)– 5-10 คน
OOAD 1/2550 ดร.สขสถต มสถตย14
การออกแบบระบบเนวเกชน (NAVIGATION DESIGN)
OOAD 1/2550 ดร.สขสถต มสถตย15
หลกการพนฐาน
งายตอการเรยนร– คาดวาผใช
ไมตองอานคมอไมตองผานการอบรมไมมตวชวยภายนอก
– ตวควบคมทงหมดควรชดเจน และเขาใจงาย และวางไวในตาแหนงทเหมาะสม
OOAD 1/2550 ดร.สขสถต มสถตย16
หลกการพนฐาน
ปองกนความผดพลาด– จากดทางเลอก– ไมแสดงคาสงทใชไมได หรอไมใหเลอกได– ใหยนยนกระทาทไมสามารถยอนกลบได
งายตอการแกไขเมอกระทาผดพลาดใชรปแบบการสงงานทสมาเสมอจากดขนตอนในการสงงาน– การสงงานหนงงานไมคลกเมาสเกน 3 เมาสจากเมนหลก
OOAD 1/2550 ดร.สขสถต มสถตย17
ประเภทของการควบคมเนวเกชน (Types of Navigation Control)
ภาษา– ภาษาคาสง– ภาษาธรรมชาตเมนการควบคมโดยตรง (Direct Manipulation)– กระทากบออบเจคโดยตรง
เพอเปดโปรแกรมเพอยอ/ขยายขนาด
– ไมสามารถใชไดกบทกคาสง
OOAD 1/2550 ดร.สขสถต มสถตย18
ประเภทของเมน
Types of Menus
Menu barDrop-down menuPop-up menuTab menuToolbarImage map
WhenWould YouUse Each ofThese MenuTypes?
OOAD 1/2550 ดร.สขสถต มสถตย19
ตวอยางเมนของโปรแกรมบน UNIX
OOAD 1/2550 ดร.สขสถต มสถตย20
ประเภทของเมน
OOAD 1/2550 ดร.สขสถต มสถตย21
ตวอยางของ Image Map
OOAD 1/2550 ดร.สขสถต มสถตย22
การออกแบบเมน
กวาง และตนแตละเมนไมควรมเกน 8 คาสง
ใช “hot keys”เพอจานวนการคลก หรอกดคยใหเหลอนอย
OOAD 1/2550 ดร.สขสถต มสถตย23
ขอแนะนาในการใชเมสเสจ
ควรชดเจน กระชบ และสมบรณควรถกตองการหลกภาษา และไมมคาเฉพาะหรอคายออยาใชถอยคาในเชงลบ
OOAD 1/2550 ดร.สขสถต มสถตย24
ประเภทของเมสเสจ
Types of Messages
Error messageConfirmation messageAcknowledgment messageDelay messageHelp message
WhenWould YouUse Each ofThese MessageTypes?
OOAD 1/2550 ดร.สขสถต มสถตย25
ตวอยางการเขยน Error Message
OOAD 1/2550 ดร.สขสถต มสถตย26
การบนทกการออกแบบเนวเกชน
ใช window navigation diagram (WND)
OOAD 1/2550 ดร.สขสถต มสถตย27
การออกแบบการรบขอมล (INPUT DESIGN)
OOAD 1/2550 ดร.สขสถต มสถตย28
หลกการพนฐาน
วตถประสงคคอ เพอใหนาขอมลทถกตองแมนยาเขาสระบบทาไดงายหลกการ– สะทอนถงธรรมชาตของขอมลทนาเขา
Online processingBatch processing
หาวธรบขอมลทงายและสะดวก– การรบขอมลตรงจากแหลง– ลดจานวนการกดคย
OOAD 1/2550 ดร.สขสถต มสถตย29
การรบขอมลตรงจากแหลง
ขอด– ลดการทางานซา– ลดเวลาประมวล– ลดตนทน– ลดโอกาสในการเกดขอผดพลาด
การรบขอมลจากแหลงแบบอตโนมต (Source Data Automation)การรบขอมลตรงแหลงผานการพมพ
OOAD 1/2550 ดร.สขสถต มสถตย30
การรบขอมลจากแหลงแบบอตโนมต (Source Data Automation)
การใชอปกรณพเศษเพอรบขอมลโดยไมใชการพมพ เชน การใชเทคโนโลย– bar code readers– optical character recognition– magnetic stripe readers– smart cards
OOAD 1/2550 ดร.สขสถต มสถตย31
ลดจานวนการกดคย
ไมถามขอมลทสามารถหาจากทางอนได การเลอกจากรายการ มประสทธภาพมากกวาการปอนขอมล ใชคาปกตเมอเปนไปได
OOAD 1/2550 ดร.สขสถต มสถตย32
ประเภทของขอมลนาเขา (Input)
ตวอกษรตวเลขตวเลอก
OOAD 1/2550 ดร.สขสถต มสถตย33
ประเภทของเครองมอรบขอมล (Input Boxes)
OOAD 1/2550 ดร.สขสถต มสถตย34
ประเภทของเครองมอตวเลอก (Selection Boxes)
Types of Boxes
Check boxRadio buttonOn-screen list boxDrop-down list boxCombo boxSlider
WhenWould YouUse Each ofThese BoxTypes?
OOAD 1/2550 ดร.สขสถต มสถตย35
ประเภทของการตรวจสอบอนพต (Input Validation)
Types of Validation
Completeness checkFormat checkRange checkCheck digit checkConsistency checkDatabase checks
WhenWould YouUse Each ofThese ValidationMethods?
OOAD 1/2550 ดร.สขสถต มสถตย36
ออกแบบ Input
ฟอรมไมแนนเกนไปฟอรมหนงไมควรแยกเปนหลายหนาเรยงองคประกอบเปนลาดบกาหนดอปกรณรบขอมลกาหนดวธรบขอมล– จากแหลงขอมลโดยตรง– ผานตวกลางกาหนดการตรวจสอบอนพต
OOAD 1/2550 ดร.สขสถต มสถตย37
การออกแบบการแสดงผล (OUTPUT DESIGN)
OOAD 1/2550 ดร.สขสถต มสถตย38
หลกการพนฐาน
วตถประสงคเพอนาเสนอขอมลในรปทผใชเขาใจไดถกตอง โดยใชความพยายามนอยหลกการ– เขาใจการใชงานรายงาน
เพออางอง หรออานโดยละเอยดความถในการรายงาน (Real-time หรอ batch reports?)
– จดการปรมาณขอมลใหเหมาะสมทกขอมลทตองการ ไมมนอกเหนอ
– จากดความลาเอยง
OOAD 1/2550 ดร.สขสถต มสถตย39
Bias in Graphs
OOAD 1/2550 ดร.สขสถต มสถตย40
ประเภทของรายงาน
Types of Reports
Detail reportsSummary reportTurnaround documentGraphs
WhenWould YouUse Each ofThese ReportTypes?
OOAD 1/2550 ดร.สขสถต มสถตย41
สอแสดงรายงาน
Electronic
Versus Paper
OOAD 1/2550 ดร.สขสถต มสถตย42
ออกแบบ Output
รายละเอยดชดเจนแบงสวนตามลาดบกาหนดสอ
OOAD 1/2550 ดร.สขสถต มสถตย43
แบบฝกหด
ออกแบบอนเตอรเฟส (3 คน)– Use scenario: ผซอทคนหาสนคา ผใชไมแนใจวา
ตองการซออะไร และอาจเลอกดซดหลายแบบ1. กาหนดขนตอนใน Use scenario2. ออกแบบโครงสรางและมาตรฐาน3. วาด Storyboard พรอมระบรายละเอยดของคลาสและ
ออบเจคทใช