Transcript l i n e a r r a d i a n c e - Saint John's for Education

Chapter 5
User Interface Management
ANGKANA
บทนำ
“สื่ อประสานกับผู้ใช้ (User Interface)” เนื่องจากเป็ นส่ วนที่ จะทาให้
ผู้ใช้ และระบบงานใด ๆ นั้นสามารถติดต่ อหรื อโต้ ตอบกันได้
เนื่องจากพืน้ ฐานการใช้ เครื่ องคอมพิวเตอร์ ของผู้ใช้ นั้นไม่ เท่ ากัน หาก
ผู้ใช้ ที่มีพืน้ ฐานในการใช้ เครื่ องคอมพิวเตอร์ สูงและยิ่งเข้ า ใจในหลักการทางาน
ด้ ว ยแล้ ว จะท าให้ การด าเนิ น ธุ ร กิ จ ที่ มี ร ะบบสนั บ สนุ น การตั ด สิ นใจคอย
ช่ วยเหลืออยู่นั้น มีประสิ ทธิ ภาพและศักยภาพสูงสุด
ดังนั้น นักพัฒนาจึ งได้ เล็งเห็นความสาคัญตรงจุดนีเ้ ป็ นอย่ างมาก ด้ วย
การพยายามออกแบบระบสื่ อ รปะสานกั บ ผู้ ใ ช้ ให้ สามารถน าพาผู้ ใ ช้ นั้ น
ติดต่ อสื่ อสารกับระบบงานได้ อย่ างมีประสิ ทธิ ภาพมากที่สุดเท่ าที่จะเป็ นไปได้
ANGKANA
หัวข้ อกำรเรี ยนร้ ู
1. ความหมายของสื่ อประสานกับผู้ใช้
2. องค์ ประกอบของสื่ อประสานกับผู้ใช้
3. ระบบการจัดการสื่ อประสานกับผู้ใช้
(User Interface Management System :UIMS)
4. การออกแบบสื่ อประสานกับผู้ใช้ (User Interface Design)
5. รู ปแบบของสื่ อประสานกับผู้ใช้ (User Interface Mode)
6. การออกแบบการจัดวางการแสดงผล (Layout and Display Design)
7. รู ปแบบอื่น ๆ ของสื่ อประสานกับผู้ใช้
8. ระบบสารสนเทศภูมิภาค (Geographic Information System :GIS)
ควำมหมำยของสื่อประสำนกับผ้ ใู ช้
“สื่ อประสานกับผู้ใช้ (User Interface)” หมายถึง สื่ อกลางในการติ ดต่ อ
และโต้ ต อบระหว่ า งผู้ใ ช้ ร ะบบคอมพิ ว เตอร์ ไม่ ว่ า จะเป็ นการติ ด ต่ อ ทางด้ า น
ฮาร์ ดแวร์ หรื อซอฟต์ แวร์
เทคโนโลยีทางด้ านคอมพิวเตอร์ ได้ รับการพัฒนาขีดความสามารถมาก
ขึน้ ทาให้ นักพัฒนามีเครื่ องมือในการสร้ างสื่ อประสานได้ ง่ายและสวยงามมากขึน้
ด้ วยรู ปแบบที่ เรี ยกว่ า “สื่ อประสานแบบกราฟฟิ ก (Graphic User Interface :GUI)
โดยสามารถสร้ างสื่ อประสานให้ มีรูปแบบ เช่ น เมนูคาสั่ ง แบบฟอร์ ม การถามตอบ เป็ นต้ น รู ปแบบของสื่ อประสานกับผู้ใช้ มีสีสันสวยงาม มีการช้ านที่ ง่ายดาย
มากขึน้ และที่สาคัญคือ ผู้ใช้ สามารถประสาน ติดต่ อ หรื อโต้ ตอบกับระบบได้ ด้วย
การใช้ เสี ยงพูด (Natural Language) หรื อนิว้ สั มผัส ที่ นับว่ าเป็ นการอานวยความ
สะดวกมากยิ่งขึน้ ให้ ผ้ ใู ช้ ที่มีความชานาญไม่ มากนัก
องค์ ประกอบของส่ วนกำรจัดกำรสื่อประสำนกับผ้ ใู ช้
Knowledge
Interpret the display
Task
Presentation
language
Generate the
display
Application
processing
Process the content
Plan and take action
Action Language
User
Interpret the
user input
System
แสดงองค์ ประกอบของสื่อประสำนกับผู้ใช้
องค์ ประกอบของส่ วนกำรจัดกำรสื่อประสำนกับผ้ ใู ช้
จากรู ปในที่ นี้จะแบ่ งองค์ ประกอบของสื่ อประสานกับผู้ใช้ ออกเป็ น
2 กลุ่ม คือ กลุ่มผู้ใช้ และกลุ่มระบบคอมพิวเตอร์
องค์ ประกอบในกลุ่มของผู้ใช้ ระบบ
1. องค์ ความรู้ (Knowledge) หมายถึง ความรู้ ของผู้ใช้ ระบบที่ จะต้ องมี
หรื อจะต้ องรู้ ไม่ ว่าจะเป็ นความรู้ เรื่ องใด ๆ ก็ตามที่ จะนามาใช้ เพื่ อติ ดต่ อกัน
ระบบคอมพิวเตอร์ องค์ ความรู้ นั้นอาจเกิดจากความเชี่ ยวชาญของผู้ใช้ ระบบเอง
หรื ออาจเกิดจากการเรี ยนรู้ จากแหล่ งอื่นก็ได้
องค์ ประกอบของส่ วนกำรจัดกำรสื่อประสำนกับผ้ ใู ช้
2. ภาษาการกระทา (Action Language) การกระทาดังกล่ าวจะต้ อง
เป็ นการกระทาที่ ระบบคอมพิ วเตอร์ เข้ าใจ ดังนั้นจึ งต้ องมี “ภาษาแสดงการ
กระทา” ซึ่ งหมายถึ ง ภาษาที่ ใช้ สร้ างรู ปแบบการส่ งผ่ านคาสั่ งที่ จะนาเข้ าไป
ประมวลผลในระบบคอมพิ วเตอร์ หรื อกล่ า วง่ า ย ๆ ก็คื อ “รู ปแบบของสื่ อ
ประสานกับผู้ใช้ (User Interface Mode/Style)” นั่นเอง
3. ปฏิกิริยาโต้ ตอบของผู้ใช้ (User’s Reaction) เป็ นปฏิ กิริยาซึ่ งเกิดขึน้
หลังจากผู้ใช้ ได้ รับผลลัพธ์ จากระบบ ปฏิกิริยาโต้ ตอบของผู้ใช้ จะนาเข้ าสู่ระบบ
คอมพิ วเตอร์ อี กครั้ ง เพื่ อประมวลผลคาสั่ งด้ วยภาษาที่ ทาให้ เกิ ดการกระทา
ต่ อไป
องค์ ประกอบของส่ วนกำรจัดกำรสื่อประสำนกับผ้ ใู ช้
องค์ ประกอบในกลุ่มของระบบคอมพิวเตอร์
1. บทโต้ ตอบ (Dialog) หรื อ “บทสนทนา” ที่ใช้ โต้ ตอบและติดต่ อกับ
ผู้ใช้ ระบบที่คอมพิวเตอร์ ได้ เตรี ยมไว้ ซึ่ งอาจเป็ นชุดข้ อมูลหรื อชุดคาสั่งก็ได้
2. การประมวลผลของคอมพิวเตอร์ (Computer Processing) จะทา
หน้ าที่ แปลคาสั่งที่ ผ้ ใู ช้ ป้อนผ่ านมาทาง Action Language แล้ วปฏิ บัติตามคาสั่ง
จากนั้นก็สร้ างผลลัพธ์ ขึน้ เพื่อจะนาไปเสนอต่ อไป
3. ภาษาการนาเสนอ (Presentation Language) เป็ นภาษาที่ ระบบ
คอมพิวเตอร์ ใช้ เพื่อแสดงผลลัพธ์ ให้ ผ้ ูใช้ ระบบได้ รับทราบ การแสดงผลลัพธ์
เป็ นแบบข้ อความ รู ปภาพ กราฟ ภาพนิ่ ง ภาพเคลื่อนไหว ภาพสามมิติ แสง สี
เสี ยง
ระบบจัดกำรสื่อประสำนกับผ้ ใู ช้
(User Interface Management System: UIMS)
ระบบจัดการสื่ อประสานกับผู้ใช้ หมายถึง ซอฟต์ แวร์ ที่ ทาหน้ าที่ เป็ น
ตั ว กลางในการจั ด การสื่ อประสานที่ จ ะน าเสนอผลลั พ ธ์ ที่ ไ ด้ จากการ
ประมวลผลของระบบสนับสนุนการตัดสิ นใจไปยังผู้ใช้ ในรู ปแบบต่ าง ๆ ที่
เหมาะสม โดยจะติ ด ต่ อกั บ ระบบจั ด การฐานข้ อ มู ล ระบบจั ด การฐาน
แบบจาลอง และระบบจัดการฐานองค์ ความรู้ เพื่ อนาข้ อมูลที่ ประมวลผลได้
ตามคาสั่งของผู้ใช้ มาแสดงผล
ระบบจัดกำรสื่อประสำนกับผ้ ใู ช้
(User Interface Management System: UIMS)
 ความสามารถของระบบจัดการสื่ อประสานกับผู้ใช้
1. สามารถรองรั บเทคโนโลยี ด้านกราฟิ กของสื่ อประสานกับผู้ใช้ (Graphic
User Interfaces) เพื่ อช่ วยให้ ผ้ ูใช้ สามารถใช้ งานระบบสนับสนุนการ
ตัดสิ นใจได้ ง่ายยิ่งขึน้
2. สามารถรองรั บอุปกรณ์ นาเข้ าข้ อมูล (Input Device) ได้ หลายประเภท ซึ่ ง
ช่ วยให้ สามารถนาข้ มอูลจากแหล่ งข้ อมูลต่ าง ๆ เข้ าสู่ ระบบสนั บสนุนการ
ตัดสิ นใจได้
3. สามารถรองรั บการแสดงผลในลักษณะกราฟิ ก 3 มิติ ที่มีสีสันสวยงามได้
4. สามารถแสดงข้ อมูลพร้ อมกันหลายหน้ าต่ างและหลายรู ปแบบได้
5. ผู้ใช้ สามารถปรั บแต่ งหน้ าตาของระบบสื่ อประสานกับผู้ใช้ ให้ เป็ นไป
ตามความต้ องการของผู้ใช้ ได้ เสมอ
กำรออกแบบสื่อประสำนกับผ้ ใู ช้ (User Interface Design)
การสร้ างสื่ อประสานกับผู้ใช้ ให้ มีคุณภาพ และประสบความสาเร็ จ
ผู้สร้ างมักต้ องพบกับความซับซ้ อนของปั จจัยแวดล้ อมต่ าง ๆ เช่ น ความซับซ้ อน
ของเทคโนโลยี ความซั บซ้ อนทางด้ านจิ ตวิทยา ความซั บซ้ อนทางด้ านฟิ สิ กส์
และความซับซ้ อนของปั จจัยแวดล้ อมอื่น ๆ อีกมากมาย ผู้ออกแบบควรคานึงถึง
และพิจารณาถึงสิ่ งต่ อไปนี ้
1, คานึงถึงขณะที่ผ้ ใู ช้ กาลังปฏิบัติงานจริ งกับระบบ
2. คานึงถึงเวลาที่ใช้ ในการเรี ยนรู้ การใช้ ระบบ
3. คานึงถึงความสามารถรอบด้ านที่ต้องปรั บให้ เข้ ากับระบบอื่น ๆ ด้ วย
4. คานึงถึงข้ อผิดพลาดที่เกิดขึน้ โดยตัวผู้ใช้ เอง
5. คานึงถึงคุณภาพของเครื่ องมือที่ผ้ ใู ช้ จะหยิบใช้
6. สามารถใช้ กับเครื่ องคอมพิวเตอร์ ของผู้ใช้ ได้ อย่ างลงตัว โดยไม่ มีปัญหา
เรื่ องฮาร์ ดแวร์
กำรออกแบบสื่อประสำนกับผ้ ใู ช้ (User Interface Design)
7. คานึงถึงระดับความต้ องการของผู้ใช้
8. คานึงถึงความอ่ อนล้ าของระบบที่เกิดจากการใช้ งานติดต่ อกันเป็ นเวลานาน ๆ
9. คานึงถึงมาตรฐานการใช้ คาสั่งที่ต้องมีความเหมือนกัน และความสนุกสนาน
เมื่อใช้ งานระบบอยู่
10. การเลือกใช้ อุปกรณ์ Input และ Output ที่ดี รวมไปถึงการออกแบบหน้ าจอ
การทางานให้ สวยงามดูน่าใช้
11. ลาดับขัน้ ตอนการใช้ โปรแกรมต้ องไม่ ซับซ้ อน และสามารถรองรั บจานวน
สารสนเทศที่ผ่านเข้ า – ออกได้ อย่ างเหมาะสม
12. พิจารณาเลือกใช้ ไอคอน และสัญลักษณ์ ต่าง ๆ ให้ เหมาะสม โดยผู้ใช้ จะต้ อง
เข้ าใจรู ปแบบการแสดงผลสารสนเทศได้ อย่ างง่ ายดาย
รูปแบบของสื่อประสำนกับผ้ ใู ช้ (User Interface Mode)
เป็ นการออกแบบจอภาพเพื่อให้ ผ้ ูใช้ งานสามารถโต้ ตอบกับระบบได้
ตามความต้ องการอย่ างมี ประสิ ทธิ ภาพ ในปั จจุบันนิ ยมใช้ การออกแบบส่ วน
ติดต่ อกับผู้ใช้ แบบกราฟิ ก (Graphic User Interface) ซึ่ งสามารถสื่ อสารกับผู้ใช้
ในรู ปแบบข้ อความและรู ปภาพต่ าง ๆ ทาให้ ใช้ งานง่ าย และเรี ยนรู้ ได้ รวดเร็ ว
สาหรั บรู ปแบบการออกแบบส่ วนติดต่ อกับผู้ใช้ ดังต่ อไปนี ้
- การโต้ ตอบด้ วยคาสั่ง (Command Language Interaction)
- การโต้ ตอบด้ วยเมนูคาสั่ง (Menu Interaction)
- การโต้ ตอบด้ วยแบบฟอร์ ม (Form Interaction)
- การโต้ ตอบด้ วยการทางานเชิ งวัตถุ (Object-Based Interaction)
- การโต้ ตอบด้ วยภาษามนุษย์ (Natural Language Interaction)
รูปแบบของสื่อประสำนกับผ้ ใู ช้ (User Interface Mode)
การโต้ ตอบด้ วยคาสั่ง (Command Language Interaction)
เป็ นการโต้ ตอบกับระบบโดยที่ผ้ ใู ช้ จะต้ องพิมพ์ คาสั่งลงในช่ องป้ อน
คาสั่ง เพื่อกระตุ้นให้ เกิดการทางานในระบบ จึ งเหมาะสาหรั บผู้ใช้ ที่มีความ
ชานาญในการใช้ ระบบ
รูปแบบของสื่อประสำนกับผ้ ใู ช้ (User Interface Mode)
การโต้ ตอบด้ วยเมนูคาสั่ง (Menu Interaction)
เป็ นการโต้ ตอบกับระบบด้ วยการแสดงเมนูคาสั่งให้ ผ้ ใู ช้ เลือกคาสั่ง
ใด ๆ เพื่อติดต่ อกับระบบโดยผู้ใช้ ไม่ ต้องป้ อนคาสั่งเอง ดังนั้นจึ งได้ รับความ
นิยมในด้ านของความง่ ายในการใช้ งานและการทาความเข้ าใจ
Pull-down Menu
รูปแบบของสื่อประสำนกับผ้ ใู ช้ (User Interface Mode)
การโต้ ตอบด้ วยเมนูคาสั่ง (Menu Interaction)
Pop-up Menu
กำรโต้ ตอบด้ วยแบบฟอร์ ม (Form Interaction)
เป็ นการโต้ ตอบที่ ผ้ ูใช้ ระบบจะต้ องป้ อนข้ อมูลลงในช่ องว่ างที่ อยู่ใน
แบบฟอร์ มที่ แสดงทางหน้ าจอคอมพิ วเตอร์ ซึ่ งมี ลักษณะคล้ ายกับการกรอก
แบบฟอร์ มลงในกระดาษ
การออกแบบฟอร์ มที่ ดี ควรจะมี ชื่ อของช่ องป้ อนข้ อมู ล ที่ สื่ อ
ความหมายชัดเจน มีการแบ่ งส่ วนของข้ อมูลบนแบบฟอร์ ม ควรแสดงค่ าข้ อมูล
เริ่ มต้ นให้ กับช่ องป้ อนข้ อมูลที่ ต้องใช้ ข้อมูลนั้นบ่ อยครั้ ง ช่ องป้ อนข้ อมูลของ
แบบฟอร์ มไม่ ควรมีความยาวมากเกินไป
กำรโต้ ตอบด้ วยแบบฟอร์ ม (Form Interaction)
กำรโต้ ตอบเชิงวัตถุ (Object-Based Interaction)
เป็ นการโต้ ตอบที่ ผ้ ใู ช้ ระบบที่ ใช้ สัญลักษณ์ เป็ นตัวแทนคาสั่ งที่ ใช้ ใน
การปฏิ บัติงาน เช่ น ใช้ สัญลักษณ์ รู ปภาพแทนคาสั่ งการทางานหรื อเรี ยกว่ า
“ไอคอน (Icon)” โดยผู้ใช้ สามารถคลิกเมาส์ ที่ Icon เพื่อสั่งให้ โปรแกรมทางาน
ตามต้ องการได้
ข้ อดี คือประหยัดพื น้ ที่ บนหน้ าจอ ผู้ใช้ งานยังสามารถทาความเข้ าใจ
กับคาสั่งที่ถกู แทนด้ วย Icon ได้ อย่ างง่ ายดาย
กำรโต้ ตอบด้ วยภำษำมนุษย์ (Natural Language Interaction)
เป็ นการโต้ ตอบกับระบบด้ วยการใช้ เสี ยงพูดของผู้ใช้ ระบบ ไม่ ว่าจะ
เป็ นการนาข้ อมูลหรื อออกจากระบบ ภาษาที่ ใช้ เช่ น ภาษาอังกฤษ ภาษาไทย
เป็ นต้ น
ผมพร้ อมทีจ่ ะทำงำนแล้ ว
ตกลงคุณต้ องกำรเริ่มงำนใดก่ อน
ผมต้ องกำรเช็คอีเมล์
คุณได้ รับอีเมล์ ใหม่ ทงั้ หมด 8 ฉบับ
กำรออกแบบกำรจัดวำง และกำรแสดงผล
(Layout and Display Design)
มีความสาคัญในการสื่ อความหมายให้ กับผู้ใช้ ทั้งในการนาข้ อมูลเข้ า
และการแสดงผลลัพธ์ ผู้พัฒนาระบบสนับสนุนการตัดสิ นใจ ควรคานึ งถึงการ
จัดวางสื่ อบนจอภาพคอมพิวเตอร์ ให้ มีความเหมาะสมและเป็ นสัดส่ วน
กำรจัดจอภำพคอมพิวเตอร์ ควรมี การจั ดวางสื่ อประสานให้ เป็ นสั ด ส่ วน
อ่ านง่ าย ไม่ ซับซ้ อนเกินไป โดยอาจมีการแบ่ งเป็ นบริ เวณ (Zone)
Title Zone
Menu Zone
Tools Zone
Body Zone
Message / Status Zone
กำรออกแบบกำรจัดวำง และกำรแสดงผล
(Layout and Display Design)
กำรเชื่ อมโยงกำรป้ อนข้ อมูลแต่ ละรำยกำร การสร้ างการเชื่ อมโยงการป้ อน
ข้ อ มู ล ได้ อ ย่ า งเป็ นล าดั บ สอดคล้ อ งกั น ไปแต่ ล ะรายการ จะช่ วยให้ ผู้ ใช้ มี
ปฏิ สัมพันธ์ โต้ ตอบกับระบบได้ ง่าย สะดวกและไม่ สับสน ผู้ใช้ จะต้ องสามารถ
ย้ าย Cursor ไปมาระหว่ างรายการข้ อมูลที่ ต้องการแก้ ไขหรื อต้ องการป้ อน
ข้ อมูลได้
การควบคุม Cursor
การแก้ ไขตัวอักษรหรื อข้ อมูล
การใช้ คาสั่ง Exit
มีส่วนช่ วยเหลือ (Help)
กำรออกแบบกำรจัดวำง และกำรแสดงผล
(Layout and Display Design)
กำรออกแบบกำรจัดวำง และกำรแสดงผล
(Layout and Display Design)
โครงสร้ ำงของกำรป้ อนข้ อมูล (Structure Data Entry) ควรออกแบบช่ อง
ป้ อนข้ อ มู ล ในลั ก ษณะใดให้ เหมาะสมกั บ ชนิ ด ของข้ อ มู ล รวมทั้ ง เป็ นการ
กาหนดลักษณะต่ าง ๆ ที่เกี่ยวข้ องกับช่ องป้ อนข้ อมูล เพื่อเตรี ยมความสะดวกแก่
ผู้ใช้ ในระหว่ างการทางาน
การป้ อนข้ อมูล (Entry) สาหรั บข้ อมูลที่ มีอยู่ในฐานข้ อมูลแล้ วไม่ ต้อง
ทาการป้ อนใหม่ ควรจะดึงข้ อมูลส่ วนนั้นมาจากฐานข้ อมูล
ค่ าเริ่ มต้ น (Default) กรณี ที่ช่องป้ อนข้ อมูลนั้นสามารถกาหนดค่ า
เริ่ มต้ นให้ กับ Fields ได้ ระบบควรจะแสดงค่ าเริ่ มต้ นนั้นทันที เพื่อความสะดวก
ต่ อผู้ใช้ งาน
กำรออกแบบกำรจัดวำง และกำรแสดงผล
(Layout and Display Design)
หน่ วยของข้ อมูล (Unit) ควรระบุหน่ วยของข้ อมูลให้ ชัดเจนสาหรั บ
ช่ องป้ อนข้ อมูลที่จาเป็ นต้ องระบุ
คาอธิ บาย Fields หรื อคาอธิ บายช่ องป้ อนข้ อมูล (Caption) การแสดง
คาอธิ บาย Fields ควรเลือกรู ปแบบให้ เหมาะสมกับลักษณะการจัดวาง Layouts
รู ปแบบของข้ อมูล (Format) นักวิ เคราะห์ และออกแบบระบบควร
กาหนดให้ โปรแกรมเตรี ยมสัญลักษณ์ พิเศษเหล่ านั้นอัตโนมัติ
การจัดวางข้ อมูล (Justify) ควรออกแบบให้ มีการจัดวางข้ อมูลโดย
อัตโนมัติ สาหรั บทุกข้ อมูลที่ผ้ ใู ช้ ป้อนเข้ าสู่ระบบ
ส่ วนช่ วยเหลือ (Help) ควรมีการเตรี ยมส่ วนช่ วยเหลือ (Help) ใน
ระหว่ างที่ผ้ ใู ช้ ป้อนข้ อมูลได้
กำรออกแบบกำรจัดวำง และกำรแสดงผล
(Layout and Display Design)
การติ ดต่ อกับผู้ใช้ ในการป้ อนข้ อมูลด้ วยกราฟิ ก (Graphic User
Interface: GUI) เนื่องจากช่ วยให้ ผ้ ใู ช้ ระบบสามารถใช้ งานระบบได้ ง่ายขึน้ อีก
ทั้งยังช่ วยให้ ข้อมูลที่ นาเข้ าสู่ ระบบนั้นมีรูปแบบเดียวกั นทาให้ สามารถป้ องกัน
ความผิดพลาดในระหว่ างการป้ อนข้ อมูลได้ ในระดับหนึ่ง
กำรออกแบบกำรจัดวำง และกำรแสดงผล
(Layout and Display Design)
Text Box
 ควรวางข้ อความ (Caption/Label) ที่ สื่อความหมายกับข้ อความที่ ต้องการ
ให้ ป้อนไว้ ด้านหน้ าของ Text Box และไม่ ควรใช้ คาย่ อ
ในกรณี ที่ เ ป็ นภาษาอั ง กฤษ ตั ว อั ก ษรตั ว แรกเท่ า นั้ น ที่ เ ป็ นตั ว พิ ม พ์ ใ หญ่
(Capital Letter) นอกนั้นเป็ นตัวพิมพ์ เล็ก
มีเครื่ องหมายโคลอน (:) อยู่หลังข้ อความ เพื่อช่ วยให้ ผ้ ูใช้ สามารถจาแนก
ส่ วนของข้ อความ และ Text Box ได้ ชัดเจน
ขนาดของ Text Box ควรกาหนดให้ เหมาะสมกับขนาดของตัวอักษรที่ จะ
ป้ อนลงไป ทาให้ สามารถอ่ านได้ สะดวกในขณะป้ อนข้ อมูล
กำรออกแบบกำรจัดวำง และกำรแสดงผล
(Layout and Display Design)
Radio Button
 ลาดับของคาตอบควรเรี ยงในแนวตั้งจากบนลงล่ าง และชิ ดด้ านซ้ ายของ
จอภาพเพื่อง่ ายในการอ่ าน หรื อกรณี ที่มีพืน้ ที่ ของจอภาพจากัดอาจเรี ยงใน
แนวนอนจากซ้ ายไปขวาก็ได้ แต่ ควรมีระยะห่ างระหว่ างคาตอบให้ เพี ยงพอ
กลุ่มของคาตอบควรแยกออกจาก Input Control รู ปแบบอื่น
กลุ่มของคาตอบควรมีข้อความ (Caption/Label) ที่ สื่อความหมายกับคาตอบ
ที่ต้องการให้ เลือก
กำรออกแบบกำรจัดวำง และกำรแสดงผล
(Layout and Display Design)
Check Box
 ข้ อความอธิ บาย (Caption/Label) ควรสื่ อความหมายและเข้ าใจง่ าย
กรณี ที่มีการจัดกลุ่มข้ อมูลที่ สัมพันธ์ กัน ควรมีหัวข้ อ อธิ บายว่ าเป็ นกลุ่มของ
ข้ อมูลเรื่ องใด
การจัดเรี ยงคาตอบควรอยู่ในแนวตั้งและชิ ดด้ านซ้ ายของจอภาพ กรณี ที่มี
พืน้ ที่ของจอภาพมีจากัดสามารถเรี ยงในแนวนอนจากซ้ ายไปขวาได้
ลาดับของคาตอบควรจั ดเรี ยงตามคาอธิ บาย หรื อเรี ยงตามตัวอั กษรหาก
จานวนคาตอบมีจานวนมาก กรณี ที่คาตอบเป็ นตัวเลข ช่ วงของตั วเลข หรื อ
หน่ วยวัด ควรเรี ยงลาดับจากค่ าน้ อยไปหาค่ ามาก
กำรออกแบบกำรจัดวำง และกำรแสดงผล
(Layout and Display Design)
List Box
 ควรวางข้ อความอธิ บาย (Caption/Label) ที่ สื่อความหมายกับคาตอบที่
ต้ องการให้ เลือกไว้ ด้านบนของ List Box โดยหลีกเลี่ยงการใช้ คาย่ อ
กรณี ที่ข้อความเป็ นภาษาอั งกฤษ ตัวอั กษรตัวแรกควรเป็ นตัวพิ ม พ์ ใหญ่
(Capital Letter) นอกนั้นเป็ นตัวพิมพ์ เล็ก
ควรมี เครื่ องหมายโคลอน (:) อยู่หลังข้ อความอธิ บาย เพื่ อช่ วยให้ ผู้ใช้
สามารถจาแนกส่ วนของข้ อความและ List Box ได้ ชัดเจน
ควรกาหนดคาตอบที่ เป็ นค่ าเริ่ มต้ นของ List Box และแสดงแถบสี ที่คาตอบ
นั้น
กำรออกแบบกำรจัดวำง และกำรแสดงผล
(Layout and Display Design)
List Box
 ขนาดของ List Box ควรเหมาะสมกับการแสดงคาตอบซึ่ งควรแสดงคาตอบ
ไว้ อย่ างน้ อย 2-3 คาตอบแต่ ไม่ ควรเกิ น 7 คาตอบ และมีแถบเลื่อนเพื่อใช้
เลื่อนดูคาตอบทั้งหมดได้
ในกรณี ที่ใช้ รูปภาพแทนรายละเอี ยดของคาตอบใน List Box นักพัฒนา
ระบบต้ องแน่ ใจว่ ารู ปภาพนั้นสามารถสื่ อความหมายของคาตอบได้ อย่ าง
ชัดเจน
การเรี ยงลาดับของคาตอบใน List Box นั้นสามารถเรี ยงลาดับตามตัวอักษร
ตามค่ าตัวเลขจากน้ อยไปหามาก หรื อตามความถี่ของคาตอบที่ มีการเลื อก
มากที่สุดไปหาน้ อยที่สุด
กำรออกแบบกำรจัดวำง และกำรแสดงผล
(Layout and Display Design)
Drop-Down List Box
 ควรวางข้ อความอธิ บาย (Caption/Label) ที่ สื่อความหมายกับคาตอบที่
ต้ องการให้ เลือกไว้ ด้านบนหรื อด้ านซ้ ายของ Drop-Down List Box โดย
หลีกเลี่ยงการใช้ คาย่ อ
กำรออกแบบกำรจัดวำง และกำรแสดงผล
(Layout and Display Design)
Combination (Combo) Box
 ควรวางข้ อความอธิ บาย
(Caption/Label)
ที่ สื่ อ
ความหมายกั บ ค าตอบที่
ต้ องการให้ เลื อกไว้ ด้านบน
หรื อด้ า นซ้ ายของ Combo
Box โดยหลีกเลี่ยงการใช้ คา
ย่ อ
กำรออกแบบกำรจัดวำง และกำรแสดงผล
(Layout and Display Design)
Spin (Spinner) Box
 ควรวางข้ อความอธิ บาย (Caption/Label) ที่ สื่อความหมายกับคาตอบที่
ต้ องการให้ เลือกไว้ ด้านบนหรื อด้ านซ้ ายของ Spin Box โดยหลีกเลี่ยงการใช้
คาย่ อ
ควรกาหนดค่ าเริ่ มต้ นของ
คาตอบไว้
กำรออกแบบกำรจัดวำง และกำรแสดงผล
(Layout and Display Design)
กำรตอบสนองของระบบ (Providing Feedback) นักพัฒนาระบบควร
ออกแบบให้ โปรแกรมของระบบงานมี การตอบสนองต่ อการสั่ งงานดังกล่ าว
หรื อตอบสนองต่ อผู้ใช้ งานเมื่ อมี ข้อผิ ดพลาดใด ๆ เกิ ดขึ น้ เพื่ อ ทาให้ ผ้ ูใช้ งาน
ทราบว่ าระบบได้ นาคาสั่ งเหล่ านั้นไปประมวลผลแล้ ว และไม่ ก่อให้ เกิ ดความ
สับสนแก่ ผ้ ใู ช้ งาน
1. แจ้ งสถานะการทางาน (Status Information)
2. แสดงความพร้ อมในการรั บคาสั่ง (Prompting Cues)
3. ข้ อความแจ้ งหรื อเตอนเมื่อมีข้อผิดพลาด
(Error/Warning Messages)
กำรออกแบบกำรจัดวำง และกำรแสดงผล
(Layout and Display Design)
แ จ้ ง ส ถ า น ะ ก า ร ท า ง า น (Status
Information)
เ ป็ น ก า ร อ อ ก แ บ บ ก า ร
ตอบสนองของระบบที่ มีต่อผู้ใช้ ด้ วย
การแจ้ งสถานะการทางานของระบบ
ให้ ผู้ ใช้ ทราบคว ามเป็ นไป ใ น
ระหว่ างที่ ระบบทาการประมวลผล
ค า สั่ ง จ า ก ผู้ ใ ช้ ง า น ค ว ร มี ก า ร
ออกแบบสถานะการทางาน
กำรออกแบบกำรจัดวำง และกำรแสดงผล
(Layout and Display Design)
แสดงความพร้ อมในการรั บคาสั่ง (Prompting Cues)
เป็ นการออกแบบเพื่อแจ้ งสถานะในความพร้ อมเพื่อรอรั บคาสั่ ง
ข้ อความแจ้ งหรื อเตือนเมื่อมีข้อผิดพลาด (Error/Warning Messages)
ในการแสดงข้ อความนั้นควรเป็ นการแจ้ งข้ อผิดพลาดและแนะนา
แนวทางในการแก้ ไขด้ วย ซึ่ งเป็ นอีกวิธีหนึ่งที่ช่วยแก้ ไขปั ญหาเบือ้ งต้ นที่
เกิดขึน้ ในระหว่ างการทางานของผู้ใช้ ระบบได้ เนื่องจากข้ อความที่ ใช้ ในการ
แจ้ งเตือนนั้น มีการแนะแนวทางในการแก้ ไขข้ อผิดพลาดที่เกิดขึน้ ด้ วยนั่นเอง
กำรออกแบบกำรจัดวำง และกำรแสดงผล
(Layout and Display Design)
การแสดงส่ วนช่ วยเหลือ (Help)
1. สามารถเข้ าใจได้ ง่าย (Simplicity) จะต้ องใช้ คาที่สามารถเข้ าใจได้
โดยง่ าย ไม่ ยาวจนเกินไป อธิ บายให้ ตรงประเด็น
2. มีการจัดรู ปแบบอย่ างเป็ นระเบียบ (Organize) กรณี Help ที่ต้องมี
การอธิ บายรายละเอียดค่ อนข้ างยาวเป็ น Paragraph ควรจัดรู ปแบบให้ ผ้ ใู ช้
สามารถอ่ านได้ ง่าย น่ าอ่ าน และไม่ ซับซ้ อน
3. มีการแสดงตัวอย่ าง (Show) ควรมีการแสดงตัวอย่ างในการทางาน
บางหัวข้ อที่จาเป็ น ด้ วยการแสดงอย่ างเป็ นขัน้ ตอน ทาให้ ผ้ ใู ช้ เข้ าใจได้ ง่ายขึน้
กำรออกแบบกำรจัดวำง และกำรแสดงผล
(Layout and Display Design)
การแสดงส่ วนช่ วยเหลือ (Help)
กำรออกแบบกำรจัดวำง และกำรแสดงผล
(Layout and Display Design)
การแสดงผลสื่ อประสานกับผู้ใช้ แบบมีสีและขาวดา
สามารถแสดงได้ ทั้งแบบมีสีและขาวดา ซึ่ งสามารถส่ งผลกระทบต่ อ
ประสิ ทธิ ภาพในการทางานของผู้ใช้ ระบบแตกต่ างกัน
ข้ อดีของการแสดงผลแบบมีสี
1. สามารถให้ ความรู้ สึกอ่ อนโยนเวลามอง
2. สามารถแสดงให้ เห็นถึงการเน้ นข้ อความหรื อการให้ ความสาคัญแก่
ข้ อความหรื อสารสนเทศบนแหล่ งเอกสารได้
3. ช่ วยให้ สามารถแบ่ งแยกรายละเอียดที่มีความซับซ้ อนให้ ดูได้ ง่าย
ขึน้
4. สามารถเน้ นส่ วนที่เป็ นข้ อความเตือนให้ เด่ นชัดขึน้ ได้
กำรออกแบบกำรจัดวำง และกำรแสดงผล
(Layout and Display Design)
การแสดงผลสื่ อประสานกับผู้ใช้ แบบมีสีและขาวดา
ปั ญหาที่เกิดจากการแสดงผลแบบมีสี
1. เป็ นปั ญหาต่ อผู้ใช้ งานที่มีอาการตาบอดสี
2. ความละเอียดของสี อาจจะมีค่าเปลี่ยนแปลงเมื่อใช้ กับอุปกรณ์ ต่าง
ชนิดกัน
3. ความถูกต้ องของสี อาจจะคลาดเคลื่อนเมื่อมีการใช้ กบั อุปกรณ์ ต่าง
ชนิดกัน
รูปแบบอื่น ๆ ของสื่อประสำนกับผ้ ใู ช้
กราฟิ ก (Graphics)
เป็ นการนาเสนอฃ
ข้ อมูลหรื อผลลัพธ์
ด้ วยรู ปภาพหรื ออาจ
เป็ นรู ปภาพผสม
ข้ อความ เพื่อให้ ผ้ ใู ช้
สามารถทราบ
ความหมายของข้ อมูล
และสารสนเทศที่
นาเสนอได้ ชัดเจนมาก
ยิ่งขึน้
รูปแบบอื่น ๆ ของสื่อประสำนกับผ้ ใู ช้
มัลติมีเดีย (Multimedia)
นักพัฒนาระบบสนับสนุนการตัดสิ นใจ สามารถตกแต่ งสื่ อประสาน
กับผู้ใช้ ให้ มีรูปโฉมน่ าใช้ งานมากยิ่งขึน้ ด้ วย “มัลติมีเดีย (Multimedia)”
มัลติ มีเดี ย ทาหน้ าที่ เป็ นสื่ อกลางการสื่ อสารระหว่ างมนุษย์ กับกลไก
ของระบบ และมี ผลลัพธ์ ที่ได้ อาจแสดงด้ วยเสี ยง (Sound) ข้ อความ (Text)
ภาพกราฟิ กต่ าง ๆ (Graphics)
รูปแบบอื่น ๆ ของสื่อประสำนกับผ้ ใู ช้
ไฮเปอร์ เท็กซ์ (Hypertext)
หมายถึ ง การผสมผสานระหว่ า งข้ อ ความหรื อภาษาธรรมชาติ กั บ
กระบวนการทางคอมพิ วเตอร์ เพื่ อสื่ อความหมายกับผู้ใช้ อย่ างมี ปฏิ สั มพันธ์
โดยมีลักษณะโครงสร้ างแบบลาดับชั้นที่ แน่ นอน หรื ออาจกล่ าวอี กความหมาย
หนึ่ งว่ า ข้ อความหรื อกลุ่มของข้ อความที่ ทาหน้ าที่ เป็ นจุดเชื่ อมต่ อข้ อมูลจาก
เอกสารหน้ าหนึ่ง ไปสู่เอกสารอีกหน้ าหนึ่ง ซึ่ งการเชื่ อมโยงนี ้เป็ นการเชื่ อมโยง
เพื่อนาไปสู่ข้อมูลอื่น ๆ ที่เกี่ยวข้ องกับข้ อความที่เป็ นไฮเปอร์ เท็กซ์
รูปแบบอื่น ๆ ของสื่อประสำนกับผ้ ใู ช้
ไฮเปอร์ เท็กซ์ (Hypertext)
รูปแบบอื่น ๆ ของสื่อประสำนกับผ้ ใู ช้
ระบบความเป็ นจริ งเสมือน (Virtual Reality System)
หมายถึง ระบบที่ ช่วยให้ ผ้ ใู ช้ ระบบเคลื่อนไหว และมีปฏิ กิริยาโต้ ตอบ
กับสภาพแวดล้ อมที่ถกู จาลองขึน้ โดยคอมพิวเตอร์ ได้
การที่ ผ้ ูใช้ ระบบจะสามารถมองเห็นและเข้ าไปอยู่ในสภาพแวดล้ อม
จาลองนั้นได้ ต้ องผ่ านอุปกรณ์ พิเศษที่ ประดิษฐ์ ขึน้ มาโดยเฉพาะ เพื่อนาพาผู้ใช้
ไปสู่ โลกความเป็ นจริ งเสมื อน ที่ สามารถสั มผัสได้ ทั้งภาพและเสี ย ง ซึ่ งทาให้
ผู้ใช้ มีความรู้ สึกคล้ ายกับอยู่ในโลกของความเป็ นจริ ง
รูปแบบอื่น ๆ ของสื่อประสำนกับผ้ ใู ช้
ในโลกแห่ งความเป็ นจริ งเสมื อน จะนาพาผู้ใช้ เข้ าสู่ อาณาจั กรแห่ ง
จิ นตนาการ ที่ เรี ยกกันว่ า “ไซเบอร์ สเปซ (Cyberspace)” โดยผู้ใช้ จะรั บรู้ ถึง
ความรู้ สึ กว่ าตนเองได้ กระทาต่ อสิ่ งที่ ปรากฏอยู่ข้างหน้ าผ่ านทางอุปกรณ์ พิเศษ
ภายในสภาวะแวดล้ อมที่ ได้ สร้ างขึ น้ โดยระบบคอมพิ วเตอร์ เพื่ อตอบสนอง
อากัปกิริยาต่ าง ๆ
รูปแบบอื่น ๆ ของสื่อประสำนกับผ้ ใู ช้
ระบบความเป็ นจริ งเสมือน (Virtual Reality System)
ควำมเป็ นจริ งเสมือนกับระบบสนับสนุนกำรตัดสิ นใจ ส่ วนใหญ่ จะ
ไม่ ได้ นามาใช้ โดยตรงแต่ จะนาไปใช้ เพื่อวัตถุประสงค์ อื่นมากกว่ า เพื่อทาการ
ทดสอบการออกแบบเครื่ องบิ นโบอิ ง้ ก่ อนที่ จะเริ่ มต้ นการสร้ างเครื่ องบิ นจริ ง
เพื่ อทดสอบความปลอดภัยของรถ สายการบิ น British Airways เพื่ อการ
ออกแบบห้ องผู้โดยสารชั้นหนึ่ง
ควำมเป็ นจริ งเสมือนบนเว็บไซต์ ทาให้ รูปแบบ
การสื่ อประสานกับผู้ใช้ ผ่านทางเว็บไซต์ ดู สมจริ ง
มากขึน้ สังเกตได้ จากการสร้ างเมืองเสมือนจริ ง
รูปแบบอื่น ๆ ของสื่อประสำนกับผ้ ใู ช้
การประมวลผลภาษาธรรมชาติ (Natural Language Processing)
ก ำ ร ปร ะ ม ว ล ผ ล ภ ำ ษ ำ ธ รร ม ช ำ ติ เ ป็ น ก า ร น า เ ท ค โ น โ ล ยี
ปั ญญาประดิ ษฐ์ (Artificial Intelligence: AI) มาประยุกต์ ใช้ เพื่อให้ มนุษย์
สามารถติดต่ อสื่ อสารกับเครื่ องคอมพิวเตอร์ ได้ โดยใช้ คาพูดภาษาอังกฤษ หรื อ
ภาษาอื่ น ๆ ที่ ได้ รับการพัฒนา โดยอาจพูดผ่ านอุปกรณ์ ไมโครโฟน เพื่ อนา
สัญญาณเสี ยงพูดของผู้ใช้ เข้ าสู่ระบบประมวลผลภาษาธรรมชาติ
ระบบสำรสนเทศภูมิศำสตร์
(Geographic Information System: GIS)
หมายถึ ง ระบบสารสนเทศที่ มี พื้ น ฐานการท างานด้ วยระบบ
คอมพิวเตอร์ เพื่อใช้ ในการจัดการกับข้ อมูลที่ ได้ มาให้ อยู่ในรู ปแบบที่ ต้องการ
(Capturing) แล้ วนามาจัดเก็บ (Storing) ตรวจสอบ (Checking) ประสาน
(Integrating) ประเมินผลและวิ เคราะห์ (Manipulating) ตลอดจนแสดงผล
(Displaying) ข้ อมูลทางภูมิศาสตร์ หรื อแสดงผลเป็ นแผนที่ (Mapping) ได้ โดย
องค์ ประกอบหลักของระบบ GIS ได้ แก่ การนาเข้ าข้ อมูล (Data Input) การ
จัดการข้ อมูล (Data Management) การวิเคราะห์ ข้อมูล (Data Analysis) และ
การแสดงผล (Data Display)
ระบบสำรสนเทศภูมิศำสตร์
(Geographic Information System: GIS)
นอกจากนีร้ ะบบ GIS เอง ยังทาหน้ าที่ในการจัดการฐานข้ อมูลหลักทั้ง
3 ส่ วน ได้ แก่ ฐานข้ อมูลที่ ใช้ ในการจั ดเก็บข้ อมูลเชิ งคุณภาพและเชิ งปริ มาณ
ฐานข้ อมูลที่ใช้ จัดเก็บแผนที่ และฐานข้ อมูลที่ใช้ จัดเก็บรายละเอียดหรื อ
สารสนเทศบนแผนที่นั้น ๆ
ด้ วยการประมวลผลข้ อมูล ทั้ ง
สามส่ วนเพื่ อแสดงผลออกมา
ตามที่ผ้ ใู ช้ ต้องการ
THE END..