Dialog: ปุ่ม OK ควรอยู่ก่อนหรือหลังปุ่ม Cancel ?

เคยสงสัยมั๊ยว่า UI ของ Dialog เราควรเรียงลำดับปุ่ม OK (Affirmative/+) กับปุ่ม Cancel (Dismissive/-) ยังไง? อันไหนมาก่อนมาหลัง

• OK / Cancel  หรือ
• Cancel / OK

Designer หลาย ๆ คน ถกกันเรื่องลำดับของการวางปุ่ม OK/Cancel โดยมีเหตุผล support ต่าง ๆ กัน เช่น

• [OK / Cancel]
  ใช้หลักการอ่านจากซ้ายไปขวา ดังนั้นปุ่ม OK ควรอยู่ซ้าย จะได้อ่านเจอปุ่ม OK (ที่ใช้บ่อยกว่า) ก่อน
• [Cancel / OK]
  มอง flow เป็นหลัก โดยคิดว่าปุ่ม OK เหมือนกับการให้ user ไปต่อ และ Cancel คือให้ user ย้อนกลับ ดังนั้นควรเรียงให้เป็นรูปแบบเดียวกันกับปุ่ม Previous / Next = Cancel / OK

แล้ว Best Practice ของการวางปุ่มเป็นแบบไหน?

Best Practice ของการวางปุ่ม OK/Cancel

Jakob Nielsen แนะนำว่า ลำดับการวางปุ่มควรคำนึงถึง consistency หรือ ความเคยชินของ user เป็นหลัก โดยให้ออกแบบอิงตาม platform convention ว่าปกติแล้ว GUI standard เค้าจัดให้อยู่ซ้ายหรือขวา

Inconsistency Costs More Time than It Saves. Deviate from the standard, and you’ll easily cost users several minutes — or possibly hours — as they overlook or misuse UI elements. The time people spend pondering inconsistencies typically sums to much more than the small savings you’ll hypothetically derive from a specialized design

Nielsen Norman Group

Windows: [OK/Cancel]

ปุ่ม Cancel จะอยู่ด้านขวาของปุ่ม OK ตลอด

Windows จะเรียงปุ่มจาก: OK/[Do it]/Yes > [Don’t do it]/No > Cancel > Apply (ถ้ามี) > Help (ถ้ามี)

iOS/Andriod: [Cancel/OK]

ปุ่ม Cancel จะอยู่ด้านซ้ายของปุ่ม OK ตลอด

Web-based platform

ให้ดูจาก log ว่า user มาจาก platform ไหนมากกว่ากัน (Window หรือ macOS) ส่วนใหญ่แล้ว user จะใช้ Windows มากกว่า คือ ใช้ [OK/Cancel]

Tips

นอกจากการเรียงลำดับของ Label ตาม Platform convention แล้ว สิ่งที่ควรคำนึงถึงเวลาออกแบบ Dialog คือ

• ตั้งชื่อปุ่มให้ชัดเจนว่ากำลังทำ Action อะไรอยู่ แทนที่จะใช้คำว่า OK/Cancel อย่างเดียว เช่น OK: Send, Confirm, Continue หรือ Cancel: No, Delete, Go back
• เน้นสีของปุ่มที่อยากให้กดให้ชัดเจนกว่าอีกปุ่มนึง โดยเฉพาะถ้า action นั้นเป็น dangerous case ให้เน้นสีที่ทำให้ user รู้ว่าต้องแน่ใจก่อนนะถึงจะกดปุ่มนี้

Takeaway

1. เรียงปุ่มตาม platform convention
2. ยึดหลัก Consistency ถ้าเอาไว้ด้านไหนต้องวางไว้ด้านนั้นทั้ง web/app
3. อย่าลืม Test ว่า user เข้าใจอย่างที่เราออกแบบรึเปล่า

• References
• https://uxdesign.cc/10-steps-to-interaction-design-ixd-6abe778cb8b8
• https://www.nngroup.com/articles/ok-cancel-or-cancel-ok/
• https://uxplanet.org/primary-secondary-action-buttons-c16df9b36150
• https://dazeinfo.com/2019/08/23/desktop-os-market-share-worldwide-by-month-graphfarm/

---