เลิกทำแทนกล่องโต้ตอบการยืนยัน: การออกแบบ UI ที่ขัดจังหวะน้อยลง
ทำไมต้องพูดว่า "คุณแน่ใจเหรอ?" กล่องโต้ตอบจะล้มเหลวเมื่อการยืนยันยังคงถูกต้อง และวิธีการออกแบบการเลิกทำการโทสต์ที่ชัดเจน เข้าถึงได้ และปลอดภัย
หลัก Takeaway
ใช้การเลิกทำสำหรับการกระทำที่สามารถย้อนกลับได้: ดำเนินการทันที จากนั้นแสดงข้อความสั้นๆ ที่ไม่ปิดกั้นด้วยปุ่มเลิกทำ เก็บกล่องโต้ตอบการยืนยันสำหรับการกระทำที่ร้ายแรงและไม่สามารถย้อนกลับได้ เช่น การลบถาวรหรือการชำระเงินจำนวนมาก และกำหนดให้เฉพาะเจาะจง: ตั้งชื่อวัตถุและผลที่ตามมา การยืนยันการกระทำตามปกติจะฝึกให้ผู้คนคลิก "ตกลง" โดยไม่ต้องอ่าน
เหตุใดการยืนยันตามปกติจึงหยุดทำงาน
คำแนะนำของ Nielsen Norman Group เกี่ยวกับกล่องโต้ตอบการยืนยันนั้นชัดเจน: ใช้ก่อนการดำเนินการที่มีผลกระทบร้ายแรง และอย่าใช้สำหรับการดำเนินการตามปกติ เมื่อผู้คนเห็นกล่องโต้ตอบเดียวกันหลายครั้ง พวกเขายืนยันจนเป็นนิสัย และกล่องโต้ตอบจะหยุดป้องกันข้อผิดพลาดที่ควรตรวจจับ บทความเดียวกันนี้แนะนำให้เสนอการยกเลิกเมื่อเป็นไปได้แทนที่จะอาศัยคำเตือน
ยืนยันหรือเลิกทำ: กฎง่ายๆ
ถามคำถามหนึ่งข้อ: สิ่งนี้สามารถย้อนกลับได้หรือไม่? หากใช่ ให้ดำเนินการและเสนอการยกเลิก ถ้าไม่ ให้ยืนยันก่อน และทำการยืนยันอย่างเจาะจง
- เก็บถาวร ย้าย ทำเครื่องหมายว่าอ่านแล้ว ลบออกจากรายการ: ดำเนินการทันที เสนอการยกเลิก
- ส่งข้อความ: สินค้าจำนวนมากล่าช้าในการส่งสั้น ๆ จึงสามารถยกเลิกได้ Gmail ช่วยให้ผู้ใช้สามารถเลือกหน้าต่างเลิกทำ 5, 10, 20 หรือ 30 วินาที
- ลบถาวร ชำระเงิน เผยแพร่ต่อสาธารณะ: ยืนยันก่อน ตั้งชื่อรายการและผลกระทบ ("ลบ 142 ไฟล์")
- ยังดีกว่า: ทำให้การลบสามารถย้อนกลับได้โดยใช้ถังขยะหรือระยะเวลาการกู้คืน จากนั้นใช้การเลิกทำ
การออกแบบข้อความเลิกทำ
Material Design เรียกองค์ประกอบนี้ว่าแถบแสดงข้อความ: ข้อความสั้นๆ ที่มีการรบกวนน้อยที่สุดซึ่งสามารถมีการดำเนินการเดียว ไม่เหมือนกล่องโต้ตอบที่ต้องมีการตอบสนอง เขียนสิ่งที่เกิดขึ้นด้วยคำพูดเพียงไม่กี่คำ ใส่ Undo เป็นการกระทำเดี่ยว และแสดงไว้บนหน้าจอนานพอที่ผู้คนจะโต้ตอบ อย่าซ่อนการดำเนินการเลิกทำที่สำคัญในข้อความที่หายไปภายในสองวินาที
รายละเอียดการเข้าถึง
ขนมปังปิ้งที่หายไปเองสามารถพลาดได้โดยผู้ใช้โปรแกรมอ่านหน้าจอและผู้ที่ต้องการเวลามากขึ้น ประกาศข้อความผ่านภูมิภาคสดแบบสุภาพ ให้ผู้ใช้แป้นพิมพ์ไปที่ปุ่มเลิกทำ หยุดตัวจับเวลาชั่วคราวในขณะที่ข้อความถูกโฮเวอร์หรือโฟกัส และให้วิธีอื่นในการย้อนกลับการกระทำ เช่น รายการประวัติหรือถังขยะ
การเคลื่อนไหวเพื่อเลิกทำ
ทางเข้าที่สั้นและเงียบสงบจากขอบหน้าจอและทางออกที่ชัดเจนช่วยให้ผู้คนสังเกตเห็นข้อความโดยไม่ถูกรบกวน เมื่อกด Undo จะทำให้รายการเคลื่อนไหวกลับเข้าที่เพื่อให้มองเห็นการกลับรายการได้ เคารพการตั้งค่าการลดการเคลื่อนไหวด้วยการค่อยๆ จางลง
คีย์ Principles ที่ต้องจำ
- การกระทำที่ย้อนกลับได้: ดำเนินการทันทีและเสนอการยกเลิก
- การกระทำที่ร้ายแรงและไม่สามารถย้อนกลับได้: การยืนยันเฉพาะที่ระบุถึงผลกระทบ
- การยืนยันตามปกติจะถูกคลิกจนเป็นนิสัย
- ทำให้สามารถเข้าถึงข้อความเลิกทำ: ภูมิภาคสด, โฟกัสของแป้นพิมพ์, มีเวลาเพียงพอ
- ทำให้การกลับรายการเคลื่อนไหวเพื่อให้ผู้คนเห็นว่ามันได้ผล
คำถามที่พบบ่อย
แหล่งที่มา
- Confirmation Dialogs Can Prevent User Errors — If Not Overused — Nielsen Norman Group
- Send or unsend Gmail messages — Gmail ช่วยเหลือ
- Snackbar guidelines — Material Design3