UX паттерны для перетаскивания (Drag and Drop) компонентов в дизайн-системе

Определение UX шаблонов для перетаскивания компонентов

Вероятно, вы используете перетаскивание (Drag and Drop) в своих повседневных интерфейсах – перетягивая цепочки писем Gmail в папки, перемещая карты Trello или переставляя местами вкладки в Chrome. Эти взаимодействия намного сложнее, чем вы думаете. Я это поняла при разработке шаблонов перетаскивания в VMware. Перетягивание цепочек писем Gmail в папки. Перестановка местами вкладок в Chrome Такие взаимодействия, как перетаскивание часто остаются незамеченными. Иногда они происходят настолько естественно, что вы даже этого не осознаете. Но, если вы внимательно посмотрите и сравните эти три примера, каждый из них демонстрирует очень разные UX стандарты перетаскивания. Нет ничего плохого в том, что эти интерфейсы имеют разные UX стандарты перетаскивания. Каждый интерфейс, вероятно, выбрал определенные паттерн по какой-либо причине. Например, возможно, Trello выбрали наклонение карт, при перетаскивании, потому что это поведение соответствует их дружественному языку дизайна. Но проблема заключается в том, что нет четких UX стандартов для перетаскивания в интерфейсе. Вы можете столкнуться с примерами, когда перетаскивание чего-то в одной части интерфейса является совершенно другим опытом в другой его части. Чтобы проиллюстрировать это, давайте посмотрим на доступную библиотеку перетаскивания Salesforce. Она демонстрирует пять паттернов перетаскивания, каждый из которых представляет собой совершенно отличный опыт. Доступные шаблоны перетаскивания Salesforce В то время, как было сделано много замечаний в отношении доступности (смотрите интересную статью на эту тему ??), к сожалению, в этих пяти моделях мало согласованности дизайна. В каждом из пяти шаблонов используется разный курсор, а в качестве инструментов перетаскивания используются три разных иконки: Но какая из них для перетаскивания? Ответ: Все Разве иконка с тремя линиями указывает на перетаскиваемый элемент? Или иконка с тремя точками? Какой из пяти курсоров показывает, что я могу перетаскивать элементы? Представьте себе замешательство, ведь все пять шаблонов применяются в одном интерфейсе! В дизайн-системе компоненты должны выглядеть и ощущаться как единое целое. Подобным образом, взаимодействие с перетаскиванием должно выглядеть и ощущаться согласованным между компонентами в интерфейсе.

Системы дизайна не просто создают согласованность между компонентами интерфейса – они также должны выступать за последовательный опыт.

Анализ примеров

Это UX кейс-стади, посвященное шаблонам перетаскивания (Drag and Drop), над которыми я работала в VMware для их системы дизайна Clarity. Clarity использует открытый исходный код, поэтому наши пользователи – это не только сотрудники VMware, но и все, кто хочет использовать наши библиотеки на основе Angular или руководства по дизайну. Наши пользователи просили добавить возможность перетаскивать некоторые компоненты интерфейса: моя задача состояла в том, чтобы унифицировать пользовательский опыт во всех следующих случаях использования, связанных с перетаскиванием:

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

• Изменение порядка и вложение узлов в древовидной структуре
• Переупорядочение столбцов в datagrid
• Переупорядочение строк в datagrid
• Перетаскивание между древовидной структурой и datagrid
• Реорганизация и слияние карт

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

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

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

1. Фиолетовый цвет

Выбирайте цвет, который не часто используется в вашей дизайн-системе для определения взаимодействия перетаскивания. Избегайте цветов, которые уже имеют значение в вашем интерфейсе (например, красный для деструктивных действий).Перестановка карточек Мы выбрали для перетаскивания фиолетовый цвет. Фиолетовый не является основным цветом, используемым в Clarity, поэтому, когда пользователи сталкиваются с ним, они могут ожидать перетаскивание. Мы намеренно избегали использования синего (который является общепринятым цветом для перетаскивания), потому что в Clarity он зарезервирован для кнопок действий и других кликабельных элементов.

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

Установите стили для разных состояний элемента, который перетаскивается. Укажите, какое именно визуальное воздействие получит элемент во время его перетаскивания, после его перетаскивания и т. д. В Clarity, когда элемент перетаскивается, он будет иметь следующие стили: Переупорядочение узлов древовидной структуры Добавление тонкой тени создает впечатление, что элемент фактически снимается со страницы. Другое состояние, которое мы добавили, было исходной позицией элемента во время его перетаскивания, называемое предыдущим состоянием. Вложение узлов в древовидной структуре Это действует как небольшое напоминание пользователям, где элемент был ранее. Обратите внимание, что это состояние не будет применяться к естественному перетаскиванию, при котором другие элементы естественным образом меняют свое местоположение из-за перетаскиваемого элемента.

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

Используйте системные курсоры, чтобы указать, когда элемент перетаскивается. Это кажется незначительным, но это улучшит возможность обнаружения перетаскиваемых элементов. Для Mac мы используем grab (раскрытую ладонь Микки Мауса) и grabbing (закрытая ладонь Микки Мауса) курсоры. Grab курсор отображается при наведении, когда элемент можно перетаскивать. Если начать его перетаскивать курсор переключится на grabbing курсор. Для областей, где элемент нельзя перетаскивать, мы использовали unavailable курсор. Для Windows мы используем move курсор (скрещенные стрелки). Курсор останется таким же при перемещении элемента. Опять же, для областей, где элемент нельзя перетаскивать, мы использовали unavailable курсор.

4. Целевые пункты перемещения

Установите шаблоны для целевых пунктов перемещения – областей, куда можно перетаскивать элементы. Подобно стилям состояния, упомянутым выше, явно выписывайте, какие стили есть у целевых пунктов перемещения. Поскольку переупорядочение является ключевым взаимодействием перетаскивания, мы указали позицию целевого пункта перемещения, которая указывает куда элемент будет перенесен. Переупорядочение строк в datagrid Мы добавили круг с левой стороны целевой позиции, чтобы еще больше отличить целевой пункт перемещения от обычной линии или границы. Это важное дополнение, особенно для пользователей, страдающих от цветовой слепоты, которые могут не заметить изменения цвета.

Маркеры

Нужно ли добавлять маркеры перетаскивания зависит от каждого конкретного случая. Маркеры перетаскивания – маленькие значки, указывающие, что элемент можно перетаскивать. Gmail выбрал значок с 12 точками для такого маркера, в то время, как мы выбрали значок с шестью точками: Наличие маркеров перетаскивания во многом зависит от контекста. Для компонентов, которые обычно не связаны с перетаскиванием, маркер перетаскивания помогает пользователям обнаруживать перетаскивание как доступное действие. Но в тех случаях, когда перетаскивание всегда является ожидаемым поведением, в маркерах нет нужды. Например, мы не добавляем маркеры в древовидной структуре, потому что перемещение по узлам дерева кажется очевидным. Тем не менее, мы добавляем маркеры для карточек, потому что не все карточки можно перетаскивать. Существует много разных значков, используемых для представления маркеров перетаскивания, но выбирайте только один и придерживайтесь его.

В заключение

Эти стандарты помогут создать основу для добавления перетаскивания в ваш интерфейс, но есть также много других способов стандартизации перетаскивания компонентов. Настройка любого стандарта UX поможет превратить перетаскивание в привычное взаимодействие. Посмотрите, как сочетаются все варианты использования перетаскивания, которые я создала, после того, как применила библиотеку возможностей: Invision. Команда Clarity только начинает процесс разработки этих шаблонов перетаскивания, начиная с переупорядочения столбцов в datagrid. Вы можете отслеживать прогресс разработки в нашем GitHub репозитории. ?

Источники

• Замечательная статья от Alex Reardon была моей библией шаблонов перетаскивания
• Паттерны перетаскивания от Salesforce

Спасибо Chaunce 'Red' Dolan и Lilia Kim.

---

Перевод статьи Grace Noh