Продолжаем рассматривать юзабилити-ошибки, из-за которых интернет-магазины теряют покупателей и деньги, хотя имеют в наличии именно то, за чем пришел клиент.
В нашей первой статье мы детально рассмотрели вопросы поиска товара через поисковую строку. Сегодня мы расскажем, каким должен быть удобный каталог товаров со всеми сопутствующими возможностями.
Мы изучили все поступившие в редакцию SEOnews заявки и отобрали 4 интернет-магазина, чтобы прокомментировать примеры как широкого, так и узкого ассортимента товаров.
Анализ интернет-магазинов:
В этой статье мы рассмотрели две важные задачи клиента:
- Поиск конкретного товара по названию через меню или каталог
- Поиск товара по названию бренда
- Поиск товара по его названию
- Поиск товара по заданным критериям (известны только 1-2 параметра товара)
Задача 1. Поиск конкретного товара по названию через меню или каталог
Мы взяли по одному товару, имеющемуся в наличии на каждом сайте, и попробовали найти его через меню и каталог.
Поиск товара по названию бренда
По данным Всероссийского исследования потребительского поведения клиентов интернет-магазинов (далее просто Исследование ИМ), которое мы провели в 2019 году – 32% пользователей ищут знакомый товар в меню или каталоге по названию бренда.
Наши рекомендации к разделу "Бренды":
- Список брендов должен быть упорядочен, чтобы была возможность быстро перейти к нужному бренду
- Если брендов много, должна быть возможность поиска среди них (сортировка по брендам или расположение по алфавиту)
Рассмотрим неудачные решения.
На сайте techno-rus.com есть современный домофон Commax CDV-1020AQ серебро.
Домофон “Commax CDV-1020AQ серебро” на сайте techno-rus.com
Попробуем его найти по названию бренда “Commax”. В главном меню нет раздела “Бренды”.
Меню на главной странице сайта techno-rus.com
В подменю “Каталог” есть категории товаров, но нет поиска по брендам.
Подменю “Каталог” на главной странице сайта techno-rus.com
Прямо над подвалом есть список логотипов, возможно это как раз список брендов.
Блок с логотипами на главной странице сайта techno-rus.com
Однако этот блок никак не озаглавлен и лишен визуального акцента: все логотипы серые, плохо заметные. Кроме того, в блоке всего 7 логотипов (2 экрана) и нет нужного бренда.
Ссылка “Бренды” обнаружилась в итоге в подвале в столбце “Помощь”. Найти её сложно, и лишь немногие клиенты смогут ей воспользоваться.
Меню в подвале на главной странице сайта techno-rus.com
На странице “Бренды” названия компаний представлены в непонятном для клиента порядке: нет сортировки по алфавиту и нет возможности быстро найти нужный бренд.
Страница “Бренды” на сайте techno-rus.com
Для поиска придется пролистать 12 страниц с логотипами, так как нет поиска по названию бренда.
У многих брендов не загружены изображения логотипов, вместо них отображаются только текстовые названия.
Пример отсутствия логотипов на странице “Бренды” на сайте techno-rus.com
В итоге, когда нужный бренд найден, оказывается, что логотип не кликабелен и не ведет ни на одну страницу. Таким образом, поиск товара по бренду невозможен. Эта задача клиента оказывается невыполнима полностью.
На сайте akcentr.ru есть красивая итальянская подвесная люстра ST Luce Anticato SL669.403.03
Люстра “ST Luce Anticato SL669.403.03” на сайте akcentr.ru
Попробуем её найти через название бренда “ST Luce”.
В меню нет раздела “Бренды”.
Меню на главной странице сайта akcentr.ru
В подменю “Свет” раздела “Бренды” тоже не найти.
Подменю “Свет” на главной странице сайта akcentr.ru
Ни на главной странице, ни в подвале, нет раздела “Бренды”.
Меню в подвале на главной странице сайта akcentr.ru
Таким образом на сайте akcentr.ru нет возможности перейти к списку брендов и найти товар через него.
На сайте vertical.ru есть качественная краска “Finncolor Oasis Interior A глубокоматовая 0,9 л для стен и потолка”.
Краска “Finncolor Oasis Interior A глубокоматовая 0,9 л для стен и потолка” на сайте vertical.ru
Попробуем её найти через название бренда “Finncolor”.
Как видно в меню на главной странице нет возможности поиска по брендам.
Меню на главной странице сайта vertical.ru
В подменю “Каталог” нет раздела “Бренды”, как, впрочем, и в других разделах меню.
Подменю “Каталог” на главной странице сайта vertical.ru
Раздел “Бренды” не найти ни на Главной странице, ни в подвале.
Меню в подвале на главной странице сайта vertical.ru
Таким образом на сайте vertical.ru нет возможности перейти к списку брендов и найти товар через него.
А теперь посмотрим более удачное решение.
На сайте divine-light.ru есть красивая итальянская люстра VELANTE 319-503-02.
Люстра VELANTE на сайте divine-light.ru
Попробуем её найти через название бренда “VELANTE”.
Как видно в меню на главной странице нет возможности поиска по брендам.
Меню на главной странице сайта divine-light.ru
В подменю “Люстры” есть раздел “Популярные бренды”, но к сожалению, в него не попал искомый бренд.
Подменю “Люстры” на главной странице сайта divine-light.ru
Ниже на главной странице есть блок “Наши любимые бренды”, в котором мы в первый раз видим ссылку на список брендов “Все бренды”
При переходе по этой ссылке мы попадаем на страницу “Производители”
Страница “Производители” на сайте divine-light.ru
Название страницы “Производители” не соответствует названию ссылки “Все бренды”, и это вводит пользователей в заблуждение, поскольку нарушается принцип единообразия. На самой странице список брендов упорядочен по алфавиту и можно найти искомый бренд.
При переходе по ссылке с названием бренда мы попадаем на страницу товаров бренда
Страница “Бренда” на сайте divine-light.ru
На этой странице представлены товары бренда, есть фильтры по категориям товаров и сортировка, что удобно для поиска.
|
Наиболее удачно поиск по брендам реализован на сайте divine-light.ru. В меню есть популярные бренды, на главной странице есть блок с брендами и ссылка для перехода на страницу брендов. На странице брендов все бренды отсортированы по алфавиту и можно быстро найти нужный. При переходе по ссылке с названием бренда мы видим страницу, где есть краткое описание бренда и список товаров этого бренда с возможностью его фильтрации по категориям товаров и сортировка. Рекомендуем добавить ссылку "Бренды" в Главное меню. |
Поиск товара по названию через меню или каталог
Согласно Исследованию ИМ, 25% пользователей, ищущих конкретный товар, будут искать его через меню или каталог.
Возможность поиска по нескольким категориям товаров
Клиентам важно, чтобы можно было искать товар как по основным категориям типа “парфюмерия, косметика”, так и по альтернативным, например, “для мужчин, для женщин”.
Хорошее решение
На сайте divine-light.ru используется 7 вариантов категоризации люстр: по типу, месту, стилю, материалу, стране, цвету, бренду.
Подменю “Люстры” на главной странице сайта divine-light.ru
На остальных сайтах данный подход не используется.
Карточки товаров на странице категории товаров
На странице категории товаров клиенты просматривают карточки товаров для выбора нужного им варианта.
Хорошая карточка товара должна содержать:
- Качественное фото товара
- Название
- Цену
- Понятные для клиента признаки, например, "Новинка", "Акция", "Бестселлер" и др.
- Тип / категорию товара
- Название бренда (например, в названии товара)
- Возможность добавить товар в Корзину
- Возможность добавить товар в Избранное
- Оценку популярности товара (например, звездочки)
- Возможность пролистать фотографии товара
- Возможность получить больше дополнительной информации, не переходя на страницу товара (например, при наведении курсора на карточку товара открывается мини описание)
Также клиенту важно знать, есть ли товар в наличии, и увидеть основные характеристики, влияющие на выбор.
В полной юзабилити-экспертизе мы проверяем интернет-магазин по 200 критериям, определяющим эффективность взаимодействия пользователей с интернет-магазином. В рамках нашей статьи мы можем рассмотреть лишь часть из них. Посмотрим, как реализованы карточки товаров на выбранных нами сайтах.
На сайте divine-light.ru представлено 9 из 11 блоков.
Помимо стандартных признаков товаров типа “Новинка”, “Акция” или “Бестселлер” в этом магазине используются такие признаки как “Лампы в подарок”, “В этой серии есть бра”. Также на карточке присутствует информация о размерах лампы и площади освещения. Есть информация о наличии товара. Есть возможность купить в 1 клик.
На сайте techno-rus.com представлено 10 из 11 блоков.
Дополнительно есть информация о наличии товара.
На сайте akcentr.ru представлено 9 из 11 блоков.
Дополнительно есть информация о размере скидки и о наличии товара.
На сайте vertical.ru представлено 6 блоков из 11.
Можем отметить качественные крупные фотографии товаров и заметную цену. На карточке товара есть информация об объеме, базисе и цвете краски. Есть возможность купить в 1 клик. Нет информации о наличии товара.
|
Все рассмотренные карточки товаров реализованы хорошо. Для улучшения можно посоветовать добавить оценку популярности товара (например, звездочки) как на сайте techno-rus.com Хорошим примером является отображение дополнительных важных характеристик товара, с возможностью их изменения как на сайте vertical.ru Клиентам также очень полезна возможность купить товар в 1 клик. |
Задача 2. Поиск товара по заданным критериям
Согласно Исследованию ИМ, при поиске товаров в каталоге клиентам важно иметь возможность фильтрации:
- 92% респондентов необходима фильтрация по цене.
- 74% респондентов необходима фильтрация по наличию товара.
- 64% респондентов необходима фильтрация по бренду.
- 57% респондентов необходима фильтрация по наличию скидок (товары со скидками).
В хорошем каталоге должны быть реализованы следующие возможности:
- Задать желаемые критерии товара для поиска в каталоге.
- Фильтры при выборе значений должны вести себя предсказуемо: показывать выбранные параметры и не исчезать, не перемещается, не схлопывается.
- При установке параметров в фильтре, другие установленные ранее параметры не должны обнуляться без предупреждения.
- При выборе фильтра должно отображаться количество найденных товаров, которые будут показаны после фильтрации.
- Блок, отображающий выбранные значения фильтров (обычно сверху или в самом фильтре).
- Отмена выбранных параметров фильтров в 1 клик.
- Фильтрация по цене.
- Фильтрация по наличию товара.
- Фильтрация по бренду.
- Фильтрация по наличию скидок (товары со скидками).
В этом задании мы искали товар по нескольким параметрам через каталог и меню.
Рассмотрим сначала хороший пример
Для сайта divine-light.ru мы искали “подвесную люстру кремового цвета не дороже 10 000 руб”.
Мы перешли в подраздел каталога “Главная > Люстры” и увидели фильтры в левом столбце в которых смогли установить все нужные параметры.
Раздел каталога “Люстры” на сайте divine-light.ru
На первом экране в левом столбце сразу видны фильтры.
Фильтр по типу люстр в каталоге сайта divine-light.ru
Не хватает информации о количестве товаров по типам люстр
Фильтр по цене в каталоге сайта divine-light.ru
Не хватает единиц измерения стоимости (рубли или копейки).
Есть отображение количества вариантов при заданном фильтре.
Фильтр по цвету плафона в каталоге сайта divine-light.ru
Над списком найденных товаров отображается блок с выбранными параметрами
Блок с выбранными параметрами фильтра в каталоге сайта divine-light.ru
В этом блоке не хватает фильтра по цене и присутствуют два фильтра, которые мы не устанавливали: “В наличии” и “Под заказ”.
Ссылка “Очистить фильтр” в конце блока с фильтрами в каталоге сайта divine-light.ru
Как мы уже увидели выше в блоке фильтров есть возможность фильтрации по наличию товара.
Также есть возможность фильтрации товаров по брендам.
Фильтр по бренду в каталоге сайта divine-light.ru
Есть фильтрация по наличию скидок на товары
Фильтр по скидкам в каталоге сайта divine-light.ru
В итоге для сайта divine-light.ru получаются следующие результаты:
Остальные примеры
Для сайта akcentr.ru мы также искали “подвесную люстру кремового цвета не дороже 10 000 руб”.
Мы перешли в подраздел каталога “Люстры > Подвесные люстры” и увидели фильтры в левом столбце в которых смогли установить все нужные параметры.
Раздел каталога “Подвесные люстры” на сайте akcentr.ru
Фильтр по цене в каталоге сайта akcentr.ru
Не хватает единиц измерения стоимости (рубли или копейки)
Есть отображение количества вариантов при заданном фильтре.
Фильтр по цвету плафона в каталоге сайта akcentr.ru
Не хватает блока с отображением всех выбранных параметров в фильтре.
В конце блока с фильтрами есть кнопка “Сбросить”, чтобы очистить все установленные параметры фильтров.
Кнопка “Сбросить” в конце блока с фильтрами в каталоге сайта akcentr.ru
Нет фильтра по наличию товара.
Есть возможность фильтрации товаров по брендам.
Фильтр по бренду в каталоге сайта akcentr.ru
Есть фильтрация по наличию скидок на товары
Фильтр по скидкам в каталоге сайта akcentr.ru
В итоге для сайта akcentr.ru получаются следующие результаты:
Для сайта vertical.ru мы искали “белую краску для покраски стен внутри квартиры бренда Finncolor, быстросохнущую, не дороже 400 рублей”.
Мы перешли в подраздел каталога “Лакокрасочные материалы > Краски для внутренних работ > Краски для стен и потолков”
Раздел каталога “Краски для стен и потолков” на сайте vertical.ru
Фильтры не отображены, но есть заметная кнопка, чтобы их открыть.
Кликнув по кнопке “Фильтр”, мы увидели фильтры в левом столбце в которых смогли установить все нужные параметры.
Фильтр по цене в каталоге сайта vertical.ru
К сожалению, при установке параметров в фильтрах рядом не отображается количество товаров, которые будут отображены.
Фильтр по бренду в каталоге сайта vertical.ru
Выбор цвета отображается кружком, а не галочкой, что не совсем стандартно и может быть непонятно некоторым пользователям.
Фильтр по цвету в каталоге сайта vertical.ru
Дополнительные признаки, такие как “Быстросохнущая”, “Моющаяся” и “Возможность колеровки” можно было бы объединить в один блок типа “Дополнительные свойства” или сделать возможность их выбора сразу без необходимости раскрытия блока.
Фильтр по высыханию в каталоге сайта vertical.ru
Не хватает блока с отображением всех выбранных параметров в фильтре.
В конце блока с фильтрами есть кнопка “Сбросить”, чтобы очистить все установленные параметры фильтров.
Кнопка “Сбросить” в конце блока с фильтрами в каталоге сайта vertical.ru
Нет фильтра по наличию товара.
Нет фильтра по наличию скидок.
В итоге для сайта vertical.ru получаются следующие результаты:
Для сайта techno-rus.com мы искали “цветной видеодомофон Commax с диагональю экрана 5-7 дюймов, не дороже 10 000 руб”.
Мы перешли в подраздел каталога “Домофоны > Цветные видеодомофоны”
Раздел каталога “Цветные видеодомофоны” на сайте techno-rus.com
К сожалению в левом столбце вместо ожидаемых фильтров на первом экране показаны другие разделы каталога, даже без возможности их свернуть. Клиентам очень неудобно искать фильтры на 2-м экране.
Ниже, на 2-м экране мы увидели фильтры в левом столбце, в которых смогли установить все нужные параметры.
Фильтр по цене в каталоге сайта techno-rus.com
В фильтре по цене не указаны единицы измерения цены (рубли или копейки). Также непонятно наличие двух блоков “Цена со скидкой” и “Розничная цена”. Хорошо, что отображается количество товаров с заданным параметром в фильтре.
Фильтр по производителю в каталоге сайта techno-rus.com
Фильтр по диагонали монитора видеодомофона в каталоге сайта techno-rus.com
Не хватает блока с отображением всех выбранных параметров в фильтре.
В конце блока с фильтрами есть кнопка “Сбросить”, чтобы очистить все установленные параметры фильтров.
Кнопка “Сбросить” в конце блока с фильтрами в каталоге сайта techno-rus.com
В итоге для сайта techno-rus.com получаются следующие результаты:
|
Как видно из рассмотренных примеров, наиболее успешно фильтрация реализована на сайте divine-light.ru Фильтры должны быть видны сразу, на 1-м экране. Одним из первых должен быть фильтр по цене. Далее должны следовать наиболее частотные параметры, по которым клиенты ищут товары заданной категории, остальные параметры должны быть доступны, но скрыты. Важные для клиентов фильтры: по наличию товара, по бренду и по наличию скидок. Также нужно показывать блок с выбранными значениями фильтров над выдачей, чтобы клиент сразу видел, какие фильтры сейчас работают. |
В заключении
Многие клиенты ищут товары по названию бренда и поэтому важно, чтобы в вашем интернет-магазине такая возможность была удобно реализована. Ссылка на бренды должна быть как в главном меню, так и в самом каталоге товаров.
Важно реализовать поиск в меню и каталоге не только через основные категории товаров, но и через альтернативные.
Карточки товаров в разделах каталога фактически представляют витрину магазина, и от их проработки зависит не только эффективность поиска товаров, но и конверсия в целом, поэтому обратите внимание на 11 критериев, которые мы описали выше.
Фильтры в каталоге заменяют клиентам продавца, и они также должны вести себя максимально предсказуемо и удобно, причем самые важные должны быть выше и заметней остальных.
В данном обзоре мы коснулись примерно 15 из 200 критериев эффективности взаимодействия посетителя с сайтом интернет-магазина. Все они влияют на то, состоится ли продажа, станет ли посетитель сайта покупателем, будет ли он покупать снова.
Сегодня мы рассмотрели поиск через меню и каталог. Для того, чтобы структура меню и каталога товаров была максимально понятна для клиентов мы используем метод карточной сортировки. Клиенты интернет-магазина под руководством эксперта раскладывают карточки с названиями товаров по группам и дают названия этим группам. В результате получается понятная для большинства клиентов структура каталога, которая не была придумана вашими специалистами или не была взята у конкурентов.
Для того, чтобы понять, какие фильтры должны быть в каждой категории товаров, мы обычно проводим пользовательские исследования в виде качественных интервью и анкетирования целевой аудитории. Из этих исследований становится понятно, какие параметры наиболее важны при фильтрации товаров, а какие полезны, но должны быть отображены на втором плане.
Как видно из рассмотренных примеров, у каждого бизнеса есть возможность увеличить конверсию за счет грамотного анализа текущей ситуации (юзабилити-экспертизы) и доработки интерфейса с учетом обнаруженных проблем.
Надеемся, что вы учтете рассмотренные ошибки и не станете допускать их на своем сайте.
В следующих выпусках юзабилити-лаборатории мы продолжим анализ эффективности взаимодействия клиентов с интернет-магазинами.
Теги:
