Drag-and-drop UX: semnificatori, feedback și alternative accesibile
Cum să proiectați prin drag-and-drop oamenii pot descoperi și utiliza: luați semnificații, ridicați și previzualizați feedback-ul, drop zone, fizică și alternativa fără tragere pe care WCAG 2.2 necesită.
Core Takeaway
Faceți evidente elementele care pot fi glisate cu ajutorul unui mâner de prindere sau cu schimbarea cursorului, confirmați prin ridicare și umbră, previzualizați rezultatul în timp ce trageți prin evidențierea zonelor de plasare și stabiliți clar elementul când este aruncat, cu anulare. Oferiți întotdeauna o modalitate fără tragere de a face același lucru; WCAG 2.2 îl necesită la nivelul AA.
Feedback în fiecare etapă
Îndrumarea lui Nielsen Norman Group este că semnificanții clari și feedback-ul clar în fiecare etapă fac drag-and-drop descoperit și ușor de utilizat. Odată ce un articol este luat, oamenii trebuie să știe că a fost luat și să vadă ce se va întâmpla înainte de a-l arunca.
- Semnificator: o pictogramă cu mâner de apucare, un cursor de prindere pe hover sau ambele.
- Prins: ridicați elementul cu o umbră și o scară ușoară, astfel încât să pară ținut.
- Previzualizare: evidențiază zonele de drop valide și arată unde va ateriza articolul.
- Scăpat: animați elementul în poziție și oferă anulare.
Accesibilitate: oferă întotdeauna o altă cale
Criteriul de succes WCAG 2.2 2.5.7, Mișcări de glisare (nivel AA), necesită ca orice lucru făcut prin glisare să se poată face și cu un singur indicator fără glisare, cu excepția cazului în care glisarea este esențială. Alternativele obișnuite sunt butoanele de mutare în sus și în jos, un meniu „Mutare în” sau suport pentru tastatură cu taste săgeți. NN/g observă, de asemenea, că o alternativă precisă ajută adesea pe toată lumea, de exemplu tragerea aproximativă în loc și deplasarea cu tastele săgeți.
Fizica face ca tragerea să se simtă directă
Elementele trase trebuie să urmeze indicatorul fără decalaj. Când este eliberat, un arc care transportă viteza de eliberare în fixare face ca picătura să se simtă fizică, iar alte obiecte care se deplasează fără probleme arată unde este golul. Păstrați aceste mișcări scurte și reduceți-le când este activată mișcarea redusă.
Atingeți detalii
Pe ecranele tactile, distingeți o glisare de un derulare, adesea cu o apăsare lungă pentru a ridica. Faceți mânerele suficient de mari pentru a atinge, listele de defilare automată când trageți lângă margine și oferiți feedback haptic la ridicarea și plasarea acolo unde platforma o acceptă.
Cheie Principles de reținut
- Afișați ceea ce poate fi glisat cu mânere sau modificări ale cursorului
- Confirmați preluarea și previzualizați drop-ul
- Rezolvați cu mișcare clară și oferiți anularea
- WCAG 2.5.7 (AA): oferă o alternativă fără tragere
- Utilizați izvoare pentru eliberare naturală; reduceți pentru mișcare redusă
Întrebări frecvente
Surse
- Drag–and–Drop: How to Design for Ease of Use — Nielsen Norman Group
- Understanding SC 2.5.7: Dragging Movements — W3C WAI