Dra-och-släpp UX: Signifiers, Feedback och tillgängliga alternativ
Hur man designar dra-och-släpp människor kan upptäcka och använda: ta tag i tecken, lyft och förhandsgranska feedback, släppzoner, fysik och det icke-dragalternativ WCAG 2.2 kräver.
Core Takeaway
Gör dragbara objekt uppenbara med ett grepphandtag eller markörbyte, bekräfta greppet med ett lyft och skugga, förhandsgranska resultatet medan du drar genom att markera släppzoner, och ställ objektet tydligt när det släpps, med ångra. Ge alltid ett icke-dragande sätt att göra samma sak; WCAG 2.2 kräver det på nivå AA.
Feedback i varje skede
Nielsen Norman Group:s vägledning är att tydliga tecken och tydlig feedback i varje steg gör dra-och-släpp upptäckbart och lätt att använda. När ett föremål har gripits måste folk veta att det greps och se vad som kommer att hända innan de släpper det.
- Signifier: en griphandtagsikon, en gripmarkör när du håller muspekaren eller båda.
- Greppade: lyft föremålet med en skugga och lätt skala så att det ser hållet ut.
- Förhandsgranska: markera giltiga släppzoner och visa var objektet kommer att landa.
- Släppt: animera objektet på plats och erbjuda ångra.
Tillgänglighet: erbjuda alltid ett annat sätt
WCAG 2.2 framgångskriterium 2.5.7, Dragrörelser (nivå AA), kräver att allt som görs genom att dra också kan göras med en enda pekare utan att dra, såvida det inte är nödvändigt att dra. Vanliga alternativ är flytta upp och flytta ned-knappar, en "Flytta till"-meny eller tangentbordsstöd med piltangenter. NN/g noterar också att ett exakt alternativ ofta hjälper alla, till exempel att dra grovt på plats och knuffa med piltangenterna.
Fysiken gör att dra känns direkt
Släpade objekt ska följa pekaren utan fördröjning. När den släpps gör en fjäder som transporterar frigöringshastigheten in i botten att droppen känns fysisk, och andra föremål som flyttas åt sidan visar smidigt var gapet är. Håll dessa rörelser korta och minska dem när reducerad rörelse är på.
Tryck på detaljer
På pekskärmar kan du skilja ett drag från en rullning, ofta med ett långt tryck för att plocka upp. Gör handtagen tillräckligt stora för att träffas, rulla automatiskt i listor när du drar nära kanten och ge haptisk feedback vid upptagning och släpp där plattformen stöder det.
Nyckel Principles att komma ihåg
- Visa vad som är dragbart med handtag eller markörändringar
- Bekräfta greppet och förhandsgranska släppet
- Avgör med tydliga rörelser och erbjuda ångra
- WCAG 2.5.7 (AA): tillhandahåller ett icke-dragande alternativ
- Använd fjädrar för naturlig frisättning; minska för minskad rörelse
Vanliga frågor
Källor
- Drag–and–Drop: How to Design for Ease of Use — Nielsen Norman Group
- Understanding SC 2.5.7: Dragging Movements — W3C WAI