Drag-and-Drop UX: означники, зворотний зв’язок і доступні альтернативи
Як розробляти перетягування, люди можуть виявити та використати: захоплення символів, підняття та попередній перегляд відгуків, зони перетягування, фізику та альтернативу без перетягування, яку вимагає WCAG 2.2.
Основний винос
Зробіть елементи, які можна перетягувати, очевидними за допомогою маркера захоплення або зміни курсора, підтвердьте захоплення за допомогою підйому та тіні, попередньо перегляньте результат під час перетягування, виділяючи зони перетягування, і чітко розташуйте об’єкт після падіння за допомогою скасування. Завжди надавайте спосіб без перетягування, щоб зробити те саме; WCAG 2.2 вимагає рівня AA.
Зворотній зв'язок на кожному етапі
Керівництво Nielsen Norman Group полягає в тому, що чіткі позначки та чіткий зворотній зв’язок на кожному етапі роблять перетягування доступним для виявлення та легким у використанні. Коли предмет схоплено, люди повинні знати, що його схопили, і побачити, що станеться, перш ніж вони його кинуть.
- Позначник: піктограма ручки захоплення, курсор захоплення під час наведення або обидва.
- Схоплено: підніміть предмет з тінню та невеликою лускою, щоб він виглядав утриманим.
- Попередній перегляд: виділіть дійсні зони падіння та покажіть, де приземлиться предмет.
- Випущено: анімуйте предмет на місце та запропонуйте скасувати.
Доступність: завжди пропонуйте інший спосіб
Критерій успіху WCAG 2.2 2.5.7, Рухи перетягування (рівень AA), вимагає, щоб усе, що виконується перетягуванням, також могло виконуватися одним вказівником без перетягування, якщо тільки перетягування не є необхідним. Поширеними альтернативами є кнопки переміщення вгору та переміщення вниз, меню «Перемістити до» або підтримка клавіатури зі стрілками. NN/g також зазначає, що точна альтернатива часто допомагає всім, наприклад, грубе перетягування на місце та підштовхування за допомогою клавіш зі стрілками.
Фізика робить перетягування прямим
Перетягувані елементи повинні слідувати за вказівником без затримки. Після відпускання пружина, яка передає швидкість вивільнення в осідання, робить падіння фізичним, а інші предмети, що плавно відходять убік, показують, де знаходиться щілина. Робіть ці рухи короткими та зменшуйте їх, коли ввімкнено зменшення руху.
Торкніться деталей
На сенсорних екранах відрізнити перетягування від прокручування, часто довгим натисканням, щоб підняти. Зробіть ручки достатньо великими, щоб можна було натиснути, автоматично прокручуйте списки під час перетягування біля краю та надавайте тактильний відгук під час підйому та падіння, де це підтримує платформа.
Ключі Principle, які слід запам’ятати
- Показати те, що можна перетягнути, за допомогою ручок або змін курсора
- Підтвердьте захоплення та попередньо перегляньте падіння
- Розрахунок чітким рухом і пропозиція скасування
- WCAG 2.5.7 (AA): надає альтернативу без перетягування
- Використовуйте пружини для природного випуску; зменшити для зменшення руху
Часті запитання
Джерела
- Drag–and–Drop: How to Design for Ease of Use — Nielsen Norman Group
- Understanding SC 2.5.7: Dragging Movements — W3C WAI