Dra-og-slipp UX: Signifiers, Feedback og tilgjengelige alternativer
Hvordan designe dra-og-slipp folk kan oppdage og bruke: grip-betegnere, løft og forhåndsvis tilbakemelding, slippsoner, fysikk og det ikke-dra alternativet WCAG 2.2 krever.
Kjerne takeaway
Gjør gjenstander som kan dras åpenbare med et gripehåndtak eller markørendring, bekreft grepet med en løft og skygge, forhåndsvis resultatet mens du drar ved å utheve slippsoner, og sett elementet klart når det slippes, med angre. Gi alltid en ikke-dragende måte å gjøre det samme på; WCAG 2.2 krever det på nivå AA.
Tilbakemelding på alle trinn
Nielsen Norman Groups veiledning er at tydelige betegnelser og tydelige tilbakemeldinger på alle trinn gjør dra-og-slipp synlig og enkel å bruke. Når en gjenstand er grepet, må folk vite at den ble grepet og se hva som vil skje før de slipper den.
- Signifier: et gripehåndtaksikon, en gripepeker ved sveving eller begge deler.
- Grepet: løft gjenstanden med en skygge og lett skala slik at den ser holdt ut.
- Forhåndsvisning: uthev gyldige slippsoner og vis hvor elementet vil lande.
- Droppet: animer elementet på plass og tilby angre.
Tilgjengelighet: alltid tilby en annen måte
WCAG 2.2 suksesskriterium 2.5.7, Draging Movements (nivå AA), krever at alt som gjøres ved å dra, også kan gjøres med en enkelt peker uten å dra, med mindre dra er avgjørende. Vanlige alternativer er flytt opp og ned-knapper, en "Flytt til"-meny eller tastaturstøtte med piltaster. NN/g bemerker også at et presist alternativ ofte hjelper alle, for eksempel å dra grovt på plass og dytte med piltastene.
Fysikk gjør at dra føles direkte
Dragde elementer skal følge pekeren uten etterslep. Når den slippes, vil en fjær som fører frigjøringshastigheten inn i bunnen få dråpen til å føles fysisk, og andre gjenstander som beveger seg til side viser jevnt hvor gapet er. Hold disse bevegelsene korte og reduser dem når redusert bevegelse er på.
Trykk på detaljer
På berøringsskjermer skiller du en dra fra en rulle, ofte med et langt trykk for å plukke opp. Lag håndtak som er store nok til å treffe, rull automatisk i lister når du drar nær kanten, og gi haptisk tilbakemelding på hent og slipp der plattformen støtter det.
Tast Principles å huske
- Vis hva som kan dras med håndtak eller markørendringer
- Bekreft grepet og forhåndsvis slippet
- Avgjør med klare bevegelser og tilby angre
- WCAG 2.5.7 (AA): provide a non-dragging alternative
- Bruk fjærer for naturlig frigjøring; redusere for redusert bevegelse
Ofte stilte spørsmål
Kilder
- Drag–and–Drop: How to Design for Ease of Use — Nielsen Norman Group
- Understanding SC 2.5.7: Dragging Movements — W3C WAI