10 примеров фильтров от известных ecommerce-сайтов

Россия+7 (495) 960-65-87
Шрифт:
0 12488

Фильтры товаров могут казаться маленьким и незначительным элементом ecommerce-сайта. Но в реальности отлаженная система фильтров – это то, что отличает позитивный user experience от негативного.

Как известные бренды используют фильтры на своем сайте? В этой подборке собраны примеры десктопных фильтров, найденных на сайтах мировых ретейлеров. Учимся, как надо и как не надо делать.

H&M

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

H&M1.png

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

H&M2.png

Этот фильтр не представляет особенной ценности или пользы. Компания упустила из внимания самую важную функцию фильтра – сузить выбор товаров, чтобы задать покупателю правильное направление, а не запутать его окончательно чем-то вроде «Акцент на плечи».

River Island

Фильтры на этом веб-сайте расположены с левой стороны под категорией товара. Покупатель может выбрать тип товара, размер, цвет и установить ценовой диапазон. Эта система неудобна тем, что фильтры нужно устанавливать поэтапно: при выборе каждого нового фильтра страница автоматически перезагружается.

River Island.png

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

Zara

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

Zara1.png

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

Zara2.png

Ted Baker

В целом сайт Ted Baker выполнен весьма профессионально, поэтому не очень удобная система фильтров разочаровывает пользователей.

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

Ted Baker.png

Однако у покупателей есть возможность сортировки отфильтрованных товаров по выбору компании, возрастанию/убыванию цены и новизне.

Hunter

Система фильтров сайта Hunter, как и фильтры Ted Baker, представляет собой разворачиваемое вниз меню, но в отличие от последнего каждый критерий выделен в отдельный столбец, что гораздо удобнее. Покупателям предлагается четыре категории: размер, цвет, характеристики и коллекция.

Hunter.png

Хотя фильтры приходится устанавливать по очереди, у этой системы есть интересная функция – галочка над категорией фильтра, которая появляется после его применения.

Marks and Spencer

Система фильтров этого бренда очень разнообразна. Покупатели могут установить 12 фильтров: категория, крой, цвет, размер, стиль, длина рукава, бренд, материал, цена, вырез ворота и оценки других пользователей.

Mark1.png

У ретейлеров не всегда получается удачно задействовать на сайте отзывы пользователей. Marks and Spencer – одна из компаний, которые умно применяют отзывы клиентов в своей практике.

Mark2.png

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

SuitSupply

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

Suit1.png

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

Suit2.png

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

Также покупатели могут сортировать товары по цене, посадке и цвету.

ASOS

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

ASOS.png

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

LaModa

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

lamoda.png

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

Wildberries

На этом сайте фильтры найти не так просто: они расположены в нижнем левом углу под многочисленными категориями товаров.

wild1.png

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

wils2.png

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

Чему можем научиться мы?

Итак, если вы хотите создать на своем сайте систему фильтров, которая улучшит user experience покупателей:

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

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

Источник: Econsultancy

Есть о чем рассказать? Тогда присылайте свои материалы Даше Калинской


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
    ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
    SEOnews и Serpstat запускают конкурс для интернет-маркетологов
    Marina Lagutina
    1
    комментарий
    0
    читателей
    Полный профиль
    Marina Lagutina - Добрый день! Видимо я из тех, кто пытается последней вскочить в уходящий поезд. Ночью написала статью на тему "обзор инструментов контент-маркетинга". Своего блога нет. Отправила вам не мейл. Я еще могу у вас разместиться или искать, кто возьмет статью к себе в блог?
    «Я оптимизировал сайт, а он не в ТОП! Что делать?»
    Павел Горбунов
    7
    комментариев
    0
    читателей
    Полный профиль
    Павел Горбунов - Как можно в инструменте tools.pixelplus.ru/tools/text-natural сравнить текст со страницы конкурента и со своей страницы? Я вижу возможность только для проверки одного урла.
    Монетизация сайта. Как, когда, сколько?
    Гость2
    1
    комментарий
    0
    читателей
    Полный профиль
    Гость2 - Руслан! Спасибо за ваш сервис и за данную статью в частности! С апреля являюсь вашим пользователем - очень доволен как сервисом, так и уровнем заработка! Еще раз спасибо, удачи вашему проекту!
    Мир глазами поисковых систем
    Александр Рунов
    7
    комментариев
    0
    читателей
    Полный профиль
    Александр Рунов - Какой регион, если не секрет? В Мск, в ряде ВК тематик (в тех же "окнах" или "колесах"), без работы с внешними факторами по ВЧ запросам в ТОП не выплывешь. Хотя в большинстве направлений вполне реально.
    Влияние HTTPS на ранжирование региональных поддоменов в Яндексе
    Екатерина Иванова
    1
    комментарий
    0
    читателей
    Полный профиль
    Екатерина Иванова - Посмотрите на сколько упал трафик и на сколько потом вырос:упал на 10-20% на 1 месяц, а вырос в итоге в 5 раз. Одним мартовским трафиком всё падение перекрыли. Или можно ждать Яндекс неопределённое количество времени со стартовым уровнем трафика. Упущенные возможности и всё-такое.
    День рождения SEOnews: 12 лет в эфире!
    Анна Макарова
    308
    комментариев
    0
    читателей
    Полный профиль
    Анна Макарова - Ура )
    7 причин не работать на биржах копирайтинга
    Dasha Shkaruba
    6
    комментариев
    0
    читателей
    Полный профиль
    Dasha Shkaruba - Спасибо за мнение! Кстати, на бирже главреда прием анкет закрыт
    Google.ru внесли в реестр запрещенных сайтов
    Гость
    1
    комментарий
    0
    читателей
    Полный профиль
    Гость - Гон, все работает и будет работать. Да и пусть банят, будет как с рутрекером.
    Инфографика: самые распространенные SEO-ошибки Рунета
    Alex Wise
    3
    комментария
    0
    читателей
    Полный профиль
    Alex Wise - Спасибо, Женя, за рекомендацию! :) Андрей, чтобы понять, какой программой пользоваться, нужно сделать несколько вещей: 1. Попробовать обе: у нас в Netpeak Spider бесплатный триал на 14 дней с полным функционало; у SFSS до 500 URL всегда бесплатно, но с ограниченным функционалом. 2. Понять свой стиль работы – если вы любите полный контроль и из-за этого более высокую скорость пробивки, тогда выбирайте Netpeak Spider. Если для вас не так важна скорость и количество пробитых URL, то можно остановиться на SFSS. 3. Определиться с нужными функциями: их в обоих программах очень много и как в Netpeak Spider есть уникальные, так и в SFSS есть свои уникальные. Мы всегда ориентируемся на то, чтобы быстро и чётко показать ошибки – для этого у нас вся таблица красится в соответствующие цвета. Думайте!) И, если что, обращайтесь с вопросами – мы будем рады помочь!)
    Конкурс: угадайте пятерку лидеров рейтинга «SEO глазами клиентов 2017»
    Оля
    1
    комментарий
    0
    читателей
    Полный профиль
    Оля - 1 Ingate 2 Wezom 3 Bynjg vtlbf 4 seo energy 5 директ лайн
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    308
    Комментариев
    262
    Комментариев
    224
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    121
    Комментариев
    97
    Комментариев
    97
    Комментариев
    95
    Комментариев
    80
    Комментариев
    77
    Комментариев
    67
    Комментариев
    60
    Комментариев
    59
    Комментариев
    55
    Комментариев
    53
    Комментариев
    52
    Комментариев
    46

    Отправьте отзыв!
    Отправьте отзыв!