Unit 11 - System Analysis UML

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 พรอมระบรายละเอยดของคลาสและ

ออบเจคทใช