UX metodą „przeciągnij i upuść”: znaczniki, opinie i dostępne alternatywy
Jak zaprojektować funkcję „przeciągnij i upuść”, aby ludzie mogli odkrywać i wykorzystywać: przechwytywanie znaczników, podnoszenie i podgląd informacji zwrotnych, strefy upuszczania, fizykę i alternatywę bez przeciągania, wymaganą w WCAG 2.2.
Rdzeń na wynos
Spraw, aby przeciąganie elementów było oczywiste za pomocą uchwytu lub zmiany kursora, potwierdź chwycenie za pomocą podnośnika i cienia, wyświetl podgląd wyniku podczas przeciągania, podświetlając strefy upuszczania i wyraźnie ustal element po upuszczeniu, korzystając z funkcji cofania. Zawsze zapewniaj sposób bez przeciągania, aby zrobić to samo; WCAG 2.2 wymaga tego na poziomie AA.
Informacje zwrotne na każdym etapie
Wytyczne Nielsen Norman Group są takie, że jasne znaczniki i jasne informacje zwrotne na każdym etapie sprawiają, że metoda „przeciągnij i upuść” jest łatwa do wykrycia i łatwa w użyciu. Gdy przedmiot zostanie złapany, ludzie muszą wiedzieć, że został złapany i zobaczyć, co się stanie, zanim go upuści.
- Znacznik: ikona uchwytu, kursor chwytania po najechaniu kursorem lub jedno i drugie.
- Chwycony: podnieś przedmiot z cieniem i niewielką łuską, aby wyglądał na trzymany.
- Podgląd: zaznacz prawidłowe strefy zrzutu i pokaż, gdzie wyląduje przedmiot.
- Upuszczony: animuj element na miejscu i zaoferuj cofnięcie.
Dostępność: zawsze oferuj inny sposób
Kryterium sukcesu WCAG 2.2 2.5.7, Ruchy przeciągania (poziom AA) wymaga, aby wszystko, co jest wykonywane poprzez przeciąganie, mogło być również wykonane za pomocą pojedynczego wskaźnika bez przeciągania, chyba że przeciąganie jest niezbędne. Typowymi alternatywami są przyciski przesuwania w górę i w dół, menu „Przenieś do” lub obsługa klawiatury ze strzałkami. NN/g zauważa również, że precyzyjna alternatywa często pomaga każdemu, na przykład zgrubne przeciąganie na miejsce i szturchanie klawiszami strzałek.
Fizyka sprawia, że przeciąganie wydaje się bezpośrednie
Przeciągane elementy powinny podążać za wskaźnikiem bez opóźnień. Po zwolnieniu sprężyna przenosząca prędkość zwalniania do osadzenia sprawia wrażenie fizycznego, a inne przedmioty przesuwające się na bok płynnie pokazują, gdzie jest przerwa. Staraj się, aby te ruchy były krótkie i zmniejsz je, gdy włączony jest ruch zredukowany.
Dotknij szczegółów
Na ekranach dotykowych rozróżnij przeciąganie od przewijania, często za pomocą długiego naciśnięcia, aby podnieść. Twórz uchwyty wystarczająco duże, aby można je było trafić, automatycznie przewijaj listy podczas przeciągania w pobliżu krawędzi i przekazuj dotykowe informacje zwrotne przy podnoszeniu i upuszczaniu tam, gdzie obsługuje to platforma.
Klucz Principles do zapamiętania
- Pokaż, co można przeciągać, za pomocą uchwytów lub zmian kursora
- Potwierdź pobranie i wyświetl podgląd upuszczenia
- Rozstrzygnij się wyraźnym ruchem i zaoferuj cofnięcie
- WCAG 2.5.7 (AA): zapewnia alternatywę bez przeciągania
- Użyj sprężyn do naturalnego uwolnienia; zmniejsz, aby zmniejszyć ruch
Często zadawane pytania
Źródła
- Drag–and–Drop: How to Design for Ease of Use — Nielsen Norman Group
- Understanding SC 2.5.7: Dragging Movements — W3C WAI