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