Drag-and-Drop-UX: Signifikanten, Feedback und zugängliche Alternativen
So gestalten Sie Drag-and-Drop, das Menschen entdecken und verwenden können: Signifikanten erfassen, Feedback anheben und in der Vorschau anzeigen, Drop-Zonen, Physik und die Nicht-Drag-Alternative, die WCAG 2.2 erfordert.
Kernaussage
Machen Sie ziehbare Elemente mit einem Haltegriff oder einer Cursoränderung sichtbar, bestätigen Sie das Greifen mit Heben und Schatten, sehen Sie sich beim Ziehen eine Vorschau des Ergebnisses an, indem Sie Drop-Zonen hervorheben, und platzieren Sie das Element beim Loslassen mit der Funktion „Rückgängig“ deutlich. Stellen Sie immer eine Möglichkeit bereit, dasselbe zu tun, ohne dass es zu Verzögerungen kommt. WCAG 2.2 erfordert die Stufe AA.
Feedback in jeder Phase
Der Leitfaden von Nielsen Norman Group ist, dass klare Signifikanten und klares Feedback in jeder Phase Drag-and-Drop erkennbar und einfach zu verwenden machen. Sobald ein Gegenstand angegriffen wird, müssen die Leute wissen, dass er angegriffen wurde, und sehen, was passieren wird, bevor sie ihn fallen lassen.
- Signifikant: ein Griff-Symbol, ein Griff-Cursor beim Schweben oder beides.
- Ergriffen: Heben Sie den Gegenstand mit einem Schatten und einer leichten Skalierung an, sodass er aussieht, als würde er festgehalten.
- Vorschau: Markieren Sie gültige Drop-Zones und zeigen Sie an, wo der Artikel landen wird.
- Abgelegt: Animieren Sie das Element an seinem Platz und bieten Sie die Option „Rückgängig machen“ an.
Barrierefreiheit: Bieten Sie immer einen anderen Weg an
WCAG 2.2 Erfolgskriterium 2.5.7, Ziehen von Bewegungen (Stufe AA), erfordert, dass alles, was durch Ziehen ausgeführt wird, auch mit einem einzelnen Zeiger ohne Ziehen ausgeführt werden kann, es sei denn, Ziehen ist unbedingt erforderlich. Gängige Alternativen sind Nach-oben- und Nach-unten-Schaltflächen, ein „Verschieben nach“-Menü oder Tastaturunterstützung mit Pfeiltasten. NN/g weist außerdem darauf hin, dass eine präzise Alternative oft jedem hilft, beispielsweise grobes Ziehen und Anstupsen mit den Pfeiltasten.
Durch die Physik fühlt sich das Ziehen direkt an
Gezogene Elemente sollten dem Zeiger ohne Verzögerung folgen. Beim Loslassen sorgt eine Feder, die die Freigabegeschwindigkeit in die Senke überträgt, dafür, dass sich das Herunterfallen physisch anfühlt, und andere Gegenstände, die sich sanft zur Seite bewegen, zeigen an, wo sich die Lücke befindet. Halten Sie diese Bewegungen kurz und reduzieren Sie sie, wenn die reduzierte Bewegung aktiviert ist.
Berühren Sie Details
Unterscheiden Sie auf Touchscreens zwischen Ziehen und Scrollen, oft durch langes Drücken zum Aufnehmen. Machen Sie die Griffe groß genug, um sie treffen zu können, scrollen Sie automatisch durch die Listen, wenn Sie in Randnähe ziehen, und geben Sie haptisches Feedback beim Aufnehmen und Ablegen an der Stelle, an der die Plattform dies unterstützt.
Wichtige Prinzipien
- Zeigen Sie mit Ziehpunkten oder Cursoränderungen an, was ziehbar ist
- Bestätigen Sie die Aufnahme und sehen Sie sich den Abwurf in der Vorschau an
- Beruhigen Sie sich mit klarer Bewegung und bieten Sie „Rückgängigmachen“ an
- WCAG 2.5.7 (AA): Bietet eine nicht schleppende Alternative
- Verwenden Sie Federn für eine natürliche Freigabe; reduzieren für reduzierte Bewegung
Häufige Fragen
Quellen
- Drag–and–Drop: How to Design for Ease of Use — Nielsen Norman Group
- Understanding SC 2.5.7: Dragging Movements — W3C WAI