Drag-and-drop UX: Významy, spätná väzba a dostupné alternatívy
Ako navrhnúť drag-and-drop ľudia môžu objavovať a používať: uchopiť signifiers, zdvihnúť a zobraziť ukážku spätnej väzby, drop zóny, fyziku a alternatívu bez pretiahnutia vyžaduje WCAG 2.2.
Core Takeaway
Zviditeľnite presúvateľné položky pomocou držadla alebo zmeny kurzora, potvrďte uchopenie zdvihnutím a tieňom, ukážte výsledok pri ťahaní zvýraznením zón presunutia a položku pri páde jasne usaďte pomocou možnosti Späť. Vždy poskytnite neťahací spôsob, ako urobiť to isté; WCAG 2.2 to vyžaduje na úrovni AA.
Spätná väzba v každej fáze
Smernica Nielsen Norman Group je taká, že jasné významy a jasná spätná väzba v každej fáze umožňujú presunutie myšou objaviť a jednoducho použiť. Akonáhle je položka chytená, ľudia musia vedieť, že bola chytená, a aby videli, čo sa stane, kým ju pustia.
- Signifier: ikona držadla, kurzor pri umiestnení kurzora myši alebo oboje.
- Chytené: nadvihnite položku tieňom a miernou mierkou tak, aby vyzerala držaná.
- Ukážka: zvýraznite platné zóny presunutia a ukážte, kde položka dopadne.
- Zahodené: animujte položku na miesto a ponúknite možnosť vrátiť späť.
Prístupnosť: vždy ponúknite iný spôsob
Kritérium úspešnosti WCAG 2.2 2.5.7, Pohyby ťahaním (úroveň AA), vyžaduje, aby sa čokoľvek, čo sa robí ťahaním, dalo urobiť aj jedným ukazovateľom bez ťahania, pokiaľ ťahanie nie je nevyhnutné. Bežnými alternatívami sú tlačidlá na pohyb nahor a nadol, ponuka „Presunúť do“ alebo podpora klávesnice so šípkami. NN/g tiež poznamenáva, že presná alternatíva často pomáha každému, napríklad potiahnutím na miesto a postrčením šípkami.
Fyzika spôsobuje, že ťahanie je priame
Ťahané položky by mali sledovať ukazovateľ bez oneskorenia. Keď sa uvoľní, pružina, ktorá prenáša rýchlosť uvoľňovania do usadzovania, spôsobí, že kvapka bude fyzicky cítiť a ostatné predmety, ktoré sa pohybujú nabok, hladko ukážu, kde je medzera. Udržujte tieto pohyby krátke a znížte ich, keď je zapnutý redukovaný pohyb.
Dotknite sa podrobností
Na dotykových obrazovkách rozlíšte ťahanie od posúvania, často dlhým stlačením, aby ste ho zdvihli. Urobte dostatočne veľké rukoväte, aby ste ich mohli zasiahnuť, automaticky posúvajte zoznamy pri ťahaní blízko okraja a poskytujte hmatovú odozvu pri zdvihnutí a páde tam, kde to platforma podporuje.
Kľúč Principle na zapamätanie
- Ukážte, čo je možné presúvať pomocou rukovätí alebo zmien kurzora
- Potvrďte uchopenie a ukážte pokles
- Urovnajte sa jasným pohybom a ponúknite späť
- WCAG 2.5.7 (AA): Poskytnite alternatívu bez ťahania
- Použite pružiny na prirodzené uvoľnenie; znížiť pre znížený pohyb
Často kladené otázky
Zdroje
- Drag–and–Drop: How to Design for Ease of Use — Nielsen Norman Group
- Understanding SC 2.5.7: Dragging Movements — W3C WAI