UX с помощью перетаскивания: значения, обратная связь и доступные альтернативы
Как проектировать перетаскивание, люди могут узнать и использовать: захват означающих, подъем и предварительный просмотр обратной связи, зоны перетаскивания, физику и альтернативу без перетаскивания, которую требует WCAG 2.2.
Главное
Сделайте перетаскиваемые элементы очевидными с помощью маркера захвата или смены курсора, подтвердите захват с помощью подъема и тени, просмотрите результат во время перетаскивания, выделив зоны перетаскивания, и четко зафиксируйте элемент при перетаскивании с помощью функции отмены. Всегда предоставляйте возможность сделать то же самое без перетаскивания; WCAG 2.2 требует его на уровне AA.
Обратная связь на каждом этапе
Руководство Nielsen Norman Group заключается в том, что четкие обозначения и четкая обратная связь на каждом этапе делают перетаскивание доступным для обнаружения и простым в использовании. Когда предмет схвачен, люди должны знать, что он был схвачен, и видеть, что произойдет, прежде чем они его уронят.
- Обозначение: значок ручки захвата, курсор захвата при наведении или и то, и другое.
- Схвачен: поднимите предмет с тенью и небольшим масштабом, чтобы он выглядел удерживаемым.
- Предварительный просмотр: выделите допустимые зоны высадки и покажите, где приземлится предмет.
- Выброшено: анимируйте элемент на месте и предложите отменить его.
Доступность: всегда предлагайте другой путь
WCAG 2.2 Критерий успеха 2.5.7, Перетаскивание движений (уровень AA), требует, чтобы все, что делается путем перетаскивания, также могло быть выполнено с помощью одного указателя без перетаскивания, если только перетаскивание не является необходимым. Распространенными альтернативами являются кнопки перемещения вверх и вниз, меню «Переместить к» или поддержка клавиатуры с помощью клавиш со стрелками. NN/g также отмечает, что точная альтернатива часто помогает всем, например, грубое перетаскивание на место и подталкивание с помощью клавиш со стрелками.
Благодаря физике перетаскивание кажется прямым
Перетаскиваемые элементы должны следовать за указателем без задержек. При отпускании пружина, которая переводит скорость отпускания в положение стабилизации, придает падению ощущение физического, а плавное движение других предметов в сторону показывает, где находится зазор. Делайте эти движения короткими и уменьшайте их, когда включено ограничение движений.
Коснитесь деталей
На сенсорных экранах отличайте перетаскивание от прокрутки, часто с помощью длительного нажатия для захвата. Сделайте ручки достаточно большими, чтобы по ним можно было нажимать, автоматически прокручивайте списки при перетаскивании возле края и обеспечивайте тактильную обратную связь при поднятии и падении там, где платформа поддерживает это.
Ключевые принципы
- Покажите, что можно перетаскивать, с помощью маркеров или изменений курсора.
- Подтвердите захват и просмотрите сброс
- Урегулируйте ситуацию четкими движениями и предложите отменить решение.
- 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 ВАИ