User Interface Design Main issues: What is the user interface How to design a user interface.
ส่วนจัดการสื่อประสานผู้ใช้(User...
Transcript of ส่วนจัดการสื่อประสานผู้ใช้(User...
![Page 1: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/1.jpg)
สวนจ ดการส อประสานสวนจ ดการส อประสานผใช ผ ใช
(User Interface (User Interface Management)Management)
![Page 2: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/2.jpg)
หวขอทศกษา
1. ความหมายของสอประสานกบผใช2. องคประกอบของสอประสานกบผใช3. ระบบจดการสอประสานกบผใช (User Interface
Management System)
4. การออกแบบสอประสานกบผใช (User Interface Design)
5. รปแบบของสอประสานกบผใช (User Interface Mode)
6. การออกแบบการจดวางและการแสดงผล (Layout and Display Design)
7. รปแบบอนๆ ของสอประสานกบผใช8. ระบบสารสนเทศภมภาค (Geographic
Information System : GIS)
![Page 3: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/3.jpg)
Where is the Design phase in SDLC?
Design Phase-User Interface design (Input and Output)-Database design (Logical and Physical)
![Page 4: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/4.jpg)
1. ความหมายของสอประสานผใช
สอประสานผใช (User Interface) หมายถงสอกลางในการตดตอและโตตอบระหวางผใชกบ
ระบบคอมพวเตอร Hardware ไดแก เมาส คยบอรด ลำาโพงเครองพมพ
Software ไดแก ลกษณะการแสดงผลทาจอภาพและทำาใหเกดการปฏสมพนธ
อดต การแสดงผลลพธทางจอภาพเปนแบบรรทดคำาสง
ปจจบน “การแสดงผลลพธเปนแบบ สอประสาน แบบกราฟก (Graphic User Interface : GUI”
การใชเสยงพด (Natural Language)
![Page 5: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/5.jpg)
ความหมายของส อประสานกบผ ใช
สอกลางในการตดตอและโตตอบระหวางผใช กบระบบคอมพวเตอร ทงทางฮารดแวร และ
ซอฟตแวร
Command LineGraphic
User Interface(GUI)
NaturalLanguage
User Interface
ร ปแสดงสวนประกอบของสอกลางในการตดต อและโตตอบระหวางผ ใช กบคอมพวเตอร ร ปแสดงสวนประกอบของสอกลางในการตดต อและโตตอบระหวางผ ใช กบคอมพวเตอร
![Page 6: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/6.jpg)
2. องคประกอบของส วนจดการส อประสานกบผ ใช
2.1 องคประกอบในกลมผใชระบบ1. องคความร (Knowledge)
2. ภาษาการกระทำา (Action Language)
3. ปฏกรยาโตตอบของผใช (User’s Reaction)
![Page 7: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/7.jpg)
2.2 องคประกอบในกลมระบบคอมพวเตอร
1. บทโตตอบ (Dialog)
2. การประมวลผลของคอมพวเตอร (Computer Processing)
3. ภาษาการนำาเสนอ (Presentation Language)
![Page 8: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/8.jpg)
องคประกอบของส อประสานกบผ ใช
Knowledge
Action Language
Task
System
Ap
plic
atio
n P
roc
ess
Presentation Language
Generate the display
Interpret the user input
Interpret the display
Process the content
Plan and take action
![Page 9: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/9.jpg)
ระบบจดการส อประสานกบผ ใช (User Interface Management System: UIMS)
ซอฟตแวรททำาหนาทเปนตวกลางในการจดการสอประสานทจะนำาเสนอผลลพธทไดจากการประมวลผลของระบบสนบสนนการตดสนใจไปยงผ
ใชในรปแบบตาง ๆทเหมาะสม โดยจะตดตอกบ ระบบจดการฐานขอมล ระบบจดการฐานแบบ
จำาลอง และระบบจดการฐานองคความร เพอนำาขอมลทประมวลผลไดตามคำาสงของผใชมาแสดงผล
![Page 10: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/10.jpg)
การออกแบบสอประสานกบผ ใช (User Interface Design)
การใชงานจรงของผใช เวลาในการเรยนรระบบ ความสามารถในการใชรวมกบระบบอนๆ
ขอผดพลาดทอาจเกดขน ความสามารถของเครองคอมพวเตอร
ระดบความตองการของผใช
มาตรฐานการใชคำาสง
ความงายในการใชงานระบบ
การรบ และสงออกขอมลจากระบบ
ออกแบบไอคอน และ สญลกษณตาง ๆทเหมาะ
สม การออกแบบหนาจอท
สวยงาม นาใช ลำาดบขนตอนการทำางานไมซบซอน
สงท เราจ ำาเปนต องค ำานงถ งการออกแบบคอส งท เราจ ำาเปนต องค ำานงถ งการออกแบบคอ
![Page 11: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/11.jpg)
ความสามารถของระบบจดการสอประสานกบผใช
1. รองรบเทคโนโลยดานกราฟกของสอประสานผใช(GUI)
2. รองรบอปกรณนำาเขาขอมลไดหลายประเภท3. รองรบการแสดงผลและการใชงานอปกรณแสดง
ผลขอมลตางๆ ได4. มความยดหยน และสามารถปรบระบบไดรวดเรว5. ชวยเกบขอมลเขา-ออกไดอยางมประสทธภาพ6. สามารถรองรบการแสดงในลกษณะภาพกราฟก
3 มตทมสสนสวยงาม7. แสดงขอมลพรอมกนหลายหนาตางและหลายรป
แบบได8. การแนะนำาผใชผานกระบวนการปอนขอมลเขา
![Page 12: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/12.jpg)
การออกแบบสวนนำาเข าข อมล(Input)
วตถประสงคหลกของการออกแบบขอมลเขา เลอกวธการนำาเขา และปอนขอมลเขาทเหมาะสม ลดปรมาณขอมลเขา ออกแบบหนาจอปอนขอมลทสวยงาม นาสนใจ ใชการตรวจสอบความถกตอง ชวยลดความผดพลาด
ของขอมลเขา ออกแบบองตามเอกสารตนฉบบทตองการ ใชการควบคมสำาหรบการนำาขอมลเขาทมประสทธภาพ
![Page 13: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/13.jpg)
4. การออกแบบสอประสานกบผ ใช (User Interface Design)ผออกแบบสอประสานกบผ ใช ควรค ำาน งถ งส ง
ตอไปน1. คำาน งถ งขณะทผ ใช ก ำาล งปฏบ ต งานจร ง
ก บระบบ2. คำาน งเวลาทใช ในการเร ยนร ระบบ3. ความสามารถรอบดานทต องปร บใหเข า
กบระบบอนๆ ด วย4. คำาน งถ งข อผดพลาดทเก ดข นโดยตวผ ใช
เอง5. คำาน งถ งค ณภาพของเคร องม อท ผ ใช จะ
หยบใช6. สามารถใชก บเคร องคอมพวเตอร ของผ
ใช ได อย างลงตว7. คำาน งถ งระด บความตองการของผใช
![Page 14: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/14.jpg)
8. คำาน งถงความอ อนลาของระบบทเก ดจากการใชตดต อก นเป นเวลานาน
9. คำาน งถงมาตรฐานของการใชค ำาส งท ตองม ความเหมอนกน
10. คำาน งถงความสนกสนานเม อใชงานระบบอย11. การเลอกใชอ ปกรณ Input/Output ทด 12. การออกแบบหนาจอการทำางานใหสวยงาม ด
น าใช13. ลำาด บข นตอนการใชโปรแกรมไมซ บซอน14. รองร บสารสนเทศทผานเข า -ออกอยางเหมาะ
สม15. พจารณาเล อกใชไอคอนและส ญลกษณให
เหมาะสม16. ผใช ต องเข าใจร ปแบบการแสดงผล
สารสนเทศไดอย างง ายดาย
![Page 15: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/15.jpg)
ร ปแบบของสอประสานกบผ ใช (User Interface Mode)
การโตตอบดวยคำาสง (Command Language Interaction)
การโตตอบดวยเมนคำาสง (Menu Interaction) การโตตอบดวยแบบฟอรม (Form Interaction) การโตตอบดวยการทำางานเชงวตถ (Object-
Based Interaction) การโตตอบดวยภาษามนษย (Natural Language
Interaction)
![Page 16: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/16.jpg)
การโต ตอบดวยค ำาส ง (Command Language Interaction)
การโตตอบกบระบบโดยทผใชตองพมพคำาสงลงในชอง ปอนคำาสง เพอกระตนใหระบบทำางาน เชน ระบบปฏบตการ
DOS, UNIX เปนตน
![Page 17: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/17.jpg)
5.2 การโตตอบดวยเมนคำาสง (Menu Interaction)
เปนการโตตอบกบระบบดวยเมนคำาสงใหผใชเลอก คำาสงใดๆ เพอตดตอกบระบบโดยผใชไมตองปอน
คำาสงเอง Pull Down Menu Pop-up Menu
![Page 18: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/18.jpg)
การโตตอบดวยเมนค ำาส ง (Menu Interaction)
1122
Pull-Down Menu Pop-Up Menu
![Page 19: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/19.jpg)
Pull Down Menu เปนเมนทแสดงตวเลอกของรายการคำาสง โดยแบงสวนรายการเมนคำาสงออกเปนกลมๆ
![Page 20: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/20.jpg)
Pop-up Menu เปนเมนคำาสงทแสดงรายการคำาสง โดยผใชทำาใหเมนปรากฎได โดยการนำาเมาไปวางท
ขอความ/ ออปเจค แลวคลกขวา
![Page 21: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/21.jpg)
1. คำาทสอความหมายชดเจน2. ในกรณทเปนภาษาองกฤษ ควรใชตวพมพใหญ
หรอตวพมพเลกตามความเหมาะสม3. ควรจดกลมคำาสงทเกยวของกนไวในกลมเดยวกน4. ไมควรมจำานวนเมนคำาสงมากเกนไป5. ควารมเมนยอยสำาหรบเมนคำาสงทมการทำางาน
ยอยภายในมาก6. ควรออกแบบใหมแถบสปรากฎทเมนคำาสงทถก
เลอก
หลกเกณฑในการออกแบบเมนค ำา สง ม ดงน
![Page 22: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/22.jpg)
5.3 การโต ตอบดวยแบบฟอรม (Form Interaction)
เปนการโตตอบทผใชตองปอนขอมลลงในชองวางทอยในแบบฟอรทแสดงทางหนาจอ
คอมพวเตอร ซงมลกษณะคลายกบการกรอกแบบฟอรมลงบนกระดาษ
เปนการนำาเขาขอมลเขาสระบบหรอเพอนำาเสนอสารสนเทศ(ผลลพธ) ของระบบกได
![Page 23: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/23.jpg)
การโต ตอบกบระบบดวยแบบฟอรม
![Page 24: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/24.jpg)
การโตตอบดวยแบบฟอร ม(Form Interaction)
ผใชระบบจะตองปอนขอมลลงในชองวางทอยในแบบฟอรมทแสดงทาง
หนาจอคอมพวเตอร ซงมลกษณะคลายกบการกรอกแบบฟอรมลงกระดาษ
![Page 25: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/25.jpg)
5.4 การโต ตอบเชงว ตถ (Object-Based Interaction)
เปนการโตตอบทใชกบระบบสญลกษณ เปนตวแทน คำาสงในการปฏบตงาน เชน ไอคอน (Icon)
การโต ตอบกบระบบเชงว ตถ ด วยไอคอน
![Page 26: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/26.jpg)
การโตตอบดวยการทำางานเช งว ตถ (Object-Based Interaction)
เปนการโตตอบกบระบบทใชสญลกษณ ใชรปภาพแทนคำา สงทำางาน หรอเรยกวา “ ไอคอน (Icon)”
![Page 27: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/27.jpg)
5.5 การโต ตอบดวยภาษามนษย (Natural Language Interaction)
เปนการโตตอบกบระบบดวยการใชเสยงพดของผ ใชระบบ ไมวาจะเปนการนำาขอมลเขาหรอออกจาก
ระบบ ผมพรอมทจะท ำางานแล ว
ผมตองการเช คe-mail
ตกลง ค ณตองการเร มท ำางานใดกอน
คณไดร บอ เมลใหม ท งหมด 10 ฉบบ
![Page 28: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/28.jpg)
การโตตอบดวยภาษามนษย (Natural Language Interaction)
Check E-mail
You got 10 E-mail
Read First E-mail
E-mail From … Subject …
Detail …
![Page 29: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/29.jpg)
การออกแบบการจดวางและการ แสดงผล (Layout and Display
Design)
การจดจอภาพคอมพวเตอร การเชอมโยงการปอนขอมลแตละราย โครงสรางของการปอนขอมล (Structure Data
Entry) การตอบสนองของระบบ (Providing Feedback) การแสดงสวนชวยเหลอ (Help) การแสดงผลแบบมสและขาวดำา
![Page 30: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/30.jpg)
6.1 การจดจอภาพคอมพวเตอร
Body Zone
Title Zone
Menu Zone
Tools Zone
Message/Status Zone
Pop-up Zone เป นโซนทซ อยในระบบไมปรากฎใหผ ใช เห น สำาหร บแสดง Dialog Box
![Page 31: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/31.jpg)
การจดจอภาพคอมพวเตอร Title ZoneTitle Zone
Menu ZoneMenu Zone
Tools ZoneTools Zone
Body ZoneBody Zone
Message/Status Message/Status ZoneZone
![Page 32: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/32.jpg)
6.2 การเช อมโยงการปอนขอม ลแต ละรายการ เปนการเชอมโยงการปอนขอมลอยางเปนลำาดบสอดคลองกนไปแตละรายการ
ชวยใหผใชไมสบสน ลำาดบจะเรมจากซายไปขวา และ บนลงลาง
![Page 33: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/33.jpg)
การเช อมโยงการป อนขอมลแต ละราย
เราตองกำาหนดลำาดบในการปอนขอมลใหสอดคลอง
ไมควรกำาหนดลำาดบสลบไปมาโดยไมมนยสำาคญ
![Page 34: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/34.jpg)
โครงสร างของการป อนขอมล(Structure Data Entry)
การปอนขอมล (Entry) การกำาหนดคาเรมตน (Default) หนวยของขอมล (Unit) คำาอธบายตางๆ (Caption) รปแบบ (Format) การจดวาง (Justify) สวนชวยเหลอ (Help)
![Page 35: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/35.jpg)
โครงสร างของการป อนขอมล(Structure Data Entry)
การปอนขอมล (Entry) ขอมลบางสวนทมแลวในฐานขอมล กไมควรทผใชจะ
ตองพมพเขาไปใหม เชน ขอมลลกคา เมอใสรหสลงไป ก ควรทจะแสดงขอมลประวตลกคาออกมา โดยไมจำาเปนตอง
กรอกขอมลเขาไปใหม
การกำาหนดคาเรมตน (Default) การกรอกขอมล เชน รหสนสต มความยาว 8 ตวอกษร
เมอกรอกครบ 8 ตวอกษร กใหทำาการเปลยนโฟกส ไปยง ฟลดอนๆ ทตองการบนทกขอมลตอไป หรอ การกำาหนดรป
แบบเมอปอนตวเลข 1000 ระบบควรมการเปลยนเปน1,000 โดยอตโนมต
![Page 36: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/36.jpg)
โครงสร างของการป อนขอมล(Structure Data Entry)
หนวยของขอมล (Unit)
ในการกรอกขอมล หนวยของขอมลเปนสงทสำาคญ มาก เชน ระบบตองการใหบนทกขอมลมหนวยเปน
กโลกรม แตนสต มขอมลเปนตน กตองเปลยนแปลงให เหมาะสม และถกตองตามความตองการของระบบ
คำาอธบายตางๆ (Caption)
เราตองมการเขยนคำาอธบายตางๆ ใหผใชทราบวา ขอมลในฟลดน จดเกบขอมลใด สามารถทำาไดโดยการ เขยนคำาอธบาย หรอ ฉลาก กำากบไว
![Page 37: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/37.jpg)
โครงสร างของการป อนขอมล(Structure Data Entry)
รปแบบ (Format) การจดเรยงลำาดบการกรอกขอมล การกำาหนดคำา
อธบาย และสวนอนๆ ตองมการกำาหนดใหอยในรปแบบทเปนมาตรฐานเดยวกน
การจดวาง (Justify) การจดวางตองสวยงาม เปนระเบยบ ใชงานงาย
สวนชวยเหลอ (Help)
![Page 38: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/38.jpg)
การตอบสนองของระบบ (Providing Feedback)
การแจงสถานะการทำางาน (Status Information)
การแสดงความพรอมในการรบคำาสง (Prompting Cues)
ขอความแจงเตอนเมอมขอผดพลาด (Error/ Warning Messages)
![Page 39: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/39.jpg)
การแจงสถานะการทำางาน(Status Information)
แสดงใหผใชเหนวา ยงมการประมวลผลการทำางาน
อย เนองจากบอยครง ท เราเขยนโปรแกรม โดยไม
ไดแสดงเหนถงสถานะปจจบนวาระบบกำาลง
ทำางานอะไรอย ทำาใหผใช เขาใจผด วาเครองของเรา
แฮงค ปกตจะแสดงเปน นาฬกา
ทราย Progress bar และตวเลขแสดงเปอรเซนตการทำางาน
![Page 40: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/40.jpg)
การแสดงความพรอมในการร บค ำาส ง(Prompting Cues)
มการแสดงขอความพรอม ใหผใชทราบ และมการ
อธบาย Field หรอCaption ทกำาหนด
![Page 41: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/41.jpg)
ขอความแจงเต อนหร อม ขอผ ดพลาด(Error/ Warning Messages)
เราจำาเปนตองมการแจง เตอน เมอมการทำางานท
ตองการยนยน หรอใน กรณทเกดขอผดพลาดขน
เพอใหผใชไดทราบ และทำาการตดสนใจ
ผด
ถก
![Page 42: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/42.jpg)
การแสดงส วนชวยเหลอ (Help)
สามารถเขาใจไดงาย (Simplicity) มการจดรปแบบอยางเปนระเบยบ มการแสดงตวอยาง (Show)
![Page 43: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/43.jpg)
การแสดงผลแบบมส และขาวดำา ขอดของการแสดงผลแบบมส
สามารถแสดงความรสกได สามารถแสดงใหเหนถงจดทเนน หรอ สำาคญได
ปญหาทเกดจากการแสดงผลแบบมส ไมสามารถใชไดกบผใชทมอาการตาบอดส ความละเอยดของสอาจมการเปลยนแปลงเมอใชอปกรณ
ตางชนดกน
![Page 44: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/44.jpg)
รปแบบอน ๆ ของส อประสานกบผ ใช กราฟก (Graphics) มลตมเดยและไฮเปอรเทกซ (Multimedia and
Hypertext) ระบบความจรงเสมอน (Virtual Reality System) การประมวลผลภาษาธรรมชาต (Natural
Language Processing)
![Page 45: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/45.jpg)
นกพฒนาระบบตองเตร ยมความสามารถในการปอนขอม ลด งน การควบคม Cursor
1. เล อน cursor ไปยงชองป อนขอมลตอไปได ตามตองการ
2. เล อน cursor กลบไปย งชองป อนขอม ลก อนหนาน ได
3. เล อน cursor ไปยงชองป อนขอมลแรก หร อ ขอม ลส ดท าย หร อชองว างใดๆ ทตองการได
4. ในแตละช อง ผ ใชต องเล อน cursor ทละต วอ กษรได
การแกไขตวอกษรหร อข อม ล1. ลบตวอ กษรทละตวอ กษรด วย backspace
หรอ delete ได 2. ลบขอม ลท งหมดของชองป อนขอม ลใดๆ ไ3. ลบขอม ลท งหมดทม อย บนฟอร มได (ทำาให
ฟอร มว างๆ)
![Page 46: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/46.jpg)
การใชค ำาส ง Exit1. คอ การออกจากโปรแกรม2. คอ การออกจากหนาจอการทำางานของ
แบบฟอรมใดแบบฟอรมหนง เพ อไปยงหนาจอของอกแบบฟอรมน ง
3. ตองม การโตตอบเพอสอบถามผใช ว า“ตองการบนทกข อม ลก อนออกจาก
”โปรแกรมหรอไม มส วนชวยเหลอ (Help)
1. เร ยกใช Help ขณะทก ำาลงป อนขอม ลได 2. เร ยกใช Help ขณะทอย ในหนาจอแสดง
รายงานได
![Page 47: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/47.jpg)
6.3 โครงสรางของการปอนขอมล(Structure Data Entry) เป นการออกแบบเพอก ำาหนดรปแบบหรอล กษณะของชองทจะใชในการปอนขอมล
![Page 48: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/48.jpg)
การปอนขอมล (Entry) ขอมลทมในฐานขอมลแลว ควรดงขอมลออกจากฐาน
ขอมลมาแสดง โดยไมตองมการปอนใหม คาเรมตน (Default)
ในกรณทชองปอนขอมลสามารถกำาหนดคาเรมตนใหกบfield ได ระบบควรแสดงคาเรมตนทนท
เมอปอนขอมลเตมขนาด ระบบควรเลอ cursor ไปยงชองปอนขอมลถดไปอตโนมต
กรณทขอมลเปนวนท ระบบควรเตรยมสญลกษณคน ระหวาง วน เดอน ป ใหอตโนมต
กรณตวเลขเปนจำานวนเงน ระบบควรเตรยมเครองหมาย จลภาค (,) ไวอตโนมต
![Page 49: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/49.jpg)
หนวยของขอมล ควรระบหนวยของขอมลใหชดเจนสำาหรบชองปอน
ขอมลทจำาเปนตองระบ คำาอธบาย Filed หรอ คำาอธบายชองปอนขอมล
(Caption) การแสดงคำาอธบายใหเหมาะสมกบการจดวาง Layout Line Caption เบอรโทรศพท - -
Drop Caption - - เบอรโทรศพท
Delimited Characters
Check-off Boxes ประเภทการชำาระเงน เชค เงนสด
บตรเครดต
- -
![Page 50: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/50.jpg)
รปแบบของขอมล (Format) รปแบบของขอมลทตองมสญลกษณพเศษ ระบบตองมสญลกษณพเศษใหอตโนมต
การจดวางขอมล (Justify) การจดวางขอมลประเภทตวอกษร จดชด..............................
การจดวางขอมลประเภทตวเลข จดชด..............................
![Page 51: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/51.jpg)
สวนชวยเหลอ (Help) ควรเตรยมHelp ในระหวางผใชปอนขอมล กดปม F1 เพอเรยกใช Help
การตดตอกบผใชในการปอนขอมลดวยกราฟก(Graphic User Interface)
GUI Input Control ชวยใหผใชใชงานงายขน1. Text Box2. Radio Button3. Check Box4. List Box5. Drop-Down List Box6. Combination (Combo) Box7. Spin (Spinner) Box
![Page 52: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/52.jpg)
![Page 53: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/53.jpg)
1. Text Box
กลองสเหลยมสำาหรบปอนขอมล โดยม Caption ดานหนากลองเพอสอความหมายสงทจะปอนลงไป
ขอแนะนำา1. วาง Caption ทสอความหมายดานหนา Text
Box
2. กรณเปนภาษาองกฤษ ตวอกษรแรกเทานนเปนตวพมพใหญ
3. มเครองหมายโคลอน (:) อยดานหลงขอความ4. ควรกำาหนดขนาด Text Box ใหเหมาะสมกบ
ขอความทจะปอน
![Page 54: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/54.jpg)
2. Radio Button วงกลมเลกดานซายมอและมคำาอธบายขวามอท
สอดคลองกบคาคำาตอบทตองการใหผใชเลอกตอบ
ผใชเลอกคำาตอบไดคาเดยวเทานนขอแนะนำา1. ลำาดบคำาตอบเรยงจากบนลงลาง และชดดานซาย
ของจอภาพ2. กลมคำาตอบควรแยกจาก Input Control รป
แบบอน3. กลมคำาตอบควรมขอความทสอความหมายกบคำา
ตอบทตองการเลอก
![Page 55: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/55.jpg)
3. Check Box
คลาย Radio Button ต Check Boxใช สเหลยมจตรสเลกแทนวงกลม ตามดวยขอความ
คำาอธบาย ผใชสามารถเลอกไดมากกวา 1 คำาตอบขอแนะนำา1. ขอความอธบาย (Caption) ควรสอความหมาย
และเขาใจงาย2. การจดกลมขอมลทสมพนธกน ควรมหวขออธบาย
วาเปนกลมขอมลเรองใด3. จดเรยงคำาตอบในแนวตง ชดดานซายของ
จอภาพ4. ลำาดบคำาตอบควรเรยงตามคำาอธบาย หรอเรยง
ตามตวอกษร หากเปนตวเลข ควรเรยงลำาดบจากคานอยไปมาก
![Page 56: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/56.jpg)
4. List Box
กลองสเหลมทบรรจคำาตอบมากกวา 1 คำาตอบ ปรากฎ แถบเลอน (Scroll Bar)
ผใชสามารถเลอกไดคำาตอบเดยวเทานน ใชในกรณทคำาตอบทเปนไปไดมจำานวนมากและมพนท
จำากด
![Page 57: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/57.jpg)
ขอแนะนำา1. ขอความอธบาย (Caption) ควรสอความหมายและเขาใจงาย ไว
ดานบน โดยหลกเลยงคำายอ2. กรณเปนภาษาองกฤษ ตวอกษรแรกเทานนเปนตวพมพใหญ3. มเครองหมายโคลอน (:) อยดานหลงขอความ4. ควรกำาหนดคาคำาตอบเรมตนและแสดงแถบสทคำาตอบนน5. ขนาดเหมาะสมกบการแสดงคำาตอบไวอยางนอย 2-3 คำาตอบ6. กรณใชรปภาพแทนรายละเอยดของคำาตอบ ตองเปนรปภาพทสอ
ความหมาย7. ลำาดบคำาตอบควรเรยงตามคำาอธบาย หรอเรยงตามตวอกษร
หากเปนตวเลข ควรเรยงลำาดบจากคานอยไปมาก
![Page 58: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/58.jpg)
5. Drop-Down List Box
คลายกบ List Box แตจะปรากฎคำาตอบใหเหน เพยงคำาตอบเดยว คำาตอบอนจะใหผใชคลกเลอก
รปลกศรชลง ผใชสามารถเลอกไดคำาตอบเดยวเทานน
ข อแนะนำา ควรวางขอความอธบาย (Caption) ทสอความหมายกบคำาตอบทตองการเลอกไวดานบนหรอดาน
ซาย โดยหลกเลยงคำายอ
![Page 59: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/59.jpg)
6. Combination (Combo) Box
Combo Box คลายกบ Drop-Down List Box คอบรรจคำาตอบเดยว คำาตอบทเหลอผใชคลกขวา
เพอแสดงคำาตอบทงหมด ลกษณะพเศษของ Combo Box คอ ผใชสามารถปอนคาคำาตอบนอกเหนอจากทมในกลองได
ข อแนะนำา ควรวางขอความอธบาย (Caption) ทสอความหมายกบคำาตอบทตองการเลอกไวดานบนหรอดาน
ซาย โดยหลกเลยงคำายอ
![Page 60: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/60.jpg)
7. Spin (Spinner) Box
เปนกลองสเหลยม แสดงขอความเพยงแถวเดยว และมปมรปลกศรชขนลง เพอเปลยคาขอมลทเปน
ตวเลขตามหนวยวด เหมาะสำาหรบการปอนขอมลทมพนทของจอภาพจำากด
ข อแนะนำา ควรวางขอความอธบาย (Caption) ทสอความหมายกบคำาตอบทตองการเลอกไวดานบนหรอดาน
ซาย โดยหลกเลยงคำายอ ควรกำาหนดคาเรมตนของระบบไว
![Page 61: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/61.jpg)
6.4 การตอบสนองของระบบ(Providing Feedback)
เปนการแจงการตอบสนองของระบบในระหวางการใชงานของระบบ
การตอบสนองระบบม 3 ชนด
1. แจงสถานะการทำางาน(Status Information)
2. แสดงความพรอมในการ รบคำาสง (Prompt
Cues)3. ขอความแจงหรอเตอนเมอ
เกดขอผดพลาด(Error/Warning Messages)
![Page 62: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/62.jpg)
6.5 การแสดงสวนชวยเหลอ (Help)
1. สามารถเขาใจไดงาย2. มการจดรปแบบอยางเปนระเบยบ3. มการแสดงตวอยาง
![Page 63: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/63.jpg)
6.6 การแสดงผลสอประสานกบผใชแบบมสและขาวดำา ขอดของการแสดงผลแบบมส
1. ใหความรสกออนโยนเวลามอง2. แสดงหรอเนนขอความบนเอกสารได3. แบงแยกรายละเอยดทมความซบซอนใหดงายขน4. เนนสวนขอควมเตอนใหชดขน
ปญหาทเกดจาการแสดงผลแบบมส1. เปนปญหากบผใชงานตาบอดส2. ความละเอยดของสมคาเปลยนแปลงไดเมอใชกบ
อปกรณตางชนดกน3. ความถกตองของสอาจคลาดเคลอนเมอใชกบอปกรณ
ตางชนดกน
![Page 64: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/64.jpg)
สรป
![Page 65: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/65.jpg)
กระบวนการในการออกแบบ User Interface
1. รวบรวมขอมลการตดตอกบระบบทางหนาจอของผใช
2. ออกแบบสวนตดตอกบระบบอยางคราว ๆ3. ใช Case Tools สรางตวตนแบบ
(Prototyping) และทดสอบ
![Page 66: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/66.jpg)
รปแบบของ User Interfaces
เพอใหผใชงานสามารถโตตอบกบระบบอยางมประสทธภาพ
นยมใชแบบกราฟก (Graphic User Interface :GUI)
มรปแบบดงน คอ การโตตอบดวยคำาสง (Command Language
Interaction) การโตตอบดวยเมนคำาสง (Menu Interaction)
การโตตอบดวยแบบฟอรม (Form Interaction)
การโตตอบดวยการทำางานเชงวตถ (Object-Based Interaction)
การโตตอบดวยภาษามนษย (Natural Language Interaction)
![Page 67: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/67.jpg)
หลกเกณฑในการออกแบบเมนคำาสง
1. แตละเมนคำาสงควรเลอกใชคำาสงทสอความหมายไดชดเจน
2. ควรมการใชตวอกษรพมพใหญหรอตวอกษรพมพเลกตามความเหมาะสม
3. ควรมการจดกลมคำาสงทมความเกยวของกนไวในกลมเดยวกน
4. ไมควรมจำานวนเมนคำาสงมากเกนไป5. ควรมเมนยอยสำาหรบเมนคำาสงทมการทำางานยอยภายใน
มากเกนไป6. เมอมการเลอกเมนคำาสง ควรออกแบบใหมแถบสปรากฏท
เมนคำาสงทถกเลอก
![Page 68: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/68.jpg)
Poor menu design
![Page 69: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/69.jpg)
Improve menu design
![Page 70: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/70.jpg)
Menu Building within a graphical user interface environment
![Page 71: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/71.jpg)
การออกแบบ Interfaces
การออกแบบการจดวาง (Layouts) ของหนาจอ โครงสรางของการปอนขอมล (Structure Data
Entry) การควบคมความถกตองในระหวางปอนขอมล
(Controlling Data Input) การตอบสนองของระบบ (Providing Feedback) การแสดงสวนชวยเหลอ (Help) การออกแบบการควบคมการเขาถงขอมลของผใช การออกแบบลำาดบการเชอมโยงจอภาพ (Dialogue
Design)
![Page 72: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/72.jpg)
การออกแบบการจดวางของหนาจอ
1. สวนหวเรอง: ใชแสดงชอของเอกสารหรอ ฟอรมนน ๆ
2. สวนแสดงลำาดบและวนท: ใชแสดงเลขลำาดบและวนทหรอเวลา
3. สวนแนะนำาหรอแนวทางในการใช: ใชอธบายขอแนะนำาการใชฟอรม
4. สวนรายละเอยดขอมล: ใชแสดงสาระสำาคญของเอกสารหรอฟอรม
5. สวนแสดงผลรวม: ใชแสดงคาผลรวม เชน ยอด เงน ยอดขาย เปนตน
6. สวนการลงนามผมอำานาจ: ใชแสดงนามผมอำานาจของเอกสารหรอฟอรม
7. สวนแสดงความคดเหน: ใชในการเขยนขอความทเปนความคดเหน
![Page 73: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/73.jpg)
ร ปแบบของเอกสารต นฉบบ
![Page 74: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/74.jpg)
KING REGISTRATION FORMMONGKUTUNIVERSITY Student Number Semester/Year
Last Name First Name Initial Local Telephone Number Date
Street Address City State Zip Course Section Subj. Number (A, A1, 01) Cr Days Times Room Bidg.
Total Credits =Date Received/Initial Advisor Approval Date
![Page 75: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/75.jpg)
EMPLOYEE GALLAGHER IMPORTS EMPLOYEE NUMBER EXPENSE VOUCHER DEPARTMENTList each expense separately. Attach receipts for all expenses except those for meals, personal car use, parking, tolls,taxis, and tips.Date Automobile Meals Lodging Other Total Miles Cost Br/Lun/Din Cost Description Cost Expense
Totals: Less AdvanceI certify that this statement of account is correct.Signature of Employee Date Net TotalApproved By Date
headingzone
controlzone
bodyzone
totalszone
authorizationzone
![Page 76: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/76.jpg)
BATES VIDEO CLUB-- MEMBERSHIP APPLICATIONPrint the following information:NameAddressCity State Zip CodeHome Phone Work PhoneSecurity: Check the applicable box VISA [ ] Card# MasterCard [ ] American Express [ ] Other [ ] Expiration Date
I agree to the following video club membership terms:1. I may keep no rented video for longer than seven (7) days.2. I may have no more than ten (10) rented videos at any one time.3. If I fall to comply with the above terms, I understand that I will be obligated to return all rented videos at once, and that my video club membership may then be terminated.Signed DateFor office use only:Accepted: [ ] Member Number: [ ] Date: [ ] Rejected: [ ]
![Page 77: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/77.jpg)
BATES VIDEO CLUB - VIDEO RENTAL FORM
Member Number Date
Title ID# Rental Fee Date Returned
Total Rental Amount:I agree to return the above rented videos within seven (7) days.Signed:
![Page 78: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/78.jpg)
![Page 79: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/79.jpg)
การออกแบบหนาจอทงหมดมจดมง หมาย 2 อยาง คอ เพอนำาเสนอขอมลและ
ชวยในการปฏบตงานในการใชระบบ มแนวทางมากมายในการออกแบบทตองพจารณาคอหนาจอทงหมดทปรากฏควร
ดงดดใจใหอยากใชงาน ไมควรแนนเกนไป
การออกแบบหนาจอ
![Page 80: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/80.jpg)
การออกแบบการจดวางของหนาจอ การออกแบบหนาจอของฟอรมหรอรายงานตางๆ ควรจะจด
วางรปแบบใหเหมอนกบเอกสารมากทสด การเชอมโยงการปอนขอมลในแตละรายการหรอแตละ
ฟลด ตองลำาดบการเชอมโยงในการปอนขอมลในแตละฟลด การกรอกจะคลายกบการกรอกบนเอกสารจรง เรมกรอกจากซายไปขวา และจากบนลงลาง ควรมความยดหยนและสอดคลองในการทำางาน สามารถยาย
cursor ไปมาระหวางฟลดทตองการแกไข
![Page 81: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/81.jpg)
1. เมอเขาไปทหนาจอรบขอมลเคอรเซอร (Cursor) ตองอยทตำาแหนงแรกของขอมลรบตามเนอหาของหนา
จอนน ตำาแหนงนนควรอยมมบนซายมอ หลงจากผใชใส ขอมลแลวเคอรเซอร (Cursor) ควรเลอนไปทชองรบ
ขอมลถดไปเสมอ คอ ดานลางหรอดานขางถดไปเพอ ใหการปอนขอมลเปนธรรมชาตจากบนซายไปขวา แลว
จงลงมาบรรทดใหม 2. ทกชองรบขอมลตอมคำาอธบาย โดยแสดงกำากบ
ทชองนน ซงจะตองระบใหชดเจนและอยในตำาแหนงทถกตองและควรมรปแบบเดยวกนเพอใหผใชไมสบสนในการทำางาน
การออกแบบหนาจอรบขอมล
![Page 82: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/82.jpg)
3. ถาชองรบขอมลนนมรปแบบเฉพาะใหแสดงรปแบบเฉพาะนนเพอใหผใชปอนขอมลไมผดพลาด
4. ในทกครงทปอนขอมลในชองรบขอมลนน “ครบถวนใหผใชกด Enter” เพอไปยงชองรบ
ขอมลถดไปหรอในกรณทใสขอมลเทาจำานวน ของขอมลนนแลว เคอรเซอรควรไปยงชองรบ
ขอมลถดไปอตโนมตเพอรบขอมลถดไป เพออำานวยความสะดวก
![Page 83: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/83.jpg)
– 5. กรณขอมลรบเขาเปนตวอกษรพเศษแลวควรออกแบบใหสามารถใสตวอกษรพเศษอตโนมตโดยผใชไมตองใสเอง
– 6. กรณขอมลรบเขาตองการแสดงผลรบเปนเลข“0” ใหแสดงโดยผใชไมตองปอนเอง
– 7. กรณทขอมลรบเขาเปนจำานวนเลขทนำาไป “คำานวณคาควรม ,” คนหลกพนหรอจดทศนยม
ขนอตโนมต– 8. กรณชองรบขอมลนนมคาทสามารถ
กำาหนด (Default) ได ระบบนนควรแสดงคาท กำาหนดนน (Default) ทชองนน
![Page 84: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/84.jpg)
9. สำาหรบขอมลรบทเปนรหสทตองมการตรวจสอบ กอนบนทก คอ คานนมความสมพนธกบคาอนท
บนทกไวเดมแลว เมอมการปอนรหสนนตองรบ คานนไปตรวจสอบทแฟมขอมลทอางถง
10 ควรมปมคำาสงตาง ๆ ตามความเหมาะสมของการใชงานหนาจอนน
11 หลงจากปอนขอมลในหนาจอนน ๆ สมบรณแลวและไดรบการตรวจสอบแลวควรมการใชผใชไดตรวจสอบและยนยนหรอยกเลกกอนบนทกขอมลเขาเครอง
![Page 85: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/85.jpg)
การออกแบบหนาจอทงหมดมจดมงหมาย 2 อยาง คอ เพอนำาเสนอขอมลและชวยในการ
ปฏบตงานในการใชระบบ มแนวทางมากมายในการออกแบบทตองพจารณาคอหนาจอทงหมดท
ปรากฏควรดงดดใจใหอยากใชงาน ไมควรแนนเกนไป
![Page 86: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/86.jpg)
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX XXXXXX
XXXXXX
XXXXXX
START
แสดงการปอนขอมลตามการจดเรยงทไมถกตอง
![Page 87: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/87.jpg)
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX XXXXXX
XXXXXX
XXXXXX
START
แสดงการปอนขอมลตามการจดเรยงทถกตอง
![Page 88: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/88.jpg)
Bad Flow in a Form
![Page 89: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/89.jpg)
Good Flow in a Form
![Page 90: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/90.jpg)
การออกแบบหนาจอรบขอมล
![Page 91: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/91.jpg)
หนาจอดาตาเอนทร (Data Entry Screen)
![Page 92: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/92.jpg)
สงทตองเตรยมความสามารถของหนาจอปอนขอมล
การควบคมตวกระพรบ (Cursor)การแกไขตวเลขหรอขอมล การใชคำาสงออก (Exit)มสวนชวยเหลอ (Help)
![Page 93: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/93.jpg)
โครงสรางของการปอนขอมล(Structure Data Entry)
การออกแบบโครงสรางการปอนขอมล คอ การออกแบบเพอกำาหนดรปแบบ หรอลกษณะของชองปอนขอมล เพอเตรยมความสะดวกใหกบผใช เชน การกำาหนดคาเรมตน การจดวางขอมล เปนตน
![Page 94: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/94.jpg)
มหลกเกณฑการออกแบบดงน การปอนขอม ล (Entry) พยายามใหผใชปอนขอมล
เทาทจำาเปนเทานน คาเร มตน (Default Value) คาของขอมลใดท
สามารถกำาหนดคาเรมใหได ควรใสใหผใชทนท เพอ เพมความสะดวก เชน วนท หรอหมายเลข Running
Number เปนตน หนวยของขอม ล (Unit) ระบหนวยขอมลใหชดเจน
เชน บาท ดอลลาร กโลกรม เปนตน คำาอธบาย หรอ ค ำาอธบายชองป อน
ขอมล(Caption) แสดงคำาอธบายฟลดวาตองการใหผ ใชใสขอมลอะไร เปนจดวางใหเหมาะสม
![Page 95: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/95.jpg)
ร ปแบบของขอม ล (Format) ถา ตองการใหมสญลกษณพเศษ ควรเตรยม
สญลกษณเหลานใหอตโนมตการจดวางขอม ล(Justify) ออกแบบ
ใหมการจดวางขอมลโดยอตโนมต เชน ตวเลขชดขวา ขอความชดซาย เปนตน
สวนชวยเหลอ (Help) เตรยมสวนชวย เหลอระหวางผใชปอนขอมล เชนปม F1
เพอขออานคำาอธบายการตดต อก บผ ใช ในการปอนขอม ล
ดวยกราฟก (GUI)
![Page 96: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/96.jpg)
การตดตอกบผใชแบบกราฟก(Graphic User Interface: GUI)
เทคโนโลยทนำามาใช เรยกวา GUI Input Control
ชวยใหผใชระบบสามารถใชงานระบบไดงายขน ชวยใหขอมลทนำาเขาสระบบมรปแบบเดยวกน ชวยปองกนความผดพลาดในระหวางการปอน
ขอมล
![Page 97: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/97.jpg)
รปแบบของ GUI1. Text Box2. Radio Button3. Check Button4. List box5. Drop-down List
Box6. Combination
Box (Combo Box)
7. Spin Box (Spinner Box)
8. Menu bars 9. Toolbars10. Dialog boxes11. Toggle buttons12. Scroll bars13. Calendars14. Status Bar
![Page 98: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/98.jpg)
Next
ตวอยางการใช GUI ทใชแทนเมน หลกของระบบการใหเกรด น.ศ.
Back
![Page 99: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/99.jpg)
เมนพลดาวน (Pull-Down Menu)
![Page 100: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/100.jpg)
หนาตางปอบอฟ (Pop-up Window)
![Page 101: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/101.jpg)
แสดงเทคนคทาง GUI 8 แบบในการนำาขอมลเขาหรอเลอกคำาสง
![Page 102: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/102.jpg)
ตวอยาง Graphic User Interface
ListBoxTextBoxRadio Button
ComboBox
![Page 103: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/103.jpg)
![Page 104: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/104.jpg)
Common GUI Components
Can edit
Text box
Radiobutton
Checkbox
Listbox
Spin box
Dropdownlist
Button
![Page 105: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/105.jpg)
Advanced GUI Components
![Page 106: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/106.jpg)
Advanced GUI Components (continued)
![Page 107: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/107.jpg)
Input Prototype for Data Maintenance
![Page 108: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/108.jpg)
Input Prototype for Transaction
![Page 109: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/109.jpg)
Input Prototype for Data Maintenance
![Page 110: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/110.jpg)
Input Prototype for Web Interface
![Page 111: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/111.jpg)
Input Prototype for Web Interface
![Page 112: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/112.jpg)
การควบคมความถกตองในระหวาง ปอนขอมล (Controlling Data Input)
ควรตรวจสอบชนดของขอมล ควรตรวจสอบการปอนขอมลไมครบตามทระบไว ควรตรวจสอบรปแบบทปอนขอมล ควรตรวจสอบคาสงสดและตำาสดของขอมล ควรตรวจสอบความครบถวนของขอมลในแตละฟลด
![Page 113: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/113.jpg)
การตอบสนองของระบบ (Providing Feedback)
มอยดวยกน 3 ชนด คอ1. แจงสถานะการทำางาน (Status Information)
2. แสดงความพรอมในการรบคำาสง (Prompting Cues)
3. ขอความแจงหรอเตอนเมอมขอผดพลาด (Error/Warning Messages)
![Page 114: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/114.jpg)
แจงสถานะการทำางาน (Status Information)
แจงใหผใชทราบถงความสถานะปจจบนในกาทำางานของระบบ เชน แสดงเลขหนาทกำาลงทำางานอย
แสดงความคบหนาในการประมวลผล
Combination of Text and Graphics for End User feedback
![Page 115: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/115.jpg)
แสดงความพรอมในการร บค ำาส ง
(Prompting Cues) เปนการออกแบบเพอแจงสถานะความพรอมในการรบคำาสง เชน หนา Login เขาระบบ cursor กระพรบรอรบ username
หรอ กรณาปอนรหสวชา :_ _ _-_ _ _
![Page 116: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/116.jpg)
ขอความแจ งหร อเตอนเม อมข อผดพลาด (Error/Warning Messages)
การแสดงขอความเมอเกดขอผดพลาด และแนะแนวทางในการแกไขเพออธบายใหผใชสามารถแกไขปญหาดวยตนเองได
![Page 117: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/117.jpg)
การแสดงสวนชวยเหลอ (Help)
แนวทางการใช Help มลกษณะ ดงน1. สามารถใชงานงาย (Simplicity)
2. มการจดรปแบบอยางเปนระเบยบ(Organization)
3. มการแสดงตวอยาง (Example)
![Page 118: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/118.jpg)
ตวอยาง Help
Poorly designed help displayImproved designed help display
![Page 119: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/119.jpg)
ตวอยาง Help
![Page 120: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/120.jpg)
การออกแบบควบคมการเขาถงขอมลของผใช
1. จำากดความสามารถในการมองเหนขอมลจากฐานขอมล(View/Subschema)
2. สทธในการเขาถงขอมล (Authorization Rules)
3. การเขารหส (Encryption Procedures)
4. การตรวจสอบการเขาใชระบบ (Authentication schemas)
![Page 121: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/121.jpg)
การออกแบบลำาดบการเชอมโยงจอภาพ
เปนการออกแบบลำาดบของการแสดงสวนตดตอ กบผใชของโปรแกรม หรอลำาดบของการแสดง
สวน User Interface ทางหนาจอคอมพวเตอร แผนภาพแสดงลำาดบการเชอมโยงจอภาพ
(Dialogues Diagram) ประกอบไปดวย 3 สวน คอ1. สวนบน: เลขลำาดบหนาจอ2. สวนกลาง: ชอหนาจอการทำางาน3. สวนลาง: เลขลำาดบหนาจอทอางองมา ตอไป หรอ ยอน
กลบ
![Page 122: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/122.jpg)
Dialogues Diagram Dialogues Diagram เปนแผนภาพแสดงลำาดบการ
เชอมโยงของจอภาพ สญลกษณ
เลขลำาดบหนาจอ
ชอหนาจอการทำางาน
เลขลำาดบทอางองมา
![Page 123: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/123.jpg)
ตวอย าง Dialogue diagram for Customer Information System
![Page 124: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/124.jpg)
ระบบสารสนเทศภม ภาค(Geographic Information System: GIS)
ระบบสารสนเทศทมพนฐานการทำางานดวยระบบ คอมพวเตอร เพอใช
การจดการกบขอมลทไดมาใหอยในรปแบบทตองการ(Capturing)
การจดเกบ (Storing) การตรวจสอบ (Checking) การประสาน (Integrating) การประเมนและวเคราะหผล (Manipulating) การแสดงผล (Display)
ขอมลทางภมศาสตร หรอแสดงผลเปนแผนท(Mapping) ได
![Page 125: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/125.jpg)
องคประกอบหลกของ GIS
การนำาเขาขอมล (Data Input) การจดการขอมล (Data Management) การวเคราะหขอมล (Data Analysis) การแสดงผล (Data Display)
![Page 126: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/126.jpg)
GIS Database
ฐานขอมลทใชในการจดเกบขอมลเชงคณภาพและเชงปรมาณ
ฐานขอมลทใชจดเกบแผนท ฐานขอมลทใชจดเกบรายละเอยด หรอสารสนเทศ
บนแผนท
![Page 127: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/127.jpg)
แบบฝกหด ออกแบบ User Interface หนาจอรบคำาสงซอ Pizza โดย
มรายละเอยดดงน ลกคาโทรมาสง Pizza หรอมาซอทราน ถาโทรมาสง สามารถตรวจสอบทอยจากเบอรโทรศพททเคยโทรมา
กอนหนา ถาเปนลกคาใหมตอง input ขอมลของลกคาใหมดวย แจงขอมลรายการ Pizza และโปรโมชน เมอลกคาเลอกรายการเรยบรอยแลว ทวนคำาสงซอ และบอกราคา
รวมทงสน และเวลาการจดสง และออกแบบใบเสรจรบเงน วาด Dialogue Diagram ของระบบงาน
![Page 128: ส่วนจัดการสื่อประสานผู้ใช้(User interface-management)](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a8dc441a28abae3e8b48bd/html5/thumbnails/128.jpg)
การบาน ใหนกศกษาออกแบบ User Interface และ วาด
Dialogue Diagram ของระบบงานทจะนำาเสนอ