Træk-og-slip UX: Signifiers, Feedback og tilgængelige alternativer
Hvordan man designer træk-og-slip, kan folk opdage og bruge: Grib-betegnere, løft og forhåndsvisning af feedback, slipzoner, fysik og det ikke-træk-alternativ WCAG 2.2 kræver.
Core Takeaway
Gør trækbare elementer tydelige med et gribehåndtag eller markørskift, bekræft grebet med et løft og skygge, se et eksempel på resultatet, mens du trækker ved at fremhæve slipzoner, og sæt elementet klart, når det slippes, med fortryd. Giv altid en ikke-slæbende måde at gøre det samme på; WCAG 2.2 kræver det på niveau AA.
Feedback på alle stadier
Nielsen Norman Group's vejledning er, at klare signifikatorer og tydelig feedback på alle trin gør træk-og-slip synligt og nemt at bruge. Når en vare er grebet, skal folk vide, at den blev grebet, og at se, hvad der vil ske, før de taber den.
- Signifier: et gribehåndtagsikon, en gribemarkør, når du svæver, eller begge dele.
- Grebet: Løft emnet med en skygge og let skala, så det ser holdt ud.
- Forhåndsvisning: Fremhæv gyldige dropzoner og vis, hvor emnet lander.
- Droppet: animer genstanden på plads, og tilbud fortryd.
Tilgængelighed: Tilbyd altid en anden måde
WCAG 2.2 succeskriterium 2.5.7, Trækbevægelser (niveau AA), kræver, at alt, der udføres ved at trække, også kan udføres med en enkelt markør uden at trække, medmindre det er vigtigt at trække. Almindelige alternativer er Flyt op og Flyt ned knapper, en "Flyt til" menu eller tastaturstøtte med piletaster. NN/g bemærker også, at et præcist alternativ ofte hjælper alle, for eksempel at trække groft på plads og skubbe med piletasterne.
Fysik gør, at træk føles direkte
Trækte elementer skal følge markøren uden forsinkelse. Når den slippes, får en fjeder, der fører udløsningshastigheden ind i bundfaldet, faldet til at føles fysisk, og andre genstande, der bevæger sig til side, viser jævnt, hvor mellemrummet er. Hold disse bevægelser korte og reducer dem, når reduceret bevægelse er aktiveret.
Tryk på detaljer
På berøringsskærme kan du skelne et træk fra en rulle, ofte med et langt tryk for at samle op. Gør håndtagene store nok til at ramme, scroll automatisk i lister, når du trækker tæt på kanten, og giv haptisk feedback på pick-up og slip, hvor platformen understøtter det.
Tast Principles for at huske
- Vis, hvad der kan trækkes med håndtag eller markørændringer
- Bekræft grebet, og se et eksempel på faldet
- Afgør med klare bevægelser og tilbud fortryd
- WCAG 2.5.7 (AA): Giv et ikke-trækkende alternativ
- Brug fjedre til naturlig udløsning; reducere for reduceret bevægelse
Ofte stillede spørgsmål
Kilder
- Drag–and–Drop: How to Design for Ease of Use — Nielsen Norman Group
- Understanding SC 2.5.7: Dragging Movements — W3C WAI