การออกแบบส่วนติดต่อกับผู้ใช้ User Interface Design

งานนำเสนอเรื่อง: "การออกแบบส่วนติดต่อกับผู้ใช้ User Interface Design"— ใบสำเนางานนำเสนอ:

1 การออกแบบส่วนติดต่อกับผู้ใช้ User Interface Design
Chapter 1 : Introduction ศึกษาแนวคิดการสื่อสารระหว่างคอมพิวเตอร์กับมนุษย์ ประเภทของส่วนติดตอผู้ใช้ หลักการออกแบบการประยุกต์เทคโนโลยี และการประเมินประสิทธิภาพส่วนติดต่อผู้ใช้ และกรณีศึกษา

2 User Interface User Interface หมายถึง ส่วนติดต่อระหว่างผู้ใช้กับระบบ เพื่อรองรับการนำข้อมูลหรือคำสั่งเข้าไปสู่ระบบ ตลอดจนนำเสนอสารสนเทศกลับมายังผู้ใช้ การออกแบบ User Interface จะพิจารณาประสิทธิภาพในการโต้ตอบระหว่างผู้ใช้กับระบบเป็นหลัก ซึ่งรูปแบบของการโต้ตอบมีหลายรูปแบบดังนี้ การโต้ตอบด้วยการพิมพ์คำสั่ง (Command Line Interaction) การโต้ตอบด้วยเมนูคำสั่ง (Menu Interaction) การโต้ตอบด้วยแบบฟอร์ม (Form Interaction) การโต้ตอบผ่านวัตถุ (Object-Based Interaction)

3 การโต้ตอบด้วยการพิมพ์คำสั่ง (Command Line Interaction)
เป็นการโต้ตอบกับระบบโดยที่ผู้ใช้จะต้องพิมพ์คำสั่งลงในช่องป้อนคำสั่ง เพื่อกระตุ้นให้เกิดการทำงานในระบบ ผู้ใช้จะต้องจำคำสั่ง ไวยากรณ์ และกฎเกณฑ์ต่างๆ เช่น คำสั่งของระบบปฏิบัติการ DOS รวมถึงการใช้ Shortcut keys และ Function keys ด้วย

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

5 การโต้ตอบด้วยเมนูคำสั่ง (Menu Interaction)
Pop-up Menu Pull-down Menu

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

7 การโต้ตอบด้วยแบบฟอร์ม (Form Interaction)

8 การโต้ตอบผ่านวัตถุ (Object-Based Interaction)
วัตถุสัญลักษณ์ หรือ วัตถุรูปภาพ ถูกใช้เป็นตัวแทนคำสั่งหรือฟังก์ชัน โดยผู้ใช้สามารถโต้ตอบกับวัตถุเหล่านั้นเพื่อการออกคำสั่ง วัตถุสัญลักษณ์หรือรูปภาพแทนคำสั่งการทำงานถูกเรียกว่า ไอคอน (Icon) ซึ่ง ช่วยประหยัดพื้นที่บนหน้าจอ ช่วยให้ผู้ใช้เข้าใจได้ง่ายขึ้น

9 การโต้ตอบผ่านวัตถุ (Object-Based Interaction)
Icon

10 การออกแบบการจัดวางองค์ประกอบ (Layouts Design)

11 การออกแบบการจัดวางองค์ประกอบ (Layouts Design)

12 แนวทางการออกแบบ User Interface
การออกแบบการจัดวาง (Layouts) ขององค์ประกอบบนหน้าจอ การออกแบบโครงสร้างของการป้อนข้อมูล (Structure Data Entry) การควบคุมความถูกต้องในการป้อนข้อมูล (Controlling Data Input) ข้อความตอบสนอง (Feedback Message) การแสดงส่วนช่วยเหลือ (Help) การออกแบบการควบคุมการเข้าถึงข้อมูลของผู้ใช้ (Access Control) การออกแบบลำดับการเชื่อมโยงจอภาพ (Dialogue Design)