Фильтры на примере Skyscanner и Aviasales

Skyscanner: доступно в Google Play
Aviasales: доступно в Google Play

В этой статье я рассматриваю удобные и правильные решения для фильтров на примере приложений Skyscanner и Aviasales. Приложения предназначены для поиска авиабилетов. Я запускаю их на планшете.

Фильтры Skyscanner реализованы правильно с точки зрения юзабилити, а фильтры Aviasales содержат недоработки.

Skyscanner

Базовые вопросы о фильтрах, на мой взгляд, следующие:

• Панель фильтров легко или всегда доступна?
• Текущее состояние фильтров отображено на экране?
• В любой момент можно отменить фильтры?

В Skyscanner ответ на эти вопросы «Да».

• Да, панель фильтров отображается внизу экрана
• Да, активные фильтры отмечены галочками
• Да, кнопка отмены фильтров находится рядом на панели.

Подчеркиваю элегантное решение по отображению текущего состояния фильтра:

• Зеленая «Галочка» для активного фильтра – это заметный, но не привлекающий лишнего внимания способ.

При нажатии на иконку фильтра открывается определенный раздел фильтра.

Я выделила следующие вопросы о разделах фильтра:

• Насколько логично фильтр разбит на разделы?
• Насколько легко ориентироваться и перемещаться между разделами фильтра?

Слой с параметрами фильтров

• Фильтр разбит на пять небольших разделов. Каждый раз отображается только один раздел фильтра, поэтому фильтр не перегружает экран информацией, занимает не очень много места и воспринимается простым в управлении.
• При выборе одного раздела фильтра легко переключиться на другой раздел, так как настройки фильтров находятся в соседних вкладках.
• Кнопка «SAVE» находится не в самом удобном месте. Пользователь просматривает сверху вниз слой с выбором параметров, а затем он вынужден вернуться наверх, чтобы сохранить. В момент, когда пользователь нажимает на «SAVE», он закрывает рукой слой с выбором параметров.

Aviasales

Чтобы воспользоваться дополнительными опциями (фильтр, сортировка), нужно нажать на кнопку в левом нижнем углу, из которой всплывет кнопка фильтра. На мой взгляд, такой сложный вызов фильтра и невидимость его на экране – это основная проблема фильтра в Aviasales.

Вспоминая вопросы выше, ответ будет:

• Нет, панель фильтров скрыта. Чтобы открыть фильтр, нужно сначала нажать на специальную кнопку опций, и затем выбрать появившуюся кнопку «Фильтры». Это уменьшает доступность фильтра.
• Нет, текущее состояние фильтра не отображено. Если какие-то из фильтров применены, пользователь этого не увидит. Поэтому пользователь может забыть, какие именно фильтры он применил или что он вообще использует фильтры.
• Нет, чтобы отменить фильтры, нужно добраться до скрытой панели фильтров и на ней найти кнопку отмены.

Рассмотрю реализацию разделов фильтра. При нажатии на иконку фильтра, справа открывается панель фильтров. Все разделы фильтра отображены в виде списка.
Это решение имеет недостатки по сравнению с решением Skyscanner «отображать разделы во вкладках».

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

Рассмотрю отдельные элементы фильтра:

• [1] В приложении есть фильтр «Время прибытия», который редко используется. Обычно фильтра «Время отправления» достаточно. Лишний фильтр занимает лишнее пространство.
  При этом фильтр «Время прибытия» не согласован с фильтром «Время отправления». Пользователь может ввести утреннее время отправления и вечернее время прибытия и получить нулевой результат.
• [2] Слайдер времени перемещается с шагом в 1 минуту, поэтому им неудобно пользоваться. Аналогичный слайдер в Skyscanner позволяет двигать ползунок с шагом в 1 час. Пользователю достаточно точности в 1 час, и управлять таким слайдером намного проще.
• [3] В фильтре «Время отправления» присутствуют кнопки «Утро», «День», «Вечер». Они позволяют быстрее выбрать промежуток времени.
• [4] Некоторые параметры фильтра правильнее делать в виде чекбоксов, а не слайдеров, например, «Количество пересадок».
• [5] При выборе параметров фильтра в реальном времени отображается количество доступных рейсов.
• [6] Я вижу несогласованность фильтров. Если выбрано 0 пересадок, в фильтре все равно отображается параметр «Длительность пересадок» и «Аэропорты пересадок». Эти ненужные фильтры занимают место и усложняют общее восприятие фильтров. В примере отображается 41 аэропорт вместо 6!

Несогласованность фильтров о пересадках в Aviasales

 

Хорошие решения на примере Skyscanner: фильтры легко доступны и легко могут быть отменены. Текущее состояние активности фильтров отображается на экране. Фильтры разбиты на небольшие разделы (вкладки), которыми удобно пользоваться и между которыми можно быстро перемещаться. Нет лишних фильтров, для каждого фильтра выбрано правильное представление (чекбоксы или слайдеры).

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

Я не говорю, что «правильное решение» фильтров от Skyscanner подойдет любому приложению или сайту. Но эти рассуждения могут быть полезными при реализации Вашего фильтра!

Связанные статьи

Эмоции против простоты и эффективности

Эта статья о первых 2 минутах работы со Skyscanner и Aviasales. О том, что эмоции перевешивают простой лаконичный дизайн.