บทที่ 12 การออกแบบส่วนต่อประสานผู้ใช้งาน (USER INTERFACE DESIGN)

12.1 บัญญัติในการออกแบบส่วนต่อประสาน (The Golden Rules) บทที่ 12 การออกแบบส่วนต่อประสานผู้ใช้งาน 12.1 บัญญัติในการออกแบบส่วนต่อประสาน (The Golden Rules) 12.2 การวิเคราะห์และออกแบบส่วนต่อประสานกับผู้ใช้ 12.3 การวิเคราะห์ส่วนต่อประสาน 12.4 ขั้นตอนการออกแบบส่วนต่อประสาน (Interface Design Steps) 12.5 การประเมินการออกแบบ (Design Evaluation) 12.6 สรุปท้ายบท

แนวคิดที่สำคัญ (Key Concepts) ความสามารถในการเข้าถึงข้อมูล Accessibility ขั้นตอนการออกแบบ Design Steps กฎสำคัญ Golden Rules ส่วนแนะนำการใช้งาน Help facilities ส่วนต่อประสาน Interface การวิเคราะห์ Analysis ความคงเส้นคงเวลา Consistency การประเมิน Evaluation แบบจำลอง Models การทำให้เป็นสากล Internationalization การพรรณารายละเอียดของวัตถุ Object elaboration แบบรูป Patterns การวิเคราะห์งานย่อย Task Analysis การใช้งานได้ Usability การวิเคราะห์กระแสงาน Workflow analysis

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

การออกแบบส่วนประสานมีอยู่ 3 เรื่อง คือ การออกแบบส่วนต่อประสานระหว่างองค์ประกอบย่อยภายในซอฟต์แวร์ การออกแบบส่วนต่อประสานระหว่างซอฟต์แวร์และองค์ประกอบอื่นๆ ที่ไม่ใช่มนุษย์ที่เป็นส่วนผลิต การออกแบบส่วนต่อประสานระหว่างมนุษย์กับคอมพิวเตอร์

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

12.1 บัญญัติในการออกแบบส่วนต่อประสาน (THE GOLDEN RULES)

12.1 บัญญัติในการออกแบบส่วนต่อประสาน (The Golden Rules) ในหนังสือของ Theo Mandel ได้บัญญัติกฎ 3 ข้อในการออกแบบส่วนต่อประสาน ดังนี้ ให้ผู้ใช้เป็นผู้ควบคุมการทำงาน ลดภาระการต้องจดจำของผู้ใช้ สร้างส่วนต่อประสานอย่างคงเส้นคงวา

12.1.1 ให้ผู้ใช้เป็นผู้ควบคุมการทำงาน (Place the User in Control) กำหนดโหมดการโต้ตอบในลักษณะที่ไม่บังคับผู้ใช้โดยไม่จำเป็น หรือในทางที่ดีผู้ใช้ไม่ต้องการที่จะทำ โหมดการโต้ตอบคือสถานะปัจจุบันของส่วนต่อประสาน ตัวอย่างเช่น เมื่อผู้ใช้ต้องการตรวจสอบการสะกดคำ ถ้าผู้ใช้เลือกเมนูตรวจสอบการสะกดคำ ซอฟต์แวร์จะไปอยู่ในโหมดการตรวจสอบการสะกดคำ ซึ่จะทำให้ไม่สามารถใช้งานอื่นๆ ต่อไปได้จนกว่าการสะกกดคำจะเสร็จสิ้น แต่ถ้าผู้ใช้ต้องการพิมพ์งานต่อไปพร้อมๆ กัน ซอฟต์แวร์ก็ควรจะให้ผู้ใช้และออกจากโหมดได้โดยง่าย

12.1.1 ให้ผู้ใช้เป็นผู้ควบคุมการทำงาน (Place the User in Control) จัดให้มีการโต้ตอบที่ยืดหยุ่น เพราะว่าผู้ใช้แต่ละคนมีความชอบที่แตกต่างกันจึงต้องมีตัวเลือกให้ เช่น การใช้โปรแกรมผ่านคีย์บอร์ด เมาส์ ปากกาแสง หรือการใช้เสียง โดยดุให้เหมาะสมกับการทำงาน ตัวอย่างเช่น การใช้คีย์บอร์ดหรือเสียงสั่งการในการวาดรูปจะยากมาก จึงควรใช้ปากกาหรือเครื่องมืออื่นๆ

12.1.1 ให้ผู้ใช้เป็นผู้ควบคุมการทำงาน (Place the User in Control) อนุญาตให้ผู้ใช้ทำการหยุดหรือสามารถยกเลิกได้ แม้เมื่อทำงานในลักษณะในลักษณะที่ต้องทำตามลำดับผู้ใช้ควรจะสามารถหยุดหรือยกเลิกการทำงานกลางคันได้เสมอโดยไม่สูญเสียงานที่ทำไป

12.1.1 ให้ผู้ใช้เป็นผู้ควบคุมการทำงาน (Place the User in Control) ออกแบบให้การโต้ตอบเป็นไปตามระดับความชำนาญในการใช้งาน และอนุญาตให้ผู้ใช้ปรับเปลี่ยนส่วนต่อประสานให้เหมาะกับความต้องการเฉพาะตัวได้ บ่อยครั้งที่ผู้ใช้งานต้องทำงานที่ซ้ำเดิม จึงควรมีกลไกแมคโคร (macro) ที่ช่วยให้ผู้ใช้สะดวกในการทำงาน

12.1.1 ให้ผู้ใช้เป็นผู้ควบคุมการทำงาน (Place the User in Control) ซ่อนรายละเอียดด้านเทคนิคจากผู้ใช้ทั่วไป ส่วนต่อประสานกับผู้ใช้ควรจะนำผู้ใช้เข้าไปในส่วนแอพพลิเคชั่น โดยไม่ต้องยุ่งเกี่ยวกับระบบปฏิบัติการ การจัดการแฟ้มข้อมูลหรือเทคนิคยุ่งยากอื่นๆ

12.1.1 ให้ผู้ใช้เป็นผู้ควบคุมการทำงาน (Place the User in Control) การออกแบบวัตถุที่วางไว้บนจอให้เข้าถึงได้โดยตรง ผู้ใช้จะรู้สึกได้ว่าควบคุมวัตถุที่ดูจับต้องได้ อันเป็นสิ่งที่จำเป็นในการทำงาน เมื่อเวลาดูวัตถุแล้วคล้ายกับการทำงานในโลกจริง เช่น การใช้เครื่องมือยืดขนาด เป็นการสร้างวัตถุที่เมื่อดูวัตถุผู้ใช้ก็สามารถเข้าใจได้

12.1.2 การลดภาระความจำเป็นในการจดจำของผู้ใช้ (Reduce the User’s Memory Load) ยิ่งผู้ใช้ต้องจดจำมากเท่าไหร่ ก็ยิ่งเกิดข้อผิดพลาดในการโต้ตอบกับระบบมากขึ้น การออกแบบส่วนต่อประสานที่ดีจึงไม่ควรเพิ่มภาระให้ผู้ใช้งานต้องจดจำ ระบบควรสามารถจดจำข้อมูลที่ไม่เปลี่ยนแปลงบ่อย และช่วยให้ผู้ใช้ในการรื้อฟื้นความจำระหว่างการโต้ตอบกับระบบ

12.1.2 การลดภาระความจำเป็นในการจดจำของผู้ใช้ (Reduce the User’s Memory Load) ลดความต้องการใช้หน่วยความจำระยะสั้นของผู้ใช้ เมื่อผู้ใช้กำลังทำงานที่ซับซ้อน ความต้องการใช้หน่วยความจำระยะสั้นอาจมีมาก ส่วนต่อประสานควรจะออกแบบให้ลดความจำเป็นที่ต้องจดจำการกระทำและผลที่เพิ่งมา โดยแสดงให้ร่องรอยของการกระทำที่ผ่านมาโดยไม่ต้องมารื้อฟื้นความจำ

12.1.2 การลดภาระความจำเป็นในการจดจำของผู้ใช้ (Reduce the User’s Memory Load) การกำหนดค่าโดยปริยายที่มีความหมาย ชุดตั้งต้นของค่าโดยปริยายควรมีความหมายสำหรับผู้ใช้ทั่วไป ขณะเดียวกันผู้ใช้ควรสามารถระบุความชอบส่วนตัวได้โดยมีปุ่ม “ตั้งใหม่” ในกรณีที่ต้องการใช้ค่าดั้งเดิมทีมากับระบบ

12.1.2 การลดภาระความจำเป็นในการจดจำของผู้ใช้ (Reduce the User’s Memory Load) นิยามปุ่มลัด (Shortcut) ที่เข้าใจง่าย เมื่อตัวย่อถูกใช้แทนหน้าที่ของระบบ เช่น Alt+P แทนหน้าที่สั่งพิมพ์ ตัวย่อนั้นควรผูกกับการกระทำในลักษณะที่ง่ายต่อการจดจำ

12.1.2 การลดภาระความจำเป็นในการจดจำของผู้ใช้ (Reduce the User’s Memory Load) การจัดภาพของส่วนต่อประสานควรเป็นไปตามอุปลักษณ์ของโลกจริง ตัวอย่างเช่น ระบบการจ่ายเงินควรใช้สมุดเช็คและการลงทะเบียนเช็ค เพื่อนำผู้ใช้ผ่านกระบวนการจ่ายเงิน เป็นการใช้ภาพเป็นสื่อผู้ใช้ทำงานได้ง่ายโดยไม่ต้องจดจำลำดับขั้นตอนการโต้ตอบกับระบบ

12.1.2 การลดภาระความจำเป็นในการจดจำของผู้ใช้ (Reduce the User’s Memory Load) เปิดเผยข่าวสารในลักษณะค่อยๆ เพิ่มพูน ส่วนต่อประสานควรมีการจัดลำดับชั้น นั่นคือ ข่าวสารเกี่ยวกับงานย่อย วัตถุ หรือพฤติกรรม ควรแสดงก่อนที่ระดับบนของสาระสำคัญ รายละเอียดควรแสดงเมื่อผู้ใช้เจาะจงความสนใจด้านการเลือก ตัวอย่างเช่น หน้าที่การขีดเส้นใต้ เป็นลักษณะทั่วๆ ไปในแอพพลิเคชั่นของเวิร์ด หน้าที่นี้เป็นหนึ่งหน้าที่ภายใต้เมนูกลุ่มหน้าที่ รูปแบบข้อความ อย่างไรก็ตาม รูปแบบการขีดเส้นใต้หลากหลายชนิด จะไม่ถูกแสดงในเบื้องต้น ต่อเมื่อผู้ใช้เลือกเมนูการขีดเส้นใต้ รายละเอียดเส้นเดี่ยว เส้นคู่ เส้นประ ฯลฯ จึงแสดงขึ้นมา

12.1.3 สร้างส่วนต่อประสานให้คงเส้นคงวา (Make the Interface Consistent) ส่วนต่อประสานควรรับและแสดงข้อมูลในลักษณะคงเส้นคงวา หมายถึง ข่าวสารทางภาพจัดระเบียบตามมาตรฐานออกแบบเดียวกันตลอดทั่วทุกหน้าจอของระบบ กลไกการท่องระบบจากงานหนึ่งสู่อีกงานหนึ่งเป็นไปอย่างคงเส้นคงวา

12.1.3 สร้างส่วนต่อประสานให้คงเส้นคงวา (Make the Interface Consistent) หลักการออกแบบที่ช่วยให้ส่วนต่อประสานคงเส้นคงวา คือ ช่วยให้ผู้ใช้ทราบว่างานปัจจุบันอยู่ภายใต้บริบทใด การโต้ตอบกับระบบผ่านลำดับชั้นอันซับซ้อนหลายหน้าจอ ทำให้ผู้ใช้งานสับสนได้ จึงจำเป็นต้องมีตัวบ่งชี้ เช่น ชื่อหน้าที่ไอคอน สี ที่ช่วยให้ผู้ใช้งานทราบว่า บริบทของงานปัจจุบันคืออะไร มาจากส่วนงานใด และจะไปต่อได้อย่างไรบ้าง

12.1.3 สร้างส่วนต่อประสานให้คงเส้นคงวา (Make the Interface Consistent) หลักการออกแบบที่ช่วยให้ส่วนต่อประสานคงเส้นคงวา คือ ดำรงความคงเส้นคงวาตลอดทั้งตระกูลของแอพพลิเคชั่น ชุดของแอพพลิเคชั่นหนึ่งๆ ควรจะมีกฎการออกแบบเดียวกัน

12.1.3 สร้างส่วนต่อประสานให้คงเส้นคงวา (Make the Interface Consistent) หลักการออกแบบที่ช่วยให้ส่วนต่อประสานคงเส้นคงวา คือ ถ้ารูปแบบการโต้ตอบที่ผ่านมาทำให้ผู้ใช้เกิดความคาดหมาย อย่าเปลี่ยนกฎนั้น ยกเว้นมีเหตุผลสมควร เมื่อผู้ใช้เคยชินกับลำดับการโต้ตอบหนึ่งแล้ว เช่น Alt+S เป็นการบันทึกแฟ้ม ผู้ใช้ย่อมคาดหมายว่า ทุกๆ แอพพลิเคชั่นจะมีพฤติกรรมเดียวกัน การเปลี่ยนแปลงจะทำให้เกิดความสับสนได้

12.2 การวิเคราะห์และออกแบบ ส่วนต่อประสานกับผู้ใช้

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

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

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

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

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

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

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

12.2.2 กระบวนการในการพัฒนาส่วนต่อประสาน การวิเคราะห์ส่วนต่อประสาน มุ่งเน้นข้อมูลแสดงลักษณะเฉพาะของผู้ใช้ที่ติดต่อกับระบบ ระดับความชำนาญ ความเข้าใจในธุรกิจ และการรับรู้ระบบใหม่ โดยมีการแบ่งหมวดหมู่ผู้ใช้งานในแต่ละกลุ่ม ซึ่งจะมีความต้องการที่แตกต่างกัน

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

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

12.2.2 กระบวนการในการพัฒนาส่วนต่อประสาน กิจกรรมก่อสร้างมักเริ่มด้วยการสร้างต้นแบบที่อาจใช้ประเมินฉากการใช้งาน การทำวนซ้ำ อาจใช้เครื่องมือช่วยพัฒนาส่วนต่อประสาน

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

12.3 การวิเคราะห์ส่วนต่อประสาน

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

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

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

12.3.2 การจำลองและวิเคราะห์งานย่อย ยูสเคส (Use Case) เมื่อใช้ยูสเคสเป็นส่วนหนึ่งของการวิเคราะห์งานย่อย ยูสเคสจะแสดงให้เห็นว่าผู้ใช้งานสุดท้ายทำงานเฉพาะหนึ่งๆ กับระบบให้สำเร็จได้อย่างไร เพื่อให้เข้าใจการทำงานของผู้ใช้งานดีขึ้น การออกแบบหน้าที่การทำงานเฉพาะจึงจำเป็น ยูสเคสอาจเขียนในรูปแบบการบรรยาย เป็นการอธิบายการทำงานย่อยๆ หนึ่ง สำหรับเป็นพื้นฐานในการออกแบบระบบคอมพิวเตอร์ช่วยงาน นักวิศวกรรมซอฟต์แวร์จะสกัดงานย่อย วัตถุ และกระแสการโต้ตอบโดยรวมของผู้ใช้งานกับระบบออกมาจากยูเคส นอกจากนี้ระบบอาจมีลักษณะเพิ่มเติมด้านความสวยงาม

12.3.2 การจำลองและวิเคราะห์งานย่อย การขยายความงานย่อย (Task elaboration) มีลักษณะคล้ายคลึงกลไกในการขยาความรายละเอียดการประมวลผลงาน เพื่อให้ซอฟต์แวร์ทำงานตามฟังก์ชั่นหนึ่งๆ ได้สำเร็จ การวิเคราะห์งานย่อยในการออกแบบส่วนต่อประสานกับผู้ใช้ก็ใช้แนวทางการขยายความรายละเอียดเพื่อช่วยให้เข้าใจกิจกรรมที่มนุษย์ต้องการให้ส่วนต่อประสานรองรับได้

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

12.3.2 การจำลองและวิเคราะห์งานย่อย การขยายความวัตถุ (Object elaboration) นักวิศวกรซอฟต์แวร์พิจารณายูสเคสและข้อมูลที่ได้จากการสังเกตการณ์ผู้ใช้งาน จากนั้นจึงสร้างวัตถุขึ้นมาในระบบ เช่น วัตถุที่นักออกแบบตกแต่งภายในใช้งาน วัตถุเหล่านี้จะจับกลุ่มเป็นคลาส มีการกำหนดแอตทริบิวส์ของแต่ละคลาส และประเมินว่าวัตถุจะมีตัวดำเนินการอะไรบ้างที่ผู้ใช้งานจะเรียกใช้

12.3.2 การจำลองและวิเคราะห์งานย่อย การวิเคราะห์กระแสงาน (Workflow Analysis) ระบบมักจะมีผู้ใช้งานหลายส่วนทีมีบทบาทแตกต่างกัน นักวิศวกรซอฟต์แวร์จึงจำเป็นต้องเข้าใจกระแสงานโดยรวมด้วย นอกเหนือจากการขยายความงานหลักและงานย่อยต่างๆ ผู้ใช้แต่ละคนทำงานที่แตกต่างกันผ่านส่วนต่อประสาน ดังนั้น ควรออกแบบหน้าตาของส่วนต่อประสานของผู้ใช้ให้แตกต่างกัน

12.3.3 การวิเคราะห์การนำเสนอเนื้อหา (Analysis of Display Content) เนื้อหาที่นำเสนอสามารถครอบคลุมตั้งแต่รายงานที่เป็นตัวอักษร รูปภาพ ไฟล์เสียง หรือภาพเคลื่อนไหว วัตถุเหล่านี้อาจะถูกสร้างโดยส่วนประกอบของระบบที่ไม่เกี่ยวข้องกับส่วนต่อประสาน หรือดึงมาจากข้อมูลที่เก็บในฐานข้อมูลที่เชื่อมต่อกับแอพพลิเคชั่น หรือส่งมาจากระบบภายนอกก็ได้

12.3.3 การวิเคราะห์การนำเสนอเนื้อหา (Analysis of Display Content) ในช่วงการวิเคราะห์ส่วนต่อประสาน รูปแบบและความงามของเนื้อหาที่นำเสนอจะถูกพิจารณา คำถามที่ต้องการคำตอบ ได้แก่ ข้อมูลชนิดต่างๆ นำแสดง ณ ตำแหน่งเดียวกันบนจอหรือไม่ ต้องการให้ผู้ใช้ปรับตำแหน่งที่แสดงเนื้อหาต่างๆ ได้เองหรือไม่ ถ้ารายงานมีขนาดใหญ่จะมีการแบ่งส่วนให้เข้าใจได้ง่ายอย่างไร มีกลไกให้ผู้ใช้เคลื่อนไปดูยอดสรุปของรายงานได้โดยทันทีอย่างไร ผลลัพธ์ที่เป็นรูปภาพควรจะปรับขนาดให้เหมาะกับขอบหน้าจออย่างไร สีที่ใช้ช่วยเสริมความเข้าใจหรือไม่ ข้อความแสดงความผิดพลาดและคำเตือนควรนำเสนอแก่ผู้ใช้อย่างไร

12.3.4 การวิเคราะห์สิ่งแวดล้อมการทำงาน (Analysis of the Work Environment) บางครั้งแอพพลิเคชั่นถูกใช้งานภายใต้สถานที่ที่เป็นมิตร คือมีแสงไฟ มีขนาดจอภาพ มีคีย์บอร์ดที่เหมาะสม แต่บางครั้งสิ่งแวดล้อมอาจไม่ค่อยดี เช่น ในโรงงาน หรือห้องนักบิน แสงไฟอาจไม่พอ เสียงอาจเป็นปัญหา ไม่มีทางเลือกใช้คีย์บอร์ดหรือเมาส์ได้ ตำแหน่งที่ตั้งส่วนต่อประสานอาจไม่ดีนัก นักออกแบบส่วนต่อประสานควรคำนึงถึงข้อจำกัดทางกายภาพเหล่านี้ที่อาจเป็นอุปสรรคต่อการใช้งาน นอกจากนี้วัฒนธรรมในที่ทำงานอาจมีผลกระทบเช่นกัน เช่น จะต้องมีการวัดอัตราการโต้ตอบกับระบบหรือไม่ ข้อมูลควรรับรองโดยสองฝ่ายก่อนนำเข้าสู่ระบบหรือไม่ ผู้ใช้งานจะได้รับข้อมูลช่วยเหลือจากระบบอย่างไร

12.4 ขั้นตอนการออกแบบส่วนต่อประสาน (INTERFACE DESIGN STEPS)

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

12.4 ขั้นตอนการออกแบบส่วนต่อประสาน (Interface Design Steps) บางครั้ง นักออกแบบอาจเริ่มด้วยการสร้างสถานะของส่วนต่อประสานก่อน โดยมองจากมุมมองของผู้ใช้งาน จากนั้นจึงย้อนกลับไปนิยามวัตถุและการกระทำสำหรับอิมพลีเมนต์ ไม่ว่าลำดับของงานออกแบบจะเป็นอย่างไร นักออกแบบต้อง ทำตามบัญญัติในการออกแบบส่วนต่อประสาน (The Golden Rules) บอกรายละเอียดว่าอิมพลีเมนต์ส่วนต่อประสานอย่างไร คำนึงถึงสิ่งแวดล้อม เช่น เทคโนโลยีการนำเสนอระบบปฏิบัติการ เครื่องมือในการพัฒนา

12.4.1 การประยุกต์ขั้นตอนการออกแบบส่วนต่อประสาน ขั้นตอนที่สำคัญในการออกแบบส่วนต่อประสาน คือ การนิยามวัตถุต่อประสานและงานที่วัตถุทำ เมื่อได้นิยามและขยายรายละเอียดของวัตถุและการกระทำหลายๆ รอบแล้ว วัตถุจะแบ่งตามประเภท เช่น วัตถุเป้าหมาย (Target Object) วัตถุต้นทาง (Source Object) และวัตถุแอพพลิเคชั่น (Application Object)

12.4.1 การประยุกต์ขั้นตอนการออกแบบส่วนต่อประสาน เมื่อวัตถุประสานและการกระทำได้ถูกออกแบบเสร็จแล้ว การจัดหน้าจอจะเป็นงานถัดไป เลย์เอาท์หน้าจอประกอบด้วยการออกแบบกราฟิกและการวางไอคอน การสร้างข้อความอธิบายหน้าจอ รูปแบบของหน้าต่าง นิยามของเมนูหลักและเมนูย่อย การจัดหน้าจอควรเป็นไปตามการทำงานในโลกจริง

รูปแบบการจัดหน้าจอของระบบบ้านปลอดภัย

12.4.2 แบบรูปการออกแบบส่วนต่อประสาน (User Interface Design Patterns) Tidwell และ vanWelie ได้จัดระเบียบของแบบรูปส่วนต่อประสานเป็น 10 ประเภท เช่น Whole UI. ให้คำแนะนำการออกแบบระดับบน และการเคลื่อนที่ไปมาในระบบ Pattern : top-level navigation Brief description : ประกอบด้วยเมนูระดับบน มักจะมีโลโก้หรือรูปกราฟฟิคที่แสดงความหมายให้ผู้ใช้ทราบว่าจะเคลื่อนที่ไปมาในระบบได้อย่างไร Page layout. กล่าวถึงการจัดระเบียบหน้าเว็บหรือหน้าจอ

12.4.2 แบบรูปการออกแบบส่วนต่อประสาน (User Interface Design Patterns) Tidwell และ vanWelie ได้จัดระเบียบของแบบรูปส่วนต่อประสานเป็น 10 ประเภท เช่น Pattern : card stack Brief description : มีหน้าตาคล้ายคลึงกับการวางการ์ดซ้อนกัน โดยมีแท็ปให้เลือกได้ โดยการใช้การกดเมาส์ แต่ละแท็ปเป็นฟังก์ชั่นย่อยหรือประเภทเนื้อหาหนึ่งๆ Forms and input. คำนึงถึงเทคนิคการออกแบบเพื่อกรอกข้อมูลลงฟอร์ม

12.4.2 แบบรูปการออกแบบส่วนต่อประสาน (User Interface Design Patterns) Tidwell และ vanWelie ได้จัดระเบียบของแบบรูปส่วนต่อประสานเป็น 10 ประเภท เช่น Pattern : fill-in-the-blanks Brief description : อนุญาตให้ใส่ข้อมูลตัวเลขหรือตัวอักษรลงบน textbox Searching. ทำการค้นหาเนื้อเฉพาะจากหน้าเว็บ หรือแหล่งข้อมูลฐาวร ผ่านการโต้ตอบกับแอพพลิเคชั่น

12.4.2 แบบรูปการออกแบบส่วนต่อประสาน (User Interface Design Patterns) Tidwell และ vanWelie ได้จัดระเบียบของแบบรูปส่วนต่อประสานเป็น 10 ประเภท เช่น Pattern : Wizard Brief description : นำผู้ใช้ผ่านขั้นตอนอันซับซ้อนของการสร้างหน้าจอหรือหน้าเว็บไปทีละขั้นตอนโดยมีคำแนะนำช่วยเหลือไปจนทำงานสำเร็จ E-commerce. แบบรูปนี้อิมพลีเมนต์ส่วนประกอบที่เกิดขึ้นบ่อยๆ ของแอพพลิเคชั่นอีอคอมเมิร์ซ

12.4.2 แบบรูปการออกแบบส่วนต่อประสาน (User Interface Design Patterns) Tidwell และ vanWelie ได้จัดระเบียบของแบบรูปส่วนต่อประสานเป็น 10 ประเภท เช่น Pattern : Shopping cart Brief description : ให้รายการสิ่งของที่ผู้ใช้เลือกจะซื้อ

12.4.3 ข้อควรคำนึงถึงอื่นๆ ในการออกแบบส่วนต่อประสาน เมื่อการออกแบบส่วนต่อประสานก้าวหน้าไปเรื่อยๆ จะปรากฏข้อควรคำนึงถึงต่างๆ คือ เวลาตอบสนองของระบบ (System Response Time) สิ่งอำนวยความช่วยเหลือแก่ผู้ใช้ (User Help Facilities) การจัดการความผิดพลาด (Error Information Handling) การกำหนดชื่อคำสั่งและเมนู (Command and Menu Labeling)

12.5 การประเมินการออกแบบ (DESIGN EVALUATION)

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

12.5 การประเมินการออกแบบ (Design Evaluation) วงจรการประเมินส่วนต่อประสานกับผู้ใช้ตามรูป ต้นแบบโปรแกรมตัวแรกจะถูกสร้างขึ้นหลังจากเสร็จสิ้นการสร้างแบบจำลองการออกแบบ ต้นแบบจะถูกประเมินโดยผู้ใช้งาน ซึ่งให้ความเห็นเพิ่มเติมเกี่ยวกับผลการใช้งาน หากมีการใช้เทคนิคการประเมินอย่างเป็นทางการ นักออกแบบอาจสกัดข้อมูลดิบเหล่านี้ได้ การเปลี่ยนแปลงการออกแบบจะเป็นไปตามความเห็นของผู้ใช้งาน ต้นแบบตัวต่อไปจะถูกสร้างขึ้น วงจรนี้จะหมุนไปจนกว่าจะไม่มีการแก้ไขเพิ่มเติมกับส่วนต่อประสานกับผู้ใช้

12.5 การประเมินการออกแบบ (Design Evaluation) แม้ว่าวิธีการสร้างต้นแบบจะได้ผลดี แต่ถ้าปัญหาที่เกิดขึ้นสามารถป้องกันได้ก็จะลดการวนซ้ำได้มาก และลดเวลาในการพัฒนาลงไป มีเกณฑ์การประเมินดังนี้ ขนาดและความซับซ้อนของข้อกำหนดของระบบและส่วนต่อประสาน เป็นตัวบ่งชี้ปริมาณการเรียนรู้เพิ่มเติมที่ผู้ใช้งานจำเป็นต้องศึกษาเกี่ยวกับตัวระบบ จำนวนงานย่อยของผู้ใช้งานและจำนวนเฉลี่ยนของการกระทำต่อแต่ละงานย่อยเป็นตัวบ่งชี้เวลาที่ใช้ในการโต้ตอบและประสิทธิภาพโดยรวมของระบบ จำนวนของการกระทำ จำนวนงานย่อย และจำนวนสถานะของระบบที่บ่งบอกได้จากแบบจำลองการออกแบบ หมายถึง ขนาดของภาระการต้องจดจำของผู้ใช้งานระบบ

12.5 การประเมินการออกแบบ (Design Evaluation) ในการรวบรวมข้อมูลเชิงคุณภาพจะมีการแจกจ่ายแบบสอบถามให้กับผู้ใช้งานระบบต้นแบบ คำถามอาจอยู่ในรูปของ ตอบว่าใช่หรือไม่ ตอบเป็นตัวเลข ตอบเป็นขนาด ลิคเคิร์ทสเกล (Likert Scales) คือเห็นด้วยอย่างมากไปจนถึงไม่เห็นด้วยเลย คิดเป็นเปอร์เซ็นต์ ตอบคำถามเปิด

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

12.6 สรุปท้ายบท

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

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

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

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