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

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

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

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


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

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

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

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

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

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

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

7 7 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 Which report do you want printed? OPEN CLASSES Printing… Do you want another report? > O N หน้าจอพรอมท์ (Prompt Screens)

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

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

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

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

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

13 13 Poor menu design

14 14 Improve menu design

15 15 Menu Building within a graphical user interface environment

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

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

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

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

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

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

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

23 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 24 EMPLOYEE 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 zone body zone totals zone authorization zone

25 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 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 27

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

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

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

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

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

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

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

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

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

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

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

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

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

41 41 Bad Flow in a Form

42 42 Good Flow in a Form

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

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

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

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

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

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

49 49 รูปแบบของ GUI 1. Text Box 2. Radio Button 3. Check Button 4. List box 5. Drop-down List Box 6. Combination Box (Combo Box) 7. Spin Box (Spinner Box) 8. Menu bars 9. Toolbars 10. Dialog boxes 11. Toggle buttons 12. Scroll bars 13. Calendars 14. Status Bar

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

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

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

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

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

55 55

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

57 57 Advanced GUI Components

58 58 Advanced GUI Components (continued)

59 59 Input Prototype for Data Maintenance

60 60 Input Prototype for Transaction

61 61 Input Prototype for Data Maintenance

62 62 Input Prototype for Web Interface

63 63 Input Prototype for Web Interface

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

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

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

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

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

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

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

71 71 ตัวอย่าง Help

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

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

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

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

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

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


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

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


Ads by Google