У нас есть сайт, основанный на поиске, который имеет быстрый поиск по имени, подробный поиск по имени, групповой раскрывающийся список и поиск по адресу и/или почтовому индексу. Однако ниже находятся 4 текстовых поля, 2 раскрывающихся списка, 4 флажка и 5 переключателей для расширенных параметров поиска.

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

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

1
Cody Brantley 9 Янв 2016 в 06:58

1 ответ

Лучший ответ

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

Чтобы найти баланс между простотой и функциональностью, вот несколько советов:

Скрыть сложность

Об этом лучше всего говорит из Smashing Magazine:

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

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

mockup

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

Организуйте информацию в группы

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

mockup

загрузить исходный код bmml

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

Упростить выбор параметров

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

mockup

загрузить исходный код bmml

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

3
Cody Brantley 9 Янв 2016 в 09:23