UX แบบลากและวาง: ตัวระบุ คำติชม และทางเลือกที่สามารถเข้าถึงได้
วิธีการออกแบบการลากแล้วปล่อยผู้คนสามารถค้นพบและใช้งานได้: ตัวระบุการคว้า การยกและดูตัวอย่างข้อเสนอแนะ โซนการดรอป ฟิสิกส์ และ WCAG 2.2 ทางเลือกที่ไม่ต้องลาก
หลัก Takeaway
ทำให้รายการที่สามารถลากได้ชัดเจนด้วยที่จับหรือการเปลี่ยนเคอร์เซอร์ ยืนยันการคว้าด้วยการยกและเงา ดูตัวอย่างผลลัพธ์ขณะลากโดยเน้นโซนดรอป และจัดเรียงรายการให้ชัดเจนเมื่อดรอปพร้อมเลิกทำ ให้วิธีที่ไม่ลากเพื่อทำสิ่งเดียวกันเสมอ WCAG 2.2 ต้องใช้ที่ระดับ AA
ข้อเสนอแนะในทุกขั้นตอน
คำแนะนำของ Nielsen Norman Group คือตัวบ่งชี้ที่ชัดเจนและการตอบรับที่ชัดเจนในทุกขั้นตอน ทำให้สามารถค้นพบด้วยการลากและวางและใช้งานง่าย เมื่อสิ่งของถูกหยิบขึ้นมา ผู้คนจำเป็นต้องรู้ว่าสิ่งของนั้นถูกหยิบไปแล้ว และดูว่าจะเกิดอะไรขึ้นก่อนที่จะทิ้งมัน
- Signifier: ไอคอนที่จับ, เคอร์เซอร์แบบจับเมื่อโฮเวอร์ หรือทั้งสองอย่าง
- คว้า: ยกสิ่งของโดยมีเงาและสเกลเล็กน้อยเพื่อให้ดูเหมือนจับได้
- ดูตัวอย่าง: ไฮไลต์โซนดรอปที่ถูกต้องและแสดงตำแหน่งที่ไอเท็มจะลงจอด
- ทิ้ง: ทำให้รายการเคลื่อนไหวและเสนอการยกเลิก
การเข้าถึง: เสนอวิธีอื่นเสมอ
เกณฑ์ความสำเร็จของ WCAG 2.2 2.5.7, Dragging Movements (ระดับ AA) กำหนดให้ทุกสิ่งที่ทำโดยการลากสามารถทำได้ด้วยตัวชี้เพียงตัวเดียวโดยไม่ต้องลาก เว้นแต่ว่าจำเป็นต้องลาก ทางเลือกทั่วไป ได้แก่ ปุ่มเลื่อนขึ้นและเลื่อนลง เมนู "ย้ายไปที่" หรือการรองรับแป้นพิมพ์พร้อมปุ่มลูกศร NN/g ยังตั้งข้อสังเกตอีกว่าทางเลือกที่แม่นยำมักจะช่วยเหลือทุกคนได้ เช่น การลากเข้าที่อย่างคร่าวๆ และการดันด้วยปุ่มลูกศร
ฟิสิกส์ทำให้การลากให้ความรู้สึกโดยตรง
รายการที่ลากควรตามตัวชี้โดยไม่ล่าช้า เมื่อปล่อยออกมา สปริงที่นำความเร็วการคลายตัวเข้าสู่การตกตะกอนจะทำให้การดรอปให้ความรู้สึกทางกายภาพ และรายการอื่นๆ ที่เคลื่อนไปด้านข้างอย่างราบรื่นจะแสดงตำแหน่งของช่องว่าง ทำให้การเคลื่อนไหวเหล่านี้สั้นลงและลดการเคลื่อนไหวลงเมื่อเปิดการเคลื่อนไหวแบบลดระดับ
รายละเอียดการสัมผัส
บนหน้าจอสัมผัส ให้แยกการลากออกจากการเลื่อน โดยมักจะกดค้างไว้เพื่อหยิบขึ้นมา ทำให้แฮนเดิลมีขนาดใหญ่พอที่จะเข้าถึง เลื่อนรายการอัตโนมัติเมื่อลากใกล้ขอบ และให้การตอบสนองแบบสัมผัสเกี่ยวกับการรับและวางในตำแหน่งที่แพลตฟอร์มรองรับ
คีย์ Principles ที่ต้องจำ
- แสดงสิ่งที่ลากได้ด้วยจุดจับหรือการเปลี่ยนเคอร์เซอร์
- ยืนยันการคว้าและดูตัวอย่างการดรอป
- ชำระด้วยการเคลื่อนไหวที่ชัดเจนและเสนอการยกเลิก
- WCAG 2.5.7 (AA): ให้ทางเลือกที่ไม่ต้องลาก
- ใช้สปริงเพื่อการปล่อยตามธรรมชาติ ลดลงเพื่อลดการเคลื่อนไหว
คำถามที่พบบ่อย
แหล่งที่มา
- Drag–and–Drop: How to Design for Ease of Use — Nielsen Norman Group
- Understanding SC 2.5.7: Dragging Movements — W3C ไหว