Как стать автором
Обновить

Руководство по проектированию интерфейсов с Drag and Drop

Уровень сложностиСредний
Время на прочтение22 мин
Количество просмотров11K
Всего голосов 9: ↑9 и ↓0+9
Комментарии12

Комментарии 12

Мне никогда не нравился стиль drag and drop в Trello, бесит. Чем может быть обоснован их выбор?

Думаю, что ответ в том, что хоть разработчики Trello и взяли Drag and Drop за основу в своих интерфейсах, они сделали это очень давно (по меркам веба) — в 2011-ом году. Интерфейс Trello несколько менялся за это время, но основные подходы остались прежними. Им бы не помешало немного обновиться, хотя, с другой стороны, есть много современных альтернатив, которые выглядят и работают лучше :)

А что не так с drag and drop в Trello? По-моему, в Trello как раз все сделано очень просто и интуитивно.

Если карточка очень длинная, ее неудобно перетаскивать, в статье об этом написано, лучше если бы переносилось посередине карточки. Плюс в принципе не очень отзывчиво работает перенос в плане анимации, но это лично мое мнение.

Должен ли работать drag and drop строк в таблицах, когда настроена сортировка? Если да, то каким образом?

Спасибо за вопрос! Я так понимаю, когда сортировки нет, строки можно перетаскивать в любом порядке? Здесь важно — сохраняется ли пользовательская сортировка, когда выключена сортировка по конкретному полю? Наверное, логично, что да, так как зачем вообще тогда доступен drag and drop? Если пользовательская сортировка не сохраняется после перезагрузки страницы, весь результат перетаскиваний сбросится.

Думаю, что здесь самое логичное — это запретить перетаскивание, если включена сортировка по какому-то столбцу. Но тогда при выключении этой сортировки, нужно вернуть тот порядок строк, который пользователь установил в процессе всех своих перетаскиваний. Для этого стоит иметь отдельное поле в таблице в БД с порядком строк, обновлять его при перетаскиваниях и при выключенной сортировке всегда сортировать строки по этому полю.

Мне кажется, что в этой логике и содержится ответ — любое перетаскивание приводит к изменению порядка строк, а при включенной сортировке по какому-то столбцу этот порядок не должен влиять на сортировку.

Стоит так-же заметить, что при драг-н-дропе на мобилке пальцем закрываешь то, что перетаскиваешь, из из чего в начале перетаскивания непонятно что уже можно тащить, и в конце перетаскивания непонятно что уже можно отпускать, юзэр-икспириенс из приложения trello

Почему решили докопаться до трелло?

Имхо: лучше трелло пока ничего нет. Единственный сервис, где все работает плавно и интуитивно понятно, как и в случае с драг-н-дропом.

Я не докопался до трелло, а аргументированно указал на его недостатки. И сделал это как раз потому, что трелло является неким неформальными образцом для интерфейсов с Drag and Drop. Вот только если проанализировать его детально, можно увидеть, что некоторые решения в нём или устарели, или недостаточно продуманы.

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

Трелло не работает в России, хотя бы поэтому есть куча всего, что будет лучше. Например yougile.

А как в в DND обрабатываются исключения, например пользователь бросает неподдерживаемый формат файла или папку с файлами?

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

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

Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Истории