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

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

Вот что я сделал до сих пор:

enter image description here

Количество указано в скобках.

Пользователя в основном интересует вес товара.

В большинстве случаев ему нужно от от 1 до 10 различных предметов и от 1 до 6 единиц на предмет.

Я не на 100% уверен в своем пользовательском интерфейсе. Есть ли у вас какие-либо предложения/шаблоны для управления такой функцией?

2
Alex 8 Янв 2016 в 17:26
Я думаю, что вы должны построить человека и карту пути для этого. Как добраться до этой точки в путешествии? Что они делают после? Например, что пользователь привносит в ваше приложение? Список? Есть ли у него каталожные номера?
 – 
Joshua Lowry
8 Янв 2016 в 19:13
Вы говорите, что он хочет использовать планшет, а как насчет сканирования штрих-кода?
 – 
Joshua Lowry
8 Янв 2016 в 19:14

2 ответа

Лучший ответ

ИМХО, ваш шаблон для переключения между столбцами совсем не плохой UX, поэтому я думаю, что он может работать в самый раз.

Тем не менее, некоторые наблюдения:

  • Другой вариант — удалить кнопки и использовать перетаскивание. Тогда вам не понадобятся кнопки (более чистый интерфейс), и они будут особенно полезны, если вы хотите предложить пользователям способ перемещения элементов в определенное место в списке (вы не можете сделать это только с помощью кнопок).
  • Поскольку вы говорите, что вес является важной частью информации, будет хорошо держать его не так далеко от предмета, на который они ссылаются. На маленьких экранах это не будет иметь большого значения, но на средних или больших экранах это будет ущерб UX (слишком много пробелов между связанной информацией).
  • Если список будет слишком длинным, было бы неплохо добавить вверху какой-нибудь фильтр, чтобы быстрее находить элементы.
  • По крайней мере, для меня будет более интуитивно понятно добавлять элементы слева направо, а не справа налево, поскольку справа обычно находятся «результаты», но я действительно не знаю вашу модель, поэтому не принимайте этот комментарий. как забота.
  • Учитывайте алфавитный порядок в списках, чтобы упростить поиск.
  • Если пользователи собираются добавить много элементов в инвентарь за один и тот же сеанс, я рассмотрю возможность изменения шаблона на такой, который позволяет выполнять множественный выбор, а затем добавить «массовый».
  • Также вы можете просто использовать флажки! Но недостаток здесь в том, что выбранные элементы немного «теряются» в списке.

mockup

загрузить исходный код bmml — Каркасы, созданные с помощью Мокапы Balsamiq

  • Вы также можете выбрать часто используемый шаблон для этой ситуации. введите здесь описание изображения
1
Alejandro Veltri 8 Янв 2016 в 19:02

Включите перетаскивание, если это возможно, но не полагайтесь на него полностью. Позвольте людям выбрать несколько в списке, а затем переместитесь, как в одном из примеров. Не только нажатием флажка, но нажатием полной строки. Добавление/удаление может быть представлено стрелками влево/вправо. Просто эти текстовые метки не являются простыми. Постоянно отмечайте вес. «3,15 и 3,00» против «3,15 и 3». Облегчает сканирование.

1
Alex Debkaliuk 9 Янв 2016 в 09:16
Спасибо. Действительно, вес будет легче читать с тем же форматом.
 – 
Alex
11 Янв 2016 в 12:01