การออกแบบที่ดี ควรมี “10 ข้อนี้”

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

การประเมินความสามารถในการใช้งาน (Usability Heuristics) ตามหลักการของ James Chudley และ Jesmond Allen จากหนังสือ Smashing UX Design แล้ว จะอยู่ในขั้นตอน validate ที่เราจำเป็นต้องทำเสมอหลังจากขั้นตอน design เป็นสิ่งที่จะช่วยให้เรารู้ว่า ระบบสามารถออกแบบมาให้ผู้ใช้ใช้งานได้ยากหรือง่ายอย่างไร วันนี้ผู้เขียนเลยยกเกณฑ์การประเมินความสามารถในการใช้งาน 10 ข้อของ Jakob Nielsen มาฝากกันค่ะ

1. แสดงข้อมูลให้ผู้ใช้รู้สถานะของระบบ

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

เส้นขอบสีส้มที่ช่องค้นหา แสดงให้ผู้ใช้เห็นว่าตอนนี้กำลังใช้งานส่วนใดอยู่

2. ออกแบบการใช้งานที่คุ้นเคย

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

เครื่องคิดเลขบนโทรศัพท์มือถือมีลักษณะคล้ายกับเครื่องคิดเลขปกติ

3. มอบอำนาจให้กับผู้ใช้

เคยพิมพ์อะไรยาวมาก ๆ แล้วเผลอลบ หรือมีเหตุทำให้ข้อความหายไปไหม? พอเอาข้อความกลับมาไม่ได้ ย่อมสร้างความหงุดหงิดใจได้ไม่น้อย ระบบที่ดีจึงควรให้ผู้ใช้ควบคุมการทำงานของระบบได้ตามที่ต้องการ ไม่ว่าจะย้อนกลับไปสถานะก่อนหน้า (back) ยกเลิกคำสั่ง (close, exit, cancel, undo) หรือการสั่งให้ทำซ้ำได้ (redo)

การทำงานของ Google Doc ที่ผู้ใช้สามารถกดเลิกทำ (undo) หรือทำซ้ำ (redo) ได้

4. ออกแบบการใช้งานที่สม่ำเสมอ

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

เว็บขายสินค้ากับองค์ประกอบที่จำเป็นต้องมีคือ ช่องค้นหา และตะกร้าสินค้า สองสิ่งนี้มักจัดวางในตำแหน่งที่คล้ายคลึงกัน

5. ลดการเกิดข้อผิดพลาด

บางครั้งระบบอาจอ๊อง ๆ ไปบ้าง แต่ความอ๊องอาจนำมาสู่ความเสียหายใหญ่โตได้ ระบบจึงควรออกแบบการป้องกันไม่ให้เกิดข้อผิดพลาด โดยการสร้างข้อจำกัด หรือให้คำแนะนำในการใช้งานแก่ผู้ใช้งาน

ร้านอาหารยังไม่เปิดให้บริการในขณะนั้น จึงเบลอเมนูไว้เพื่อไม่ให้ผู้ใช้งานสามารถกดสั่งได้

6. ลดภาระการจำของผู้ใช้งาน

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

เว็บไซต์แสดงข้อมูลเตือนความจำผู้ใช้ว่า ก่อนเข้าสู่บทความผู้ใช้เดินทางมาจากหน้าใด

7. ออกแบบให้ยืดหยุ่น

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

การแนะนำ topic ให้ผู้ใช้เลือกตามที่ตนเองสนใจของทวิตเตอร์

8. ดีไซน์น้อยแต่มาก

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

หน้า Search Engine ที่เรียบง่ายของ Google คงความโดดเด่นของแบรนด์และสมาธิของผู้ใช้งานให้จดจ่อเฉพาะตรงกลาง

9. ผู้ใช้รู้ว่าผิดแล้วแก้ไขอย่างไร

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

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

10. ไม่ต้องรอเกิดข้อผิดพลาดค่อยช่วย

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

การช่วยเหลือเชิงรับของ figma ยามผู้ใช้งานพบปัญหา

หวังว่าทั้ง 10 ข้อนี้จะเป็นประโยชน์แก่ผู้อ่านทุกท่านนะคะ ^^ ขอบคุณค่ะ