Как улучшить любой интерфейс: выпадающие списки

Прогресс не стоит на месте и все движется с космической скоростью. Интерфейсы не отстают и постепенно эволюционируют становясь сложней и одновременно удобней (но это уже разговор для отдельной статьи). Поэтому я бы хотел рассказать как можно улучшить большинство типовых интерфейсных элементов используя нехитрые техники.

Выпадающие списки

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

Правила использования и альтернативы

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

1. Не используйте выпадающие списки для маленьких списков.

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

Выбор руля в расширенном поиске на Авто E1.ru.

Попробуем поменять на радиобаттоны. Стало лучше, не правда ли?

2. Не используйте выпадающие списки для больших списков.

Выбор даты рождения на Хабре

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

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

Выбор даты в Бутстрапе совмещает текстовое поле и datepicker.

3. Используйте выпадающий список с вводом и автозаполнением.

Настоящим полезным и применимым выпадающим списком я считаю такой

Выпадающий список для выбора страны Вконтакте

Такой список позволяет выбрать самые популярные варианты парой кликов, отфильтровать нужную страну из списка и не вводить полное название вручную (как в случае с традиционным полем ввода).

4. Подставляйте по умолчанию самое частое значение.

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

Вывод

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

Если вам понравилась статья и интересна тема, то следите за моим твиттером, или посетите мой блог о дизайне и интерфейсах.