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

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

Нажмите, чтобы переместить

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Взгляните на Checkvist, чтобы получить больше вдохновения.

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

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

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

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

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

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

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

Для меня выполнение перетаскивания элементов списка на месте (т.е. внутри самого списка) - лучший подход.

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

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

Я думал о «Переместить выбранное сюда»:

1. Разрешить выбор всех элементов с помощью флажков
2. Пусть у всех элементов будет кнопка или значок, означающий «Переместить выделенное сюда»
3. При нажатии кнопки «Переместить выбранное сюда» все выбранные элементы перемещаются в этот элемент в существующем порядке.

Крайние случаи здесь - это когда элементы следует переместить в любой конец списка. Один из способов решить эту проблему - переместить все выбранные элементы перед целью и зарезервировать специальную кнопку / значок в конце, чтобы переместить выбор туда.

Я обнаружил, что следующее является самым быстрым способом указать порядок элементов независимо от размера списка:

1) Если пользователь хочет установить порядок элементов списка / сетки, он нажимает кнопку «Изменить порядок».

2) Откроется диалоговое окно изменения порядка, которое можно использовать с любым списком или сеткой.

3) В диалоговом окне все элементы показаны в их текущем порядке в списке слева. Справа пустой список.

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

5) Затем пользователь может применить новый заказ или отменить. Применение порядка приводит к тому, что в поле «порядок отображения» в данных устанавливается окончательный порядок элементов в правом списке. Вы можете решить, активна ли кнопка «Применить», только когда левый список пуст.

6) В диалоговом окне заказа также доступны следующие элементы управления:

а) Кнопка для перемещения всех элементов из левого списка в правый список, сохраняя порядок их расположения.

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

c) Кнопка для сортировки правого списка по алфавиту (или по дате, или по цифрам, в зависимости от ключевого поля)

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

e) Столбец порядкового номера в правом списке, который при редактировании перемещает элемент в эту позицию.

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

Я использовал этот подход много лет, и он оказался очень эффективным.

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

Вы можете отображать оверлей при наведении курсора на элемент. Это наложение показывает вам 4 стрелки (n / e / s / w), и вы можете щелкнуть и переместить элемент соответствующим образом.

Если вы пытаетесь разместить элементы в сетке, например функции группировки фотографий в facebook и picasaweb, то это единственный способ справиться с этим.

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