10 หลักการออกแบบ User Interface (UI) ให้มี Usability ที่ดีโดย Jakob Nielsen - กูรูด้าน Usability

“10 Usability Heuristic” เป็นหลักการ 10 ข้อที่ Jakob Nielsen (กูรูด้าน Usability) คิดขึ้นมาเพื่อเป็น Guideline สำหรับการออกแบบ UI ให้มี Usability ที่ดี

นักออกแบบ UX/UI Designer สามารถนำหลักการทั้ง 10 ข้อนี้เป็นเกณฑ์ตรวจสอบ UI คร่าว ๆ ว่า UI มีปัญหา Usability ด้านไหน (Effectiveness/ Efficiency/Satisfaction) โดยกระบวนการประเมิณผลโดยใช้หลักการนี้เรียกว่า “Usability Heuristic Evaluation”

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

Usability คืออะไร?

“Usability” เป็นตัวบ่งชี้คุณภาพที่บ่งบอกว่า Product ใช้งานได้ง่ายแค่ไหน “ความยากง่าย” ส่งผลโดยตรงกับความรู้สึกและการตัดสินใจของ User ว่าจะใช้งาน Product นี้ต่อไปหรือไม่
อ่านบทความย้อนหลัง “Usability คืออะไร?” ได้ที่นี่

Usability = Effectiveness (ใช้ได้) ∩ Efficiency (ใช้ง่าย) ∩ Satisfaction (ชอบใช้)

10 Usability Heuristic Principles

1. Visibility of system status

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

Action = Reaction

ควรออกแบบระบบให้แสดง Feedback ในเวลาที่เหมาะสมให้ User เห็นตอนที่ User ทำ Action อะไรบางอย่างกับระบบ เพื่อทำให้ User รู้ว่าระบบตอบสนองกับสิ่งที่ทำไปเมื่อกี้นี้ ไม่ได้แอบทำงานเงียบ ๆ แล้วปล่อยให้คนคิดว่า Web/App นี้มันค้าง พัง หรือว่าเมื่อกี้กดไม่โดนรึเปล่า

UI ทุกอย่างที่ User สามารถมี Interaction ด้วยได้ จะต้องมีปฏิกิริยาตอบสนองอย่างใดอย่างนึง เช่น เปลี่ยน status, stlye, ตำแหน่ง ฯลฯ ถ้า User ไป Trigger attribute ของ UI นั้น

Button เปลี่ยนรูปร่างตอนที่ mouse hover (Source)

Card UI กลับด้านหลังกดปุ่ม Detail (Source)

ควรออกแบบ stage ให้ UI เช่น UI อัพโหลด file ต้องมี stage ก่อนอัพโหลด, ตอนกำลังอัพโหลด, และผลการอัพโหลด

ตอนที่กำลังโหลดไฟล์ มี UI แสดงสถานะว่าไฟล์กำลังถูกอัพโหลดอยู่ (Source)

ควรบอก User ว่าตอนนี้กำลังทำอะไรอยู่ ตอนไหนที่ต้องรอให้ระบบทำงาน ตอนไหนที่ระบบทำงานเสร็จแแล้ว

UI ของ credit card ถูกออกแบบให้มีลักษณะคล้ายบัตรจริง ๆ คนเลยสามารถเชื่อมโยงได้ว่าตัวเลขที่เห็นใน UI Card กับเลขบัตรคือเลขเดียวกัน (Credit) — หลังจากกดปุ่ม Send email แล้วมี UI Toast แสดงข้อความด้านล่างว่า “Sending messagee…” (Source)

2. Match between system and the real world

หลักการข้อนี้เกี่ยวข้องกับการจัดการความคาดหวังของผู้ใช้งาน คนคาดหวังว่าประสบการณ์บนโลกดิจิดตัลจะใกล้เคียงกับโลกความเป็นจริง เช่น การส่งข้อความออนไลน์ก็จะใกล้เคียงกับการส่งจดหมาย, การไฮไลท์ข้อความบน Medium ต้องเหมือนกับตอนที่ใช้ปากกาขีด เป็นต้น อะไรที่คนทำตามความความเคยมันจะง่าย

Familiarity = Less Learning curve

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

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

UI ของเครื่องคิดเงินถูกออกแบบให้คล้าย ๆ เครื่องคิดเงินจริง ๆ ทำให้ User ที่คุ้นเคยกับเครื่องแบบเก่าอยู่แล้วสามารถใช้งานได้ทัันที (Source)

ภาษาที่ใช้ใน Web/App ควรใช้ภาษาที่คนทั่วไปพูด อย่าพยามใช้ภาษาคอมพิวเตอร์หรือภาษาแปลก ๆ หรือคำเฉพาะที่คนไม่เข้าใจ

ภาษาที่ใช้ใน UI ควรใช้คำพูดที่คนทั่วไปใช้

3. User control and freedom

Undo

อย่าให้ User ต้องเหนื่อยตอนที่อยากจะย้อนกลับเวลากดหรือทำอะไรพลาดในระบบ เราควรออกแบบให้ Web/App มีปุ่ม Back, Undo, Redo เสมอ ตอนที่ User ทำอะไรพลาด UI ควรจะต้องมีทางออกฉุกเฉิน, โชว์วิธีแก้/วิธีย้อนกลับที่ User ทำได้ท้นทีโดยการที่ไม่ต้องผ่านขั้นตอนอะไรมากมาย

Gmail มีปุ่ม Undo ให้ User ใช้ ในกรณีที่ User เผลอกดส่งอีเมลตอนที่ไม่ตั้งใจ (Source) — Gmail มี Function Undo Send ให้ User ใช้ ในกรณีที่ User เผลอกดส่งอีเมลตอนที่ไม่ตั้งใจ (Source)

Git ให้ User กด Amend ได้หากต้องการ Undo Last Commit (Source)

4. Consistency and standards

Platform conventions

หน้าตาของ UI ควรออกแบบให้ไปในทิศทางเดียวกัน ถ้าปุ่มที่นึงเป็นยังไง ตอนที่ปุ่มประเภทเดียวกันไปอยู่อีกหน้าก็ควรเป็นแบบเดียวกัน และพยายามอย่าออกแบบ UI พิศดารที่ไม่เคยมีมาก่อนใน platform ไหนเลย ถ้าเป็นไปได้ให้ออกแบบตาม UI พื้นฐานของแต่ละ platform

สร้าง Design System เพื่อวาง Guideline ในการออกแบบ UI เพื่อให้การออกแบบไปในทิศทางเดียวกัน

วาง UI Pattern & Structure เช่น ถ้าเมนูอยู่ด้านซ้าย ควรให้อยู่ซ้ายตลอดทั้งระบบ ถ้าปุ่ม Action อยู่ด้านบนขวา ก็ต้องอยู่บนขวาตลอด การใช้ Pattern ซ้ำ ๆ จะทำให้คนจำได้ว่าอะไรอยู่ตรงไหน

วาง UI Pattern & Structure เช่น ถ้าเมนูอยู่ด้านซ้าย ควรให้อยู่ซ้ายตลอดทัั้งระบบ ถ้าปุ่ม Action อยู่ด้านบนขวา ก็ต้องอยู่บนขวาตลอด จะให้บางหน้าปุ่มย้ายไปอยู่ด้านล่างไม่ได้้ — Source

5. Error prevention

Stop error-prone

พยายามออกแบบเผื่อดัก Error ที่จะเกิดขึ้นด้วย เช่น

ฟอร์มแสดง Warning/Error Message หาก User ทำอะไรผิดเงื่อนไข

UI มี Error Message บอก User ว่า Password ยังไม่ตรงตามเงื่อนไขอะไรบ้าง (Source)

เตือนหรือป้องกัน User ก่อนจะเผลอทำอะไรที่ไปสร้างประสบการณ์แย่ ๆ เช่น

แสดง Dialog Confirm ถ้า User ต้องการทำ Action ที่ย้อนกลับไม่ได้ (Source)

iPhone สามารถเซ็ต Do not disturb mode ป้องกันคนโทรมาตอนขับรถ (Source)

Slack มี Status บอกว่าใครกำลังพักร้อนอยู่ กันคนทักพนักงานช่วงวันหยุด (Source)

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

6. Recognition rather than recall

Brainless action

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

Auto complete ช่วยให้คนไม่ต้องจำว่าตััวเลือกทั้งหมดมีอะไรบ้าง (Source)

Amazon มีเมนู Browsing History ให้คนเข้าไปดูได้ว่าก่อนนี้นี้เพิ่งเข้าไปดูสินค้าอะไรมา (Source) — Amazon มีเมนู Browsing History ให้คนเข้าไปดูได้ว่าก่อนหน้านี้เพิ่งเข้าไปดูสินค้าอะไรมา (Source)

Agoda มี UI ด้านขวาสรุปข้อมูลห้องที่ User เลือกในหน้าก่อนหน้า ทำให้ User ไม่ต้องจำว่าเลือกอะไรไปแล้วบ้าง (Source)

7. Flexibility and efficiency of use

Pro features

หลักการข้อนี้มีไว้สำหรับอำนวยความสะดวกให้กลุ่ม Pro User เราควรออกแบบระบบให้เหมาะกับการใช้งานของ User หลาย ๆ ระดับ โดย Novice User (ระดับเริ่มต้น) สามารถใช้งานฟังก์ชั่นตามวิธีปกติได้ และก็มีทางเลือกให้ Pro User ใช้ฟังก์ชั่นในวิธีที่มีประสิทธิภาพและรวดเร็วกว่า

มีฟังก์ชั่นสำหรับกลุ่ม Pro User โดยเฉพาะ โดยฟังก์ชั่นนี้เป็นเหมือน option เสริม คนที่ยังเป็น Novice อาจจะไม่ได้สังเกตเห็นว่ามีฟังก์ชั่นนี้อยู่ก็ได้ แต่ก็ยังใช้งานด้วยวิธีพื้นฐานได้อยู่

Google Search Image มี Filter สำหรับ Search Result คนทั่วไปอาจจะไม่เห็นว่ามีฟีเจอร์นี้อยู่ (Source)

สร้าง Shortcut หรือเอาเมนูที่ใช้บ่อย ๆ ไปไว้ในที่ที่กดง่าย ๆ

Photoshop ออกแบบ Shortcut มาเพื่อเพิ่มประสิทธิภาพให้คนใช้งานทำงานได้ไวขึ้น (Source)

8. Aesthetic and minimalist design

Less is more

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

หลีกเลี่ยงการใช้ Happy talk คือ อย่าใส่ตัวหนังสือที่ไม่จำเป็น เพราะทำให้เกิดสิ่งรบกวนบนหน้าจอ (noise)

เว็บมีตัวหนังสือเยอะเกินไป ทำให้้ไม่รู้ว่าจะเริ่มอ่านนตรงไหน (Source)

ซ่อน Secondary function ใน UI State ต่าง ๆ

Function ของ table ที่ไม่สำคัญถูกออกแบบให้ซ่อนอยู่ใน Hover State ทำให้หน้าตา UI ไม่ดูรกจนเกินไป (Source)

9. Help users recognize, diagnose, and recover from errors

เวลาที่ User เจอ Error message ต่าง ๆ ให้บอก User ให้ชัดเจนด้วยว่า User ทำอะไรผิด (ด้วยคำพูดที่คนทั่วไปใช้กัน) และจะต้องทำยังไงถึงจะแก้ไขได้

UI บอกให้้ User รับรู้ว่าฟอร์มไม่ผ่าน Validation เพราอีเมล์ลงทะเบียนไปแล้ว และแนะนำว่าให้ login แทนที่จะ register (Source)

Google Chrome ออกแบบหน้า UI บอกให้ User รู้ว่าตอนนี้ไม่มี Internet นะ พร้อมแนะนำว่าควรจะทำยังไง แถมยังทำเกมมาให้เล่นไปพลาง ๆ ด้วย (Source)

10. Help and documentation

ถ้าระบบซับซ้อน อาจจะต้องมี link ที่ User สามารถเข้าไปอ่าน Doc, tutorial, FAQs หรือดูวิดิโอได้ในตอนที่ User ต้องการความช่วยเหลือ และอย่าแสดง Help ในตอนที่ User ไม่ต้องการ หรือระหว่างที่ User อยากทำอย่างอื่น การเพิ่ม Help & documentation ทำได้หลายวิธี เช่น