Выпадающие списки: руководство по использованию в дизайне
Стандартное решение, в котором нет никакого смысла
Проработав долгое время с пользовательскими интерфейсами и юзабилити (включая разработку форм ввода для пользователей), я пришел к выводу, что выпадающие списки почти всегда ухудшают опыт взаимодействия.
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
Выпадающие списки применяются, когда существует некий набор опций, из которого пользователь может выбрать какую-то одну. Суть та же, что и у радиокнопки (radio button). Единственная причина предпочесть выпадающий список радиокнопке — это его компактность. Но, как я уже упоминал, нам больше не нужно экономить вертикальное пространство в веб.
У выпадающих списков есть огромная проблема: пользователь не видит предложенные ему опции с ходу. Вместо этого ему приходится кликнуть, чтобы открыть список, потом изучить опции и снова кликнуть, чтобы сделать выбор. Этот подход особенно плох, если ваша форма состоит в большинстве своем из полей ввода — ведь в таких случаях многие пользователи работают только с клавиатурой.
Ниже предлагаются некоторые альтернативы выпадающим спискам:
1) Заменить выпадающие списки радиокнопками
Вместо того, чтобы прятать опции за дополнительным кликом, выложите всю информацию напрямую. Так пользователь получит представление о возможных вариантах и сделает обдуманный выбор. Убедитесь, что по дизайну радиокнопок ясно, что предполагается единичный выбор.
2) Сделать переключатель, если опций только две
Если вы предлагаете пользователю только два варианта ответа, представьте выбор в виде переключателя. Причем по умолчанию должна быть включена наиболее распространенная опция.
Отличный пример такого подхода — это указание пола пользователя. При выпадающем списке каждый пользователь вынужден сделать 2 клика: открыть меню и сделать выбор. Если установлен переключатель и по умолчанию выбрано значение “женщина” (51% населения планеты — женщины), то кликнуть придется лишь 49% пользователей — и то только один раз. Разница просто огромна! А вот пример плохого подхода от Yahoo.com
3) Если опций много — используйте автозаполнение
Многие сходятся во мнении, что максимальное количество опций выпадающего списка составляет 15 (кто-то говорит, что 12, а кто-то — 16). Если опций будет больше, то пользователь запутается, и ему будет сложно сделать выбор.
Когда пользователь долго сканирует глазами список, он встает перед массой выборов. Мы же должны стремиться к тому, чтобы исключить столько опций, сколько возможно. Чем больше времени на раздумья мы сэкономим пользователю (фактически обдумывая часть информации за него), тем лучше.
Отличным примером этого является поле выбора страны. Использование выпадающих списков для выбора страны все еще является нормой, и это просто смешно. Год назад в Smashing Mag вышла отличная статья на эту тему: “Редизайн поля выбора страны”. Когда существует множество возможных вариантов ответа, всегда используйте автозаполнение — пусть работает машина, а не человек.
Так есть какие-то ситуации, в которых выпадающий список будет лучшим решением? Вообще-то да. Это те ситуации, когда опций столько, что радиокнопкой не обойдешься, и когда пользователи не знают, какие у них есть возможные варианты. Но такие ситуации бывают не часто, а даже если и случаются — все равно вам стоит подумать, как облегчить пользователю процесс выбора. Если хотите посмотреть классные примеры проектирования форм, вперед на Typeform. Они все делают правильно.
Ну и напоследок слегка не по теме (но не сказать нельзя): если поле необязательное, то его не должно быть в форме. Уберите все ненужное (как для процесса регистрации, так и для самого пользователя). Также это означает, что не нужно ставить * на обязательных полях. (И уж если пришлось включить в форму какие-то необязательные поля, помечайте их, а не наоборот).
Если вам понравилась статья и перевод, дайте нам знать — нажмите зеленую кнопку Recommend
И ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Нас можно найти в Facebook: Nancy Pong и Ринат Шайхутдинов.
Мобильное приложение «Заметки о психике» | Mental Notes
Подкидывает идеи как привлечь, удержать и направить внимание пользователя
Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
