Разочаровывающие шаблоны проектирования: сломанные фильтры

Фильтры есть везде . Хотя мы часто думаем, что они появляются при бронировании авиабилетов или совершении покупок в Интернете, фильтры часто используются практически в каждом интерфейсе, который содержит более нескольких точек данных.

Однако трудно понять не только огромное количество данных; это сложность и отсутствие согласованности , которые обычно влекут за собой данные, которые требуют некоторой фильтрации — такой распространенный сценарий в сетках данных, корпоративных информационных панелях, реестрах отслеживания вакцин и общедоступных записей.

Проектирование для комфортного диапазона

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

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

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

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

Важно то, что этот ассортимент соответствует нашим ожиданиям:

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

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

Комфортный диапазон значительно варьируется от продукта к продукту. Подсказка к тому, где она находится, может быть выведена из того, насколько различны варианты на самом деле. В юзабилити-тестах мы видим, что люди без проблем изучают 20–30 видов транспортных средств, 40–50 видов кроссовок, 70–80 букетов цветов или даже листают 100–200 платежных квитанций. Тем не менее, они чувствуют себя совершенно ошеломленными, исследуя 15 различных типов шулеров или батареек AAA. Как правило, кажется, что чем больше различных опций, тем более комфортно мы чувствуем себя с немного большим набором опций.

Таким образом, главный вопрос заключается в том, как найти этот тонкий баланс, когда наш интерфейс помогает пользователям быстро получать достаточно результатов. Один из ответов на этот вопрос заключается в том, что звучит ужасно очевидно: устранить любые препятствия на пути пользователей к этому удобному диапазону. Однако это легче написать, чем сделать — особенно когда у вас есть десятки или даже сотни фильтров, которые должны быть доступны на мобильных устройствах, на настольных компьютерах и везде между ними.

Сложность фильтрации

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

Что ж, как оказалось, есть довольно много аспектов опыта, которые усложняют разработку фильтров:

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

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

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

Избегайте крошечных прокручиваемых панелей

Всего после нескольких сеансов юзабилити с клиентами, которые пытаются использовать фильтры на своих устройствах, можно заметить, что некоторые общие разочарования повторяются снова и снова. Один из самых раздражающих паттернов возникает из-за длинных разделов фильтров, содержащих десятки опций. Эти параметры часто спрятаны в крошечной прокручиваемой панели, отображающей 3–4 параметра за раз и требующей вертикальной прокрутки для просмотра параметров.

Эти разделы часто заставляют клиентов прокручивать страницу вертикально, медленно, аккуратно, с предельной сосредоточенностью и точностью. Когда они делают это на мобильных устройствах, некоторые фильтры активируются по ошибке, побуждая клиента быть еще более сосредоточенным. Классический пример этого паттерна — фильтр «Бренды», который зачастую содержит сотни вариантов, отсортированных по популярности или по алфавиту.

Альтернативным вариантом может быть отображение до 7–10 вариантов одновременно с помощью аккордеона, который будет расширяться и показывать все параметры при нажатии / щелчке. Эти параметры не обязательно должны отображаться в полную высоту, они могут располагаться на более крупной прокручиваемой панели . Но тогда их не следует активировать, прокручивая панель.

Также рекомендуется дополнить фильтр автозаполнением поиска и алфавитным представлением, если некоторые из популярных параметров выделены вверху. Хорошим примером этого является Rozetka.ua, интернет-магазин из Украины (см. выше).

Всегда предоставлять резервный текстовый ввод для ползунков

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

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

Мы уже подробно рассмотрели, как спроектировать идеальный слайдер, но, вероятно, самая важная функция, которая нужна каждому слайдеру, — это поддержка различных скоростей взаимодействия. На самом деле существует несколько распространенных типов взаимодействия:

• когда клиенты хотят быстро изучить множество вариантов, старый добрый слайдер с дорожкой и большим пальцем отлично работает;
• когда клиенты хотят быть более точными в своих исследованиях, мы можем помочь, добавив степперы (+/-) для детальных переходов вперед и назад,
• когда клиенты имеют в виду точное значение, мы можем помочь, предоставив текстовые поля ввода для минимальных/максимальных значений, чтобы пользователи могли вводить значения напрямую, без использования ползунка,
• во всех этих случаях решения должны быть доступны и поддерживать взаимодействие только с помощью клавиатуры.

Взгляните на пример Lloydsbank ниже. Персональный кредитный калькулятор прекрасно поддерживает все типы взаимодействия. Кроме того, обратите внимание на стили фокуса, когда бегунок активирован, и диапазоны, отображаемые под ползунком процентной ставки вверху, чтобы указать, где клиент в настоящее время перемещается. Процентная ставка меняется в зависимости от того, сколько денег клиент хотел бы занять.

Еще одним интересным примером хорошо продуманного слайдера является Sofasizer от Made.com, который позволяет вам фильтровать кушетки на основе необходимых размеров. Вместо того, чтобы использовать набор полей ввода, Made.com решил использовать визуальный интерфейс со значком «Изменить размер». Вы можете перетащить ручку, чтобы настроить размер, или ввести точные значения в поля ввода высоты и ширины.

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

Вы были там раньше. Возможно, в порыве волнения вы отправляетесь в розничный магазин, нажимаете на все нужные ссылки категорий, проводите влево и вправо по вспомогательной навигации и бросаете орлиный взгляд на тот один блестящий новый ноутбук, который вы теперь, наконец, готовы взять на себя. То, что ожидает вас дальше, может быть не совсем тем опытом, которым вы надеялись себя побаловать. Взгляните на пример ниже. Можете ли вы заметить, что, кажется, происходит?

В этом примере с сайта Dell.com, когда вы выбираете функции своего ноутбука, одновременно регистрируется только один вход. Если вам случится быстро выбрать несколько вариантов, будет применен только последний введенный параметр. И как только ввод зарегистрирован , страница обновляется, и покупатель перемещается в верхнюю часть боковой панели фильтрации. Это означает, что чем больше фильтров вы хотите использовать — и обычно перемещаетесь сверху вниз — тем больше вам придется прокручивать вниз, чтобы найти правильный фильтр.

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

На самом деле, даже если вы хотите указать таким образом всего 6–10 функций, вам придется вступить в довольно упорную борьбу с автопрокруткой , когда за один раз регистрируется только один фильтр. Можно коснуться или щелкнуть несколько фильтров одновременно, но в этом случае, к сожалению, пользовательский интерфейс не будет реагировать должным образом. Общий опыт довольно разочаровывает и дезориентирует, в том числе потому, что веб-сайт кажется медленным, и для продолжения фильтрации всегда требуется все больше и больше усилий. Не лучший пример минимизации времени от состояния по умолчанию до конечного состояния.

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

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

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

На Sears.com каждый раз, когда делается выбор, пользовательский интерфейс не только полностью блокируется; пользователи также перемещаются в верхнюю часть страницы. Это особенно неприятно для фильтров, включающих аккордеоны (например, ссылка «Подробнее» в разделе «Бренд»). С каждым новым фильтром пользователь должен прокрутить вниз и открыть аккордеон, чтобы найти тот конкретный атрибут, который он хочет выбрать. Walmart (см. пример ниже) следует той же схеме.

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

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

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

Итак, есть ли у нас альтернативы? Очевидной альтернативой является передача пользователю решения о том, когда следует обновлять результаты. Это может означать добавление кнопки «Применить» и поощрение клиентов сначала выбирать все фильтры, прежде чем увидеть какие -либо результаты. Но это не обязательно единственный вариант. На самом деле, как оказалось, мы можем делать и то, и другое: видеть актуальные результаты и взаимодействовать с фильтром без каких-либо задержек. Нам просто нужно перейти от синхронного отображения результатов к его асинхронному аналогу.

Всегда показывать результаты асинхронно

Мы уже упоминали, что фильтры и результаты сопоставления часто несколько синхронны. Однако мы могли бы разделить части пользовательского интерфейса и отображать их обе по отдельности, асинхронно. В этом случае на каждом входе фильтра результаты сопоставления могут обновляться асинхронно, при этом фильтры всегда остаются доступными и в одном и том же месте. С каждым новым вводом фильтра пользователь будет видеть вспышку нового потокового контента.

Приведенный выше пример BestBuy демонстрирует этот паттерн в действии. Когда мы выбираем фильтры на левой боковой панели, они применяются в фоновом режиме, в то время как мы можем продолжать выбирать все больше и больше фильтров, если захотим. Список продуктов обновляется асинхронно: никогда не бывает отключенного состояния, поскольку новый контент добавляется в список совпадающих результатов каждый раз, когда данные возвращаются с сервера.

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

Здесь стоит подчеркнуть, что каждый ввод в области фильтров должен быть зарегистрирован, а затем применен к списку продуктов. Мы заметили, что для многих клиентов это ожидаемое поведение, если вы не держите плавающую кнопку «Применить» рядом с областью фильтров.

Избегайте сдвига макета при вводе фильтра

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

Каждый раз, когда пользователи взаимодействуют с фильтром, как только появляются новые элементы продукта, в области фильтрации происходит небольшой сдвиг. Обычно есть три причины, почему это происходит:

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

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

Что касается второй проблемы, если фильтры больше не доступны, вместо того, чтобы скрывать их автоматически, мы можем отключить их, но также объясним, почему они отключены (может помочь дружеский совет) и что нужно сделать, чтобы снова включить их. . Затем мы также можем добавить параметр «Скрыть все недоступные параметры».

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

Отображение фильтров над результатами

Чтобы полностью избежать смещения макета, мы можем отображать примененные фильтры над результатами продукта . Это позволит сохранить стабильность и предсказуемость области фильтрации в течение всего взаимодействия с пользователем. На самом деле, это не должно быть видно все время. Crate & Barrel в приведенном ниже примере позволяет клиентам скрывать и отображать фильтры по запросу, а применяемые фильтры добавляются в специальную область над продуктами. Обратите внимание, что также доступна опция очистки всех фильтров. (Однако страница продукта изменилась с момента записи видео.)

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

Примером этого паттерна является Adidas (см. изображение ниже). Панель фильтров постоянна; даже когда пользователи прокручивают страницу вниз, оверлей фильтра не закроется автоматически — для этого требуется ввод данных пользователем, снова передавая управление пользователю. Однако он автоматически закрывается после выбора одного из фильтров. Если пользователь хочет выбрать несколько фильтров, он должен снова и снова открывать одну и ту же группу фильтров. Сохранение фильтров постоянными может быть лучшей идеей. Тем не менее, результат: никаких смещений макета, никакой утомительной прокрутки в узких коридорах, а фильтры всегда доступны.

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

Однако в целом первые два варианта (Crate & Barrel и Adidas), кажется, работают очень хорошо, и они оставляют больше места для демонстрации продуктов, избегая при этом всех проблем, которые мы обсуждали ранее. Это довольно надежный шаблон, который можно использовать, когда мы хотим избежать препятствий или путаницы. Но мы все еще можем сделать немного больше, например, с помощью старой доброй кнопки «Применить».

Показать количество результатов на кнопке «Применить»

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

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

С каждым вводом фильтра на сервер отправляется новый запрос, извлекающий количество результатов, а затем отображающий это число в пользовательском интерфейсе. Это отличный способ дать пользователям очень четкое представление о том, насколько далеко или близко они находятся к своему комфортному диапазону.

Другим примером является Galaxus.ch (см. ниже), швейцарский ритейлер электронной коммерции, который обеспечивает первоклассный опыт фильтрации. Фильтры отображаются над результатами продукта; наложение фильтра появляется при касании/щелчке. Никаких замедлений, быстрое время отклика и прекрасная интеграция активных фильтров с областью фильтров. Отличный справочный пример , который стоит учитывать при разработке любого фильтра.

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

Избегайте разделенных экранов на мобильных устройствах

Проблемы, которые мы рассмотрели в статье, в равной степени применимы к большим и маленьким экранам. Однако на маленьких экранах и особенно при медленном соединении эти проблемы становятся еще более важными. В большинстве случаев интерфейсы имеют тенденцию блокировать весь пользовательский интерфейс на одном входе фильтра, вызывая огромные задержки для клиентов на ходу (например, Crutchfield, Walgreens). С другой стороны, принято разделять экран, чтобы отобразить наложенные фильтры, при этом отображая список продуктов, обновляемый в фоновом режиме (например, Nordstrom).

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

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

Контрольный список проектирования фильтрации

Как обычно, вот все, что нужно иметь в виду при разработке любого фильтра — небольшой помощник, чтобы не упустить важные детали, прежде чем отправиться в беседу с вашими коллегами-дизайнерами и разработчиками. Вы также можете найти полную колоду контрольных списков шаблонов проектирования умных интерфейсов в вашем действительно Smashing Magazine.

1. Можем ли мы избежать значка фильтра и показать фильтры как есть?
2. Если нет, то какой значок мы выбираем для обозначения фильтрации?
3. Достаточно ли большой значок + отступ для удобного нажатия?
4. Ставим ли мы значок вверху, внизу или плавающий (мобильный/рабочий стол)?
5. Что именно происходит, когда пользователь нажимает/нажимает на значок?
6. Как изменится значок при касании/щелчке?
7. Будет ли у нас какая-то анимация или переход по клику?
8. Будут ли фильтры отображаться как полностраничные/частичные наложения или слайды?
9. Можем ли мы избежать фильтрации боковой панели, поскольку она обычно медленная?
10. Предоставляем ли мы популярные или релевантные фильтры по умолчанию?
11. Отображаем ли мы количество ожидаемых результатов для каждого фильтра?
12. Можем ли мы использовать горизонтальный свайпер для перемещения между фильтрами?
13. Можем ли мы избежать выпадающих списков и использовать только кнопки/фишки + переключатели?
14. Предоставляем ли мы поиск по сложным фильтрам для сложных фильтров?
15. Используем ли мы значки для объяснения различий между различными фильтрами?
16. Используем ли мы правильные элементы для фильтров, например, ползунки, кнопки, переключатели?
17. Применяются ли фильтры автоматически (да, для слайдов)?
18. Применяются ли фильтры вручную при подтверждении («Применить») (да, для наложений)?
19. Как мы сообщаем уже выбранные фильтры?
20. Могут ли выбранные фильтры отображаться в виде съемных таблеток, чипов или меток?
21. Рекомендуем ли мы соответствующие фильтры на основе выбора?
22. Отслеживаем ли мы несовместимость между выбранными фильтрами?
23. Как сообщения об ошибках или предупреждения отображаются в пользовательском интерфейсе?
24. Разрешаем ли мы клиентам быстро и сразу сбрасывать все фильтры?
25. Плавают ли фильтры (или кнопка фильтров) при прокрутке на мобильном устройстве/рабочем столе?
26. Могут ли пользователи нажимать на одно и то же место, чтобы открывать/закрывать фильтры?

Подведение итогов

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

• Дизайн для удобного набора опций, для случая, когда заказчик хочет быстро добавить несколько фильтров — один за другим.
• Для длинных групп фильтров избегайте крошечных прокручиваемых панелей и показывайте до 7–10 вариантов одновременно с помощью аккордеона, который будет расширяться и показывать все параметры при касании/щелчке. Добавьте автозаполнение поиска и алфавитный вид.
• Всегда добавляйте степперы (+/-) и поля ввода текста при использовании ползунков,
• Клиент часто хочет установить несколько фильтров одного типа. Никогда не выполняйте автоматическую прокрутку пользователей для одного входа и никогда не сворачивайте группу фильтров автоматически.
• Никогда не останавливайте пользовательский интерфейс на одном входе и никогда не заставляйте своего клиента ждать ответа интерфейса при настройке фильтров.
• Всегда обновляйте фильтры и показывайте результаты асинхронно , чтобы при каждом вводе фильтра совпадающие результаты могли обновляться асинхронно, а фильтры всегда оставались доступными и в одном и том же месте.
• Всегда избегайте смены макета при вводе фильтра и рассмотрите возможность отображения фильтров над результатами.
• На мобильных устройствах кнопка «Применить» может быть закреплена внизу экрана. Обновите количество товаров и покажите их на кнопке.

Статьи серии

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

• Идеальный Аккордеон
• Идеальный отзывчивый конфигуратор
• Идеальный день рождения
• Идеальный выбор даты и времени
• Идеальный мега-раскрывающийся список
• Идеальное сравнение характеристик
• Идеальный слайдер
• Книга шаблонов проектирования форм Адама Сильвера, опубликованная на SmashingMag
• Подпишитесь на нашу электронную рассылку, чтобы не пропустить следующие.