งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

1 User Interface Design SCC : Suthida Chaichomchuen

งานนำเสนอที่คล้ายกัน


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

1 1 User Interface Design SCC : Suthida Chaichomchuen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


ดาวน์โหลด ppt 1 User Interface Design SCC : Suthida Chaichomchuen

งานนำเสนอที่คล้ายกัน


Ads by Google