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

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

1 การออกแบบส่วนติดต่อผู้ใช้
(Interfaces and Dialogues)

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

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

4 กระบวนการในการออกแบบ User Interface
รวบรวมข้อมูลการติดต่อกับระบบทางหน้าจอของผู้ใช้ ออกแบบส่วนติดต่อกับระบบอย่างคร่าว ๆ ใช้ Case Tools สร้างตัวต้นแบบ (Prototyping) และทดสอบ

5 รูปแบบของ User Interfaces
เพื่อให้ผู้ใช้งานสามารถโต้ตอบกับระบบอย่างมีประสิทธิภาพ นิยมใช้แบบกราฟิก (Graphic User Interface :GUI) มีรูปแบบดังนี้ คือ การโต้ตอบด้วยคำสั่ง (Command Language Interaction) การโต้ตอบด้วยเมนูคำสั่ง (Menu Interaction) การโต้ตอบด้วยแบบฟอร์ม (Form Interaction) การโต้ตอบด้วยการทำงานเชิงวัตถุ (Object-Based Interaction) การโต้ตอบด้วยภาษามนุษย์ (Natural Language Interaction)

6 การโต้ตอบด้วยคำสั่ง (Command Language Interaction)
เป็นการโต้ตอบกับระบบโดยที่ผู้ใช้จะต้องพิมพ์คำสั่งลงในช่องป้อนคำสั่ง เพื่อกระตุ้นให้เกิดการทำงานในระบบ ผู้ใช้จะต้องจำคำสั่ง ไวยากรณ์ และกฎเกณฑ์ต่างๆ เช่น ผู้ใช้ที่ชำนาญการใช้ระบบปฏิบัติการ DOS ลดความนิยมในปัจจุบัน คำสั่ง copy ไฟล์จาก drive c: ไปยัง drive a: C:\copy ex1.doc a:ex1.doc

7 หน้าจอพรอมท์ (Prompt Screens)
Do you wish to add, edit, delete, display, or print records? >PRINT Which report do you want printed? >CLOSED CLASSES Printing… Do you want another report? >YES OPEN CLASSES > O N

8 หน้าจอพรอมท์ (Prompt Screens)
Do you wish to add, edit, delete, display, or print records? >ADD What source document will be used to add the records? >REGISTRATION

9 การโต้ตอบด้วยเมนูคำสั่ง (Menu Interaction)
เป็นการโต้ตอบกับระบบด้วยการแสดงเมนูคำสั่ง โดยผู้ใช้ไม่จำเป็นต้องป้อนคำสั่งเอง รูปแบบเมนูมีดังนี้ คือ Pull-down Menu Pop-up Menu

10 Pull-down Menu Pull-down Menu เมนูแสดงคำสั่ง โดยแบ่งรายการของคำสั่งเป็นหมวดหมู่ เมื่อผู้ใช้คลิกจะแสดงรายการคำสั่งจากบนลงล่าง

11 Pop-up Menu Pop-up Menu เมนูแสดงคำสั่ง เมื่อผู้ใช้คลิกเลือกวัตถุ
หรือ object ใด ๆ ในจอภาพ คำสั่งหรือคุณสมบัติที่เกี่ยวข้องกับ object นั้นจะถูกแสดงออกมา

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

13 Poor menu design

14 Improve menu design

15 Menu Building within a graphical user interface environment

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

17 ตัวอย่างการโต้ตอบด้วยแบบฟอร์ม

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

19 การโต้ตอบด้วยภาษามนุษย์ (Natural Language Interaction)
เป็นการโต้ตอบกับระบบด้วยการใช้เสียงพูดของผู้ใช้ระบบ ใช้เสียงพูดทั้งการนำข้อมูลเข้าและออกจากระบบ

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

21 การออกแบบการจัดวางของหน้าจอ
ส่วนหัวเรื่อง: ใช้แสดงชื่อของเอกสารหรือฟอร์มนั้น ๆ ส่วนแสดงลำดับและวันที่: ใช้แสดงเลขลำดับและวันที่หรือเวลา ส่วนแนะนำหรือแนวทางในการใช้: ใช้อธิบายข้อแนะนำการใช้ฟอร์ม ส่วนรายละเอียดข้อมูล: ใช้แสดงสาระสำคัญของเอกสารหรือฟอร์ม ส่วนแสดงผลรวม: ใช้แสดงค่าผลรวม เช่น ยอดเงิน ยอดขาย เป็นต้น ส่วนการลงนามผู้มีอำนาจ: ใช้แสดงนามผู้มีอำนาจของเอกสารหรือฟอร์ม ส่วนแสดงความคิดเห็น: ใช้ในการเขียนข้อความที่เป็นความคิดเห็น

22 รูปแบบของเอกสารต้นฉบับ

23 KING REGISTRATION FORM
MONGKUT UNIVERSITY Student Number Semester/Year Last Name First Name Initial Local Telephone Number Date Street Address City State Zip Course Section Subj. Number (A, A1, 01) Cr Days Times Room Bidg. Total Credits = Date Received/Initial Advisor Approval Date

24 GALLAGHER IMPORTS EMPLOYEE NUMBER EXPENSE VOUCHER DEPARTMENT
List each expense separately. Attach receipts for all expenses except those for meals, personal car use, parking, tolls,taxis, and tips. Date Automobile Meals Lodging Other Total Miles Cost Br/Lun/Din Cost Description Cost Expense Totals: Less Advance I certify that this statement of account is correct. Signature of Employee Date Net Total Approved By Date heading zone control body totals authorization

25 BATES VIDEO CLUB-- MEMBERSHIP APPLICATION
Print the following information: Name Address City State Zip Code Home Phone Work Phone Security: Check the applicable box VISA [ ] Card# MasterCard [ ] American Express [ ] Other [ ] Expiration Date I agree to the following video club membership terms: 1. I may keep no rented video for longer than seven (7) days. 2. I may have no more than ten (10) rented videos at any one time. 3. If I fall to comply with the above terms, I understand that I will be obligated to return all rented videos at once, and that my video club membership may then be terminated. Signed Date For office use only: Accepted: [ ] Member Number: [ ] Date: [ ] Rejected: [ ]

26 BATES VIDEO CLUB - VIDEO RENTAL FORM
Member Number Date Title ID# Rental Fee Date Returned Total Rental Amount: I agree to return the above rented videos within seven (7) days. Signed:

27

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

29 การออกแบบการจัดวางของหน้าจอ
การออกแบบหน้าจอของฟอร์มหรือรายงานต่างๆ ควรจะจัดวางรูปแบบให้เหมือนกับเอกสารมากที่สุด การเชื่อมโยงการป้อนข้อมูลในแต่ละรายการหรือแต่ละฟิลด์ ต้องลำดับการเชื่อมโยงในการป้อนข้อมูลในแต่ละฟิลด์ การกรอกจะคล้ายกับการกรอกบนเอกสารจริง เริ่มกรอกจากซ้ายไปขวา และจากบนลงล่าง ควรมีความยืดหยุ่นและสอดคล้องในการทำงาน สามารถย้าย cursor ไปมาระหว่างฟิลด์ที่ต้องการแก้ไข

30 การออกแบบหน้าจอรับข้อมูล
1. เมื่อเข้าไปที่หน้าจอรับข้อมูลเคอร์เซอร์ (Cursor) ต้องอยู่ที่ตำแหน่งแรกของข้อมูลรับตามเนื้อหาของหน้าจอนั้น ตำแหน่งนั้นควรอยู่มุมบนซ้ายมือ หลังจากผู้ใช้ใส่ข้อมูลแล้วเคอร์เซอร์ (Cursor) ควรเลื่อนไปที่ช่องรับข้อมูลถัดไปเสมอ คือ ด้านล่างหรือด้านข้างถัดไปเพื่อให้การป้อนข้อมูลเป็นธรรมชาติจากบนซ้ายไปขวา แล้วจึงลงมาบรรทัดใหม่ 2. ทุกช่องรับข้อมูลต้อมีคำอธิบาย โดยแสดงกำกับที่ช่องนั้น ซึ่งจะต้องระบุให้ชัดเจนและอยู่ในตำแหน่งที่ถูกต้องและควรมีรูปแบบเดียวกันเพื่อให้ผู้ใช้ไม่สับสนในการทำงาน

31 การออกแบบหน้าจอรับข้อมูล
Back 3. ถ้าช่องรับข้อมูลนั้นมีรูปแบบเฉพาะให้แสดงรูปแบบเฉพาะนั้นเพื่อให้ผู้ใช้ป้อนข้อมูลไม่ผิดพลาด 4. ในทุกครั้งที่ป้อนข้อมูลในช่องรับข้อมูลนั้นครบถ้วนให้ผู้ใช้กด “Enter” เพื่อไปยังช่องรับข้อมูลถัดไปหรือในกรณีที่ใส่ข้อมูลเท่าจำนวนของข้อมูลนั้นแล้ว เคอร์เซอร์ควรไปยังช่องรับข้อมูลถัดไปอัตโนมัติเพื่อรับข้อมูลถัดไป เพื่ออำนวยความสะดวก Next

32 การออกแบบหน้าจอรับข้อมูล
5. กรณีข้อมูลรับเข้าเป็นตัวอักษรพิเศษแล้วควรออกแบบให้สามารถใส่ตัวอักษรพิเศษอัตโนมัติโดยผู้ใช้ไม่ต้องใส่เอง 6. กรณีข้อมูลรับเข้าต้องการแสดงผลรับเป็นเลข “0” ให้แสดงโดยผู้ใช้ไม่ต้องป้อนเอง 7. กรณีที่ข้อมูลรับเข้าเป็นจำนวนเลขที่นำไปคำนวณค่าควรมี “,” คั่นหลักพันหรือจุดทศนิยมขึ้นอัตโนมัติ 8. กรณีช่องรับข้อมูลนั้นมีค่าที่สามารถกำหนด (Default) ได้ ระบบนั้นควรแสดงค่าที่กำหนดนั้น (Default) ที่ช่องนั้น

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

34 การออกแบบหน้าจอ Back การออกแบบหน้าจอทั้งหมดมีจุดมุ่งหมาย 2 อย่าง คือ เพื่อนำเสนอข้อมูลและช่วยในการปฏิบัติงานในการใช้ระบบ มีแนวทางมากมายในการออกแบบที่ต้องพิจารณาคือหน้าจอทั้งหมดที่ปรากฏควรดึงดูดใจให้อยากใช้งาน ไม่ควรแน่นเกินไป Next

35 การออกแบบหน้าจอรับข้อมูล
1. เมื่อเข้าไปที่หน้าจอรับข้อมูลเคอร์เซอร์ (Cursor) ต้องอยู่ที่ตำแหน่งแรกของข้อมูลรับตามเนื้อหาของหน้าจอนั้น ตำแหน่งนั้นควรอยู่มุมบนซ้ายมือ หลังจากผู้ใช้ใส่ข้อมูลแล้วเคอร์เซอร์ (Cursor) ควรเลื่อนไปที่ช่องรับข้อมูลถัดไปเสมอ คือ ด้านล่างหรือด้านข้างถัดไปเพื่อให้การป้อนข้อมูลเป็นธรรมชาติจากบนซ้ายไปขวา แล้วจึงลงมาบรรทัดใหม่ 2. ทุกช่องรับข้อมูลต้อมีคำอธิบาย โดยแสดงกำกับที่ช่องนั้น ซึ่งจะต้องระบุให้ชัดเจนและอยู่ในตำแหน่งที่ถูกต้องและควรมีรูปแบบเดียวกันเพื่อให้ผู้ใช้ไม่สับสนในการทำงาน Back Next

36 การออกแบบหน้าจอรับข้อมูล
3. ถ้าช่องรับข้อมูลนั้นมีรูปแบบเฉพาะให้แสดงรูปแบบเฉพาะนั้นเพื่อให้ผู้ใช้ป้อนข้อมูลไม่ผิดพลาด 4. ในทุกครั้งที่ป้อนข้อมูลในช่องรับข้อมูลนั้นครบถ้วนให้ผู้ใช้กด “Enter” เพื่อไปยังช่องรับข้อมูลถัดไปหรือในกรณีที่ใส่ข้อมูลเท่าจำนวนของข้อมูลนั้นแล้ว เคอร์เซอร์ควรไปยังช่องรับข้อมูลถัดไปอัตโนมัติเพื่อรับข้อมูลถัดไป เพื่ออำนวยความสะดวก Back Next

37 การออกแบบหน้าจอรับข้อมูล
5. กรณีข้อมูลรับเข้าเป็นตัวอักษรพิเศษแล้วควรออกแบบให้สามารถใส่ตัวอักษรพิเศษอัตโนมัติโดยผู้ใช้ไม่ต้องใส่เอง 6. กรณีข้อมูลรับเข้าต้องการแสดงผลรับเป็นเลข “0” ให้แสดงโดยผู้ใช้ไม่ต้องป้อนเอง 7. กรณีที่ข้อมูลรับเข้าเป็นจำนวนเลขที่นำไปคำนวณค่าควรมี “,” คั่นหลักพันหรือจุดทศนิยมขึ้นอัตโนมัติ 8. กรณีช่องรับข้อมูลนั้นมีค่าที่สามารถกำหนด (Default) ได้ ระบบนั้นควรแสดงค่าที่กำหนดนั้น (Default) ที่ช่องนั้น Back Next

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

39 แสดงการป้อนข้อมูลตามการจัดเรียงที่ไม่ถูกต้อง
XXXXXX START XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX

40 แสดงการป้อนข้อมูลตามการจัดเรียงที่ถูกต้อง
START XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX

41 Bad Flow in a Form

42 Good Flow in a Form

43 การออกแบบหน้าจอรับข้อมูล

44 หน้าจอดาต้าเอนทรี (Data Entry Screen)

45 สิ่งที่ต้องเตรียมความสามารถของหน้าจอป้อนข้อมูล
การควบคุมตัวกระพริบ (Cursor) การแก้ไขตัวเลขหรือข้อมูล การใช้คำสั่งออก (Exit) มีส่วนช่วยเหลือ (Help)

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

47 มีหลักเกณฑ์การออกแบบดังนี้
การป้อนข้อมูล (Entry) พยายามให้ผู้ใช้ป้อนข้อมูลเท่าที่จำเป็นเท่านั้น ค่าเริ่มต้น (Default Value) ค่าของข้อมูลใดที่สามารถกำหนดค่าเริ่มให้ได้ ควรใส่ให้ผู้ใช้ทีนที เพื่อเพิ่มความสะดวก เช่น วันที่ หรือหมายเลข Running Number เป็นต้น หน่วยของข้อมูล (Unit) ระบุหน่วยข้อมูลให้ชัดเจน เช่น บาท ดอลลาร์ กิโลกรัม เป็นต้น คำอธิบาย หรือ คำอธิบายช่องป้อนข้อมูล(Caption) แสดงคำอธิบายฟิลด์ว่าต้องการให้ผู้ใช้ใส่ข้อมูลอะไร เป็นจัดวางให้เหมาะสม รูปแบบของข้อมูล (Format) ถ้าต้องการให้มีสัญลักษณ์พิเศษ ควรเตรียมสัญลักษณ์เหล่านี้ให้อัตโนมัติ การจัดวางข้อมูล(Justify) ออกแบบให้มีการจัดวางข้อมูลโดยอัตโนมัติ เช่นตัวเลขชิดขวา ข้อความชิดซ้าย เป็นต้น ส่วนช่วยเหลือ (Help) เตรียมส่วนช่วยเหลือระหว่างผู้ใช้ป้อนข้อมูล เช่นปุ่ม F1 เพื่อขออ่านคำอธิบาย การติดต่อกับผู้ใช้ในการป้อนข้อมูลด้วยกราฟิก (GUI)

48 การติดต่อกับผู้ใช้แบบกราฟิก (Graphic User Interface: GUI)
เทคโนโลยีที่นำมาใช้ เรียกว่า GUI Input Control ช่วยให้ผู้ใช้ระบบสามารถใช้งานระบบได้ง่ายขึ้น ช่วยให้ข้อมูลที่นำเข้าสู่ระบบมีรูปแบบเดียวกัน ช่วยป้องกันความผิดพลาดในระหว่างการป้อนข้อมูล

49 รูปแบบของ GUI Text Box Radio Button Check Button List box
Drop-down List Box Combination Box (Combo Box) Spin Box (Spinner Box) Menu bars Toolbars Dialog boxes Toggle buttons Scroll bars Calendars Status Bar

50 ตัวอย่างการใช้ GUI ที่ใช้แทนเมนูหลักของระบบการให้เกรด น.ศ.
Back Next

51 เมนูพลูดาวน์ (Pull-Down Menu)

52 หน้าต่างป๊อบอัฟ (Pop-up Window)

53 แสดงเทคนิคทาง GUI 8 แบบในการนำข้อมูลเข้าหรือเลือกคำสั่ง

54 ตัวอย่าง Graphic User Interface
Radio Button ListBox TextBox ComboBox

55

56 Common GUI Components Text box List Drop down list Radio button
Can edit Text box Radio button Check box List Spin Drop down list Button

57 Advanced GUI Components

58 Advanced GUI Components (continued)

59 Input Prototype for Data Maintenance

60 Input Prototype for Transaction

61 Input Prototype for Data Maintenance

62 Input Prototype for Web Interface

63 Input Prototype for Web Interface

64 การควบคุมความถูกต้องในระหว่างป้อนข้อมูล (Controlling Data Input)
ควรตรวจสอบชนิดของข้อมูล ควรตรวจสอบการป้อนข้อมูลไม่ครบตามที่ระบุไว้ ควรตรวจสอบรูปแบบที่ป้อนข้อมูล ควรตรวจสอบค่าสูงสุดและต่ำสุดของข้อมูล ควรตรวจสอบความครบถ้วนของข้อมูลในแต่ละฟิลด์

65 การตอบสนองของระบบ (Providing Feedback)
มีอยู่ด้วยกัน 3 ชนิด คือ แจ้งสถานะการทำงาน (Status Information) แสดงความพร้อมในการรับคำสั่ง (Prompting Cues) ข้อความแจ้งหรือเตือนเมื่อมีข้อผิดพลาด (Error/Warning Messages)

66 แจ้งสถานะการทำงาน (Status Information)
แจ้งให้ผู้ใช้ทราบถึงความสถานะปัจจุบันในกาทำงานของระบบ เช่น แสดงเลขหน้าที่กำลังทำงานอยู่ แสดงความคืบหน้าในการประมวลผล Combination of Text and Graphics for End User feedback

67 แสดงความพร้อมในการรับคำสั่ง (Prompting Cues)
เป็นการออกแบบเพื่อแจ้งสถานะความพร้อมในการรับคำสั่ง เช่น หน้า Login เข้าระบบ cursor กระพริบรอรับ username หรือ กรุณาป้อนรหัสวิชา :_ _ _-_ _ _

68 ข้อความแจ้งหรือเตือนเมื่อมีข้อผิดพลาด (Error/Warning Messages)
การแสดงข้อความเมื่อเกิดข้อผิดพลาด และแนะแนวทางในการแก้ไข เพื่ออธิบายให้ผู้ใช้สามารถแก้ไขปัญหาด้วยตนเองได้

69 การแสดงส่วนช่วยเหลือ (Help)
สามารถใช้งานง่าย (Simplicity) มีการจัดรูปแบบอย่างเป็นระเบียบ (Organization) มีการแสดงตัวอย่าง (Example)

70 ตัวอย่าง Help Improved designed help display
Poorly designed help display

71 ตัวอย่าง Help

72 การออกแบบควบคุมการเข้าถึงข้อมูลของผู้ใช้
จำกัดความสามารถในการมองเห็นข้อมูลจากฐานข้อมูล (View/Subschema) สิทธิในการเข้าถึงข้อมูล (Authorization Rules) การเข้ารหัส (Encryption Procedures) การตรวจสอบการเข้าใช้ระบบ (Authentication schemas)

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

74 เลขลำดับที่อ้างอิงมา
Dialogues Diagram Dialogues Diagram เป็นแผนภาพแสดงลำดับการเชื่อมโยงของจอภาพ สัญลักษณ์ เลขลำดับหน้าจอ ชื่อหน้าจอการทำงาน เลขลำดับที่อ้างอิงมา

75 ตัวอย่าง Dialogue diagram for Customer Information System

76 แบบฝึกหัด ออกแบบ User Interface หน้าจอรับคำสั่งซื้อ Pizza โดยมีรายละเอียดดังนี้ ลูกค้าโทรมาสั่ง Pizza หรือมาซื้อที่ร้าน ถ้าโทรมาสั่ง สามารถตรวจสอบที่อยู่จากเบอร์โทรศัพท์ที่เคยโทรมาก่อนหน้า ถ้าเป็นลูกค้าใหม่ต้อง input ข้อมูลของลูกค้าใหม่ด้วย แจ้งข้อมูลรายการ Pizza และโปรโมชั่น เมื่อลูกค้าเลือกรายการเรียบร้อยแล้ว ทวนคำสั่งซื้อ และบอกราคารวมทั้งสิ้น และเวลาการจัดส่ง และออกแบบใบเสร็จรับเงิน

77 การบ้าน ให้นักศึกษาออกแบบ User Interface และ วาด Dialogue Diagram ของระบบงานที่จะนำเสนอ