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

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

การออกแบบส่วนติดต่อผู้ใช้ User Interface Design อ.พัฒนพงษ์ โพธิปัสสา.

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


งานนำเสนอเรื่อง: "การออกแบบส่วนติดต่อผู้ใช้ User Interface Design อ.พัฒนพงษ์ โพธิปัสสา."— ใบสำเนางานนำเสนอ:

1 การออกแบบส่วนติดต่อผู้ใช้ User Interface Design อ.พัฒนพงษ์ โพธิปัสสา

2 System Development Life Cycle : SDLC กิจกรรมในขั้นตอนนี้ได้แก่ 1. การออกแบบฟอร์มและรายงาน 2. การออกแบบ GUI 3. การออกแบบฐานข้อมูล

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

4 Topics  กระบวนการในการออกแบบ User Interface  รูปแบบของส่วนติดต่อกับผู้ใช้  การออกแบบ Interface  ออกแบบการควบคุมการเข้าถึงข้อมูลของผู้ใช้  การออกแบบลำดับการเชื่อมโยงจอภาพ 4

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

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

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

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

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

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

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

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

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

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

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

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

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

18 การออกแบบการจัดวางของหน้าจอ

19 การออกแบบการจัดวางของหน้าจอ 19

20 การออกแบบการจัดวางของหน้าจอ  การออกแบบหน้าจอทั้งหมดมีจุดมุ่งหมาย 2 อย่าง คือ เพื่อนำเสนอข้อมูลและ ช่วยในการปฏิบัติงานในการใช้ระบบ มีแนวทางมากมายในการออกแบบที่ต้อง พิจารณาคือหน้าจอทั้งหมดที่ปรากฏควรดึงดูดใจให้อยากใช้งาน ไม่ควรแน่น เกินไป  การออกแบบหน้าจอของฟอร์มหรือรายงานต่างๆ ควรจะจัดวางรูปแบบให้ เหมือนกับเอกสารมากที่สุด  การเชื่อมโยงการป้อนข้อมูลในแต่ละรายการหรือแต่ละฟิลด์  ต้องลำดับการเชื่อมโยงในการป้อนข้อมูลในแต่ละฟิลด์  การกรอกจะคล้ายกับการกรอกบนเอกสารจริง  เริ่มกรอกจากซ้ายไปขวา และจากบนลงล่าง  ควรมีความยืดหยุ่นและสอดคล้องในการทำงาน สามารถย้าย Cursor ไป มาระหว่างฟิลด์ที่ต้องการแก้ไข 20

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

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

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

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

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

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

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

28 หลักเกณฑ์การออกแบบ  ส่วนช่วยเหลือ (Help) เตรียมส่วนช่วยเหลือระหว่างผู้ใช้ป้อนข้อมูล เช่นปุ่ม F1 เพื่อขออ่านคำอธิบาย  การติดต่อกับผู้ใช้ในการป้อนข้อมูลด้วยกราฟิก (GUI) 28

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

30 การติดต่อกับผู้ใช้แบบกราฟิก (Graphic User Interface: 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 30

31 การติดต่อกับผู้ใช้แบบกราฟิก (Graphic User Interface: GUI) ListBox TextBox Radio Button ComboBox 31

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

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

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

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

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

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

38 การแสดงส่วนช่วยเหลือ (Help) Poorly designed help displayImproved designed help display 38

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

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

41 Reference Book and Text Book ตำราอ้างอิง  การวิเคราะห์และออกแบบระบบ กิตติ ภักดีวัฒนกุล และพนิดา พานิชกุล  Modern Systems Analysis & Design : Jeffrey A. Hoffer, Joey F.George, Joseph S. Valacich 41

42 Q & A


ดาวน์โหลด ppt การออกแบบส่วนติดต่อผู้ใช้ User Interface Design อ.พัฒนพงษ์ โพธิปัสสา.

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


Ads by Google