Drag-and-Drop UX: jelzők, visszajelzések és elérhető alternatívák
A fogd és vidd tervezési módot az emberek felfedezhetik és használhatják: megragadási jelzőket, emelési és előnézeti visszajelzést, ejtési zónákat, fizikát és a WCAG 2.2 által igényelt, húzás nélküli alternatívát.
Core Takeaway
Tegye nyilvánvalóvá a húzható elemeket a fogantyúval vagy a kurzorváltással, erősítse meg a megfogást emeléssel és árnyékolással, tekintse meg az eredményt húzás közben a leejtési zónák kiemelésével, és helyezze tisztán az elemet leejtéskor a visszavonással. Mindig biztosítson egy nem húzós módot ugyanannak a megtételére; A WCAG 2.2 AA szinten igényli.
Visszajelzés minden szakaszban
A Nielsen Norman Group útmutatása szerint az egyértelmű jelzők és az egyértelmű visszajelzések minden szakaszban felfedezhetővé és könnyen használhatóvá teszik a drag and drop funkciót. Ha egy tárgyat megragadtak, az embereknek tudniuk kell, hogy megragadták, és látniuk kell, mi fog történni, mielőtt ledobják.
- Jelölő: egy fogantyú ikon, egy markoló kurzor lebegve, vagy mindkettő.
- Megragadva: emelje fel a tárgyat árnyékkal és enyhén pikkelyesen, hogy úgy nézzen ki, hogy tartotta.
- Előnézet: jelölje ki az érvényes ledobási zónákat, és mutassa meg, hol fog landolni az elem.
- Eldobva: animálja az elemet a helyére, és felajánlja a visszavonást.
Hozzáférhetőség: mindig kínáljon más utat
A WCAG 2.2 sikerességi feltétele 2.5.7, Húzási mozgások (AA szint) megköveteli, hogy minden húzással végzett művelet egyetlen mutatóval is végrehajtható legyen húzás nélkül, kivéve, ha a húzás elengedhetetlen. A gyakori alternatívák a felfelé és lefelé mozgatható gombok, az „Áthelyezés” menü vagy a billentyűzet támogatása a nyílbillentyűkkel. A NN/g azt is megjegyzi, hogy egy precíz alternatíva gyakran mindenkinek segít, például a durván a helyére húzás és a nyílbillentyűkkel való lökdösődés.
A fizika közvetlen érzést kelt a vontatásban
A húzott elemeknek késés nélkül kell követniük a mutatót. Elengedéskor egy rugó, amely a kioldási sebességet az ülepékbe viszi, fizikai érzést ad a cseppnek, a többi félremozduló elem pedig simán mutatja, hol van a rés. Tartsa röviden ezeket a mozgásokat, és csökkentse őket, ha a csökkentett mozgás be van kapcsolva.
Érintse meg a részleteket
Az érintőképernyőkön megkülönböztetheti a húzást a görgetéstől, gyakran hosszan megnyomva a felvételhez. Tegye elég nagyra a fogantyúkat ahhoz, hogy eltalálja, automatikusan görgesse a listákat, amikor a széléhez közel húzza, és adjon tapintható visszajelzést a fel- és ledobásról ott, ahol a platform támogatja.
Kulcs Principle, amit meg kell jegyezni
- Mutassa meg, hogy mi húzható fogantyúkkal vagy kurzormódosításokkal
- Erősítse meg a megragadást, és tekintse meg a csepp előnézetét
- Tiszta mozdulattal rendezze be, és ajánlja fel a visszavonást
- WCAG 2.5.7 (AA): nem húzós alternatíva
- Használjon rugókat a természetes kioldáshoz; csökkentse a mozgás csökkentése érdekében
Gyakran Ismételt Kérdések
Források
- Drag–and–Drop: How to Design for Ease of Use — Nielsen Norman Group
- Understanding SC 2.5.7: Dragging Movements — W3C WAI