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

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

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

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


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

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

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

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

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

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

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

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

8 8 REGISTRATION FORM KASETSART 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

9 9 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

10 10 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: [ ]

11 11 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:

12 12

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

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

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

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

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

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

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

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

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

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

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

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

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

26 26 Bad Flow in a Form

27 27 Good Flow in a Form

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

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

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

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

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

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

34 34 รูปแบบของ 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

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

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

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

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

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

40 40

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

42 42 Advanced GUI Components

43 43 Advanced GUI Components (continued)

44 44 Input Prototype for Data Maintenance

45 45 Input Prototype for Transaction

46 46 Input Prototype for Data Maintenance

47 47 Input Prototype for Web Interface

48 48 Input Prototype for Web Interface

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

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

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

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

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

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

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

56 56 ตัวอย่าง Help

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

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

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

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

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


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

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


Ads by Google