- Статьи
- 3 мин на чтение
- 14
Как оптимизировать поле выбора со 147 вариантами
Скажем «Нет» прокрутке в меню
Представьте, что вы заполняете форму и продвигаетесь вперёд. Но внезапно натыкаетесь на поле выбора с сотнями вариантов. Вам приходится прокручивать меню, чтобы найти и выбрать правильный.
Вы просматриваете и прокручиваете меню, но не знаете, где находится нужный вам вариант — в начале, в середине или в конце списка. В итоге вы находите его, но вы потратили на это больше времени, чем на заполнение других полей. Теперь у вас появились сомнения относительно того, сможете ли вы закончить заполнение формы.
Многие пользователи сталкиваются с подобной проблемой, когда видят длинные поля выбора. Будучи UX-дизайнером, вам следует сократить время и усилия, необходимые для выбора нужного варианта. Стандартное меню здесь не подойдёт.
Поиск в меню
В большинстве случаев пользователь знает, что он ищет. Единственная проблема — найти нужное в списке. Прокрутка меню и поиск в нём занимают много времени.
Поэтому необходимо сократить время прокрутки и внедрить в меню функцию поиска. Она значительно сузит список в зависимости от того, что пользователь будет вводить в поле поиска.
В поле выбора «Отрасль» (Industry) доступно 147 вариантов. Ввод одной буквы сокращает список и отображает варианты, которые начинаются с этой буквы. Чем больше пользователь печатает, тем короче становится список. Обратите внимание, как ввод буквы «С» сократил список со 147 вариантов до 15. Если человек введёт слово «Компьютер» (Computer), список сократится до пяти вариантов, и необходимость в прокрутке и поиске отпадёт.
Поиск в меню работает, потому что пользователь уже знает, что он ищет. Иначе он бы не понимал, что печатать в поле поиска. Поэтому применять поиск в меню следует только тогда, когда запрос пользователя известен.
Несмотря на то, что большинство людей знают, что они ищут, учитывайте вероятность того, что у некоторых могут возникнуть затруднения. Поэтому лучше отобразите варианты в алфавитном порядке, чтобы пользователям было проще ориентироваться в меню.
Кроме алфавитного порядка, сделайте самые распространённые варианты наиболее доступными и разместите их в верхней части меню. В примере ниже восемь отраслей с наибольшим процентом занятости расположены выше остальных. Это помогает большинству пользователей выбрать отрасль без необходимости прокрутки или ввода текста.
Режим по умолчанию
Необходимо убедиться, что изначально меню отображает достаточно вариантов, чтобы пользователь мог сразу увидеть больше, без чрезмерной прокрутки. На рабочем столе увеличьте длину меню, но оно должно помещаться в видимую область мобильного экрана и никогда не выходить за его пределы.
По мере раскрытия меню на поле поиска должен автоматически появляться фокус. Он позволяет пользователям начать набирать текст для поиска без необходимости кликать по полю ввода. Это предустановленное поведение убирает дополнительный шаг и позволяет быстрее искать и выбирать.
На мобильном устройстве при появлении фокуса клавиатура появится автоматически. Пользователь может скрыть её, нажав кнопку «Готово» (Done), чтобы выбрать вариант из меню. Тем не менее, поиск в меню должен всегда быть в приоритете, поскольку пользователь уже знает, что он ищет.
Когда люди вводят несуществующий запрос, нужно показать пустое состояние, чтобы они знали, что результаты не соответствуют их запросу. Достаточно будет написать в сообщении меню «Нет результатов. Введите новый запрос» (No results. Enter a new search).
Также в поле поиска полезно добавить кнопку для очистки неверного ввода в виде иконки «X». С мобильной клавиатуры сложно выделять и удалять текст, поэтому пользователи мобильных устройств высоко оценят эту функцию.
Чтобы оптимизировать любое объёмное поле выбора, внедрите функцию поиска в меню. Неважно, сколько у вас вариантов — 100 или 1000. Если пользователь знает, что он ищет, поиск варианта будет быстрее и удобнее прокрутки списка.
Перевод статьи Why You Should Never Split Text Field Inputs из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
