10 Usability Heuristics ที่นักออกแบบต้องรู้

10 Usability Heuristics ที่นักออกแบบต้องรู้

ปกติแล้วในกระบวนการออกแบบ UX/UI ของเว็บไซต์หรือแอปพลิเคชัน หลังจาก Designer ได้ออกแบบหน้าตาการใช้งานแล้ว จะต้องมีการประเมินหรือวัดผลงานออกแบบนั้น ๆ เพื่อให้แน่ใจว่าการใช้งานเป็นไปตามที่คาดหวังไว้หรือไม่ ถ้าไม่ ปัญหาจะอยู่ที่จุดไหน การวัดผลงานออกแบบนี้เรียกว่า “UI Evaluation” หรือ “UI Testing” หรืออีกชื่อที่ UX/UI Designer ได้ยินบ่อย ๆ คือ “Usability Testing” นั่นเอง

Photo by David Travis on Unsplash

ทำไมต้องทำ Usability Testing?

1. เพื่อหาคำตอบว่า Solution ที่ออกแบบมามัน work ขนาดไหน หรือถ้าไม่ work มันมีปัญหาที่จุดไหน
2. Designer is not a User. แม้ว่า Designer จะมีความเข้าใจในงานตัวเองมากน้อยแค่ไหน แต่สิ่งที่ Designer เข้าใจอาจจะไม่เหมือนกับสิ่งที่ผู้ใช้จริง ๆ เข้าใจ
3. Designer อาจมีมุมมองหรือประสบการณ์ส่วนตัวที่ทำให้การออกแบบเกิดการเอนเอียงหรือไม่สะท้อนถึงความต้องการจริง ๆ ของผู้ใช้ การทดสอบกับผู้ใช้จริงจึงช่วย ลดความอคติ (bias) ที่อาจเกิดขึ้นจากการคิดว่าผู้ใช้งานจะเข้าใจหรือใช้งานผลิตภัณฑ์ได้เหมือนกับที่นักออกแบบคาดหวัง
4. เพื่อนำ feedback ที่ได้ไปปรับปรุง UI

ประเภทของการทำ Usability Testing

1. Usability Testing: การประเมิน UI โดยนำตัวแทนผู้ใช้มาทดสอบกับ Prototype โดยใช้ metrics ต่าง ๆ คอยวัดผลการทดสอบตาม goals ของ แต่ละ Designer
2. Expert Review: หากในบางครั้งเราไม่มีเวลาหรือทรัพยากรในการทดสอบกับผู้ใช้จริง การทำ Expert Review ก็สามารถช่วยให้เราประเมิน UI ได้เบื้องต้น ซึ่งเป็นการประเมินโดยทีม Expert ที่ออกแบบ product นั้น ๆ มาทำการทดสอบเองผ่านเทคนิคต่าง ๆ เช่น Cognitive Walkthrough, Usability Heuristics

ในบทความนี้จะมาแนะนำ Usability Heuristics 10 ประการ ที่จะมาช่วย Designer เช็กงานออกแบบของตัวเองได้แบบเบื้องต้น แต่จากเหตุผลในหัวข้อ ทำไมต้องทำ Usability Testing? ก็แนะนำให้ทำ Usability Testing กับผู้ใช้จริงอยู่ดี (ถ้ามีเวลา)

10 Usability Heuristics คืออะไร

10 หลักการพื้นฐานในการออกแบบ UI ให้ผู้ใช้ใช้งานได้อย่างราบรื่น คิดค้นโดย Jakob Nielsen กูรูด้าน Usability

Heuristics is a method of solving problems by finding practical ways of dealing with them, learning from past experience. หรือแปลว่า วิธีการแก้ปัญหาโดยการหาวิธีการที่เป็นรูปธรรมในการจัดการกับปัญหา และเรียนรู้จากประสบการณ์ที่ผ่านมา

1: Visibility of System Status

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

ตัวอย่างเช่น การแสดงข้อความว่า “ส่งข้อความแล้ว” ลองนึกภาพถ้าเรากดส่งอีเมลแล้วไม่มีข้อความในระบบแสดงผลว่าส่งแล้ว เราคงเกิดความสงสัยว่าอีเมลเราถูกส่งไปแล้วหรือยังนะ

2: Match Between the System and the Real World

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

Aman Gupta | UX Design | Heuristic 2

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

3: User Control and Freedom

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

ตัวอย่างเช่น ปุ่ม Undo, Redo, Cancel, หรือปุ่ม Unsend ข้อความ ตามตัวอย่าง

4: Consistency and Standards

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

ตัวอย่างเช่น การออกแบบเมนูของโปรแกรมตระกูล Microsoft Office ที่มีตำแหน่งของเครื่องมืออยู่ตำแหน่งเดียวกัน และมีความคล้ายคลึงกัน จากภาพจะเป็นโปรแกรม Word, Excel และ PowerPoint

5: Error Prevention

การออกแบบที่ป้องกันการเกิดข้อผิดพลาดของผู้ใช้ให้น้อยที่สุด

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

ตัวอย่างนี้ ยังสามารถเป็นตัวอย่างให้กับ Usability Heuristics ข้อถัดไปได้อีกด้วย นั่นคือ “Recognition Rather than Recall”

6: Recognition Rather than Recall

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

7: Flexibility and Efficiency of Use

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

จากภาพ หากต้องการ copy ข้อความ ผู้ใช้งานต้องลาก highlight ข้อความที่ต้องการ แล้วไปที่เมนู Edit และเลือกเมนู Copy หรือจะทำการคลิกขวาแล้วเลือกเมนู Copy ก็ได้ แต่วิธีแบบไว ๆ ก็สามารถกด shortcut Ctrl+C (หรือ Command+C) บนคีย์บอร์ดก็ได้เช่นกัน

8: Aesthetic and Minimalist Design

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

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

9: Help Users Recognize, Diagnose, and Recover from Errors

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

ตัวอย่างเช่น การออกแบบหน้าที่ไม่พบ URL ของเว็บไซต์ (404 Not Found) โดยการบอกให้ชัดเจนว่าเกิดอะไรขึ้น และมีช่องทางให้ผู้ใช้แก้ไขได้ทันที ในตัวอย่างนี้คือบอกไปตรง ๆ เลยว่าหน้านี้อาจโดนเอาออกไปแล้วหรือปิดชั่วคราว โดยมีปุ่ม Go Back to Home ให้ผู้ใช้ได้ไปต่อ

10: Help and Documentation

การออกแบบข้อมูลเพิ่มเติมที่ช่วยให้ผู้ใช้งานบรรลุเป้าหมายได้ดียิ่งขึ้น เช่น Contacts, FAQ, หรือ Documentation

พอเราได้รู้ 10 Usability Heuristics ข้างต้นแล้ว เราจะเอาไปใช้ verify งานออกแบบของเรายังไงได้บ้าง? Heuristic Evaluation เป็นอีกหนึ่งเทคนิคที่สามารถทดสอบการใช้งานของงานออกแบบได้ผ่านหลักการทั้ง 10 ข้อนี้

Heuristic Evaluation ต้องทำอะไรบ้าง?

1. เลือกหน้าหรือ task ที่ต้องการจะโฟกัส
2. นำหลักการ 10 Usability Heuristics มาประเมินหน้าหรือ task ดังกล่าว โดยพยายามมองหาปัญหาไม่ว่าจะเป็นปัญหาใหญ่หรือปัญหาเล็ก ๆ น้อย ๆ จากนั้นให้จดบันทึกไว้ ขั้นตอนนี้อาจใช้คนที่เข้าใจหลักการนี้มาประเมินจำนวน 3–5 คน จะได้มีหลาย ๆ ความคิดเห็น
3. รวบรวมปัญหาที่แต่ละคนเจอ แล้วนำไปแปะป้ายความสำคัญเป็นเลเวล 1–4 ปัญหาไหนยังพอใช้งานได้ก็ให้เป็น 1 ไปจนถึงปัญหานี้จะทำให้ผู้ใช้งานติดขัดมากก็ให้เป็น 4
4. นำแต่ละปัญหาที่เราแปะเลเวลแล้วมาจัดลำดับความสำคัญ เพื่อนำไปแก้ปัญหาต่อไป

แม้ว่าการทำ Expert Review จะมีข้อดีคือประหยัดเวลาและทรัพยากรในการทดสอบกับผู้ใช้จริง แต่อย่าลืมว่า Designer is not a User. เพราะฉะนั้นแล้วเราควรหาโอกาสทดสอบงานออกแบบกับผู้ใช้จริง เพื่อเข้าถึง Insight ที่เรา ๆ นักออกแบบอาจคาดไม่ถึง จะได้นำไปแก้ปัญหาและออกแบบ Solution ให้ตอบโจทย์ผู้ใช้งานแบบจริง ๆ

จบไปแล้วสำหรับบทความนี้ หากมีข้อสงสัยหรืออยากเข้ามา Discuss กัน สามารถเข้ามา Comment พูดคุยกันได้เลยนะคะ :)

References:

HUMAN INTERFACE DESIGN © 2021 N. Chotikakamthorn
10 Usability Heuristics for User Interface Design
ความหมายของ Heuristics — Davoy
Heuristic Evaluation รู้ว่าคืออะไร แต่ใช้ยังไงดีหว่า?! | by Pim.Chadr | Medium