Drag and Drop взаимодействие часто пропускается или остается незамеченным. Иногда они случаются так естественно, что вы даже этого не понимаете. Но если вы внимательно посмотрите и сравните эти три примера, каждый из них демонстрирует очень разные стандарты UX в области перетаскивания.

Нет ничего плохого в том, что эти интерфейсы имеют разные стандарты UX.  Например, возможно, Трелло решил наклонить карточки, во время перетаскивания, потому что это поведение соответствует их языку дизайна. Но там, где проблема заключается в том, что нет четких стандартов UX для перетаскивания в общий интерфейс. Вы можете столкнуться с примерами, когда перетаскивание чего-то в одной части интерфейса является совершенно другим опытом.

Чтобы проиллюстрировать это, давайте посмотрим на доступную библиотеку drag and drop Salesforce. Он демонстрирует пять моделей для перетаскивания, каждая из которых представляет собой совершенно другой.

В то время как много замечаний в отношении доступности, к сожалению, в этих пяти моделях мало согласованности дизайна. В каждом из пяти шаблонов используется другой курсор, а в качестве инструментов перетаскивания используются три разных значка:

Значок три строки указывает на перетаскиваемый элемент? Или это значок с тремя точками? Какой из курсоров показывает, что можно перетащить элемент? Лучше не использовать разные элементы обозначающие одно действие в одном проекте.

В системе проектирования компоненты должны выглядеть и сочетаться друг с другом как единое целое. Подобным образом, взаимодействие с перетаскиванием должно выглядеть и согласовано со всеми компонентами в интерфейсе.

Примеры использования drag and drop  в дизайне

Чаще всего drag and drop применяется в древовидных списках, таблицах и карачках.

Случаи использования:

1. Изменения порядка в списке элементов;
2. Переупорядочение столбцов в таблице;
3. Переупорядочение строк в таблице;
4. Реорганизация и слияние карточек;

Для пользовательских интерфейсов с большим объемом данных, перетаскивание имеет решающее значение для того, чтобы пользователи могли организовать сложные и большие объемы данных.

Создание библиотеки доступности

Если вы работаете в команде, вам необходимо начать с создания библиотеки доступности, это может помочь вам начать думать о том, как обращаться с шаблонами перетаскивания для вашей дизайн-системы.

 

1. Выбор цвета

Для обозначения drag and drop взаимодействия избегайте цветов, которые уже имеют значение в вашем интерфейсе. Так вы сможете использовать пользовательский опыт, и, когда пользователи будут сталкиваться с выбранным цветом, они смогут ожидать именно этого взаимодействия.

2. Стили состояний

Установите стили для разных состояний перетаскиваемого элемента. Укажите, какое именно визуальное воздействие получит элемент во время его перетаскивания, после его перетаскивания и т. д.

Например, когда элемент перетаскивается, он будет иметь следующие стили:

Добавление тонкой тени для тени создает впечатление, что элемент фактически снимается со страницы.

Светлое, прежнее положение элемента во время перетаскивания. Это действует как небольшое напоминание пользователям, где элемент был ранее.

3. Системные курсоры

Используйте системные курсоры, чтобы указать, когда элемент перетаскивается. Это кажется незначительным, но это значительно улучшит возможность обнаружения перетаскиваемых элементов.

Для Mac мы используем перчатку. Курсор захвата отображается при наведении, когда элемент перетаскивается. Для областей, где элемент нельзя перетащить, мы использовали курсор указывающий на недоступность.

Для Windows мы используем курсор перемещения (крестообразные стрелки). Опять же, для областей, где элемент нельзя перетащить, мы использовали курсор указывающий на недоступность.

4. Перетаскивыемае цели

Установите шаблоны для целевых объектов, которые являются допустимыми областями, где можно перетаскивать элементы. Подобно стилям состояний выше, явно выделяйте какие цели доступны.

Будет полезно казать место перемещения, например добавив круг в конец позиции, чтобы было проще отличить позицию от обычной линии или границы.

 

Резюме

Эти стандарты помогут создать базовую основу для подключения Drag and Drop элементов в интерфейсе, но есть много других способов стандартизации перетаскивания компонентов.

 

Источник