Unit 11 - System Analysis UML

OOAD 1/2550 ดร.สขสถต มสถตย1

หนวยท 11: การสวนปฏสมพนธกบผใช (Human Computer Interaction Layer Design)

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


วตถประสงค

เพอใหนกศกษา

– เขาใจหลกการพนฐานในการออกแบบสวนตดตอผใช

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

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

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


สวนประกอบพนฐานของสวนตดตอผใช

กลไกเนวเกชน -> วธการทผใชในการบอกระบบวาตองทาอะไรกลไกอนพต -> วธทระบบรบขอมลกลไกเอาทพต -> วธทระบบแสดงขอมลตอผใชหรอระบบอน


สวนตดตอผใชแบบกราฟก

Graphical user interface (GUI) – เนนการใชจดการกบออบเจคบนหนาจอทเปรยบเปนพนโตะทางานโดยใชเมาส

– เปนรปแบบการตดตอกบผใชทมกพบในปจจบน


หลกการออกแบบสวนตดตอผใช

การแบงสวนของพนทการตระหนกในเนอหาความสมาเสมอ (Consistency)ความสวยงามประสบการณของผใชลดการทางานของผใช


กระบวนการออกแบบสวนตดตอผใช

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

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

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

สวนตดตอผใช

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


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



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

แผนการใชงาน (use scenario) = รางขนตอนทผใชแสดงเพอทางานสวนหนงของตนใหสาเรจสรางจากยสเคสสรางแผนการใชงานมกทเกดขนมากทสด


ตวอยาง

แผนการใชงาน (use scenario): ผซอทรบเรง ผใชรสงทตองการ และตองการดวน

1. ผใชจะคนหาศลปนหรอซดหนงโดยเฉพาะ2. ผใชจะดราคา และอาจดขอมลอน3. ผใชจะสงซอ หรอทาการคนหาอน


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

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


ตวอยาง


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

มาตรฐานสวนตดตอ (interface standards) = องคประกอบพนฐานทใชรวมกนระหวางหนาจอ ฟอรม และรายงานแตละตวในระบบประกอบดวย– Templates– Metaphors– Objects– Actions– Icons


สรางตนแบบการออกแบบสวนตดตอผใช

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


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

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

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


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


หลกการพนฐาน

งายตอการเรยนร– คาดวาผใช

ไมตองอานคมอไมตองผานการอบรมไมมตวชวยภายนอก

– ตวควบคมทงหมดควรชดเจน และเขาใจงาย และวางไวในตาแหนงทเหมาะสม



ปองกนความผดพลาด– จากดทางเลอก– ไมแสดงคาสงทใชไมได หรอไมใหเลอกได– ใหยนยนกระทาทไมสามารถยอนกลบได

งายตอการแกไขเมอกระทาผดพลาดใชรปแบบการสงงานทสมาเสมอจากดขนตอนในการสงงาน– การสงงานหนงงานไมคลกเมาสเกน 3 เมาสจากเมนหลก


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

ภาษา– ภาษาคาสง– ภาษาธรรมชาตเมนการควบคมโดยตรง (Direct Manipulation)– กระทากบออบเจคโดยตรง

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

– ไมสามารถใชไดกบทกคาสง


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

Types of Menus

Menu barDrop-down menuPop-up menuTab menuToolbarImage map

WhenWould YouUse Each ofThese MenuTypes?


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


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


ตวอยางของ Image Map


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

กวาง และตนแตละเมนไมควรมเกน 8 คาสง

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


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

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


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

Types of Messages

Error messageConfirmation messageAcknowledgment messageDelay messageHelp message

WhenWould YouUse Each ofThese MessageTypes?


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


การบนทกการออกแบบเนวเกชน

ใช window navigation diagram (WND)


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



วตถประสงคคอ เพอใหนาขอมลทถกตองแมนยาเขาสระบบทาไดงายหลกการ– สะทอนถงธรรมชาตของขอมลทนาเขา

Online processingBatch processing

หาวธรบขอมลทงายและสะดวก– การรบขอมลตรงจากแหลง– ลดจานวนการกดคย


การรบขอมลตรงจากแหลง

ขอด– ลดการทางานซา– ลดเวลาประมวล– ลดตนทน– ลดโอกาสในการเกดขอผดพลาด

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


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

การใชอปกรณพเศษเพอรบขอมลโดยไมใชการพมพ เชน การใชเทคโนโลย– bar code readers– optical character recognition– magnetic stripe readers– smart cards


ลดจานวนการกดคย

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


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

ตวอกษรตวเลขตวเลอก


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


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

Types of Boxes

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

WhenWould YouUse Each ofThese BoxTypes?


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

Types of Validation

Completeness checkFormat checkRange checkCheck digit checkConsistency checkDatabase checks

WhenWould YouUse Each ofThese ValidationMethods?


ออกแบบ Input

ฟอรมไมแนนเกนไปฟอรมหนงไมควรแยกเปนหลายหนาเรยงองคประกอบเปนลาดบกาหนดอปกรณรบขอมลกาหนดวธรบขอมล– จากแหลงขอมลโดยตรง– ผานตวกลางกาหนดการตรวจสอบอนพต


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



วตถประสงคเพอนาเสนอขอมลในรปทผใชเขาใจไดถกตอง โดยใชความพยายามนอยหลกการ– เขาใจการใชงานรายงาน

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

– จดการปรมาณขอมลใหเหมาะสมทกขอมลทตองการ ไมมนอกเหนอ

– จากดความลาเอยง


Bias in Graphs


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

Types of Reports

Detail reportsSummary reportTurnaround documentGraphs

WhenWould YouUse Each ofThese ReportTypes?


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

Electronic

Versus Paper


ออกแบบ Output

รายละเอยดชดเจนแบงสวนตามลาดบกาหนดสอ


แบบฝกหด

ออกแบบอนเตอรเฟส (3 คน)– Use scenario: ผซอทคนหาสนคา ผใชไมแนใจวา

ตองการซออะไร และอาจเลอกดซดหลายแบบ1. กาหนดขนตอนใน Use scenario2. ออกแบบโครงสรางและมาตรฐาน3. วาด Storyboard พรอมระบรายละเอยดของคลาสและ

ออบเจคทใช

Documents

Unit 11 - System Analysis UML