×
Россия +7 (495) 139-20-33

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

Россия +7 (495) 139-20-33
Шрифт:
0 38779

Фильтры товаров могут казаться маленьким и незначительным элементом 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

(Голосов: 6, Рейтинг: 5)
Читайте нас в Telegram - digital_bar

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Как работать с сервисом для блогеров и бизнеса Perfluence
SergZa
1
комментарий
0
читателей
Полный профиль
SergZa - Не знал, что с небольшим количеством подписчиков можно заработать, буду пробовать;)
Алгоритм продвижения сайта через Pinterest
Марк
1
комментарий
0
читателей
Полный профиль
Марк - Виктор добрый день, подскажите, как связаться с вами через фэйсбук или ВКонтакте?
Диагностика и снятие ссылочного фильтра «Минусинск» в 2021 году. Кейс
Stanislav Romanenko
7
комментариев
0
читателей
Полный профиль
Stanislav Romanenko - Просто чисткой ссылочного можно просадить позиции в гугле, поэтому с бухты-барахты начинать удалять ссылки как-то тоже не хотелось бы. Ну в общем, если попадётся ещё подобный случай - не стесняйтесь выкладывать новый кейс :) Просто видите как мало кейсов по этому поводу, поэтому каждый на вес золота. "с этой бедой также приходится сталкиваться и пока кроме как крутить в обратную сторону ничего лучше не придумали." - на серче один товарищ скрипт антибота своего под это дело заточил searchengines.guru/ru/forum/981615/page39#unread - вроде боты пропадают, но и часть живых людей тоже :)
Как забрать 5 мест в выдаче из 10. Кейс-эксперимент
nikolay.shmichkov
4
комментария
0
читателей
Полный профиль
nikolay.shmichkov - Отличный результат!
Локальное SEO, или Как увеличить трафик стоматологии на 700% в небольшом городе
Денис Астахов
3
комментария
0
читателей
Полный профиль
Денис Астахов - В первую очередь стоит работать по конкретному гео. Это размещение ссылок, отзывов и так далее. А в остальное seo ни чем отличаться не будет. Из того что я пробовал, сервис zenlink работает по всему гео России. Можно указать как регион в целом, так и конкретный город.
Как мы увеличили трафик из Яндекса более чем в 3 раза за неделю на сайте клиники. Кейс
Андрей
1
комментарий
0
читателей
Полный профиль
Андрей - У большинства сайтов произошел рост в Гугле в декабре и в марте Яндекса. Ваши шаманства тут не причём :)
5 книг от эксперта: Александр Алаев (АлаичЪ и Ко)
Сергей
1
комментарий
0
читателей
Полный профиль
Сергей - Богатый папа, бедный папа - сборник мифов, которые уже разоблачил все. Все сразу стало понятно про "эксперта". Дальше можно список не смотреть. Прочитать ее конечно можно, если ничего другого нет под рукой, но советовать другим, это уже извините, совсем людей не уважать.
Увеличение трафика новостного сайта в 2 раза с помощью SEO. Кейс
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Делали подобное тут ruszakony.ru/rubrikator/ , получилось полная фигня
SEO для интернет-магазина зоотоваров: как привести заказы на миллион рублей в месяц. Кейс
Евгений Носенков
1
комментарий
0
читателей
Полный профиль
Евгений Носенков - >>Резюмируя свое мнение: кейс пуст, так как нет связи с конечными целями бизнеса. Если вы внимательно прочтете весь кейс, то увидите, что мы как раз считаем ключевые метрики для бизнеса, такие как CPO из органики, например. И 77 рублей за заказ со средним чеком 2000 рублей, с учетом всей расходной части (себестоимость, хранение, доставка и тд) — это более, чем рентабельно. Плюс весь оффлайн (кто посмотрел на сайте, но пришел ножками в любую из 60-ти точек) не учитывается в данном кейсе. "У меня был проект и не окупался", "В Беларуси кто-то там банкротится" — серьезный фундамент для аналитики по отрасли, ничего не скажешь. >>сейчас тут в ЗОО рентабельны чат боты и воронки А у тоннелей продаж как дела, норм с рентабельностью?)
90% специалистов выделяют бюджет на ссылки. Sape и SEOnews публикуют исследование рынка SEO
Fase Bosty
1
комментарий
0
читателей
Полный профиль
Fase Bosty - Часть рекламного бюджета тоже на ссылки трачу. Благо, что от них есть польза, поведенческие факторы повышаются. Вот только я не на биржах их покупаю, а использую сервис zenlink, ибо у них размещение ручное и на тематических площадках.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
385
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
114
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
92
Комментариев
80
Комментариев
77
Комментариев
69
Комментариев
67
Комментариев
62
Комментариев
60
Комментариев
59

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