บทที่ 9 การออกแบบส่วนต่อประสานกับผู้ใช้
วัตถุประสงค์ • เพื่อทำควำมรู้จักกับกำรออกแบบส่วนต่อประสำนกับผู้ใช้ • เพือ่ ศึกษำกระบวนกำรของกำรออกแบบส่วนต่อประสำนกับผู้ใช้ • เพือ่ ศึกษำแนวทำงกำรเขียนโปรแกรมที่ดีสำหรับพัฒนำซอฟต์แวร์
บทนา การออกแบบส่วนต่อประสานกับผู้ใช้ (User Interface Design) เรียกอีกอย่ำงหนึ่งว่ำ "กำรออกแบบจอภำพ (Screen Design)" คือ กำรปฏิสัมพันธ์ระหว่ำงผู้ใช้กับ ระบบ ซึ่งมีหลักกำรทำงำนพื้นฐำน 3 ส่วนได้แก่ ส่วนนำเข้ำข้อมูล
ส่วนประมวลผล
ส่วนข้อมูลส่งออก
ซึ่งข้อมูลนำเช้ำและข้อมูลส่งออกเป็นส่วนที่ใช้ติดต่อกับผู้ใช้โดยตรง เรียกว่ำ "ส่วนต่อประสานกับ ผู้ใช้" ซึ่งเป็นกระบวนกำรสำคัญในกำรพัฒนำซอฟต์แวร์ และมีผลต่อกำรเลือกใช้ซอฟต์แวร์เป็นอย่ำงมำก เนื่องจำกส่วนต่อประสำนกับผู้ใช้จะแสดงรูปหรือสัญลักษณ์ต่ำง ๆ บนจอภำพ เพื่อสื่อควำมหมำยให้กับ ผู้ใช้ หำกส่วนนี้สร้ำงควำมประทับใจให้ผู้ใช้ จะช่วยโน้มน้ำวให้ผู้ใช้ยอมรับซอฟต์แวร์ได้ง่ำยขึ้น
บทนา กำรออกแบบส่วนต่อประสำนกับผู้ใช้ไม่ใช่เป็นเพียงกำรนำเสนอรูปแบบต่ำง ๆ เพื่อให้เกิดควำม สวยงำมและควำมน่ำสนใจเท่ำนั้น นักออกแบบจะต้องคำนึงถึงกำรใช้งำนส่วนต่อประสำนกับผู้ใช้ โดย มีเป้ำหมำยหลัก คือ เพื่อให้ผู้ใช้เรียนรู้ง่ำย เข้ำใจง่ำย ไม่สร้ำงควำมสับสน ผู้ใช้สำมำรถใช้งำนระบบ ให้เกิดประโยชน์สูงสุด
ดังนั้น "การออกแบบส่วนต่อประสานกับผู้ใช้" เป็นขั้นตอนที่สำคัญของกำรออกแบบซอฟต์แวร์ หลังจำกนั้น นักเขียนโปรแกรมจะนำกำร ออกแบบส่วนต่อประสำนกับผู้ใช้ เพื่อพัฒนำ ซอฟต์แวร์ในขั้นตอนของกำรเขียนโปรแกรม ต่อไป
กระบวนการของการออกแบบส่วนต่อประสานกับผู้ใช้ การออกแบบส่วนต่อประสาน คือ กำรกำหนดวิธีที่ระบบติดต่อกับเอนทิตภี้ ำยนอก โดยมีวัตถุประสงค์ พื้นฐำน คือ • • • •
เพื่อเพิ่มประสิทธิภำพกำรทำงำนให้กับผู้ใช้ เพื่อให้ง่ำยต่อกำรเรียนรู้และจดจำ ให้ผู้ใช้ป้อนข้อมูลน้อยที่สุด เพื่อลดควำมผิดพลำดที่อำจเกิดขึ้น
• สำมำรถแก้ไขข้อมูลได้ง่ำย • สร้ำงขั้นตอนทีเ่ ป็นตรรกะ • ดึงดูดควำมสนใจให้กับผู้ใช้
กระบวนการของการออกแบบส่วนต่อประสานกับผู้ใช้ การออกแบบส่วนต่อประสานกับระบบ (System Interface Design) คือ กำรกำหนดวิธีที่ระบบสำมำรถแลกเปลี่ยนข้อมูลกับระบบอื่นได้ การปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ (Human Computer Interaction: HCI) คือ กำรปฏิสัมพันธ์ระหว่ำงผู้ใช้กับระบบ โดยเกี่ยวข้องกับ ธุรกิจ แนวควำมคิด และกำรสื่อสำร รวมทั้ง คำสั่งที่ใช้ในกำรป้อนข้อมูลเข้ำสู่ระบบ และกำรแสดงผลลัพธ์ผ่ำนจอภำพหรือรำยงำนต่ำง ๆ การออกแบบออกแบบส่วนต่อประสานกับผู้ใช้ที่ดี กล่าวถึงวิธีการที่คนทางาน เรียนรู้ และโต้ตอบกับ คอมพิวเตอร์ อยู่บนพื้นฐานของ การผสมผสานรวมกันระหว่าง
กำรยศำสตร์ (Ergonomics)
สุนทรียศำสตร์ (Aesthetics)
เทคโนโลยี (Technology)
การวิเคราะห์และการสร้างแบบจาลองส่วนต่อประสาน
การวิเคราะห์และสร้างแบบจาลองส่วนต่อประสาน (Interface Analysis and Modeling) ถือเป็นกระบวนกำรแรกของกำรออกแบบส่วนต่อประสำนกับผู้ใช้ ซึ่งนักออกแบบระบบ จะต้องวิเครำะห์รำยละเอียดของส่วนต่อประสำน และสร้ำงแบบจำลอง ส่วนต่อประสำนหรือ จัดทำต้นแบบสำหรับกำรออกแบบส่วนต่อประสำนกับผู้ใช้
การวิเคราะห์และการสร้างแบบจาลองส่วนต่อประสาน การวิเคราะห์ผู้ใช้ กำรนักออกแบบต้องทำควำมเข้ำใจผู้ใช้ที่จะมำใช้งำนระบบ โดยลักษณะของ ผู้ใช้แบ่งเป็น 3 ประเภท ได้แก่ ผู้ใช้หน้ำใหม่ (Novice User) ผู้ใช้ที่มีประสบกำรณ์และควำมรู้ระดับกลำง (Knowledgeable Intermittent User)
ผู้ใช้งำนเป็นประจำหรือผู้เชี่ยวชำญ (Frequent User/Expert)
การวิเคราะห์งาน
การวิเคราะห์งาน นักออกแบบระบบจะต้องทำควำมเข้ำใจลักษณะงำนของผู้ใช้ และจัดลำดับของ งำนทั้งหมด เนื่องจำกผู้ใช้แต่ละคนมีมุมมองของระบบต่ำงกัน ผู้ใช้หน้ำใหม่ (Novice User)
วิธีเข้าถึงความต้องการของผู้ใช้ อำจใช้กำรสัมภำษณ์ ทำให้นักออกแบบระบบทรำบว่ำ ใครคือผู้ใช้งำนระบบ แบ่งกลุ่มผู้ใช้อย่ำงไร ผู้ใช้แต่ละกลุม่ มีทักษะและประสบกำรณ์ในระดับใด และส่วนต่อ ประสำนจะตอบสนองควำมต้องกำรของผู้ใช้อย่ำงไร
การวิเคราะห์เนื้อหา
การวิเคราะห์เนื้อหา คือ นักออกแบบระบบศึกษำเอกสำรที่เกี่ยวข้อง และรูปแบบของ กำรแสดงผลที่ผู้ใช้ต้องกำร นอกจำกนี้ นักออกแบบระบบต้องทำควำมเข้ำใจเนื้อหำ และวิธีกำรที่จะนำเสนอส่วนต่อประสำนให้เข้ำกับผู้ใช้ด้วย ผู้ใช้หน้ำใหม่ (Novice User)
การวิเคราะห์สภาพแวดล้อม การวิเคราะห์สภาพแวดล้อม นักออกแบบระบบควรคำนึงถึงสภำพแวดล้อมของระบบ และข้อจำกัดทำงกำยภำพทีอ่ ำจเป็นอุปสรรคในกำรใช้งำนระบบ เช่น • •
กำรใช้ลำโพงทีไ่ ม่เหมำะสมเยื่องจำกมีเสียงดังในบริษัท กำรใช้เมำส์และแผงอักขระในพื้นที่แคบ
คานึงถึงวัฒนธรรมในการทางาน เช่น • ข้อมูลต้องได้รับกำรอนุมัติหรือรังรองจำกฝ่ำยอื่นก่อนบันทึกข้อมูลก่อนหรือไม่ • ผู้ใช้จะได้รับควำมช่วยเหลือจำกระบบอย่ำงไร
ดังนั้น นักออกแบบระบบต้องตอบคำถำมเหล่ำนี้ให้ได้ก่อนทำกำรออกแบบส่วนต่อ ประสำนกับผู้ใช้
การสร้างแบบจาลองส่วนต่อประสาน การสร้างแบบจาลองส่วนต่อประสาน มีเป้ำหมำยหลัก คือ เพื่อจำลองให้เห็นเป็นภำพ ของส่วนต่อประสำนกับผู้ใช้ ซึ่งแบบจำลองกำรวิเครำะห์และกำรออกแบบส่วนต่อประสำน แบ่งเป็น 4 ประเภท คือ • • • •
แบบจำลองผู้ใช้ (User Model) แบบจำลองกำรออกแบบ (Design Model) แบบจำลองจิตใจหรือกำรรับรู้ระบบ (Mental Model/System Perception) แบบจำลองกำรนำไปปฏิบัติ (Implementation Model)
การออกแบบส่วนต่อประสาน การออกแบบส่วนต่อประสาน คือ กำรนำข้อมูลที่ได้จำกขั้นตอนของกำรวิเครำะห์สว่ นต่อ ประสำน เพื่อออกแบบส่วนต่อประสำนหรือจัดทำต้นแบบให้กบั ผู้ใช้ กำรออกแบบแบบ ส่วนต่อประสำร แบ่งเป็น 4 ขั้นตอนคือ • • • •
กำหนดวัตถุและกำรดำเนินกำรของผูใ้ ช้ กำหนดเหตุกำรณ์ที่เป็นกำรกระทำของผูใ้ ช้ แสดงหน้ำจอของส่วนต่อประสำนที่ผใู้ ช้จะใช้งำนระบบ อธิบำยควำมหมำยของข้อมูลที่แสดงในส่วนต่อประสำน เพื่อให้ผู้ใช้เข้ำใจระบบ
แบบจาลอง GOMS แบบจาลอง GOMS คือ แบบจำลองที่ถูกพัฒนำโดย Stuart K. Card, Thomas P. Moran และ Allen Newell ในปี ค.ศ. 1983 [Card et al., 1983] แบบจำลอง GOMS คือ สิ่งที่ช่วยแนะแนวทำงหรือคำแนะนำในกำรออกแบบส่วนต่อประสำนกับผูใ้ ช้ โดย พิจำรณำถึงผู้ใช้ที่หลำกหลำย เช่น นักธุรกิจ นักบัญชี นักคอมพิวเตอร์ ผู้ที่ไม่มีควำมรู้ด้ำน เทคโนโลยี เป็นต้น แบบจำลอง GOMS ประกอบด้วย ปัจจัยหลัก 4 ประกำร คือ • • • •
เป้ำหมำย (Goal) ตัวดำเนินกำร (Operator) ระเบียบวิธี (Method) กำรเลือกกฎ (Selection Rule)
กฎของ Theo Mandel Theo Mandel [Mandel, 1997] บัญญัติกฎ 3 ข้อ เพื่อใช้ในการออกแบบส่วนต่อประสาน ได้แก่ ผู้ควบคุมกำรทำงำนของระบบ ลดภำระกำรจดจำของผู้ใช้
สร้ำงส่วนต่อประสำนให้สอดคล้องกัน
ผู้ควบคุมการทางานของระบบ
หลักเกณฑ์ของกำรออกแบบส่วนต่อประสำนทีผ่ ู้ใช้เป็นผูค้ วบคุมกำรทำงำนของระบบ ได้แก่ • • • • • •
กำหนดวิธีกำรปฏิสมั พันธ์ที่ไม่บังคับผู้ใช้ ออกแบบส่วนต่อประสำนให้มีควำมยืดหยุ่น อนุญำตให้ผู้ใช้หยุดหรือยกเลิกกำรทำงำนได้ ออกแบบส่วนต่อประสำนตำมระดับควำมชำนำญของผูใ้ ช้ ไม่ควรให้ผู้ใช้ติดต่อกับระบบปฏิบัตกิ ำรด้วยกำรพิมพ์คำสัง่ โดยตรง กำรออกแบบวัตถุบนหน้ำจอ
ลดภาระการจดจาของผู้ใช้ โครงสร้ำงควำมคิดของมนุษย์ คือรับรู้โดยใช้ประสำทสัมผัส จำกนั้นจะส่งสิ่งทีไ่ ด้รับ ผ่ำนมำยังหน่วยควำมจำระยะสั้น (Shot-Tem Memory) ส่งข้อมูลผ่ำนไปหน่วยควำมทำกำรทำงำน (Working Memory) และส่งข้อมูลไปหน่วยควำมจำระยะยำว (Long-Term Memory) หำกผู้ใช้จดทำรำยละเอียดมำกไปทำให้มีควำมเสี่ยงต่อกำรเกิดควำมผิดพลำดสูง ในกำรใช้ งำนระบบ นักออกแบบระบบจึงไม่ควรเพิ่มภำระกำรจดจำให้กับผูใ้ ช่ระบบในภำยหลัง และ ระบบสำมำรถจดจำข้อมูลที่ไม่มกี ำรเปลีย่ นแปลงบ่อย และช่วยเตือนควำมจำ เมื่อหลับมำใช้ ระบบภำยหลัง
ลดภาระการจดจาของผู้ใช้
ดังนั้น Theo Mandel จึงได้ออกแบบหลักกำรลดจำรจดจำของผู้ใช้ ได้แก่ • • • • •
ลดควำมต้องกำรในกำรใช้งำนหน่วยควำมจำนะยะสั้นของผู้ใช้ กำรกำหนดค่ำเริ่มต้น (Default Value) นิยำมปุ่มทำงลัด (Shortcut) กำรจัดภำพของส่วนต่อประสำนควรเป็นไปตำมจริง ส่วนต่อประสำนควรมีกำรจัดลำดับชั้นในกำรแสดงรำยละเอียดกำรใช้งำน
การสร้างส่วนต่อประสานให้สอดคล้องกัน
การสร้างส่วนต่อประสานให้สอดคล้องกัน คือ กำรจัดข้อมูลให้เป็นระเบียบตำมมำตรฐำน ของกำรออกแบบหน้ำจอของระบบ กำรออกแบบเครื่องมือนำทำงจำกกำรทำงำนหนึ่งไปสู่ อีกงำนหนึ่งต้องเป็นไปอย่ำงสอดคล้องกัน และเชื่อมโยงกันเป็นลำดับ หลักกำรสร้ำงส่วนต่อ ประสำนให้สอดคล้องกัน ได้แก่ • • •
ระบบมีหลำยหน้ำจอ ส่วนต่อประสำรของทุกโปรแกรมต้องมีควำมสอดคล้องกัน ไม่ควรเปลี่ยนลักษณะของกำรปฏิสมั พันธ์ที่โปรแกรมส่วนใหญ่ใช้
กฎของ Shneiderman & Plaisant Shneiderman & Plaisant [Shneiderman and Plaisant, 2010] ออกแบบส่วนต่อ ประสำนกับผู้ใช้ ประกอบด้วยกฏ 8 ข้อได้แก่ • • • • • • • •
ออกแบบส่วนต่อประสำนให้สอดคล้องกัน สร้ำงปุ่มทำงลัดสำหรับผู้ใช้ที่ใช้งำนคอมพิวเตอร์เป็นประจำ หรือผู้ใช้ที่มีประสบกำรณ์ เช่น Ctrl+C หมำยถึง คัดลอก หรือ Ctrl+V หมำยถึง วำง เป็นต้น นำผลป้อนกลับที่ได้จำกผู้ใช้ เพื่อปรับปรุงกำรออกแบบส่วนต่อประสำน วำงคำโต้ตอบ (Dialogue) ให้ใกล้กับข้อควำม มีวิธีกำรป้องกันข้อผิดพลำด และกำรจัดกำรข้อผิดพลำดแบบง่ำย มีกำรทำงำนแบบทำกลับ (Undo) มีกำรควบคุมตำแหน่งในหน้ำจอของส่วนต่อประสำน ลดกำรใช้งำนหน่วยควำมจำระยะสัน้ ของผูใ้ ช้ให้นอ้ ยลง
การจัดทาต้นแบบสาหรับการออกแบบส่วนต่อประสานกับผู้ใช้ มีด้วยกัน 2 ประเภท คือ Low fidelity คือกำรจัดทำต้นแบบ โดยใช้กระดำษ กระดำษแข็ง หรือกระดำน นักออกแบบสำมำรถ วำดส่วนต่อประสำนกับผู้ใช้ลงบนกระดำษ ซึ่งอำจะประกอบด้วย • ตรำสัญลักษณ์บริษัท • เครื่องมือนำทำงตำมแนวนอน (Horizontal Navigation) • คำแนะนำ • ลิขสิทธิ์ • และข้อมูลติดต่อ ที่มำ: www.ecommercewiki.org
การจัดทาต้นแบบสาหรับการออกแบบส่วนต่อประสานกับผู้ใช้ High fidelity คือกำรจัดทำต้นแบบ โดยใช้โปรแกรมสำเร็จรูป หรือเครื่องมือช่วยเช่น Visual Basic, Adobe Dreamweaver, Moqups เป็นต้น เพื่อให้ผู้ใช้เห็นลำดับขั้นตอนกำรทำงำนของระบบ เรีกยว่ำ "Storyboard"
ที่มำ: https://visualhierarchy.co/blog/the-continuum-of-high-and-low-fidelity-prototypes/
การออกแบบส่วนต่อประสานกนับผู้ใช้ทนี่ ิยมใช้ในปัจจุบัน กำรออกแบบส่วนต่อประสำนกนับผู้ใช้ที่นิยมใช้ในปัจจุบัน มีลักษณะเป็น กราฟิก เรียกว่ำ "ส่วนต่อประสานกราฟิกกับผู้ใช้"(Graphical User Interface :GUI) เพื่อให้ผู้ใช้มีปฏิสัมพันธ์กับ ระบบอย่ำงมีประสิทธิภำพ รูปแบบของกำรต่อประสำนกับผู้ใช้ แบ่งเป็น 6 ประเภทคือ • • • • • •
กำรปฏิสัมพันธ์ด้วยภำษำคำสั่ง (Command Language Interaction) กำรปฏิสัมพันธ์ด้วยรำยกำรเลือกแบบข้อควำม (Text Menu Interaction) กำรปฏิสัมพันธ์ด้วยรำยกำรเลือก (Menu Interaction) กำรปฏิสัมพันธ์ด้วยแบบฟอร์ม (Form Interaction) กำรปฏิสัมพันธ์เชิงวัตถุ (Object-Based Interaction) กำรปฏิสัมพันธ์ด้วยภำษำธรรมชำติ (Natural Language Interaction)
การออกแบบส่วนต่อประสานกนับผู้ใช้ทนี่ ิยมใช้ในปัจจุบัน การปฏิสัมพันธ์ดว้ ยภาษาคาสั่ง (Command Language Interaction)
การออกแบบส่วนต่อประสานกนับผู้ใช้ทนี่ ิยมใช้ในปัจจุบัน การปฏิสัมพันธ์ดว้ ยรายการเลือกแบบข้อความ (Text Menu Interaction)
การออกแบบส่วนต่อประสานกนับผู้ใช้ทนี่ ิยมใช้ในปัจจุบัน การปฏิสัมพันธ์ดว้ ยรายการเลือกแบบข้อความ (Text Menu Interaction)
รำยกำรเลือกแบบดึงลง (Pull-Down Menu)
รำยกำรเลือกแบบโผล่ขึ้น (Pop-Up Menu)
การออกแบบส่วนต่อประสานกนับผู้ใช้ทนี่ ิยมใช้ในปัจจุบัน การปฏิสัมพันธ์ดว้ ยแบบฟอร์ม (Form Interaction)
แสดงหน้ำจอของแบบฟอร์มกำรลงทะเบียนของ Facebook
การออกแบบส่วนต่อประสานกนับผู้ใช้ทนี่ ิยมใช้ในปัจจุบัน การปฏิสัมพันธ์เชิงวัตถุ (Object-Based Interaction)
แสดงสัญลักษณ์รูปของโปรแกรม Microsoft Word
การออกแบบส่วนต่อประสานกนับผู้ใช้ทนี่ ิยมใช้ในปัจจุบัน การปฏิสัมพันธ์ดว้ ยภาษาธรรมชาติ (Natural Language Interaction)
แสดงกำรค้นหำด้วยเสียงจำกแอพพลิเคชัน Google ในระบบปฏิบัติกำรแอนดรอย์
การสร้างส่วนต่อประสาน การสร้างส่วนต่อประสาน (Interface Construction) คือ กำรนำส่วนต่อประสำนที่ได้จำก ขั้นตอนของกำรออกแบบส่วนต่อประสำน เพื่อสร้ำงส่วนต่อประสำนกับผูใ้ ช้ นักออกแบบใช้ แผนภำพลำดับกำรเชื่อมโยง (Dialogue Diagram) เพื่อแสดงลำดับกำรเชื่อมโยงจอภำพ ทำให้ ผู้ใช้ทรำบว่ำหน้ำจอที่ใช้งำนอยู่สำมำรถเชื่อมโยงไปยังหน้ำจอต่อไปหรือย้อนกลับ แผนภำพลำดับ กำรเชื่อมโยงจอภำพแบ่งเป็น 3 ส่วน ได้แก่ส่วนบน ส่วนกลำง และส่วนล่ำง ดังรูป
แสดงแผนภำพลำดับกำรเชื่อมโยงจอภำพ
การสร้างส่วนต่อประสาน แผนภาพลาดับการเชื่อมโยงจอภาพหน้าจอเข้าสู่ระบบ
แสดงแผนภำพลำดับกำรเชื่อมโยงจอภำพหน้ำจอเข้ำสู่ระบบ
การออกแบบเครื่องมือนาทาง การออกแบบเครื่องมือนาทาง (Navigation Design) คือวิธีที่ทำให้ผู้ใช้ทรำบถึงกำรใช้งำน และฟังก์ชันกำรทำงำนของระบบ ประกอบด้วย • • • •
แถบที่อยู่ (Address Bar/Location Bar) แถบเครื่องมือนำทำง (Navigation Bar/Breadcrumb) กำรเชื่อมโยงหลำยมิติ (Hyperlink) มุมมองต้นไม้หรือมุมมองเค้ำโครง (Tree View/Outline View)
การออกแบบข้อมูลนาเข้า
การออกแบบข้อมูลนาเข้า (Input Design) คือ กำรกำหนดวิธีในกำรป้อนข้อมูลนำเข้ำของผู้ใช้ และวิธีที่ระบบจะรองรับข้อมูลนำเข้ำ ปัจจุบัน เทคโนโลยีกำรนำเข้ำมีกำรเปลีย่ นแปลงอย่ำง รวดเร็วพร้อมทั้งมีเทคนิคจำนวนมำก ทำให้กระบวนกำรป้อนข้อมูลของผู้ใช้มีควำมรวดเร็ว ช่วย ลดต้นทุน และค่ำใช้จ่ำย กำรออกแบบข้อมูลนำเข้ำต้องกำหนดวิธีกำรจับข้อมูลและกำรป้อนข้อมูลเข้สู่ระบบ กำร จับข้อมูล (Data Capture) คือ กำรระบุและบันทึกข้อมูลต้นฉบับ สำหรับกำรป้อนข้อมูล กระบวนกำรแปลงข้อมูลต้นฉบับให้อยู่ในรูปแบบที่คอมพิวเตอร์อ่ำนได้ และนำข้อมูลเข้ำสูร่ ะบบ
วัตถุประสงค์หลักของการออกแบบข้อมูลนาเข้า
• • • • • •
กำรนำข้อมูลเข้ำสู่ระบบ กำรลดปริมำณข้อมูลนำเข้ำ กำรออกแบบหน้ำจอป้อนข้อมูล กำรตรวจสอบควำมถองของข้อมูลนำเข้ำ กำรออกแบบโดยอ้ำงอิงตำมเอกสำรต้นฉบับ กำรควบคุมในกำรนำเข้ำข้อมูลสู่ระบบ
การนาข้อมูลเข้าสู่ระบบ
กำรนำข้อมูลเข้ำสู่ระบบ แบ่งเป็น 2 ประเภท ได้แก่ ข้อมูลนาเข้าแบบกลุ่ม (Batch Input) คือ ผู้ใช้จะป้อนข้อมูลเข้ำสู่ระบบตำมช่วงระยะเวลำ ที่กำหนด เช่น รำยวัน รำยสัปดำห์ รำยเดือน เป็นต้น ข้อมูลนาเข้าแบบออนไลน์ (Online Input) คือ ผู้ใช้จะป้อนข้อมูลเข้ำสู่ระบบอัตโนมัติ เช่น หน้ำจอของระบบซื้อขำยสินค้ำ หน้ำจอจองระบบเอทีเอ็ม เป็นต้น
การลดปริมาณข้อมูล วิธีป้องกันข้อมูลที่มีประสิทธิภำพมำกที่สุดของกำรป้อนข้อมูลแบบออนไลน์ คือ ผู้ใช้ป้อน ข้อมูลนำเข้ำเรียงลำดับตำมแบบฟอร์มที่คล้ำยคลึงกับเอกสำรต้นฉบับบนจอภำพให้สมบูรณ์ และป้อนข้อมูลนำเข้ำในเขตข้อมูลถัดไป โดยมีหลักเกณฑ์กำรทำงำนดังนี้ • • • •
กำหนดตำแหน่งในกำรเข้ำถึง เพื่อให้ผู้ใช้ป้อนข้อมูลนำเข้ำ เตรียมคำอธิบำยของทุกเขตข้อมูล แสดงค่ำเริ้มต้นหรือรูปแบบตัวอย่ำง กดแป้นสิ้นสุดสำหรับทุดเขตข้อมูล
การลดปริมาณข้อมูล (ต่อ) • • • • • • • • •
ไม่ควรให้ผู้ใช้ป้อนเลข 0 นำหน้ำสำหรับเขตข้อมูลที่เป็นตัวเลข ไม่ควรใช้ค่ำเริ่มต้น เมื่อค่ำของเขตข้อมูลนั้นคงที่สำหรับระเบียนข้อมูลถัดไป แสดงค่ำของเขตข้อมูลที่ยอมรับได้ เตรียมวิธีกำรยกเลิกหน้ำจอในกำรป้อนข้อมูลกลำงคัน ให้ผู้ชมยืนยันควำมถูกต้องของข้อมูลรำเข้ำที่ป้อนเข้ำสู่ระบบ เตรียมวิธีกำรในกำรเลื่อนระหว่ำงเขตข้อมูลบนฟอร์มตำมลำดับมำตรฐำน ออกแบบกำรวำงแบบฟอร์มบนหน้ำจอให้ตรงกับรูปแบบของเอกสำรต้นฉบับ ผู้ใช้สำมำรถสร้ำง แก้ไข ลบ และเรียกดูระเบียบข้อมูลได้ ผู้ใช้สำมำรถค้นหำข้อมูลที่เฉพำะเจำะจงได้
การตรวจสอบความถูกต้องของข้อมูลนาเข้า • • • • • • • •
กำรตรวจสอบแบบเรียงลำดับ (Sequence Check) กำรตรวจสอบชนิดข้อมูล (Data Type Check) กำรตรวจสอบรูปแบบ (Format Check) กำรตรวจสอบพิสัย (Range Check) กำรตรวจสอบข้อมูลสูญหำย (Mission Data Check) กำรตรวจสอบควำมสมเหตุสมผล (Reasonableness Check) กำรตรวจสอบควำมถูกต้อง (Validly Check) กำรควบคุมแบบกลุ่ม (Batch Control)
การออกแบบโดยอ้างอิงตามเอกสารต้นฉบับ
นักออกแบบระบบสร้างแบบฟอร์ม โดยอ้างอิงตามเอกสารต้นฉบับที่ ผู้ใช้ต้องการ เพื่อให้ผู้ใช้ป้อนข้อมูลนาเข้าลงในแบบฟอร์มที่ออกแบบไว้
การควบคุมในการนาเข้าข้อมูลเข้าสู่ระบบ การควบคุมในการนาเข้าข้อมูลเข้าสู่ระบบ เป็นกำรตรวจสอบข้อมูลที่ผู้ใช้ป้อน เพื่อให้แน่ใจ ว่ำข้อมูลนั้นมรรควำมถูกน้อง ครบถ้วน และปลอดภัย นักออกแบบระบบสำมำรถใช้ส่วนย่อย การควบคุมเชิงกราฟ (Graphical Control Element) เพื่อให้ผู้ใช้มีปฏิสัมพันธ์กับระบบ และช่วยลดควำมผิดพลำดในกำรป้อนขอมูลเข้ำสู่ระบบ ส่วนย่อยการควบคุมเชิงกราฟ
ชื่อ
อธิบาย
แถบเครื่องมือ (Toolbar)
ผู้ใช้สำมำรถเลือกปุ่มบนแถบเครื่องมือ เพื่อทำคำสั่ง ต่ำง ๆ ได้แก่ Go to Beginning, Rewind, Play, Stop, Forward และ Go to End
กล่องข้อควำม (Textbox)
ผู้ใช้สำมำรถป้อนนข้อมูลในกล่องข้อควำม
ปุ่มเปิดปิด (Toggle Button)
ผู้ใช้สำมำรถเลือกปุ่มเปิดปิดซึ่งจะแสดงสถำนะ สลับกันไปมำ
การควบคุมในการนาเข้าข้อมูลเข้าสู่ระบบ ส่วนย่อยการควบคุมเชิง กราฟ
ชื่อ
กล่องเลือก (Checkbox)
ปุ่มทำงเลือก (Radio Button / Option Button)
อธิบาย ผู้ใช้สำมำรถเลือกจำกกล่องได้มำกกว่ำหนึ่งทำงเลือก ซึ่ง ทำงเลือกที่ถูกเลือกนั้น แสดงด้วยเครื่องหมำยถูก หรือไม่เลือก ผู้ใช้สำมำรถเลือกจำกปุ่มทำงเลือกเพียงหนึ่งทำงเลือก เท่ำนั้น ซึ่งทำงเลือกที่ถูกเลือกนั้น แสดงด้วยจุด
กล่องรำยกำร (List Box)
ผู้ใช้สำมำรถเลือกทำงเลือกจำกกล่องรำยกำรถ้ำจำนวน ทำงเลือกเกินกว่ำกล่องรำยกำรจะมีแถวเลื่อนหน้ำจอ (Scoll Bar) เพื่อให้ผู้ใช้เลื่อนและเลือกทำงเลือกได้
กล่องรำยกำรแบบดึงลง (Drop-Down List Box)
ผู้ใช้สำมำรถคลิกลูกศร เพื่อเลือกทำงเลือกจำกกล่อง รำยกำรแบบดึงลง วิธีนี้ใช้ในกรณีที่มีพื้นที่จำกัด และมี รำยกำรข้อมูลไม่มำจนเกินไป
การควบคุมในการนาเข้าข้อมูลเข้าสู่ระบบ ส่วนย่อยการควบคุมเชิงกราฟ
ชื่อ กล่องคอมโบ (Combo Box)
อธิบาย ผู้ใช้สำมำรถพิมพ์ข้อควำม หรือเลือกทำงเลือก จำกรำยกำร วิธีนี้เป็นวิธีกำรผสมผสำนกันระหว่ำง กล่องข้อควำมและกล่องรำยกำรแบบดึงลง
ปุ่มคำสั่ง (Command Button) ผู้ใช้กดปุ่มคำสั่ง เพื่อสั่งให้โปรแกรมทำงำน สปินเนอร์ (Spinner)
ผู้ใช้สำมำรถคลิกลูกศรขึ้นหรือลง เพื่อปรับค่ำที่ ปรำกฏในกล่องข้อควำม
แถบเลื่อน (Slider)
ผู้ใช้เมำส์ โดยลำกผ่ำนแถบเลื่อนไปทำงซ้ำยหรือ ขวำที่ปรำกฏในหน้ำต่ำง เพื่อเลือกทำงเลือก
กล่องสนทนำ (Dialog Box)
กล่องสนทนำเป็นหน้ำต่ำงเล็ก ๆ ที่แสดงขึ้นมำ เพื่อให้คำแนะนำหรือข้อมูลกับผู้ใช้
การออกแบบข้อมูลส่งออก การออกแบบข้อมูลส่งออก (Output Design) คือกำรแสดงผลลัพธ์หรือข้อมูลให้กับผู้ใช้ ผ่ำนทำงหน้ำจอ เสียง ภำพเคลื่อนไหว อีเมล์ โทรสำร หรือเว็บเพจ เพื่อตอบสนองผู้ใช้ แม้ หลำยองค์กรจะพยำยำมลดปริมำณกำรใช้กระดำษ แต่ยำกที่จะลดลงได้ทั้งหมด เนื่องจำกมี ควำมจำเป็นในหลำยสถำนกำรณ์ เช่น รำนงำนแสดงรำนละเอียด รำยงำนสรุป กรำฟ ตำรำง ที่ใช้กระดำษจะเหมำะสมกว่ำ เป็นต้น
การตรวจสอบส่วนต่อประสาน การตรวจสอบส่วนต่อประสาน (Interface Validation) คือ ขั้นตอนที่เกิดขึ้นหลังจำกจำกสร้ำงต้นแบบ ให้กับผู้ใช้ นักพัฒนำซอฟต์แวร์ต้องประเมินว่ำ ฟังก์ชันที่ปรำกฏให้ต้นแบบตรงตำมควำมต้องกำรของผู้ใช้ หรือไม่ โดยทีมงำนจะนำผลป้อนกลับของผู้ใช้ เพื่อปรับปรุงต้นแบบให้ต้นแบบให้มีควำมสมบูรณ์ที่สุด
แสดงวัฏจักรของกำรประเมินกำรออกแบบส่วนต่อประสำน
การตรวจสอบส่วนต่อประสาน
ความสามารถในการใช้งานของผู้ใช้ สามารถวัดหรือทดสอบจากปัจจัยต่าง ๆ ดังนี้
เวลำในกำรเรียนรู้
อัตรำควำมผิดพลำด
ควำมเร็วกำรปฏิบัติกำร
กำรจดจำ
ควำมพึงพอใจ
แนวทางการเขียนโปรแกรมที่ดี นักเขียนโปรแกรมต้องมีทักษะและความรู้พื้นฐานดังนี้ • ควำมเข้ำใจและวิธีแก้ปัญหำ • ควำมรู้และทักษะด้ำนภำษำคอมพิวเตอร์ ประกอบด้วย - ควำมรู้ด้ำนไวยำกรณ์ภำษำ (Syntactic Knowledge) - ควำมรู้ด้ำนควำมหมำย (Sematic Knowledge) • ควำมสำมำรถในกำรจัดวำงโครงสร้ำงของโปรแกรม เพื่อให้ง่ำยต่อกำรอ่ำนและเข้ำใจ
• ทักษะในกำรเขียนคำอธิบำยโปรแกรม (Comment) • ควำมสำมำรถในกำรทดสอบและแก้ไขข้อผิดพลำดในโปรแกรม
รูปแบบการเขียนโปรแกรมที่ดี
• กำรเขียนผังงำน เพื่อให้เข้ำใจกระบวนกำรทำงำนของโปรแกรม • กำรเลือกใช้คำสั่งของภำษำต่ำง ๆ ภำยในโปรแกรม • กำรย่อหน้ำและกำรเว้นวรรคส่วนต่ำง ๆ ภำยในโปรแกรม • กำรตั้งชื่อไฟล์และชื่อตัวแปร ให้มีควำมหมำยและสอดคล้องกัน • มีคำอธิบำยโปรแกรม
• กำรตรวจสอบและแก้ไขข้อผิดพลำดของโปรแกรม
รูปแบบการเขียนโปรแกรมที่ดี
ตำรำงแสดงรูปแบบกำรเขียนโปรแกรมที่ไม่ดีและกำรปรับโครงสร้ำงกำรออกแบบของโปรแกรม รูปแบบของโปรแกรมที่ไม่ดี
กำรปรับโครงสร้ำงกำรออกแบบของโปรแรกม
• ส่วนของโปรแกรมซ้ำกันมำกเกินไป • เมธอดยำวเกินไป • คลำสมีขนำดใหญ่
• แยกเป็นเมธอด • ใช้ขั้นตอนวิธีแทน • สร้ำงเมธอด
• ใช้ข้อควำมคำสั่ง Switch • ใช้เมธอดจำนวนมำกภำยในคลำส
• แยกเป็นคลำส • 1 คลำส ควรมี 1 เมธอด
• อ้ำงถึงข้อมูลส่วนบุคคลของคลำสอื่น
• ใช้ข้อมูลส่วนบุคคลภำยในคลำสเท่ำนั้น
รูปแบบการเขียนโปรแกรมที่ดี
นักเขียนโปรแกรมสำมำรถพิจำรณำผลกำรทำงำนของโปรแกรมตำมเกณฑ์ ได้แก่ ควำมสำมำรถในกำรอ่ำน
กำรตำมรอย
ควำมสำมำรถในกำรบำรุงรักษำ
ควำมถูกต้อง
ประสิทธิภำพ
ควำมสมบูรณ์
คาถามท้ายบท • อธิบำยควำมแตกต่ำงระหว่ำงกำรออกแบบส่วนต่อประสำนกับผู้ใช้และกำรออกแบบ ส่วนต่อประสำนกับระบบ • กำรปฏิสัมพันธ์ระหว่ำงมนุษย์กับคอมพิวเตอร์คืออะไร และมีควำมสำคัญอย่ำงไร
• อธิบำยส่วนต่อประสำนกรำฟิกกับผู้ใช้ที่นิยมใช้ในปัจจุบัน • คำแนะนำและรูปแบบของกำรเขียนโปรแกรมที่ดี มีลักษณะเป็นอย่ำงไร