UX паттерны для перетаскивания (Drag and Drop) компонентов в дизайн-системе
Создаем UX-паттерны для функции drag-and-drop в контексте нескольких компонентов
(Мы продолжаем переводить цикл статей по UX/UI. Полную подборку советов можно найти в коллекции «Образцы UX»)
Вы читаете перевод статьи “Drag and Drop for Design Systems”. Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов. Впервые опубликовано на ux-journal.ru
Вы скорее всего встречали функционал drag-and-drop в куче интерфейсов: в гугл-почте можно перетаскивать письма в папки, в Трелло — передвигать карточки, в Хроме — менять вкладки местами. Эти взаимодействия гораздо сложнее, чем кажется — я это поняла, когда проектировала drag-and-drop паттерны в VMware.
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
Часто пользователи вообще не замечают drag-and-drop взаимодействий — настолько естественно они выглядят. Но все же, если присмотреться, все они разные: в UX пока нет единого стандарта по drag-and-drop.
Нет ничего плохого в том, что в каждом интерфейсе свой подход к drag-and-drop. У каждого дизайнера свои аргументы в пользу того или иного паттерна. Вот, например, в Трелло карточки при перетаскивании наклоняются. Скорее всего, дизайнер намеренно использовал этот эффект, потому что он соответствует дружелюбному стилю приложения.
Проблема в том, что иногда мы встречаем разные drag-and-drop паттерны в рамках единого интерфейса. Возможно, вам приходилось сталкиваться с такими приложениями. К примеру, посмотрим на библиотеку доступных drag-and-drop паттернов в Salesforce. Там мы видим пять совершенно разных паттернов.
И хотя эти паттерны очень хороши с точки зрения доступности (читайте мою статью об этом), к сожалению, в них мало согласованности, которая так важна в дизайне. В этих пяти паттернах мы видим пять разных курсоров и три маркера перетаскивания:
Какая иконка обозначает, что объект можно перетащить? Три полоски? Или три точки? А каким из пяти курсоров можно перетаскивать объекты? Представьте, что будет, если все пять паттернов использовать в одном интерфейсе?
Компоненты в рамках дизайн-системы должны восприниматься как единое целое. По аналогии, и drag-and-drop взаимодействия в интерфейсе должны быть согласованы.
Дизайн-система — это не только согласованные элементы интерфейса. Процессы взаимодействия также должны быть согласованы.
Разбор кейса
Сейчас я расскажу вам, как разрабатывала drag-and-drop паттерны для дизайн системы Clarity (VMware). Clarity — дизайн система с открытым кодом, так что ею пользуются все желающие, а не только работники VMware.
Нашим пользователям нужна была функция drag-and-drop для некоторых компонентов интерфейса: древовидное меню, таблицы данных и карточки. Передо мной стояла задача — создать единый опыт взаимодействия по всем сценариям, связанным с drag-and-drop:
Сценарии взаимодействия с drag-and-drop:
- Изменять порядок и уровень вложенности элементов дерева
- Изменять порядок колонок в таблице данных
- Изменять порядок рядов в таблице данных
- Перетаскивать элементы между древовидным меню и таблицей данных
- Упорядочивать и объединять карточки
Когда в интерфейсе большое количество данных (как раз случай VMware), без drag-and-drop не обойтись — он упрощает работу со сложными и массивными объемами информации.
Создаем библиотеку аффордансов
Для начала я создала небольшую библиотеку простых, но эффективных дизайн-аффордансов — свойств, которые будут обозначать drag-and-drop и связывать воедино этапы перетаскивания объектов. Когда появятся новые сценарии использования drag-and-drop, мы сможем применить к ним разработанные аффордансы.
Если вы с командой как раз создаете дизайн-систему, эта статья поможет вам при разработке ваших собственных drag-and-drop паттернов.
1. Лиловый цвет
Используйте для обозначения drag-and-drop взаимодействий определенный цвет, который не задействован в вашем дизайне. Не стоит использовать цвета, которые имеют определенное значение в дизайне (например, красный ассоциируется с разрушительными действиями).
Для обозначения drag-and-drop мы выбрали лиловый. В Clarity он не является основным цветом, так что у пользователей он будет ассоциироваться только с drag-and-drop. Мы намеренно отказались от синего (обычно для drag-and-drop используют его), потому что в Clarity синие кнопки и другие кликабельные элементы.
2. Стили состояний
Определите стили для разных состояний перетаскиваемого элемента. Четко пропишите, как должен выглядеть элемент, когда пользователь его захватывает, перетаскивает и отпускает.
В Clarity к перетаскиваемому элементу применяются такие стили:
Благодаря небольшой тени создается впечатление, что элемент на самом деле перемещается над страницей.
Еще одно состояние, которое мы добавили — это исходное местоположение элемента на странице, которое мы называем “предыдущим положением”.
Это напоминает пользователю, где перетаскиваемый элемент находился до этого.
Имейте в виду: мы не будем учитывать “предыдущее положение” при создании эффекта естественного движения (когда все окружающие элементы сдвигаются, уступая место перетаскиваемому объекту).
3. Системные курсоры
Системные курсоры подсказывают, что элемент можно перетаскивать. Это может показаться мелочью, но так пользователям гораздо проще обнаружить функции drag-and-drop в интерфейсе.
Для маков мы используем курсоры захвата (открытая ручка Микки Мауса) и захваченного состояния (зажатая ручка Микки Мауса). Курсор захвата появляется при наведении мыши на элемент, который можно перетаскивать. Непосредственно при перетаскивании появляется курсор захваченного состояния. После перетаскивания пользователи снова будут видеть курсор захвата. Если перетаскиваемый объект нельзя перетащить в определенную область интерфейса, то при наведении на эту область курсор будет в недоступном состоянии.
Для Windows мы используем курсор перемещения (перекрещенные стрелки). Этот курсор появляется при наведении на объект, который можно перетаскивать, а также в процессе перетаскивания. Опять же, если пользователь попытается “бросить” объект в недоступную область, курсор будет в недоступном состоянии.
4. Место назначения объекта
Определите паттерн для обозначения мест назначения — областей, куда можно “бросить” захваченный объект. По аналогии со стилями, нужно четко прописать, как должны выглядеть места назначения.
Поскольку в нашем случае пользователи будут менять объекты местами посредством drag-and-drop, мы обозначаем место назначения объекта линией.
Мы также добавили небольшой кружок с левого края линии, чтобы она не выглядела как обычная черта или граница. Это важная деталь — особенно для пользователей, которые плохо различают цвета. Если линию местоположения объекта выделить только цветом, эти пользователи могут ее не заметить.
Аффордансы, которые зависят от ситуации
Единственное, что зависит от ситуации — это отображать маркер перетаскивания или нет. Маркеры перетаскивания — это небольшие иконки, которые показывают, что элемент можно перетаскивать. В интерфейсах Gmail в качестве маркера используют иконку из 12 точек, а мы выбрали иконку из 6 точек:
Когда маркер перетаскивания нужно отображать, а когда — нет? Это зависит от контекста. Если drag-and-drop доступен для элемента, который обычно нельзя перетаскивать, то обязательно нужно добавить маркер перетаскивания. А если drag-and-drop взаимодействие и так подразумевается, можно обойтись и без маркеров.
К примеру, в древовидном меню мы обошлись без маркеров, потому что и так очевидно, что пункты меню можно менять местами. А вот на карточках есть маркеры — потому что не все карточки можно перетаскивать.
Есть много разных иконок для обозначения маркеров перетаскивания. Нужно выбрать одну — и использовать ее везде.
Одна большая drag-and-drop семья
Благодаря этим стандартам можно добиться согласованности между разными сценариями использования drag-and-drop.
Здесь вы можете посмотреть все сценарии использования drag-and-drop, о которых я рассказывала.
Команда Clarity только начинает процесс разработки для всех этих drag-and-drop паттернов, начиная с упорядочивания колонок в таблице данных. Можете следить за процессом разработки на GitHub.
Источники
- Удивительная статья Алекса Реардона стала моей библией по drag-and-drop
- Библиотека доступных drag-and-drop паттернов Salesforce
Если вам понравилась статья и перевод, дайте нам знать — нажмите 👏 (можно “хлопать” несколько раз!)
А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Нас можно найти в Facebook: Ольга Жолудова и Ринат Шайхутдинов.
Мобильное приложение «Заметки о психике» | Mental Notes
Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.
Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
