SCC : Suthida Chaichomchuen

งานนำเสนอเรื่อง: "SCC : Suthida Chaichomchuen"— ใบสำเนางานนำเสนอ:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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