Drag-and-drop UX: betekenaars, feedback en toegankelijke alternatieven
Hoe je drag-and-drop kunt ontwerpen, kun je ontdekken en gebruiken: betekenaars verzamelen, feedback optillen en bekijken, dropzones, fysica en het niet-drag-alternatief dat WCAG 2.2 vereist.
Kern afhaalmaaltijd
Maak versleepbare items duidelijk met een handgreep of cursorwijziging, bevestig het grijpen met een lift en schaduw, bekijk een voorbeeld van het resultaat tijdens het slepen door neerzetzones te markeren en zet het item duidelijk vast wanneer het wordt neergezet, met ongedaan maken. Zorg altijd voor een niet-slepende manier om hetzelfde te doen; WCAG 2.2 vereist niveau AA.
Feedback in elke fase
De richtlijn van Nielsen Norman Group is dat duidelijke betekenaars en duidelijke feedback in elke fase drag-and-drop vindbaar en gebruiksvriendelijk maken. Zodra een voorwerp is gepakt, moeten mensen weten dat het is gepakt en moeten ze zien wat er zal gebeuren voordat ze het laten vallen.
- Betekenis: een pictogram met een handgreep, een grijpcursor tijdens het zweven, of beide.
- Gegrepen: til het item op met een schaduw en een lichte schaal, zodat het lijkt alsof het wordt vastgehouden.
- Preview: markeer geldige dropzones en laat zien waar het item zal landen.
- Dropped: animeer het item op zijn plaats en bied ongedaan maken aan.
Bereikbaarheid: bied altijd een andere weg aan
WCAG 2.2 succescriterium 2.5.7, Bewegingen slepen (niveau AA), vereist dat alles wat door middel van slepen wordt gedaan, ook met een enkele aanwijzer kan worden gedaan zonder te slepen, tenzij slepen essentieel is. Veel voorkomende alternatieven zijn knoppen voor omhoog en omlaag bewegen, een menu 'Verplaatsen naar' of toetsenbordondersteuning met pijltjestoetsen. NN/g merkt ook op dat een precies alternatief vaak iedereen helpt, bijvoorbeeld ruw op zijn plaats slepen en een duwtje geven met de pijltjestoetsen.
De natuurkunde zorgt ervoor dat het slepen direct aanvoelt
Gesleepte items moeten de aanwijzer zonder vertraging volgen. Wanneer het wordt losgelaten, zorgt een veer die de ontgrendelingssnelheid in de afzetting brengt ervoor dat de val fysiek aanvoelt, en andere items die soepel opzij bewegen laten zien waar de opening zit. Houd deze bewegingen kort en verminder ze als verminderde beweging is ingeschakeld.
Raak details aan
Op aanraakschermen kun je een sleepbeweging van een scroll onderscheiden, vaak door lang indrukken om op te pikken. Maak handvatten die groot genoeg zijn om te raken, scroll automatisch door lijsten wanneer je naar de rand sleept, en geef haptische feedback bij het oppakken en neerzetten waar het platform dit ondersteunt.
Toets Principles in om te onthouden
- Laat zien wat versleepbaar is met handvatten of cursorwijzigingen
- Bevestig de greep en bekijk een voorbeeld van de daling
- Met een duidelijke beweging afrekenen en ongedaan maken aanbieden
- WCAG 2.5.7 (AA): bied een niet-slepend alternatief
- Gebruik veren voor natuurlijke ontlading; verminderen voor verminderde beweging
Veelgestelde vragen
Bronnen
- Drag–and–Drop: How to Design for Ease of Use — Nielsen Norman Group
- Understanding SC 2.5.7: Dragging Movements — W3C WAI