การออกแบบส่วนต่อประสานกับผู้ใช้

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

1 การออกแบบส่วนต่อประสานกับผู้ใช้
บทที่ 9 การออกแบบส่วนต่อประสานกับผู้ใช้

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

3 บทนำ การออกแบบส่วนต่อประสานกับผู้ใช้ (User Interface Design) เรียกอีกอย่างหนึ่งว่า "การออกแบบจอภาพ (Screen Design)" คือ การปฏิสัมพันธ์ระหว่างผู้ใช้กับระบบ ซึ่งมีหลักการทำงานพื้นฐาน 3 ส่วนได้แก่ ส่วนนำเข้าข้อมูล ส่วนประมวลผล ส่วนข้อมูลส่งออก ซึ่งข้อมูลนำเช้าและข้อมูลส่งออกเป็นส่วนที่ใช้ติดต่อกับผู้ใช้โดยตรง เรียกว่า "ส่วนต่อประสานกับผู้ใช้" ซึ่งเป็นกระบวนการสำคัญในการพัฒนาซอฟต์แวร์ และมีผลต่อการเลือกใช้ซอฟต์แวร์เป็นอย่างมากเนื่องจากส่วนต่อประสานกับผู้ใช้จะแสดงรูปหรือสัญลักษณ์ต่าง ๆ บนจอภาพ เพื่อสื่อความหมายให้กับผู้ใช้ หากส่วนนี้สร้างความประทับใจให้ผู้ใช้ จะช่วยโน้มน้าวให้ผู้ใช้ยอมรับซอฟต์แวร์ได้ง่ายขึ้น

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

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

6 กระบวนการของการออกแบบส่วนต่อประสานกับผู้ใช้
การออกแบบส่วนต่อประสานกับระบบ (System Interface Design) คือ การกำหนดวิธีที่ระบบสามารถแลกเปลี่ยนข้อมูลกับระบบอื่นได้ การปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ (Human Computer Interaction: HCI) คือ การปฏิสัมพันธ์ระหว่างผู้ใช้กับระบบ โดยเกี่ยวข้องกับ ธุรกิจ แนวความคิด และการสื่อสาร รวมทั้งคำสั่งที่ใช้ในการป้อนข้อมูลเข้าสู่ระบบ และการแสดงผลลัพธ์ผ่านจอภาพหรือรายงานต่าง ๆ การออกแบบออกแบบส่วนต่อประสานกับผู้ใช้ที่ดี กล่าวถึงวิธีการที่คนทำงาน เรียนรู้ และโต้ตอบกับคอมพิวเตอร์ อยู่บนพื้นฐานของ การผสมผสานรวมกันระหว่าง การยศาสตร์ (Ergonomics) สุนทรียศาสตร์ (Aesthetics) เทคโนโลยี (Technology)

7 การวิเคราะห์และการสร้างแบบจำลองส่วนต่อประสาน
การวิเคราะห์และสร้างแบบจำลองส่วนต่อประสาน (Interface Analysis and Modeling) ถือเป็นกระบวนการแรกของการออกแบบส่วนต่อประสานกับผู้ใช้ ซึ่งนักออกแบบระบบจะต้องวิเคราะห์รายละเอียดของส่วนต่อประสาน และสร้างแบบจำลอง ส่วนต่อประสานหรือจัดทำต้นแบบสำหรับการออกแบบส่วนต่อประสานกับผู้ใช้

8 การวิเคราะห์และการสร้างแบบจำลองส่วนต่อประสาน
การวิเคราะห์ผู้ใช้ การนักออกแบบต้องทำความเข้าใจผู้ใช้ที่จะมาใช้งานระบบ โดยลักษณะของผู้ใช้แบ่งเป็น 3 ประเภท ได้แก่ ผู้ใช้หน้าใหม่ (Novice User) ผู้ใช้ที่มีประสบการณ์และความรู้ระดับกลาง (Knowledgeable Intermittent User) ผู้ใช้งานเป็นประจำหรือผู้เชี่ยวชาญ (Frequent User/Expert)

9 ผู้ใช้หน้าใหม่ (Novice User)
การวิเคราะห์งาน การวิเคราะห์งาน นักออกแบบระบบจะต้องทำความเข้าใจลักษณะงานของผู้ใช้ และจัดลำดับของงานทั้งหมด เนื่องจากผู้ใช้แต่ละคนมีมุมมองของระบบต่างกัน วิธีเข้าถึงความต้องการของผู้ใช้ อาจใช้การสัมภาษณ์ ทำให้นักออกแบบระบบทราบว่า ใครคือผู้ใช้งานระบบ แบ่งกลุ่มผู้ใช้อย่างไร ผู้ใช้แต่ละกลุ่มมีทักษะและประสบการณ์ในระดับใด และส่วนต่อประสานจะตอบสนองความต้องการของผู้ใช้อย่างไร ผู้ใช้หน้าใหม่ (Novice User)

10 ผู้ใช้หน้าใหม่ (Novice User)
การวิเคราะห์เนื้อหา การวิเคราะห์เนื้อหา คือ นักออกแบบระบบศึกษาเอกสารที่เกี่ยวข้อง และรูปแบบของการแสดงผลที่ผู้ใช้ต้องการ นอกจากนี้ นักออกแบบระบบต้องทำความเข้าใจเนื้อหา และวิธีการที่จะนำเสนอส่วนต่อประสานให้เข้ากับผู้ใช้ด้วย ผู้ใช้หน้าใหม่ (Novice User)

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

12 การสร้างแบบจำลองส่วนต่อประสาน
การสร้างแบบจำลองส่วนต่อประสาน มีเป้าหมายหลัก คือ เพื่อจำลองให้เห็นเป็นภาพ ของส่วนต่อประสานกับผู้ใช้ ซึ่งแบบจำลองการวิเคราะห์และการออกแบบส่วนต่อประสาน แบ่งเป็น 4 ประเภท คือ แบบจำลองผู้ใช้ (User Model) แบบจำลองการออกแบบ (Design Model) แบบจำลองจิตใจหรือการรับรู้ระบบ (Mental Model/System Perception) แบบจำลองการนำไปปฏิบัติ (Implementation Model)

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

14 แบบจำลอง GOMS แบบจำลอง GOMS คือ แบบจำลองที่ถูกพัฒนาโดย Stuart K. Card, Thomas P. Moran และ Allen Newell ในปี ค.ศ [Card et al., 1983] แบบจำลอง GOMS คือ สิ่งที่ช่วยแนะแนวทางหรือคำแนะนำในการออกแบบส่วนต่อประสานกับผู้ใช้ โดย พิจารณาถึงผู้ใช้ที่หลากหลาย เช่น นักธุรกิจ นักบัญชี นักคอมพิวเตอร์ ผู้ที่ไม่มีความรู้ด้าน เทคโนโลยี เป็นต้น แบบจำลอง GOMS ประกอบด้วย ปัจจัยหลัก 4 ประการ คือ เป้าหมาย (Goal) ตัวดำเนินการ (Operator) ระเบียบวิธี (Method) การเลือกกฎ (Selection Rule)

15 กฎของ Theo Mandel Theo Mandel [Mandel, 1997] บัญญัติกฎ 3 ข้อ
เพื่อใช้ในการออกแบบส่วนต่อประสาน ได้แก่ ผู้ควบคุมการทำงานของระบบ ลดภาระการจดจำของผู้ใช้ สร้างส่วนต่อประสานให้สอดคล้องกัน

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

17 ลดภาระการจดจำของผู้ใช้
โครงสร้างความคิดของมนุษย์ คือรับรู้โดยใช้ประสาทสัมผัส จากนั้นจะส่งสิ่งที่ได้รับ ผ่านมายังหน่วยความจำระยะสั้น (Shot-Tem Memory) ส่งข้อมูลผ่านไปหน่วยความทำการทำงาน (Working Memory) และส่งข้อมูลไปหน่วยความจำระยะยาว (Long-Term Memory) หากผู้ใช้จดทำรายละเอียดมากไปทำให้มีความเสี่ยงต่อการเกิดความผิดพลาดสูง ในการใช้งานระบบ นักออกแบบระบบจึงไม่ควรเพิ่มภาระการจดจำให้กับผู้ใช่ระบบในภายหลัง และระบบสามารถจดจำข้อมูลที่ไม่มีการเปลี่ยนแปลงบ่อย และช่วยเตือนความจำ เมื่อหลับมาใช้ระบบภายหลัง

18 ลดภาระการจดจำของผู้ใช้
ดังนั้น Theo Mandel จึงได้ออกแบบหลักการลดจารจดจำของผู้ใช้ ได้แก่ ลดความต้องการในการใช้งานหน่วยความจำนะยะสั้นของผู้ใช้ การกำหนดค่าเริ่มต้น (Default Value) นิยามปุ่มทางลัด (Shortcut) การจัดภาพของส่วนต่อประสานควรเป็นไปตามจริง ส่วนต่อประสานควรมีการจัดลำดับชั้นในการแสดงรายละเอียดการใช้งาน

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

20 กฎของ Shneiderman & Plaisant
Shneiderman & Plaisant [Shneiderman and Plaisant, 2010] ออกแบบส่วนต่อ ประสานกับผู้ใช้ ประกอบด้วยกฏ 8 ข้อได้แก่ ออกแบบส่วนต่อประสานให้สอดคล้องกัน สร้างปุ่มทางลัดสำหรับผู้ใช้ที่ใช้งานคอมพิวเตอร์เป็นประจำ หรือผู้ใช้ที่มีประสบการณ์ เช่น Ctrl+C หมายถึง คัดลอก หรือ Ctrl+V หมายถึง วาง เป็นต้น นำผลป้อนกลับที่ได้จากผู้ใช้ เพื่อปรับปรุงการออกแบบส่วนต่อประสาน วางคำโต้ตอบ (Dialogue) ให้ใกล้กับข้อความ มีวิธีการป้องกันข้อผิดพลาด และการจัดการข้อผิดพลาดแบบง่าย มีการทำงานแบบทำกลับ (Undo) มีการควบคุมตำแหน่งในหน้าจอของส่วนต่อประสาน ลดการใช้งานหน่วยความจำระยะสั้นของผู้ใช้ให้น้อยลง

21 การจัดทำต้นแบบสำหรับการออกแบบส่วนต่อประสานกับผู้ใช้
มีด้วยกัน 2 ประเภท คือ Low fidelity คือการจัดทำต้นแบบ โดยใช้กระดาษ กระดาษแข็ง หรือกระดาน นักออกแบบสามารถ วาดส่วนต่อประสานกับผู้ใช้ลงบนกระดาษ ซึ่งอาจะประกอบด้วย ตราสัญลักษณ์บริษัท เครื่องมือนำทางตามแนวนอน (Horizontal Navigation) คำแนะนำ ลิขสิทธิ์ และข้อมูลติดต่อ ที่มา:

22 การจัดทำต้นแบบสำหรับการออกแบบส่วนต่อประสานกับผู้ใช้
High fidelity คือการจัดทำต้นแบบ โดยใช้โปรแกรมสำเร็จรูป หรือเครื่องมือช่วยเช่น Visual Basic, Adobe Dreamweaver, Moqups เป็นต้น เพื่อให้ผู้ใช้เห็นลำดับขั้นตอนการทำงานของระบบ เรีกยว่า "Storyboard" ที่มา:

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

24 การออกแบบส่วนต่อประสานกนับผู้ใช้ที่นิยมใช้ในปัจจุบัน
การปฏิสัมพันธ์ด้วยภาษาคำสั่ง (Command Language Interaction)

25 การออกแบบส่วนต่อประสานกนับผู้ใช้ที่นิยมใช้ในปัจจุบัน
การปฏิสัมพันธ์ด้วยรายการเลือกแบบข้อความ (Text Menu Interaction)

26 การออกแบบส่วนต่อประสานกนับผู้ใช้ที่นิยมใช้ในปัจจุบัน
การปฏิสัมพันธ์ด้วยรายการเลือกแบบข้อความ (Text Menu Interaction) รายการเลือกแบบดึงลง (Pull-Down Menu) รายการเลือกแบบโผล่ขึ้น (Pop-Up Menu)

27 การออกแบบส่วนต่อประสานกนับผู้ใช้ที่นิยมใช้ในปัจจุบัน
การปฏิสัมพันธ์ด้วยแบบฟอร์ม (Form Interaction) แสดงหน้าจอของแบบฟอร์มการลงทะเบียนของ Facebook

28 การออกแบบส่วนต่อประสานกนับผู้ใช้ที่นิยมใช้ในปัจจุบัน
การปฏิสัมพันธ์เชิงวัตถุ (Object-Based Interaction) แสดงสัญลักษณ์รูปของโปรแกรม Microsoft Word

29 การออกแบบส่วนต่อประสานกนับผู้ใช้ที่นิยมใช้ในปัจจุบัน
การปฏิสัมพันธ์ด้วยภาษาธรรมชาติ (Natural Language Interaction) แสดงการค้นหาด้วยเสียงจากแอพพลิเคชัน Google ในระบบปฏิบัติการแอนดรอย์

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

31 การสร้างส่วนต่อประสาน
แผนภาพลำดับการเชื่อมโยงจอภาพหน้าจอเข้าสู่ระบบ แสดงแผนภาพลำดับการเชื่อมโยงจอภาพหน้าจอเข้าสู่ระบบ

32 การออกแบบเครื่องมือนำทาง
การออกแบบเครื่องมือนำทาง (Navigation Design) คือวิธีที่ทำให้ผู้ใช้ทราบถึงการใช้งาน และฟังก์ชันการทำงานของระบบ ประกอบด้วย แถบที่อยู่ (Address Bar/Location Bar) แถบเครื่องมือนำทาง (Navigation Bar/Breadcrumb) การเชื่อมโยงหลายมิติ (Hyperlink) มุมมองต้นไม้หรือมุมมองเค้าโครง (Tree View/Outline View)

33 การออกแบบข้อมูลนำเข้า
การออกแบบข้อมูลนำเข้า (Input Design) คือ การกำหนดวิธีในการป้อนข้อมูลนำเข้าของผู้ใช้ และวิธีที่ระบบจะรองรับข้อมูลนำเข้า ปัจจุบัน เทคโนโลยีการนำเข้ามีการเปลี่ยนแปลงอย่าง รวดเร็วพร้อมทั้งมีเทคนิคจำนวนมาก ทำให้กระบวนการป้อนข้อมูลของผู้ใช้มีความรวดเร็ว ช่วย ลดต้นทุน และค่าใช้จ่าย การออกแบบข้อมูลนำเข้าต้องกำหนดวิธีการจับข้อมูลและการป้อนข้อมูลเข้สู่ระบบ การ จับข้อมูล (Data Capture) คือ การระบุและบันทึกข้อมูลต้นฉบับ สำหรับการป้อนข้อมูล กระบวนการแปลงข้อมูลต้นฉบับให้อยู่ในรูปแบบที่คอมพิวเตอร์อ่านได้ และนำข้อมูลเข้าสู่ระบบ

34 วัตถุประสงค์หลักของการออกแบบข้อมูลนำเข้า
การนำข้อมูลเข้าสู่ระบบ การลดปริมาณข้อมูลนำเข้า การออกแบบหน้าจอป้อนข้อมูล การตรวจสอบความถองของข้อมูลนำเข้า การออกแบบโดยอ้างอิงตามเอกสารต้นฉบับ การควบคุมในการนำเข้าข้อมูลสู่ระบบ

35 การนำข้อมูลเข้าสู่ระบบ
การนำข้อมูลเข้าสู่ระบบ แบ่งเป็น 2 ประเภท ได้แก่ ข้อมูลนำเข้าแบบกลุ่ม (Batch Input) คือ ผู้ใช้จะป้อนข้อมูลเข้าสู่ระบบตามช่วงระยะเวลา ที่กำหนด เช่น รายวัน รายสัปดาห์ รายเดือน เป็นต้น ข้อมูลนำเข้าแบบออนไลน์ (Online Input) คือ ผู้ใช้จะป้อนข้อมูลเข้าสู่ระบบอัตโนมัติ เช่น หน้าจอของระบบซื้อขายสินค้า หน้าจอจองระบบเอทีเอ็ม เป็นต้น

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

37 การลดปริมาณข้อมูล (ต่อ)
ไม่ควรให้ผู้ใช้ป้อนเลข 0 นำหน้าสำหรับเขตข้อมูลที่เป็นตัวเลข ไม่ควรใช้ค่าเริ่มต้น เมื่อค่าของเขตข้อมูลนั้นคงที่สำหรับระเบียนข้อมูลถัดไป แสดงค่าของเขตข้อมูลที่ยอมรับได้ เตรียมวิธีการยกเลิกหน้าจอในการป้อนข้อมูลกลางคัน ให้ผู้ชมยืนยันความถูกต้องของข้อมูลรำเข้าที่ป้อนเข้าสู่ระบบ เตรียมวิธีการในการเลื่อนระหว่างเขตข้อมูลบนฟอร์มตามลำดับมาตรฐาน ออกแบบการวางแบบฟอร์มบนหน้าจอให้ตรงกับรูปแบบของเอกสารต้นฉบับ ผู้ใช้สามารถสร้าง แก้ไข ลบ และเรียกดูระเบียบข้อมูลได้ ผู้ใช้สามารถค้นหาข้อมูลที่เฉพาะเจาะจงได้

38 การตรวจสอบความถูกต้องของข้อมูลนำเข้า
การตรวจสอบแบบเรียงลำดับ (Sequence Check) การตรวจสอบชนิดข้อมูล (Data Type Check) การตรวจสอบรูปแบบ (Format Check) การตรวจสอบพิสัย (Range Check) การตรวจสอบข้อมูลสูญหาย (Mission Data Check) การตรวจสอบความสมเหตุสมผล (Reasonableness Check) การตรวจสอบความถูกต้อง (Validly Check) การควบคุมแบบกลุ่ม (Batch Control)

39 การออกแบบโดยอ้างอิงตามเอกสารต้นฉบับ
นักออกแบบระบบสร้างแบบฟอร์ม โดยอ้างอิงตามเอกสารต้นฉบับที่ ผู้ใช้ต้องการ เพื่อให้ผู้ใช้ป้อนข้อมูลนำเข้าลงในแบบฟอร์มที่ออกแบบไว้

40 การควบคุมในการนำเข้าข้อมูลเข้าสู่ระบบ
การควบคุมในการนำเข้าข้อมูลเข้าสู่ระบบ เป็นการตรวจสอบข้อมูลที่ผู้ใช้ป้อน เพื่อให้แน่ใจ ว่าข้อมูลนั้นมรรความถูกน้อง ครบถ้วน และปลอดภัย นักออกแบบระบบสามารถใช้ส่วนย่อย การควบคุมเชิงกราฟ (Graphical Control Element) เพื่อให้ผู้ใช้มีปฏิสัมพันธ์กับระบบ และช่วยลดความผิดพลาดในการป้อนขอมูลเข้าสู่ระบบ ส่วนย่อยการควบคุมเชิงกราฟ ชื่อ อธิบาย แถบเครื่องมือ (Toolbar) ผู้ใช้สามารถเลือกปุ่มบนแถบเครื่องมือ เพื่อทำคำสั่งต่าง ๆ ได้แก่ Go to Beginning, Rewind, Play, Stop, Forward และ Go to End กล่องข้อความ (Textbox) ผู้ใช้สามารถป้อนนข้อมูลในกล่องข้อความ ปุ่มเปิดปิด (Toggle Button) ผู้ใช้สามารถเลือกปุ่มเปิดปิดซึ่งจะแสดงสถานะสลับกันไปมา

41 การควบคุมในการนำเข้าข้อมูลเข้าสู่ระบบ
ส่วนย่อยการควบคุมเชิงกราฟ ชื่อ อธิบาย กล่องเลือก (Checkbox) ผู้ใช้สามารถเลือกจากกล่องได้มากกว่าหนึ่งทางเลือก ซึ่งทางเลือกที่ถูกเลือกนั้น แสดงด้วยเครื่องหมายถูก หรือไม่เลือก ปุ่มทางเลือก (Radio Button / Option Button) ผู้ใช้สามารถเลือกจากปุ่มทางเลือกเพียงหนึ่งทางเลือกเท่านั้น ซึ่งทางเลือกที่ถูกเลือกนั้น แสดงด้วยจุด กล่องรายการ (List Box) ผู้ใช้สามารถเลือกทางเลือกจากกล่องรายการถ้าจำนวนทางเลือกเกินกว่ากล่องรายการจะมีแถวเลื่อนหน้าจอ (Scoll Bar) เพื่อให้ผู้ใช้เลื่อนและเลือกทางเลือกได้ กล่องรายการแบบดึงลง (Drop-Down List Box) ผู้ใช้สามารถคลิกลูกศร เพื่อเลือกทางเลือกจากกล่องรายการแบบดึงลง วิธีนี้ใช้ในกรณีที่มีพื้นที่จำกัด และมีรายการข้อมูลไม่มาจนเกินไป

42 การควบคุมในการนำเข้าข้อมูลเข้าสู่ระบบ
ส่วนย่อยการควบคุมเชิงกราฟ ชื่อ อธิบาย กล่องคอมโบ (Combo Box) ผู้ใช้สามารถพิมพ์ข้อความ หรือเลือกทางเลือกจากรายการ วิธีนี้เป็นวิธีการผสมผสานกันระหว่างกล่องข้อความและกล่องรายการแบบดึงลง ปุ่มคำสั่ง (Command Button) ผู้ใช้กดปุ่มคำสั่ง เพื่อสั่งให้โปรแกรมทำงาน สปินเนอร์ (Spinner) ผู้ใช้สามารถคลิกลูกศรขึ้นหรือลง เพื่อปรับค่าที่ปรากฏในกล่องข้อความ แถบเลื่อน (Slider) ผู้ใช้เมาส์ โดยลากผ่านแถบเลื่อนไปทางซ้ายหรือขวาที่ปรากฏในหน้าต่าง เพื่อเลือกทางเลือก กล่องสนทนา (Dialog Box) กล่องสนทนาเป็นหน้าต่างเล็ก ๆ ที่แสดงขึ้นมาเพื่อให้คำแนะนำหรือข้อมูลกับผู้ใช้

43 การออกแบบข้อมูลส่งออก
การออกแบบข้อมูลส่งออก (Output Design) คือการแสดงผลลัพธ์หรือข้อมูลให้กับผู้ใช้ ผ่านทางหน้าจอ เสียง ภาพเคลื่อนไหว อีเมล์ โทรสาร หรือเว็บเพจ เพื่อตอบสนองผู้ใช้ แม้ หลายองค์กรจะพยายามลดปริมาณการใช้กระดาษ แต่ยากที่จะลดลงได้ทั้งหมด เนื่องจากมี ความจำเป็นในหลายสถานการณ์ เช่น รานงานแสดงรานละเอียด รายงานสรุป กราฟ ตาราง ที่ใช้กระดาษจะเหมาะสมกว่า เป็นต้น

44 การตรวจสอบส่วนต่อประสาน
การตรวจสอบส่วนต่อประสาน (Interface Validation) คือ ขั้นตอนที่เกิดขึ้นหลังจากจากสร้างต้นแบบ ให้กับผู้ใช้ นักพัฒนาซอฟต์แวร์ต้องประเมินว่า ฟังก์ชันที่ปรากฏให้ต้นแบบตรงตามความต้องการของผู้ใช้ หรือไม่ โดยทีมงานจะนำผลป้อนกลับของผู้ใช้ เพื่อปรับปรุงต้นแบบให้ต้นแบบให้มีความสมบูรณ์ที่สุด แสดงวัฏจักรของการประเมินการออกแบบส่วนต่อประสาน

45 การตรวจสอบส่วนต่อประสาน
ความสามารถในการใช้งานของผู้ใช้ สามารถวัดหรือทดสอบจากปัจจัยต่าง ๆ ดังนี้ เวลาในการเรียนรู้ ความเร็วการปฏิบัติการ อัตราความผิดพลาด การจดจำ ความพึงพอใจ

46 แนวทางการเขียนโปรแกรมที่ดี
นักเขียนโปรแกรมต้องมีทักษะและความรู้พื้นฐานดังนี้ ความเข้าใจและวิธีแก้ปัญหา ความรู้และทักษะด้านภาษาคอมพิวเตอร์ ประกอบด้วย ความรู้ด้านไวยากรณ์ภาษา (Syntactic Knowledge) ความรู้ด้านความหมาย (Sematic Knowledge) ความสามารถในการจัดวางโครงสร้างของโปรแกรม เพื่อให้ง่ายต่อการอ่านและเข้าใจ ทักษะในการเขียนคำอธิบายโปรแกรม (Comment) ความสามารถในการทดสอบและแก้ไขข้อผิดพลาดในโปรแกรม

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

48 รูปแบบการเขียนโปรแกรมที่ดี
ตารางแสดงรูปแบบการเขียนโปรแกรมที่ไม่ดีและการปรับโครงสร้างการออกแบบของโปรแกรม รูปแบบของโปรแกรมที่ไม่ดี การปรับโครงสร้างการออกแบบของโปรแรกม • ส่วนของโปรแกรมซ้ำกันมากเกินไป • แยกเป็นเมธอด • เมธอดยาวเกินไป • ใช้ขั้นตอนวิธีแทน • คลาสมีขนาดใหญ่ • สร้างเมธอด • ใช้ข้อความคำสั่ง Switch • แยกเป็นคลาส • ใช้เมธอดจำนวนมากภายในคลาส • 1 คลาส ควรมี 1 เมธอด • อ้างถึงข้อมูลส่วนบุคคลของคลาสอื่น • ใช้ข้อมูลส่วนบุคคลภายในคลาสเท่านั้น

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

50

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