SCC : Suthida Chaichomchuen std@kmitnb.ac.th User Interface Design SCC : Suthida Chaichomchuen std@kmitnb.ac.th

ความหมาย User Interface หมายถึง การออกแบบส่วนติดต่อระหว่างผู้ใช้กับระบบ เพื่อการเตรียมสารสนเทศและการนำสารสนเทศนั้นไปใช้ด้วยการโต้ตอบกับคอมพิวเตอร์ เรียกอีกอย่างว่า การออกแบบจอภาพ (Screen Design)

ลักษณะของผู้ใช้ ผู้ใช้หน้าใหม่ด้อยประสบการณ์ (Novice User) ผู้ใช้ที่มีประสบการณ์และความรู้ระดับกลาง (Knowledgeable Intermittent User) ผู้ที่ใช้งานเป็นประจำหรือผู้เชี่ยวชาญ (Frequent User / Expert)

โครงสร้างระบบความคิดของมนุษย์ มนุษย์รับรู้โดยผ่านประสาทสัมผัส (senses) จากนั้นจะส่งสิ่งที่รับรู้ผ่านเข้ามายังหน่วยความจำระยะสั้น (short-term memory) จากนั้นจึงส่งข้อมูลผ่านไปยังส่วนความจำขั้นต้น (working memory) สุดท้ายข้อมูลจะส่งไปยังหน่วยความจำระยะยาว (long-term memory)

ประเภทของความรู้ในงานคอมพิวเตอร์ จำแนกออกเป็น 2 ระดับคือ ความรู้ด้าน Semantic คือ ความรู้ในเชิงความคิดและความเข้าใจในกระบวนการทางคอมพิวเตอร์ ความรู้ด้าน Syntactic คือ ความรู้ในรายละเอียด ถือว่าเป็นความรู้ระดับล่าง

หลักการออกแบบตามความต้องการของผู้ใช้ ดำรงความคงที่ มีทางลัดให้เลือกเดิน เสนอคำตอบอย่างมีความหมาย ตอบโต้ยืนยันการสิ้นสุด จัดการกับข้อผิดพลาดอย่างง่าย ๆ อนุญาตให้ดำเนินการแก้ไขกลับได้ สนับสนุนการควบคุมจากภายนอก ลดภาระความทรงจำระยะสั้น

หลักการพื้นฐานการนำเสนอแบบกราฟิก นำเสนอส่วนที่เป็นข้อความและสัญลักษณ์อย่างชัดเจน ออกแบบระบบที่เสนอโครงสร้างและขั้นตอนของการดำเนินการอย่างชัดเจน ในกรณีที่ผู้ใช้สั่งดำเนินการไม่ตรงตามขั้นตอนการทำงาน ควรจัดให้มีการเตือนผู้ใช้ หรือนำเสนอสัญลักษณ์ที่ทำให้ผู้ใช้ทราบว่าจะต้องแก้ไขอย่างไร

หลักการใช้สีบนจอกราฟิก ไม่ใช้จำนวนสีเกินความจำเป็น จำกัดจำนวนสี ใช้เทคนิคการกำหนดความหมายให้กับสีที่ใช้ เปิดโอกาสให้ผู้ใช้ควบคุมการนำเสนอสี ควรออกแบบโดยคำนึงถึงจอภาพแบบสีเดียว ใช้สีในการสร้างรูปแบบ เลือกใช้สีที่ตรงกับความคาดหวังของผู้ใช้ เลือกจัดสีที่นำเสนออย่างระมัดระวัง

รูปแบบของ User Interfaces แบ่งได้เป็น 5 รูปแบบคือ Command Language Interaction Menu Interaction Form Interaction Object-Based Interaction Natural Language Interaction

Command Language Interaction เป็นการโต้ตอบกับระบบโดยที่ผู้ใช้จะต้องพิมพ์คำสั่งลงในช่องป้อนคำสั่ง เพื่อกระตุ้นให้เกิดการทำงานในระบบ ผู้ใช้ระบบจะต้องสามารถจดจำคำสั่ง ไวยากรณ์ และกฏเกณฑ์ในการป้อนคำสั่ง เหมาะสำหรับผู้ใช้ที่มีความชำนาญในการใช้ระบบปฏิบัติการ DOS เป็นอย่างดี

Menu Interaction เป็นการโต้ตอบกับระบบด้วยการแสดงเมนูคำสั่งให้ผู้ใช้คำสั่งเลือกคำสั่งใด ๆ เพื่อติดต่อกับระบบ โดยผู้ใช้ไม่ต้องป้อนคำสั่งเอง รูปแบบของเมนูในปัจจุบันมี 2 รูปแบบคือ Pull-down Menu Pop-up Menu

หลักเกณฑ์ในการออกแบบเมนูคำสั่ง แต่ละเมนูคำสั่งควรเลือกใช้คำที่สามารถสื่อความหมายได้ชัดเจน ควรมีการใช้ตัวอักษรพิมพ์ใหญ่หรือตัวพิมพ์เล็กตามความเหมาะสม ควรมีการจัดกลุ่มคำสั่งที่มีความเกี่ยวข้องกันไว้ในกลุ่มเดียวกัน ไม่ควรมีจำนวนเมนูคำสั่งมากเกินไป

หลักเกณฑ์... ควรมีเมนูย่อยสำหรับเมนูคำสั่งที่มีการทำงานย่อยภายในมากเกินไป เมื่อมีการเลือกเมนูคำสั่ง ควรออกแบบให้มีแถบสีปรากฏที่เมนูคำสั่งที่ถูกเลือก

Form Interaction เป็นการโต้ตอบที่ผู้ใช้ระบบจะต้องป้อนข้อมูลลงในช่องว่างที่อยู่ในแบบฟอร์มที่แสดงทางหน้าจอคอมพิวเตอร์ ซึ่งมีลักษณะคล้ายกับการกรอกแบบฟอร์มลงในกระดาษ

ลักษณะของแบบฟอร์มที่ดี ควรจะมีชื่อของช่องป้อนข้อมูลที่สื่อความหมายชัดเจน มีการแบ่งส่วนของข้อมูลบนแบบฟอร์ม ควรแสดงตฃค่าข้อมูลเริ่มต้นให้กับช่องป้อนข้อมูลที่ต้องใช้ข้อมูลนั้นบ่อยครั้ง ช่องป้อนข้อมูลของแบบฟอร์มไม่ควรมีความยาวมากเกินไป

Object-Based Interaction เป็นการโต้ตอบกับระบบที่ใช้สัญลักษณ์เป็นตัวแทนคำสั่งที่ใช้ในการปฏิบัติงาน เช่น การใช้ Icon ข้อดีคือ ประหยัดพื้นที่บนหน้าจอเนื่องจากเป็นสัญลักษณ์ที่เป็นรูปภาพที่มีขนาดเล็ก

Natural Language Interaction เป็นการโต้ตอบระบบด้วยการใช้เสียงพูดของผู้ใช้ระบบ ไม่ว่าจะเป็นการนำข้อมูลเข้าหรืออกจากระบบ ภาษาที่ใช้ เช่น ภาษาอังกฤษ

การออกแบบ Interfaces แบ่งออกเป็น 5 ขั้นตอนคือ การออกแบบ Layouts ของหน้าจอ การออกแบบโครงสร้างของการป้อนข้อมูล การควบคุมความถูกต้องในระหว่างป้อนข้อมูล การตอบสนองของระบบ การแสดงส่วนช่วยเหลือ

การออกแบบ Layouts ของหน้าจอ ต้องมีการจัดวางด้วยรูปแบบเดียวกันกับที่ปรากฏอยู่บนเอกสารใช้งานจริง ลำดับการป้อนข้อมูลต้องมีลักษณะ จากซ้ายไปขวา และจากบนลงล่าง

การออกแบบ Layouts... ควรออกแบบให้หน้าจอมีความสามารถดังนี้ การควบคุม Cursor การแก้ไขตัวอักษรหรือข้อมูล การใช้คำสั่ง Exit มีส่วนช่วยเหลือ (Help)

การออกแบบโครงสร้างของการป้อนข้อมูล เพื่อกำหนดรูปแบบ หรือลักษณะของช่องที่จะใช้ในการป้อนข้อมูล เป็นการกำหนดลักษณะต่าง ๆ ที่เกี่ยวข้องกับช่องป้อนข้อมูล เพื่อเตรียมความสะดวกแก่ผู้ใช้ในระหว่างการทำงาน

หลักเกณฑ์ในการออกแบบการป้อนข้อมูล การกำหนดค่าเริ่มต้น หน่วยของข้อมูล คำอธิบายช่องป้อนข้อมูล รูปแบบของข้อมูล การจัดวางข้อมูล ส่วนช่วยเหลือ การติดต่อกับผู้ใช้ในการป้อนข้อมูลด้วยกราฟิก

การควบคุมความถูกต้องในระหว่างป้อนข้อมูล มีการตรวจสอบข้อมูลที่ผู้ใช้ป้อนว่ามีชนิดถูกต้องหรือไม่ การป้อนข้อมูลไม่ครบทุก fields ที่จำเป็น รูปแบบที่ป้อนตรงตามที่กำหนดหรือไม่ กำหนดค่าสูงสุด ต่ำสุดของข้อมูล ความสมเหตุสมผลของข้อมูล ความครบถ้วนของข้อมูลในแต่ละ Fields

การตอบสนองของระบบ แจ้งสถานะการทำงาน แสดงความพร้อมในการรับคำสั่ง ข้อความแจ้งหรือเตือนเมื่อมีข้อผิดพลาด

การแสดงส่วนช่วยเหลือ สามารถเข้าใจได้ง่าย มีการจัดรูปแบบอย่างเป็นระเบียบ มีการแสดงตัวอย่าง

การออกแบบการควบคุมการเข้าถึงข้อมูลของผู้ใช้ เพื่อป้องกันการเข้าถึงข้อมูลจากผู้ใช้งานที่ไม่ได้รับอนุญาตให้ใช้ข้อมูลเหล่านั้น มีเทคนิคดังนี้ จำกัดความสามารถในการมองเห็นข้อมูลจากฐานข้อมูล ผู้ใช้สามารถดูข้อมูลที่ประมวลผลแล้วได้ แต่ไม่สามารถเปลี่ยนแปลงข้อมูลได้

การออกแบบการควบคุม... กฎของสิทธิในการเข้าถึงข้อมูล การกำหนดให้มีรหัสผ่านเพื่อการอ่านข้อมูล แต่ไม่สามารถแก้ไขหรือปรับปรุงข้อมูลได้

การออกแบบการควบคุม... การเข้ารหัส ใช้สำหรับข้อมูลที่มีความสำคัญในระดับสูงสุด เป็นการนำข้อมูลจริงมาแทนด้วยรหัส ซึ่งผู้ใช้คนอื่นไม่สามารถเข้าใจความหมายได้ การนำข้อมูลมาใช้งานต้องผ่านการถอดรหัสก่อน

การออกแบบการควบคุม... การระบุกลุ่มผู้ใช้ เป็นการระบุกลุ่มผู้ใช้ที่มีลักษณะการเข้าถึงข้อมูลโดยไม่มีเจตนาร้าย ไม่สามารถตรวจสอบได้ด้วยการกำหนดรหัสผ่าน

การออกแบบลำดับการเชื่อมโยงจอภาพ เป็นการออกแบบลำดับของการแสดงส่วนติดต่อกับผู้ใช้ของโปรแกรม หรือลำดับของการแสดงส่วน User Interface ทางหน้าจอคอมพิวเตอร์ ใช้แผนภาพแสดงลำดับการเชื่อมโยงของจอภาพ เรียกว่า Dialogues Diagram

สัญลักษณ์ของ Dialogues Diagram เลขลำดับหน้าจอ ชื่อหน้าจอการทำงาน เลขลำดับหน้าจอที่อ้างอิงมา เลขลำดับหน้าจอต่อไปหรือย้อนกลับ Top Middle Bottom

สัญลักษณ์ของ Dialogues Diagram Top : ใช้แสดงหมายเลขลำดับเพื่อการอ้างอิงจากหน้าจออื่น Middle : ใช้แสดงชื่อหน้าจอการทำงานหรือข้อความแสดงรายละเอียดการทำงาน Bottom : ใช้แสดงหมายเลขของหน้าจอที่อ้างอิงมา คั่นด้วยเครื่องหมายจุลภาค , ตามด้วยหมายเลขหน้าจอต่อไป/ย้อนกลับ เมื่อเสร็จสิ้นการทำงานแล้ว