x
 
Евгений Журавлев
4 ноября 2015
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

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


Евгений!

Вы правы: в таком виде фильтрами пользоваться очень тяжело. Достаточно представить, как девочка будет выбирать цвет: нужно прокрутить страницу до самого низа, выбрать цвет из бесконечного списка непонятных и похожих друг на друга оттенков (мои любимцы: «персидский фиолет», «сливовое вино» и «королевская сирень»), вернуться наверх, потом опять вниз, чтобы что-то уточнить, потом снова наверх… — мучение. О, там ещё и ссылка «Показать всё». То есть, это ещё не всё? :-)



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

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


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

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

От фильтра избавились. Уберём матрицу. Шапка и подвал сайта не касаются вопроса, поэтому их из уравнения уберу:

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

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

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

Принцип «Страница не кончается»

А водяные знаки — это плохо.

P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

Типографика и вёрстка — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Комментарии

Максим Смирнов
4 ноября 2015

Давайте обратимся к сайту www.victoriassecret.com. Они проделали ту же самую работу, но не лишили посетителя возможности на лету менять необходимые параметры поиска.

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

Убирать выбор размера на страницу товара, на мой взгляд, преступление против покупателя. На той же Виктории в пушапах (https://www.victoriassecret.com/bras/push-up) выберите размер 40DDD и оцените, насколько бедным стал ассортимент. А теперь представьте, что вы даёте девушке с таким размером 100 позиций, из которых только 10 есть в наличии. А узнает она об этом, только последовательно проходя все сто бюстгальтеров. Р-р-р-р!

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

Как написано в совете, цвета должны быть цветами, а не маркетинговым булщитом. Одно это сократит длину в два раза.

Для цены достаточно сортировки. Вряд ли кому-то важна цена ровно от 200 до 300 гривен. Хочешь дешевле, отсортируй и смотри до комфортной цены.

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

Максим Савченко
4 ноября 2015

Убирать фильтрацию совсем — не уважать время покупателя.

Представим, что девушке нужен бюстгальтер размера 80E. Без фильтра она даже не узнает, что такие размеры есть в магазине или на странице. Обычно размеры ещё пересекаются, то есть может подходить как 80E, так и 80DD (один Ктулху знает почему). То такой поиск нижнего белья станет адом — смотреть каждый товар и разочаровываться, что нету твоего размера.

Стоит взять подход как на «ВикторииСикрет» и спрятать все возможные фильтры за выпадашками и выстроить их в строку.
А ещё лучше — одно окно со всеми опциями. Размеры разделить на две части — обхват под грудью и размер чашечки. Такой подход поможет разместить все размеры в две колонки. Главные цвета: белый, чёрный, телесный. Не стоит забывать про тип бюстгальтера, ведь это важный аспект в выборе. Особенно это касается опций «без косточек» и «пуш-ап».

P. S. Выводить цену за фотографию, как в совете Михаила, я бы не советовал :-) Очень сложно следить за тем, к какому товару цена относится, и тяжко сравнивать рядом стоящие модели. Было бы лучше, если бы цена находилась внутри блока с фотографией.

Роман Константин
5 ноября 2015

Почему бы не поступить проще?

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

Такая идея возникла после наблюдения за тем, как жена пользуется интернетом. Она никогда не использует фильтры, при этом находит себе нужное в пару кликов используя «CTRL+F».

Николай Яковенко
7 ноября 2015

В современных магазинах пользователи попадают на наиболее релевантную страницу. Это значит, что каталог разбит на удобные подкатегории, которые соответствуют интересам человека. Торговые марки и коллекции могут стать отдельными разделами «Бренды» и «Коллекции» без ущерба удобству.

Я в курсе, что девушки знают больше цветов, чем парни. Но представленный ассортимент расцветок поставит в тупик даже самую продвинутую. Тем более «Пион», «Питуния» и многие другие без визуализации — не наглядны.

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

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

3 3 1 2




Недавно всплыло

1 Как сделать, чтобы публикация выделялась в ленте: композиция, исправление дефектов, цвет 1 1 3