ส่วนจัดการสื่อประสานผู้ใช้(User...
Transcript of ส่วนจัดการสื่อประสานผู้ใช้(User...
สวนจ ดการส อประสานสวนจ ดการส อประสานผใช ผ ใช
(User Interface (User Interface Management)Management)
หวขอทศกษา
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)
Where is the Design phase in SDLC?
Design Phase-User Interface design (Input and Output)-Database design (Logical and Physical)
1. ความหมายของสอประสานผใช
สอประสานผใช (User Interface) หมายถงสอกลางในการตดตอและโตตอบระหวางผใชกบ
ระบบคอมพวเตอร Hardware ไดแก เมาส คยบอรด ลำาโพงเครองพมพ
Software ไดแก ลกษณะการแสดงผลทาจอภาพและทำาใหเกดการปฏสมพนธ
อดต การแสดงผลลพธทางจอภาพเปนแบบรรทดคำาสง
ปจจบน “การแสดงผลลพธเปนแบบ สอประสาน แบบกราฟก (Graphic User Interface : GUI”
การใชเสยงพด (Natural Language)
ความหมายของส อประสานกบผ ใช
สอกลางในการตดตอและโตตอบระหวางผใช กบระบบคอมพวเตอร ทงทางฮารดแวร และ
ซอฟตแวร
Command LineGraphic
User Interface(GUI)
NaturalLanguage
User Interface
ร ปแสดงสวนประกอบของสอกลางในการตดต อและโตตอบระหวางผ ใช กบคอมพวเตอร ร ปแสดงสวนประกอบของสอกลางในการตดต อและโตตอบระหวางผ ใช กบคอมพวเตอร
2. องคประกอบของส วนจดการส อประสานกบผ ใช
2.1 องคประกอบในกลมผใชระบบ1. องคความร (Knowledge)
2. ภาษาการกระทำา (Action Language)
3. ปฏกรยาโตตอบของผใช (User’s Reaction)
2.2 องคประกอบในกลมระบบคอมพวเตอร
1. บทโตตอบ (Dialog)
2. การประมวลผลของคอมพวเตอร (Computer Processing)
3. ภาษาการนำาเสนอ (Presentation Language)
องคประกอบของส อประสานกบผ ใช
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
ระบบจดการส อประสานกบผ ใช (User Interface Management System: UIMS)
ซอฟตแวรททำาหนาทเปนตวกลางในการจดการสอประสานทจะนำาเสนอผลลพธทไดจากการประมวลผลของระบบสนบสนนการตดสนใจไปยงผ
ใชในรปแบบตาง ๆทเหมาะสม โดยจะตดตอกบ ระบบจดการฐานขอมล ระบบจดการฐานแบบ
จำาลอง และระบบจดการฐานองคความร เพอนำาขอมลทประมวลผลไดตามคำาสงของผใชมาแสดงผล
การออกแบบสอประสานกบผ ใช (User Interface Design)
การใชงานจรงของผใช เวลาในการเรยนรระบบ ความสามารถในการใชรวมกบระบบอนๆ
ขอผดพลาดทอาจเกดขน ความสามารถของเครองคอมพวเตอร
ระดบความตองการของผใช
มาตรฐานการใชคำาสง
ความงายในการใชงานระบบ
การรบ และสงออกขอมลจากระบบ
ออกแบบไอคอน และ สญลกษณตาง ๆทเหมาะ
สม การออกแบบหนาจอท
สวยงาม นาใช ลำาดบขนตอนการทำางานไมซบซอน
สงท เราจ ำาเปนต องค ำานงถ งการออกแบบคอส งท เราจ ำาเปนต องค ำานงถ งการออกแบบคอ
ความสามารถของระบบจดการสอประสานกบผใช
1. รองรบเทคโนโลยดานกราฟกของสอประสานผใช(GUI)
2. รองรบอปกรณนำาเขาขอมลไดหลายประเภท3. รองรบการแสดงผลและการใชงานอปกรณแสดง
ผลขอมลตางๆ ได4. มความยดหยน และสามารถปรบระบบไดรวดเรว5. ชวยเกบขอมลเขา-ออกไดอยางมประสทธภาพ6. สามารถรองรบการแสดงในลกษณะภาพกราฟก
3 มตทมสสนสวยงาม7. แสดงขอมลพรอมกนหลายหนาตางและหลายรป
แบบได8. การแนะนำาผใชผานกระบวนการปอนขอมลเขา
การออกแบบสวนนำาเข าข อมล(Input)
วตถประสงคหลกของการออกแบบขอมลเขา เลอกวธการนำาเขา และปอนขอมลเขาทเหมาะสม ลดปรมาณขอมลเขา ออกแบบหนาจอปอนขอมลทสวยงาม นาสนใจ ใชการตรวจสอบความถกตอง ชวยลดความผดพลาด
ของขอมลเขา ออกแบบองตามเอกสารตนฉบบทตองการ ใชการควบคมสำาหรบการนำาขอมลเขาทมประสทธภาพ
4. การออกแบบสอประสานกบผ ใช (User Interface Design)ผออกแบบสอประสานกบผ ใช ควรค ำาน งถ งส ง
ตอไปน1. คำาน งถ งขณะทผ ใช ก ำาล งปฏบ ต งานจร ง
ก บระบบ2. คำาน งเวลาทใช ในการเร ยนร ระบบ3. ความสามารถรอบดานทต องปร บใหเข า
กบระบบอนๆ ด วย4. คำาน งถ งข อผดพลาดทเก ดข นโดยตวผ ใช
เอง5. คำาน งถ งค ณภาพของเคร องม อท ผ ใช จะ
หยบใช6. สามารถใชก บเคร องคอมพวเตอร ของผ
ใช ได อย างลงตว7. คำาน งถ งระด บความตองการของผใช
8. คำาน งถงความอ อนลาของระบบทเก ดจากการใชตดต อก นเป นเวลานาน
9. คำาน งถงมาตรฐานของการใชค ำาส งท ตองม ความเหมอนกน
10. คำาน งถงความสนกสนานเม อใชงานระบบอย11. การเลอกใชอ ปกรณ Input/Output ทด 12. การออกแบบหนาจอการทำางานใหสวยงาม ด
น าใช13. ลำาด บข นตอนการใชโปรแกรมไมซ บซอน14. รองร บสารสนเทศทผานเข า -ออกอยางเหมาะ
สม15. พจารณาเล อกใชไอคอนและส ญลกษณให
เหมาะสม16. ผใช ต องเข าใจร ปแบบการแสดงผล
สารสนเทศไดอย างง ายดาย
ร ปแบบของสอประสานกบผ ใช (User Interface Mode)
การโตตอบดวยคำาสง (Command Language Interaction)
การโตตอบดวยเมนคำาสง (Menu Interaction) การโตตอบดวยแบบฟอรม (Form Interaction) การโตตอบดวยการทำางานเชงวตถ (Object-
Based Interaction) การโตตอบดวยภาษามนษย (Natural Language
Interaction)
การโต ตอบดวยค ำาส ง (Command Language Interaction)
การโตตอบกบระบบโดยทผใชตองพมพคำาสงลงในชอง ปอนคำาสง เพอกระตนใหระบบทำางาน เชน ระบบปฏบตการ
DOS, UNIX เปนตน
5.2 การโตตอบดวยเมนคำาสง (Menu Interaction)
เปนการโตตอบกบระบบดวยเมนคำาสงใหผใชเลอก คำาสงใดๆ เพอตดตอกบระบบโดยผใชไมตองปอน
คำาสงเอง Pull Down Menu Pop-up Menu
การโตตอบดวยเมนค ำาส ง (Menu Interaction)
1122
Pull-Down Menu Pop-Up Menu
Pull Down Menu เปนเมนทแสดงตวเลอกของรายการคำาสง โดยแบงสวนรายการเมนคำาสงออกเปนกลมๆ
Pop-up Menu เปนเมนคำาสงทแสดงรายการคำาสง โดยผใชทำาใหเมนปรากฎได โดยการนำาเมาไปวางท
ขอความ/ ออปเจค แลวคลกขวา
1. คำาทสอความหมายชดเจน2. ในกรณทเปนภาษาองกฤษ ควรใชตวพมพใหญ
หรอตวพมพเลกตามความเหมาะสม3. ควรจดกลมคำาสงทเกยวของกนไวในกลมเดยวกน4. ไมควรมจำานวนเมนคำาสงมากเกนไป5. ควารมเมนยอยสำาหรบเมนคำาสงทมการทำางาน
ยอยภายในมาก6. ควรออกแบบใหมแถบสปรากฎทเมนคำาสงทถก
เลอก
หลกเกณฑในการออกแบบเมนค ำา สง ม ดงน
5.3 การโต ตอบดวยแบบฟอรม (Form Interaction)
เปนการโตตอบทผใชตองปอนขอมลลงในชองวางทอยในแบบฟอรทแสดงทางหนาจอ
คอมพวเตอร ซงมลกษณะคลายกบการกรอกแบบฟอรมลงบนกระดาษ
เปนการนำาเขาขอมลเขาสระบบหรอเพอนำาเสนอสารสนเทศ(ผลลพธ) ของระบบกได
การโต ตอบกบระบบดวยแบบฟอรม
การโตตอบดวยแบบฟอร ม(Form Interaction)
ผใชระบบจะตองปอนขอมลลงในชองวางทอยในแบบฟอรมทแสดงทาง
หนาจอคอมพวเตอร ซงมลกษณะคลายกบการกรอกแบบฟอรมลงกระดาษ
5.4 การโต ตอบเชงว ตถ (Object-Based Interaction)
เปนการโตตอบทใชกบระบบสญลกษณ เปนตวแทน คำาสงในการปฏบตงาน เชน ไอคอน (Icon)
การโต ตอบกบระบบเชงว ตถ ด วยไอคอน
การโตตอบดวยการทำางานเช งว ตถ (Object-Based Interaction)
เปนการโตตอบกบระบบทใชสญลกษณ ใชรปภาพแทนคำา สงทำางาน หรอเรยกวา “ ไอคอน (Icon)”
5.5 การโต ตอบดวยภาษามนษย (Natural Language Interaction)
เปนการโตตอบกบระบบดวยการใชเสยงพดของผ ใชระบบ ไมวาจะเปนการนำาขอมลเขาหรอออกจาก
ระบบ ผมพรอมทจะท ำางานแล ว
ผมตองการเช คe-mail
ตกลง ค ณตองการเร มท ำางานใดกอน
คณไดร บอ เมลใหม ท งหมด 10 ฉบบ
การโตตอบดวยภาษามนษย (Natural Language Interaction)
Check E-mail
You got 10 E-mail
Read First E-mail
E-mail From … Subject …
Detail …
การออกแบบการจดวางและการ แสดงผล (Layout and Display
Design)
การจดจอภาพคอมพวเตอร การเชอมโยงการปอนขอมลแตละราย โครงสรางของการปอนขอมล (Structure Data
Entry) การตอบสนองของระบบ (Providing Feedback) การแสดงสวนชวยเหลอ (Help) การแสดงผลแบบมสและขาวดำา
6.1 การจดจอภาพคอมพวเตอร
Body Zone
Title Zone
Menu Zone
Tools Zone
Message/Status Zone
Pop-up Zone เป นโซนทซ อยในระบบไมปรากฎใหผ ใช เห น สำาหร บแสดง Dialog Box
การจดจอภาพคอมพวเตอร Title ZoneTitle Zone
Menu ZoneMenu Zone
Tools ZoneTools Zone
Body ZoneBody Zone
Message/Status Message/Status ZoneZone
6.2 การเช อมโยงการปอนขอม ลแต ละรายการ เปนการเชอมโยงการปอนขอมลอยางเปนลำาดบสอดคลองกนไปแตละรายการ
ชวยใหผใชไมสบสน ลำาดบจะเรมจากซายไปขวา และ บนลงลาง
การเช อมโยงการป อนขอมลแต ละราย
เราตองกำาหนดลำาดบในการปอนขอมลใหสอดคลอง
ไมควรกำาหนดลำาดบสลบไปมาโดยไมมนยสำาคญ
โครงสร างของการป อนขอมล(Structure Data Entry)
การปอนขอมล (Entry) การกำาหนดคาเรมตน (Default) หนวยของขอมล (Unit) คำาอธบายตางๆ (Caption) รปแบบ (Format) การจดวาง (Justify) สวนชวยเหลอ (Help)
โครงสร างของการป อนขอมล(Structure Data Entry)
การปอนขอมล (Entry) ขอมลบางสวนทมแลวในฐานขอมล กไมควรทผใชจะ
ตองพมพเขาไปใหม เชน ขอมลลกคา เมอใสรหสลงไป ก ควรทจะแสดงขอมลประวตลกคาออกมา โดยไมจำาเปนตอง
กรอกขอมลเขาไปใหม
การกำาหนดคาเรมตน (Default) การกรอกขอมล เชน รหสนสต มความยาว 8 ตวอกษร
เมอกรอกครบ 8 ตวอกษร กใหทำาการเปลยนโฟกส ไปยง ฟลดอนๆ ทตองการบนทกขอมลตอไป หรอ การกำาหนดรป
แบบเมอปอนตวเลข 1000 ระบบควรมการเปลยนเปน1,000 โดยอตโนมต
โครงสร างของการป อนขอมล(Structure Data Entry)
หนวยของขอมล (Unit)
ในการกรอกขอมล หนวยของขอมลเปนสงทสำาคญ มาก เชน ระบบตองการใหบนทกขอมลมหนวยเปน
กโลกรม แตนสต มขอมลเปนตน กตองเปลยนแปลงให เหมาะสม และถกตองตามความตองการของระบบ
คำาอธบายตางๆ (Caption)
เราตองมการเขยนคำาอธบายตางๆ ใหผใชทราบวา ขอมลในฟลดน จดเกบขอมลใด สามารถทำาไดโดยการ เขยนคำาอธบาย หรอ ฉลาก กำากบไว
โครงสร างของการป อนขอมล(Structure Data Entry)
รปแบบ (Format) การจดเรยงลำาดบการกรอกขอมล การกำาหนดคำา
อธบาย และสวนอนๆ ตองมการกำาหนดใหอยในรปแบบทเปนมาตรฐานเดยวกน
การจดวาง (Justify) การจดวางตองสวยงาม เปนระเบยบ ใชงานงาย
สวนชวยเหลอ (Help)
การตอบสนองของระบบ (Providing Feedback)
การแจงสถานะการทำางาน (Status Information)
การแสดงความพรอมในการรบคำาสง (Prompting Cues)
ขอความแจงเตอนเมอมขอผดพลาด (Error/ Warning Messages)
การแจงสถานะการทำางาน(Status Information)
แสดงใหผใชเหนวา ยงมการประมวลผลการทำางาน
อย เนองจากบอยครง ท เราเขยนโปรแกรม โดยไม
ไดแสดงเหนถงสถานะปจจบนวาระบบกำาลง
ทำางานอะไรอย ทำาใหผใช เขาใจผด วาเครองของเรา
แฮงค ปกตจะแสดงเปน นาฬกา
ทราย Progress bar และตวเลขแสดงเปอรเซนตการทำางาน
การแสดงความพรอมในการร บค ำาส ง(Prompting Cues)
มการแสดงขอความพรอม ใหผใชทราบ และมการ
อธบาย Field หรอCaption ทกำาหนด
ขอความแจงเต อนหร อม ขอผ ดพลาด(Error/ Warning Messages)
เราจำาเปนตองมการแจง เตอน เมอมการทำางานท
ตองการยนยน หรอใน กรณทเกดขอผดพลาดขน
เพอใหผใชไดทราบ และทำาการตดสนใจ
ผด
ถก
การแสดงส วนชวยเหลอ (Help)
สามารถเขาใจไดงาย (Simplicity) มการจดรปแบบอยางเปนระเบยบ มการแสดงตวอยาง (Show)
การแสดงผลแบบมส และขาวดำา ขอดของการแสดงผลแบบมส
สามารถแสดงความรสกได สามารถแสดงใหเหนถงจดทเนน หรอ สำาคญได
ปญหาทเกดจากการแสดงผลแบบมส ไมสามารถใชไดกบผใชทมอาการตาบอดส ความละเอยดของสอาจมการเปลยนแปลงเมอใชอปกรณ
ตางชนดกน
รปแบบอน ๆ ของส อประสานกบผ ใช กราฟก (Graphics) มลตมเดยและไฮเปอรเทกซ (Multimedia and
Hypertext) ระบบความจรงเสมอน (Virtual Reality System) การประมวลผลภาษาธรรมชาต (Natural
Language Processing)
นกพฒนาระบบตองเตร ยมความสามารถในการปอนขอม ลด งน การควบคม Cursor
1. เล อน cursor ไปยงชองป อนขอมลตอไปได ตามตองการ
2. เล อน cursor กลบไปย งชองป อนขอม ลก อนหนาน ได
3. เล อน cursor ไปยงชองป อนขอมลแรก หร อ ขอม ลส ดท าย หร อชองว างใดๆ ทตองการได
4. ในแตละช อง ผ ใชต องเล อน cursor ทละต วอ กษรได
การแกไขตวอกษรหร อข อม ล1. ลบตวอ กษรทละตวอ กษรด วย backspace
หรอ delete ได 2. ลบขอม ลท งหมดของชองป อนขอม ลใดๆ ไ3. ลบขอม ลท งหมดทม อย บนฟอร มได (ทำาให
ฟอร มว างๆ)
การใชค ำาส ง Exit1. คอ การออกจากโปรแกรม2. คอ การออกจากหนาจอการทำางานของ
แบบฟอรมใดแบบฟอรมหนง เพ อไปยงหนาจอของอกแบบฟอรมน ง
3. ตองม การโตตอบเพอสอบถามผใช ว า“ตองการบนทกข อม ลก อนออกจาก
”โปรแกรมหรอไม มส วนชวยเหลอ (Help)
1. เร ยกใช Help ขณะทก ำาลงป อนขอม ลได 2. เร ยกใช Help ขณะทอย ในหนาจอแสดง
รายงานได
6.3 โครงสรางของการปอนขอมล(Structure Data Entry) เป นการออกแบบเพอก ำาหนดรปแบบหรอล กษณะของชองทจะใชในการปอนขอมล
การปอนขอมล (Entry) ขอมลทมในฐานขอมลแลว ควรดงขอมลออกจากฐาน
ขอมลมาแสดง โดยไมตองมการปอนใหม คาเรมตน (Default)
ในกรณทชองปอนขอมลสามารถกำาหนดคาเรมตนใหกบfield ได ระบบควรแสดงคาเรมตนทนท
เมอปอนขอมลเตมขนาด ระบบควรเลอ cursor ไปยงชองปอนขอมลถดไปอตโนมต
กรณทขอมลเปนวนท ระบบควรเตรยมสญลกษณคน ระหวาง วน เดอน ป ใหอตโนมต
กรณตวเลขเปนจำานวนเงน ระบบควรเตรยมเครองหมาย จลภาค (,) ไวอตโนมต
หนวยของขอมล ควรระบหนวยของขอมลใหชดเจนสำาหรบชองปอน
ขอมลทจำาเปนตองระบ คำาอธบาย Filed หรอ คำาอธบายชองปอนขอมล
(Caption) การแสดงคำาอธบายใหเหมาะสมกบการจดวาง Layout Line Caption เบอรโทรศพท - -
Drop Caption - - เบอรโทรศพท
Delimited Characters
Check-off Boxes ประเภทการชำาระเงน เชค เงนสด
บตรเครดต
- -
รปแบบของขอมล (Format) รปแบบของขอมลทตองมสญลกษณพเศษ ระบบตองมสญลกษณพเศษใหอตโนมต
การจดวางขอมล (Justify) การจดวางขอมลประเภทตวอกษร จดชด..............................
การจดวางขอมลประเภทตวเลข จดชด..............................
สวนชวยเหลอ (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
1. Text Box
กลองสเหลยมสำาหรบปอนขอมล โดยม Caption ดานหนากลองเพอสอความหมายสงทจะปอนลงไป
ขอแนะนำา1. วาง Caption ทสอความหมายดานหนา Text
Box
2. กรณเปนภาษาองกฤษ ตวอกษรแรกเทานนเปนตวพมพใหญ
3. มเครองหมายโคลอน (:) อยดานหลงขอความ4. ควรกำาหนดขนาด Text Box ใหเหมาะสมกบ
ขอความทจะปอน
2. Radio Button วงกลมเลกดานซายมอและมคำาอธบายขวามอท
สอดคลองกบคาคำาตอบทตองการใหผใชเลอกตอบ
ผใชเลอกคำาตอบไดคาเดยวเทานนขอแนะนำา1. ลำาดบคำาตอบเรยงจากบนลงลาง และชดดานซาย
ของจอภาพ2. กลมคำาตอบควรแยกจาก Input Control รป
แบบอน3. กลมคำาตอบควรมขอความทสอความหมายกบคำา
ตอบทตองการเลอก
3. Check Box
คลาย Radio Button ต Check Boxใช สเหลยมจตรสเลกแทนวงกลม ตามดวยขอความ
คำาอธบาย ผใชสามารถเลอกไดมากกวา 1 คำาตอบขอแนะนำา1. ขอความอธบาย (Caption) ควรสอความหมาย
และเขาใจงาย2. การจดกลมขอมลทสมพนธกน ควรมหวขออธบาย
วาเปนกลมขอมลเรองใด3. จดเรยงคำาตอบในแนวตง ชดดานซายของ
จอภาพ4. ลำาดบคำาตอบควรเรยงตามคำาอธบาย หรอเรยง
ตามตวอกษร หากเปนตวเลข ควรเรยงลำาดบจากคานอยไปมาก
4. List Box
กลองสเหลมทบรรจคำาตอบมากกวา 1 คำาตอบ ปรากฎ แถบเลอน (Scroll Bar)
ผใชสามารถเลอกไดคำาตอบเดยวเทานน ใชในกรณทคำาตอบทเปนไปไดมจำานวนมากและมพนท
จำากด
ขอแนะนำา1. ขอความอธบาย (Caption) ควรสอความหมายและเขาใจงาย ไว
ดานบน โดยหลกเลยงคำายอ2. กรณเปนภาษาองกฤษ ตวอกษรแรกเทานนเปนตวพมพใหญ3. มเครองหมายโคลอน (:) อยดานหลงขอความ4. ควรกำาหนดคาคำาตอบเรมตนและแสดงแถบสทคำาตอบนน5. ขนาดเหมาะสมกบการแสดงคำาตอบไวอยางนอย 2-3 คำาตอบ6. กรณใชรปภาพแทนรายละเอยดของคำาตอบ ตองเปนรปภาพทสอ
ความหมาย7. ลำาดบคำาตอบควรเรยงตามคำาอธบาย หรอเรยงตามตวอกษร
หากเปนตวเลข ควรเรยงลำาดบจากคานอยไปมาก
5. Drop-Down List Box
คลายกบ List Box แตจะปรากฎคำาตอบใหเหน เพยงคำาตอบเดยว คำาตอบอนจะใหผใชคลกเลอก
รปลกศรชลง ผใชสามารถเลอกไดคำาตอบเดยวเทานน
ข อแนะนำา ควรวางขอความอธบาย (Caption) ทสอความหมายกบคำาตอบทตองการเลอกไวดานบนหรอดาน
ซาย โดยหลกเลยงคำายอ
6. Combination (Combo) Box
Combo Box คลายกบ Drop-Down List Box คอบรรจคำาตอบเดยว คำาตอบทเหลอผใชคลกขวา
เพอแสดงคำาตอบทงหมด ลกษณะพเศษของ Combo Box คอ ผใชสามารถปอนคาคำาตอบนอกเหนอจากทมในกลองได
ข อแนะนำา ควรวางขอความอธบาย (Caption) ทสอความหมายกบคำาตอบทตองการเลอกไวดานบนหรอดาน
ซาย โดยหลกเลยงคำายอ
7. Spin (Spinner) Box
เปนกลองสเหลยม แสดงขอความเพยงแถวเดยว และมปมรปลกศรชขนลง เพอเปลยคาขอมลทเปน
ตวเลขตามหนวยวด เหมาะสำาหรบการปอนขอมลทมพนทของจอภาพจำากด
ข อแนะนำา ควรวางขอความอธบาย (Caption) ทสอความหมายกบคำาตอบทตองการเลอกไวดานบนหรอดาน
ซาย โดยหลกเลยงคำายอ ควรกำาหนดคาเรมตนของระบบไว
6.4 การตอบสนองของระบบ(Providing Feedback)
เปนการแจงการตอบสนองของระบบในระหวางการใชงานของระบบ
การตอบสนองระบบม 3 ชนด
1. แจงสถานะการทำางาน(Status Information)
2. แสดงความพรอมในการ รบคำาสง (Prompt
Cues)3. ขอความแจงหรอเตอนเมอ
เกดขอผดพลาด(Error/Warning Messages)
6.5 การแสดงสวนชวยเหลอ (Help)
1. สามารถเขาใจไดงาย2. มการจดรปแบบอยางเปนระเบยบ3. มการแสดงตวอยาง
6.6 การแสดงผลสอประสานกบผใชแบบมสและขาวดำา ขอดของการแสดงผลแบบมส
1. ใหความรสกออนโยนเวลามอง2. แสดงหรอเนนขอความบนเอกสารได3. แบงแยกรายละเอยดทมความซบซอนใหดงายขน4. เนนสวนขอควมเตอนใหชดขน
ปญหาทเกดจาการแสดงผลแบบมส1. เปนปญหากบผใชงานตาบอดส2. ความละเอยดของสมคาเปลยนแปลงไดเมอใชกบ
อปกรณตางชนดกน3. ความถกตองของสอาจคลาดเคลอนเมอใชกบอปกรณ
ตางชนดกน
สรป
กระบวนการในการออกแบบ User Interface
1. รวบรวมขอมลการตดตอกบระบบทางหนาจอของผใช
2. ออกแบบสวนตดตอกบระบบอยางคราว ๆ3. ใช Case Tools สรางตวตนแบบ
(Prototyping) และทดสอบ
รปแบบของ User Interfaces
เพอใหผใชงานสามารถโตตอบกบระบบอยางมประสทธภาพ
นยมใชแบบกราฟก (Graphic User Interface :GUI)
มรปแบบดงน คอ การโตตอบดวยคำาสง (Command Language
Interaction) การโตตอบดวยเมนคำาสง (Menu Interaction)
การโตตอบดวยแบบฟอรม (Form Interaction)
การโตตอบดวยการทำางานเชงวตถ (Object-Based Interaction)
การโตตอบดวยภาษามนษย (Natural Language Interaction)
หลกเกณฑในการออกแบบเมนคำาสง
1. แตละเมนคำาสงควรเลอกใชคำาสงทสอความหมายไดชดเจน
2. ควรมการใชตวอกษรพมพใหญหรอตวอกษรพมพเลกตามความเหมาะสม
3. ควรมการจดกลมคำาสงทมความเกยวของกนไวในกลมเดยวกน
4. ไมควรมจำานวนเมนคำาสงมากเกนไป5. ควรมเมนยอยสำาหรบเมนคำาสงทมการทำางานยอยภายใน
มากเกนไป6. เมอมการเลอกเมนคำาสง ควรออกแบบใหมแถบสปรากฏท
เมนคำาสงทถกเลอก
Poor menu design
Improve menu design
Menu Building within a graphical user interface environment
การออกแบบ Interfaces
การออกแบบการจดวาง (Layouts) ของหนาจอ โครงสรางของการปอนขอมล (Structure Data
Entry) การควบคมความถกตองในระหวางปอนขอมล
(Controlling Data Input) การตอบสนองของระบบ (Providing Feedback) การแสดงสวนชวยเหลอ (Help) การออกแบบการควบคมการเขาถงขอมลของผใช การออกแบบลำาดบการเชอมโยงจอภาพ (Dialogue
Design)
การออกแบบการจดวางของหนาจอ
1. สวนหวเรอง: ใชแสดงชอของเอกสารหรอ ฟอรมนน ๆ
2. สวนแสดงลำาดบและวนท: ใชแสดงเลขลำาดบและวนทหรอเวลา
3. สวนแนะนำาหรอแนวทางในการใช: ใชอธบายขอแนะนำาการใชฟอรม
4. สวนรายละเอยดขอมล: ใชแสดงสาระสำาคญของเอกสารหรอฟอรม
5. สวนแสดงผลรวม: ใชแสดงคาผลรวม เชน ยอด เงน ยอดขาย เปนตน
6. สวนการลงนามผมอำานาจ: ใชแสดงนามผมอำานาจของเอกสารหรอฟอรม
7. สวนแสดงความคดเหน: ใชในการเขยนขอความทเปนความคดเหน
ร ปแบบของเอกสารต นฉบบ
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
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
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: [ ]
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:
การออกแบบหนาจอทงหมดมจดมง หมาย 2 อยาง คอ เพอนำาเสนอขอมลและ
ชวยในการปฏบตงานในการใชระบบ มแนวทางมากมายในการออกแบบทตองพจารณาคอหนาจอทงหมดทปรากฏควร
ดงดดใจใหอยากใชงาน ไมควรแนนเกนไป
การออกแบบหนาจอ
การออกแบบการจดวางของหนาจอ การออกแบบหนาจอของฟอรมหรอรายงานตางๆ ควรจะจด
วางรปแบบใหเหมอนกบเอกสารมากทสด การเชอมโยงการปอนขอมลในแตละรายการหรอแตละ
ฟลด ตองลำาดบการเชอมโยงในการปอนขอมลในแตละฟลด การกรอกจะคลายกบการกรอกบนเอกสารจรง เรมกรอกจากซายไปขวา และจากบนลงลาง ควรมความยดหยนและสอดคลองในการทำางาน สามารถยาย
cursor ไปมาระหวางฟลดทตองการแกไข
1. เมอเขาไปทหนาจอรบขอมลเคอรเซอร (Cursor) ตองอยทตำาแหนงแรกของขอมลรบตามเนอหาของหนา
จอนน ตำาแหนงนนควรอยมมบนซายมอ หลงจากผใชใส ขอมลแลวเคอรเซอร (Cursor) ควรเลอนไปทชองรบ
ขอมลถดไปเสมอ คอ ดานลางหรอดานขางถดไปเพอ ใหการปอนขอมลเปนธรรมชาตจากบนซายไปขวา แลว
จงลงมาบรรทดใหม 2. ทกชองรบขอมลตอมคำาอธบาย โดยแสดงกำากบ
ทชองนน ซงจะตองระบใหชดเจนและอยในตำาแหนงทถกตองและควรมรปแบบเดยวกนเพอใหผใชไมสบสนในการทำางาน
การออกแบบหนาจอรบขอมล
3. ถาชองรบขอมลนนมรปแบบเฉพาะใหแสดงรปแบบเฉพาะนนเพอใหผใชปอนขอมลไมผดพลาด
4. ในทกครงทปอนขอมลในชองรบขอมลนน “ครบถวนใหผใชกด Enter” เพอไปยงชองรบ
ขอมลถดไปหรอในกรณทใสขอมลเทาจำานวน ของขอมลนนแลว เคอรเซอรควรไปยงชองรบ
ขอมลถดไปอตโนมตเพอรบขอมลถดไป เพออำานวยความสะดวก
– 5. กรณขอมลรบเขาเปนตวอกษรพเศษแลวควรออกแบบใหสามารถใสตวอกษรพเศษอตโนมตโดยผใชไมตองใสเอง
– 6. กรณขอมลรบเขาตองการแสดงผลรบเปนเลข“0” ใหแสดงโดยผใชไมตองปอนเอง
– 7. กรณทขอมลรบเขาเปนจำานวนเลขทนำาไป “คำานวณคาควรม ,” คนหลกพนหรอจดทศนยม
ขนอตโนมต– 8. กรณชองรบขอมลนนมคาทสามารถ
กำาหนด (Default) ได ระบบนนควรแสดงคาท กำาหนดนน (Default) ทชองนน
9. สำาหรบขอมลรบทเปนรหสทตองมการตรวจสอบ กอนบนทก คอ คานนมความสมพนธกบคาอนท
บนทกไวเดมแลว เมอมการปอนรหสนนตองรบ คานนไปตรวจสอบทแฟมขอมลทอางถง
10 ควรมปมคำาสงตาง ๆ ตามความเหมาะสมของการใชงานหนาจอนน
11 หลงจากปอนขอมลในหนาจอนน ๆ สมบรณแลวและไดรบการตรวจสอบแลวควรมการใชผใชไดตรวจสอบและยนยนหรอยกเลกกอนบนทกขอมลเขาเครอง
การออกแบบหนาจอทงหมดมจดมงหมาย 2 อยาง คอ เพอนำาเสนอขอมลและชวยในการ
ปฏบตงานในการใชระบบ มแนวทางมากมายในการออกแบบทตองพจารณาคอหนาจอทงหมดท
ปรากฏควรดงดดใจใหอยากใชงาน ไมควรแนนเกนไป
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX XXXXXX
XXXXXX
XXXXXX
START
แสดงการปอนขอมลตามการจดเรยงทไมถกตอง
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX XXXXXX
XXXXXX
XXXXXX
START
แสดงการปอนขอมลตามการจดเรยงทถกตอง
Bad Flow in a Form
Good Flow in a Form
การออกแบบหนาจอรบขอมล
หนาจอดาตาเอนทร (Data Entry Screen)
สงทตองเตรยมความสามารถของหนาจอปอนขอมล
การควบคมตวกระพรบ (Cursor)การแกไขตวเลขหรอขอมล การใชคำาสงออก (Exit)มสวนชวยเหลอ (Help)
โครงสรางของการปอนขอมล(Structure Data Entry)
การออกแบบโครงสรางการปอนขอมล คอ การออกแบบเพอกำาหนดรปแบบ หรอลกษณะของชองปอนขอมล เพอเตรยมความสะดวกใหกบผใช เชน การกำาหนดคาเรมตน การจดวางขอมล เปนตน
มหลกเกณฑการออกแบบดงน การปอนขอม ล (Entry) พยายามใหผใชปอนขอมล
เทาทจำาเปนเทานน คาเร มตน (Default Value) คาของขอมลใดท
สามารถกำาหนดคาเรมใหได ควรใสใหผใชทนท เพอ เพมความสะดวก เชน วนท หรอหมายเลข Running
Number เปนตน หนวยของขอม ล (Unit) ระบหนวยขอมลใหชดเจน
เชน บาท ดอลลาร กโลกรม เปนตน คำาอธบาย หรอ ค ำาอธบายชองป อน
ขอมล(Caption) แสดงคำาอธบายฟลดวาตองการใหผ ใชใสขอมลอะไร เปนจดวางใหเหมาะสม
ร ปแบบของขอม ล (Format) ถา ตองการใหมสญลกษณพเศษ ควรเตรยม
สญลกษณเหลานใหอตโนมตการจดวางขอม ล(Justify) ออกแบบ
ใหมการจดวางขอมลโดยอตโนมต เชน ตวเลขชดขวา ขอความชดซาย เปนตน
สวนชวยเหลอ (Help) เตรยมสวนชวย เหลอระหวางผใชปอนขอมล เชนปม F1
เพอขออานคำาอธบายการตดต อก บผ ใช ในการปอนขอม ล
ดวยกราฟก (GUI)
การตดตอกบผใชแบบกราฟก(Graphic User Interface: GUI)
เทคโนโลยทนำามาใช เรยกวา GUI Input Control
ชวยใหผใชระบบสามารถใชงานระบบไดงายขน ชวยใหขอมลทนำาเขาสระบบมรปแบบเดยวกน ชวยปองกนความผดพลาดในระหวางการปอน
ขอมล
รปแบบของ 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
Next
ตวอยางการใช GUI ทใชแทนเมน หลกของระบบการใหเกรด น.ศ.
Back
เมนพลดาวน (Pull-Down Menu)
หนาตางปอบอฟ (Pop-up Window)
แสดงเทคนคทาง GUI 8 แบบในการนำาขอมลเขาหรอเลอกคำาสง
ตวอยาง Graphic User Interface
ListBoxTextBoxRadio Button
ComboBox
Common GUI Components
Can edit
Text box
Radiobutton
Checkbox
Listbox
Spin box
Dropdownlist
Button
Advanced GUI Components
Advanced GUI Components (continued)
Input Prototype for Data Maintenance
Input Prototype for Transaction
Input Prototype for Data Maintenance
Input Prototype for Web Interface
Input Prototype for Web Interface
การควบคมความถกตองในระหวาง ปอนขอมล (Controlling Data Input)
ควรตรวจสอบชนดของขอมล ควรตรวจสอบการปอนขอมลไมครบตามทระบไว ควรตรวจสอบรปแบบทปอนขอมล ควรตรวจสอบคาสงสดและตำาสดของขอมล ควรตรวจสอบความครบถวนของขอมลในแตละฟลด
การตอบสนองของระบบ (Providing Feedback)
มอยดวยกน 3 ชนด คอ1. แจงสถานะการทำางาน (Status Information)
2. แสดงความพรอมในการรบคำาสง (Prompting Cues)
3. ขอความแจงหรอเตอนเมอมขอผดพลาด (Error/Warning Messages)
แจงสถานะการทำางาน (Status Information)
แจงใหผใชทราบถงความสถานะปจจบนในกาทำางานของระบบ เชน แสดงเลขหนาทกำาลงทำางานอย
แสดงความคบหนาในการประมวลผล
Combination of Text and Graphics for End User feedback
แสดงความพรอมในการร บค ำาส ง
(Prompting Cues) เปนการออกแบบเพอแจงสถานะความพรอมในการรบคำาสง เชน หนา Login เขาระบบ cursor กระพรบรอรบ username
หรอ กรณาปอนรหสวชา :_ _ _-_ _ _
ขอความแจ งหร อเตอนเม อมข อผดพลาด (Error/Warning Messages)
การแสดงขอความเมอเกดขอผดพลาด และแนะแนวทางในการแกไขเพออธบายใหผใชสามารถแกไขปญหาดวยตนเองได
การแสดงสวนชวยเหลอ (Help)
แนวทางการใช Help มลกษณะ ดงน1. สามารถใชงานงาย (Simplicity)
2. มการจดรปแบบอยางเปนระเบยบ(Organization)
3. มการแสดงตวอยาง (Example)
ตวอยาง Help
Poorly designed help displayImproved designed help display
ตวอยาง Help
การออกแบบควบคมการเขาถงขอมลของผใช
1. จำากดความสามารถในการมองเหนขอมลจากฐานขอมล(View/Subschema)
2. สทธในการเขาถงขอมล (Authorization Rules)
3. การเขารหส (Encryption Procedures)
4. การตรวจสอบการเขาใชระบบ (Authentication schemas)
การออกแบบลำาดบการเชอมโยงจอภาพ
เปนการออกแบบลำาดบของการแสดงสวนตดตอ กบผใชของโปรแกรม หรอลำาดบของการแสดง
สวน User Interface ทางหนาจอคอมพวเตอร แผนภาพแสดงลำาดบการเชอมโยงจอภาพ
(Dialogues Diagram) ประกอบไปดวย 3 สวน คอ1. สวนบน: เลขลำาดบหนาจอ2. สวนกลาง: ชอหนาจอการทำางาน3. สวนลาง: เลขลำาดบหนาจอทอางองมา ตอไป หรอ ยอน
กลบ
Dialogues Diagram Dialogues Diagram เปนแผนภาพแสดงลำาดบการ
เชอมโยงของจอภาพ สญลกษณ
เลขลำาดบหนาจอ
ชอหนาจอการทำางาน
เลขลำาดบทอางองมา
ตวอย าง Dialogue diagram for Customer Information System
ระบบสารสนเทศภม ภาค(Geographic Information System: GIS)
ระบบสารสนเทศทมพนฐานการทำางานดวยระบบ คอมพวเตอร เพอใช
การจดการกบขอมลทไดมาใหอยในรปแบบทตองการ(Capturing)
การจดเกบ (Storing) การตรวจสอบ (Checking) การประสาน (Integrating) การประเมนและวเคราะหผล (Manipulating) การแสดงผล (Display)
ขอมลทางภมศาสตร หรอแสดงผลเปนแผนท(Mapping) ได
องคประกอบหลกของ GIS
การนำาเขาขอมล (Data Input) การจดการขอมล (Data Management) การวเคราะหขอมล (Data Analysis) การแสดงผล (Data Display)
GIS Database
ฐานขอมลทใชในการจดเกบขอมลเชงคณภาพและเชงปรมาณ
ฐานขอมลทใชจดเกบแผนท ฐานขอมลทใชจดเกบรายละเอยด หรอสารสนเทศ
บนแผนท
แบบฝกหด ออกแบบ User Interface หนาจอรบคำาสงซอ Pizza โดย
มรายละเอยดดงน ลกคาโทรมาสง Pizza หรอมาซอทราน ถาโทรมาสง สามารถตรวจสอบทอยจากเบอรโทรศพททเคยโทรมา
กอนหนา ถาเปนลกคาใหมตอง input ขอมลของลกคาใหมดวย แจงขอมลรายการ Pizza และโปรโมชน เมอลกคาเลอกรายการเรยบรอยแลว ทวนคำาสงซอ และบอกราคา
รวมทงสน และเวลาการจดสง และออกแบบใบเสรจรบเงน วาด Dialogue Diagram ของระบบงาน
การบาน ใหนกศกษาออกแบบ User Interface และ วาด
Dialogue Diagram ของระบบงานทจะนำาเสนอ