Выпадающие списки являются одним из важнейших инструментов UX-дизайна, особенно, в руках толковых специалистов. Правда, если таких списков много или они выполнены неумело, это может лишь испортить юзабилити и помешать пользователям. В этом материале говорим о пяти важных моментах, на которые стоит обратить внимание при добавлении выпадающих списков на сайт или в приложение.
1. Функциональное состояние
Поля со списками должны, подобно кнопкам, реагировать на действия пользователя, показывая, что готовы (или не готовы) к взаимодействию. Среди ключевых «реакций» можно выделить такие:
• затемнение поля, которое недоступно для взаимодействия;
• подсвечивание поля, готового к взаимодействию, при наведении курсора;
• выделение пункта из списка при наведении курсора;
• схлопывание списка после выбора, отображение выбранного пункта в поле;
• красная подсветка поля с ошибкой ввода.
2. От 5 до 10 вариантов выбора
Практика показывает, что оптимальное количество пунктов в выпадающем списке – от пяти до десяти. Если вариантов меньше пяти, есть смысл заменить их на радиокнопки или флажки. Если же их больше десяти, список становится слишком громоздким и его неудобно прокручивать, поэтому у пользователя могут возникнуть трудности. Хорошая альтернатива длинному выпадающему списку – поле с автозаполнением. Например, если пользователь должен указать страну проживания, не стоит давать ему список из всех стран мира. Лучше предложить ему самому начать вводить название страны, а после ввода первой буквы показать страны, которые на нее начинаются.
3. Изображения
Выпадающий список – это о тексте. Да, есть примеры того, что в список можно удачно вставить и изображения. Но таких примеров слишком мало. Поэтому, чтобы все же решиться использовать в списке иллюстрации, нужно иметь достаточно веские причины.
4. Название списка
Выпадающий список не должен перекрывать собой название поля, в котором он открылся. Иначе пользователь может запутаться и выбрать не то, что нужно. Например, при онлайн-покупке билетов на самолет пользователь указывает в отдельных полях пункты отправления и прибытия. Если названия этих полей будут скрыты, можно запросто их перепутать и купить билет в обратную сторону.
5. Календарь
Если нужно указать дату, то логично использовать для этого выпадающий календарь. Но только если эта дата приходится на текущий год. А вот дату рождения гораздо удобнее вводить вручную. Ведь мало кому понравится листать даже очень удобный календарь на несколько десятков лет назад вместо того, чтобы быстро ввести нужную дату с помощью клавиатуры.
Похожие материалы:
Форма входа и регистрации на сайте: советы веб-дизайнеру
Кнопка, на которую нажмут: 5 дизайн-приемов по созданию CTA
Что нужно знать о UX-дизайне кнопок на сайте?
6 бесплатных инструментов для основательного UX-тестирования
Загрузка...