Пользовательский интерфейс для изменения порядка элементов списка

Question

У меня есть список элементов в составе веб-приложения. Вопрос в том, как пользователь может управлять порядком элементов в списке (а не порядком сортировки списка). Типичный способ - использовать кнопки со стрелками для перемещения элементов вверх или вниз. Другой способ - перетаскивание.

Но есть ли другие способы для пользовательского интерфейса для переупорядочения списков?

Answer 1

Есть два других метода сортировки (кроме тех, которые вы упомянули), которые я видел, которые работают довольно хорошо.

Нажмите для перемещения

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

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

Это немного проще в использовании, чем drag-n-drop, так как для этого требуется меньше ловкости, и вам не нужно удерживать кнопку мыши, пока вы выясняете, куда вы хотите "уронить" элемент.

Этот метод может быть легко расширен, чтобы разрешить выбор нескольких элементов (с помощью Shift-Click или аналогичных), которые затем могут быть помещены в новую позицию таким же образом.

Укажите номера заказа

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

• Представьте свой список предметов по одному в строке.
• Укажите текстовое поле для ввода рядом с каждым элементом, где отображается номер заказа, начиная с 1.
• Пользователь изменяет порядковые номера в текстовых полях по желанию.
• Если нескольким товарам присвоен одинаковый номер заказа, они размещаются рядом друг с другом.
• Предоставьте кнопку, чтобы "применить" сортировку в JavaScript, чтобы пользователю не приходилось отправлять всю страницу, чтобы увидеть перестроенный список. Это облегчает работу с приращениями.

Редактировать: Несколько дополнительных мыслей о Drag-and-Drop . Возможно, вы использовали их раньше или нет, но есть несколько вещей, которые могут сделать перетаскивание более удобным и простым в использовании:

• Выделите область, где элемент появится при падении. Например, покажите видную горизонтальную линию между двумя существующими элементами, куда элемент будет вставлен, если он будет отброшен.
• Приведите в движение перетаскиваемый элемент при его перетаскивании, чтобы было понятно, что перемещается, вместо использования обычного «перетаскивающего» курсора. Это работает лучше всего, если перетаскиваемые объекты по-прежнему разборчивы, если они показаны друг над другом с прозрачностью.
• Убедитесь, что целевые области, где можно перетащить перетаскиваемый объект, достаточно велики. Большие области могут быть полезны для людей, которые испытывают проблемы с необходимой координацией.

Answer 2

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

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

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

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

Answer 3

Вы можете поэкспериментировать с перетаскиванием, используя примеры jQuery UI Sortables . Чтобы сделать это очевидным для нетехнических или новых пользователей, вы можете использовать визуальные подсказки, такие как маркеры или стрелки, и, возможно, всплывающую подсказку, чтобы предложить перетащить элемент.

Вы можете даже предоставить анимированный GIF-файл, демонстрирующий жест.

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

Answer 4

Несколько мыслей - все же больше об идеях, чем об окончании реализации ...

1 - Укажите стрелки вверх и вниз, а также перетаскивайте и наблюдайте за более популярным типом пользователей, типом пользователей и т. Д., А затем адаптируйте их, как только у вас появятся данные

2 - Добавить «случайную» кнопку, которая генерирует порядок случайным образом - может быть бесполезно, может быть весело в зависимости от вашего приложения

3 - Добавить поле «Порядок отображения» рядом с каждым элементом и позволить пользователю манипулировать им (но убедитесь, что у вас есть какой-то код для автоматического обновления остальных чисел при изменении), лично я думаю, что это может быть очень запутанным, но для некоторых пользователей это может работать

4 - Вместо перетаскивания мышью пользователи перетаскивают в новый список

5 - Для очень простой версии установите флажок «избранное», а затем в списке просто сначала отобразите избранное (в алфавитном порядке или что-то в этом роде)

6 - Есть группы - вы присваиваете номер группы элементу, сначала появляются все группы, затем группа 2 и т. Д.

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

Answer 5

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

Например, на следующей диаграмме пользователь уже поставил «E» в начале переупорядоченного списка и выбрал слот три для своего следующего выбора. Следующим шагом будет выбор элемента из старого списка, который будет добавлен в третий слот нового списка. (Ряд звездочек - слабая попытка показать, что слот три выделен или выделен.)

  old       new
 -----     -----
|  A  |   |  E  |
|  D  |   |     |
|  C  |   |*****|
|     |   |     |
|  B  |   |     |
 -----     -----

Нажатие на элемент в списке new выбирает его и выделяет его оригинальный слот в списке old , который теперь является целью. Повторное нажатие на предмет возвращает его в этот оригинальный слот.

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

2) Другой подход - позволить пользователям рисовать линии между исходной и желаемой позициями.

Какой бы метод ни был выбран, процесс не должен быть болтливым: нет никаких причин, по которым все это нельзя было бы выполнить на стороне клиента (с возможностью сохранять и фиксировать изменения на сервере).

Answer 6

Другой способ - ввести небольшой текст рядом с каждым элементом, чтобы пользователь мог самостоятельно ввести числовой порядок; затем они нажимают кнопку, чтобы изменить порядок сразу. (Я видел это только на сайтах, которые хранят порядок элементов, таких как очередь Netflix или ссылки Livejournal.)

Answer 7

Реализовать функцию стиля копирования / вставки? Это будет означать, что вы можете удалить элемент из списка, а затем выбрать другой элемент и нажать «вставить» или сочетание клавиш CTRL + V. Это довольно интуитивно понятно и позволяет легко манипулировать большими списками.

Вы можете легко реализовать множественный выбор для перемещения большого блока смежных предметов.

Сетевой трафик будет низким (только один или два запроса).

Вы должны убедиться, что «паста» соответствует. То есть вставка всегда вставляет над выбранным элементом.

Взгляните на Checkvist для большего вдохновения.

Answer 8

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

Answer 9

Я действительно думаю, что iphone / itouch делает это очень хорошо при перемещении значков приложений.

Если вы еще не видели, посмотрите здесь: http://www.youtube.com/watch?v=qnXoGnUU6uI

«Встряхивающие» значки являются очень хорошим визуальным признаком того, что что-то можно перемещать / перетаскивать.

Так что я бы предложил этот подход с перетаскиванием капли. Нажатие и удерживание элемента может перевести его в «режим перемещения», и на это будет указывать его встряхивание (или более простое кодирование визуальной подсказки). Тогда перетаскивание будет работать в обычном режиме.

Реализация этого в javascript, конечно, является проблемой ...

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

Answer 10

Вы также можете использовать клавиши со стрелками для перемещения вверх и вниз.