У меня есть список элементов как часть веб-приложения. Вопрос в том, как пользователь может манипулировать порядком элементов в списке (не порядком сортировки списка). Типичный способ - использовать кнопки со стрелками для перемещения элементов вверх или вниз. Другой способ - перетаскивание.
Но есть ли другие способы для пользовательского интерфейса для переупорядочения списков?
Есть два других метода сортировки (помимо тех, которые вы упомянули), которые я видел, которые работают очень хорошо.
Нажмите для перемещения
Метод, используемый для упорядочивания элементов в Gallery, веб-фотоальбом работает очень хорошо для заказа фотографий, и он должен работать так же хорошо для любого набора, который может быть представлен как отсортированная группа интерактивных элементов:
Это немного проще в использовании, чем drag-n-drop, так как требует меньшей ловкости, и вам не нужно удерживать кнопку мыши, пока вы выясняете, где вы хотите "отбросить" элемент.
Этот метод может быть легко расширен, чтобы можно было выбрать несколько элементов (с помощью щелчка по смену или аналогичные), которые затем могут быть помещены в новую позицию таким же образом.
Предоставить номера заказов
Используется Netflix и некоторыми внутренними приложениями, с которыми я работал. Это лучше всего работает, если у ваших пользователей есть конкретное представление о том, каким должен быть числовой порядок (используется при работе со списками инструкций в нашем внутреннем приложении).
Изменить: Несколько дополнительных мыслей о Drag-and-Drop. Возможно, вы использовали их раньше или не, но есть несколько вещей, которые могут сделать перетаскивание более прощающим и более простым в использовании:
Мы обнаружили, что перетаскивание может быть интуитивно понятным для нетехнических людей. Мы исследовали Up Down Arrow, которая работает, но также может быть громоздкой, поскольку вам нужно постоянно переключаться вверх и вниз, и это приводит к большому трафику.
Еще одна парадигма, которую мы изучили, - это кнопка "Переместить", поэтому каждый элемент в списке имеет кнопку "Переместить элемент", когда вы нажимаете на нее, новые кнопки добавляются до и после каждого элемента в списке, чтобы вы могли перемещать элемент в любое место.
Это хорошо работает, когда каждый элемент в списке занимает много места, если каждый элемент списка представляет собой только одну строку, это может привести к загроможденному интерфейсу. В нашем случае каждый элемент составлял полдюжины строк текста или больше. Мы также добавляем кнопку здесь здесь до/после каждого элемента, чтобы разрешить вставку.
Survey Monkey также использует эту парадигму и вдохновляет на то, что мы делаем.
Некоторые мысли - В основном, идеи, а не реализация, хотя...
1. Предоставляйте стрелки вверх и вниз и перетаскивайте мышью, а также более популярный монитор, какой тип пользователей использует и т.д., а затем откройте его после того, как у вас есть данные
2 - добавьте "случайную" кнопку, которая генерирует порядок случайным образом - может быть бесполезной, может быть весело в зависимости от вашего приложения.
3 - добавьте поле "порядок отображения" рядом с каждым элементом и разрешите пользователю манипулировать им (но убедитесь, что у вас есть код для автоматического обновления остальной части номера при изменении). Я лично считаю, что это может быть очень запутанным, но для некоторых пользователей он может работать
4 - Вместо перетаскивания на место, перетащите пользователей в новый список
5 - Для очень простой версии установите флажок "Избранное", а затем список сначала отображает фавориты (в алфавитном порядке или что-то еще)
6 - иметь группы - вы назначаете номер группы для элемента, сначала появляются все группы, а затем группа 2 и т.д.
Надеюсь, что этот случайный беспорядок был полезен, если я придумаю что-нибудь еще, я вернусь...
Вы можете поэкспериментировать с drag-and-drop, используя примеры jQuery UI Sortables. Чтобы сделать это очевидным для нетехнических или новых пользователей, вы можете использовать визуальные подсказки, такие как ручки или стрелки, и, возможно, подсказку при наведении, чтобы предложить перетащить элемент.
Вы даже можете представить анимированный gif, демонстрирующий жест.
Как только пользователь узнает, как это сделать, я думаю, что это самый простой способ упорядочения списка.
Другой способ - предоставить небольшой текстовый ввод рядом с каждым элементом, поэтому пользователь может ввести числовое упорядочение; затем они нажимают кнопку, чтобы переупорядочить все сразу. (Я видел это только на сайтах, на которых хранится порядок элементов, таких как очередь Netflix или ссылки Livejournal.)
1) Вариант Click to Move предполагает наличие отдельного целевого списка, в котором пользователь выбирает слот, в который будет перемещаться их элемент, затем нажимает на исходный элемент, чтобы переместить его.
Например, на следующей диаграмме пользователь уже поместил 'E' во главе переупорядоченного списка и выбрал третий слот для своего следующего выбора. Следующим шагом будет выбор того, какой элемент из старого списка перейдет в третий слот в новом списке. (Строка звездочек - слабая попытка показать, что слот три выделен или выбран.)
old new
----- -----
| A | | E |
| D | | |
| C | |*****|
| | | |
| B | | |
----- -----
Щелчок по элементу в новом списке выбирает его и выделяет исходный слот в старом списке, который теперь является целью. Щелчок по элементу второй раз возвращает его в этот оригинальный слот.
В новом списке также должны отображаться индикаторы определенного типа, чтобы показать, что у него есть выбираемые регионы, возможно ненавязчивые (с низкой непрозрачностью) пронумерованные кнопки в своих слотах или какой-либо другой информативный доступ.
2) Другим подходом было бы позволить пользователям рисовать линии между исходными и желаемыми позициями.
Независимо от выбранного метода, процесс не должен быть частым: нет причин, по которым все это не может быть сделано на стороне клиента (с возможностью сохранения и фиксации изменений на сервере).
Сортировка, нажимая на заголовки, очень популярна. Возможно, он рассматривается только как пересмотр взгляда на фактический список.
Реализовать функцию копирования/вставки? Это означает, что вы можете взять элемент из списка, а затем выбрать другой элемент и нажать "вставить" или CTRL + V. Это довольно интуитивно понятно и позволяет легко манипулировать большими списками.
Вы можете легко реализовать множественный выбор, чтобы переместить большой блок соседних элементов.
Сетевой трафик будет низким (только один или два запроса).
Вам нужно убедиться, что "вставка" согласована. То есть вставка всегда вставляет над выбранным элементом.
Взгляните на Checkvist для большего вдохновения.
Вы также можете использовать клавиши со стрелками для перемещения вверх и вниз.
Я действительно думаю, что iphone/itouch делает это очень хорошо при перемещении значков приложений.
Если вы еще не видели это, смотрите здесь: http://www.youtube.com/watch?v=qnXoGnUU6uI
"Встряхивающие" значки - очень хорошая визуальная подсказка, что что-то подвижное/перетаскиваемое.
Поэтому я бы предложил этот подход с перетаскиванием. Нажатие и удерживание элемента может привести его в режим "подвижный", и это будет означать, что он трясет (или несколько проще кодировать визуальную метку). Тогда перетаскивание будет работать обычным способом.
Реализация этого в javascript - это, конечно, проблема...
Еще одна вещь, о которой нужно подумать - большинство людей ошибается в том, что объединяет юзабилити с обучаемостью. Подумайте, кто такие пользователи этого приложения (будут ли они регулярно использовать его и будут ли преподавать, как его использовать, или являются ли они общедоступными пользователями Интернета, которые могут использовать его нечасто и не учат тому, как его использовать) - это может дать вам другой ответ к какому решению должно быть.
Для меня лучше всего использовать перетаскивание элементов списка (т.е. внутри самого списка).
Не только вы можете дать своим пользователям сразу понять, как будет выглядеть их список (список реорганизуется на их глазах), но им также очень легко понять движущийся механизм. И это самый короткий способ упорядочить список пользователей в кратчайшем количестве ходов.
Кстати, предвидя, что список может быть длиннее нескольких элементов, наряду с методом DnD вы можете предоставить асинхронный способ упорядочения списка: дать пользователю возможность присваивать порядковый номер каждой записи, а затем щелкнуть на кнопке "Заказ". Обращаясь с умным и правильным способом ввода пользователем, это может привести к ускорению для более длительного редактирования списков.
Я думал о "Move selected to here":
Краевые случаи здесь, когда элементы должны быть перемещены в любой конец списка. Один из способов решить это - переместить все выбранные объекты до цели и зарезервировать специальную кнопку/значок в конце, чтобы переместить выделение там.
Вы можете отображать кнопки "Вверх" и "Удалить" только так, как это делает Google для SearchWiki. Сейчас у большинства людей есть хоть какой-то опыт. Большинство людей беспокоится только о том, чтобы "повысить" их выбор. Если им не нравится что-то и хотят понизить его, удаление из списка с помощью вышеупомянутой кнопки "Удалить" будет проще для них
Вы можете показать наложение при наведении на элемент. Этот оверлей показывает вам 4 стрелки (n/e/s/w), и вы можете щелкнуть и переместить элемент соответственно.
Если вы пытаетесь использовать другие элементы в сетке, например, функции facebook и picasaweb для группировки фотографий, то это единственный способ справиться с этим
если у вас было по 3 столбца со списком элементов, нажатие на любой из элементов переместило бы элемент слева или справа, средний столбец мог показывать опцию слева или справа. вы все равно можете позволить перетаскивать или сортировать, используя типичные функции для этого.