ПлатформаОпубликовано Автор: Ахмад Дахлалла CEO Great Pro

5 принципов юзабилити выпадающих списков

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

1. Функциональное состояние

Поля со списками должны, подобно кнопкам, реагировать на действия пользователя, показывая, что готовы (или не готовы) к взаимодействию. Среди ключевых «реакций» можно выделить такие:

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

2. От 5 до 10 вариантов выбора

Практика показывает, что оптимальное количество пунктов в выпадающем списке – от пяти до десяти. Если вариантов меньше пяти, есть смысл заменить их на радиокнопки или флажки. Если же их больше десяти, список становится слишком громоздким и его неудобно прокручивать, поэтому у пользователя могут возникнуть трудности. Хорошая альтернатива длинному выпадающему списку – поле с автозаполнением. Например, если пользователь должен указать страну проживания, не стоит давать ему список из всех стран мира. Лучше предложить ему самому начать вводить название страны, а после ввода первой буквы показать страны, которые на нее начинаются.

3. Изображения

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

4. Название списка

Выпадающий список не должен перекрывать собой название поля, в котором он открылся. Иначе пользователь может запутаться и выбрать не то, что нужно. Например, при онлайн-покупке билетов на самолет пользователь указывает в отдельных полях пункты отправления и прибытия. Если названия этих полей будут скрыты, можно запросто их перепутать и купить билет в обратную сторону.

5. Календарь

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

 

Похожие материалы:

Форма входа и регистрации на сайте: советы веб-дизайнеру

Кнопка, на которую нажмут: 5 дизайн-приемов по созданию CTA

Что нужно знать о UX-дизайне кнопок на сайте?

6 бесплатных инструментов для основательного UX-тестирования

Юзабилити-х**билити: 6 мифов, в которые до сих пор верят

Поделиться
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (3 оценок, среднее: 5,00 из 5)
Загрузка...