Продолжаем рассматривать юзабилити-ошибки, из-за которых интернет-магазины теряют покупателей и деньги. Хотя имеют в наличии именно то, за чем пришел клиент, но не смогли организовать эффективный поиск товара на сайте.
Ранее мы детально рассмотрели вопросы поиска товара через поисковую строку. Сегодня мы расскажем, каким должен быть удобный каталог товаров со всеми сопутствующими возможностями.
Мы отобрали 4 интернет-магазина, чтобы прокомментировать примеры широкого и узкого ассортимента товаров.
Анализ интернет-магазинов:
divine-light.ru
techno-rus.com
akcentr.ru
vertical.ru
В этой статье мы рассмотрели две важные задачи клиента:
- Поиск конкретного товара по названию через меню или каталог
– по названию бренда
– по его названию - Поиск товара по заданным критериям (известны только 1-2 параметра товара)
Задача 1. Поиск конкретного товара по названию через меню или каталог
Мы взяли по одному товару, имеющемуся в наличии на каждом сайте, и попробовали найти его через меню и каталог.
Поиск товара по названию бренда
По данным Всероссийского исследования потребительского поведения клиентов интернет-магазинов (далее просто Исследование ИМ), которое мы провели в 2019 году – 32% пользователей ищут знакомый товар в меню или каталоге по названию бренда.
Наши рекомендации к разделу “Бренды”:
- Список брендов должен быть упорядочен, чтобы была возможность быстро перейти к нужному бренду
- Если брендов много, должна быть возможность поиска среди них (сортировка по брендам или расположение по алфавиту)
Рассмотрим неудачные решения.
На сайте techno-rus.com есть современный домофон Commax CDV-1020AQ серебро.
![Домофон “Commax CDV-1020AQ серебро” на сайте techno-rus.com](https://uexpert.ru/wp-content/uploads/2020/07/d29a4bfa5372f3d911277912629f0422.png)
Домофон “Commax CDV-1020AQ серебро” на сайте techno-rus.com
Попробуем его найти по названию бренда “Commax”. В главном меню нет раздела “Бренды”.
![Меню на главной странице сайта techno-rus.com](https://uexpert.ru/wp-content/uploads/2020/07/380c78332ba182549e96477ce2c0aea8-1024x139.png)
Меню на главной странице сайта techno-rus.com
В подменю “Каталог” есть категории товаров, но нет поиска по брендам.
![Подменю “Каталог” на главной странице сайта techno-rus.com](https://uexpert.ru/wp-content/uploads/2020/07/cc8bc35dbf1db3c0deef855d37fd3b1e-1-1024x456.png)
Подменю “Каталог” на главной странице сайта techno-rus.com
Прямо над подвалом есть список логотипов, возможно это как раз список брендов.
![Блок с логотипами на главной странице сайта techno-rus.com](https://uexpert.ru/wp-content/uploads/2020/07/bdc242bfda02b856f12e375ea60f388a-1024x328.png)
Блок с логотипами на главной странице сайта techno-rus.com
Однако этот блок никак не озаглавлен и лишен визуального акцента: все логотипы серые, плохо заметные. Кроме того, в блоке всего 7 логотипов (2 экрана) и нет нужного бренда.
Ссылка “Бренды” обнаружилась в итоге в подвале в столбце “Помощь”. Найти её сложно, и лишь немногие клиенты смогут ей воспользоваться.
![Меню в подвале на главной странице сайта techno-rus.com](https://uexpert.ru/wp-content/uploads/2020/07/a5458b3b74d0a1734bf92d0c9d089989-1024x281.png)
Меню в подвале на главной странице сайта techno-rus.com
На странице “Бренды” названия компаний представлены в непонятном для клиента порядке: нет сортировки по алфавиту и нет возможности быстро найти нужный бренд.
![Страница “Бренды” на сайте techno-rus.com](https://uexpert.ru/wp-content/uploads/2020/07/7c8461c2c05adca3b5a28973a4b7c688-1024x755.png)
Страница “Бренды” на сайте techno-rus.com
Для поиска придется пролистать 12 страниц с логотипами, так как нет поиска по названию бренда.
![Страница с логотипами на сайте techno-rus.com](https://uexpert.ru/wp-content/uploads/2020/07/2cc0d14685bab1221b85b903a64e3c12-1024x351.png)
Страница с логотипами на сайте techno-rus.com
У многих брендов не загружены изображения логотипов, вместо них отображаются только текстовые названия.
![Пример отсутствия логотипов на странице “Бренды” на сайте techno-rus.com](https://uexpert.ru/wp-content/uploads/2020/07/168eff05f6d21239d9c0efe1931c6e9c-1024x767.png)
Пример отсутствия логотипов на странице “Бренды” на сайте techno-rus.com
В итоге, когда нужный бренд найден, оказывается, что логотип некликабелен. Таким образом, поиск товара по бренду невозможен. Эта задача клиента оказывается невыполнима полностью.
На сайте akcentr.ru есть итальянская подвесная люстра ST Luce Anticato SL669.403.03
![Люстра “ST Luce Anticato SL669.403.03” на сайте akcentr.ru](https://uexpert.ru/wp-content/uploads/2020/07/7dfc5c4a212a44f031338902252ce903.png)
Люстра “ST Luce Anticato SL669.403.03” на сайте akcentr.ru
Попробуем её найти через название бренда “ST Luce”.
В меню нет раздела “Бренды”.
![Меню на главной странице сайта akcentr.ru](https://uexpert.ru/wp-content/uploads/2020/07/31a9a4635a1c67c2f8d041a0effd5580-1024x201.png)
Меню на главной странице сайта akcentr.ru
В подменю “Свет” раздела “Бренды” тоже не найти.
![Подменю “Свет” на главной странице сайта akcentr.ru](https://uexpert.ru/wp-content/uploads/2020/07/e6d6821f557eebfbf26121f821d7c089-1024x566.png)
Подменю “Свет” на главной странице сайта akcentr.ru
Ни на главной странице, ни в подвале, нет раздела “Бренды”.
![Меню в подвале на главной странице сайта akcentr.ru](https://uexpert.ru/wp-content/uploads/2020/07/0e844a1155d79654a862e13009ba99e6-1024x282.png)
Меню в подвале на главной странице сайта akcentr.ru
Таким образом на сайте akcentr.ru нет возможности перейти к списку брендов и найти товар через него.
На сайте vertical.ru есть качественная краска “Finncolor Oasis Interior A глубокоматовая 0,9 л для стен и потолка”.
![Краска “Finncolor Oasis Interior A глубокоматовая 0,9 л для стен и потолка” на сайте vertical.ru](https://uexpert.ru/wp-content/uploads/2020/07/5a382b39f3566bb971b0491701c1021b.png)
Краска “Finncolor Oasis Interior A глубокоматовая 0,9 л для стен и потолка” на сайте vertical.ru
Попробуем её найти через название бренда “Finncolor”.
Как видно в меню на главной странице нет возможности поиска по брендам.
![Меню на главной странице сайта vertical.ru](https://uexpert.ru/wp-content/uploads/2020/07/0c899ba04652410db5d157b28d681a12-1024x145.png)
Меню на главной странице сайта vertical.ru
В подменю “Каталог” нет раздела “Бренды”, как, впрочем, и в других разделах меню.
![Подменю “Каталог” на главной странице сайта vertical.ru](https://uexpert.ru/wp-content/uploads/2020/07/a48b7f34a8d80103fe34f1267e4aca67-1024x226.png)
Подменю “Каталог” на главной странице сайта vertical.ru
Раздел “Бренды” не найти ни на Главной странице, ни в подвале.
![Меню в подвале на главной странице сайта vertical.ru](https://uexpert.ru/wp-content/uploads/2020/07/0e5d7525e2342b8975170469e933d360-1024x218.png)
Меню в подвале на главной странице сайта vertical.ru
Таким образом на сайте vertical.ru нет возможности перейти к списку брендов и найти товар через него.
А теперь посмотрим более удачное решение.
На сайте divine-light.ru есть итальянская люстра VELANTE 319-503-02.
![Люстра VELANTE на сайте divine-light.ru](https://uexpert.ru/wp-content/uploads/2020/07/4ed31f308049cce6ac189e49bdd4299e.png)
Люстра VELANTE на сайте divine-light.ru
Попробуем её найти через название бренда “VELANTE”.
Как видно в меню на главной странице нет возможности поиска по брендам.
![Меню на главной странице сайта divine-light.ru](https://uexpert.ru/wp-content/uploads/2020/07/aa096f4ed4abdccaf18f8f5f10415592-1024x208.png)
Меню на главной странице сайта divine-light.ru
В подменю “Люстры” есть раздел “Популярные бренды”, но к сожалению, в него не попал искомый бренд.
![Подменю “Люстры” на главной странице сайта divine-light.ru](https://uexpert.ru/wp-content/uploads/2020/07/f528df9b7bd038e86b179146aec98804-1024x477.png)
Подменю “Люстры” на главной странице сайта divine-light.ru
Ниже на главной странице есть блок “Наши любимые бренды”, в котором мы в первый раз видим ссылку на список брендов “Все бренды”
![Страница “Производители” на сайте divine-light.ru](https://uexpert.ru/wp-content/uploads/2020/07/073e1ea6a53091cb54a417bda7169abf-1024x172.png)
Страница “Бренды” на сайте divine-light.ru
При переходе по этой ссылке мы попадаем на страницу “Производители”
![Страница “Бренда” на сайте divine-light.ru](https://uexpert.ru/wp-content/uploads/2020/07/b18e053d078a8d0a8540e1579996e67e-1024x815.png)
Страница “Производители” на сайте divine-light.ru
Название страницы “Производители” не соответствует названию ссылки “Все бренды”, и это вводит пользователей в заблуждение, поскольку нарушается принцип единообразия. На самой странице список брендов упорядочен по алфавиту и можно найти искомый бренд.
При переходе по ссылке с названием бренда мы попадаем на страницу товаров бренда.
![Страница “Бренда” на сайте divine-light.ru](https://uexpert.ru/wp-content/uploads/2020/07/e771751eaecf38f80376e80b74e2d75d-1024x687.png)
Страница “Бренда” на сайте divine-light.ru
На этой странице представлены товары бренда, есть фильтры по категориям товаров и сортировка, что удобно для поиска.
Наиболее удачно поиск по брендам реализован на сайте divine-light.ru. В меню есть популярные бренды, на главной странице есть блок с брендами и ссылка для перехода на страницу брендов.
На странице брендов все бренды отсортированы по алфавиту и можно быстро найти нужный.
При переходе по ссылке с названием бренда мы видим страницу, где есть краткое описание бренда и список товаров этого бренда с возможностью его фильтрации по категориям товаров и сортировка.
Рекомендуем добавить ссылку “Бренды” в Главное меню.
Поиск товара по названию через меню или каталог
Согласно Исследованию ИМ, 25% пользователей, ищущих конкретный товар, будут искать его через меню или каталог.
Возможность поиска по нескольким категориям товаров
Клиентам важно, чтобы можно было искать товар как по основным категориям типа “парфюмерия, косметика”, так и по альтернативным, например, “для мужчин, для женщин”.
Хорошее решение
На сайте divine-light.ru используется 7 вариантов категоризации люстр: по типу, месту, стилю, материалу, стране, цвету, бренду.
![Подменю “Люстры” на главной странице сайта divine-light.ru](https://uexpert.ru/wp-content/uploads/2020/07/b07694faa67cc9fa09f3cf21eedf7171-1024x478.png)
Подменю “Люстры” на главной странице сайта divine-light.ru
На остальных сайтах данный подход не используется.
Карточки товаров на странице категории товаров
На странице категории товаров клиенты просматривают карточки товаров для выбора нужного им варианта.
Хорошая карточка товара должна содержать:
- Качественное фото товара
- Название
- Цену
- Понятные для клиента признаки, например, “Новинка”, “Акция”, “Бестселлер” и др.
- Тип / категорию товара
- Название бренда (например, в названии товара)
- Возможность добавить товар в Корзину
- Возможность добавить товар в Избранное
- Оценку популярности товара (например, звездочки)
- Возможность пролистать фотографии товара
- Возможность получить больше дополнительной информации, не переходя на страницу товара (например, при наведении курсора на карточку товара открывается мини описание)
Также клиенту важно знать, есть ли товар в наличии, и увидеть основные характеристики, влияющие на выбор.
В полной юзабилити-экспертизе мы проверяем интернет-магазин по 200 критериям, определяющим эффективность взаимодействия пользователей с интернет-магазином. В рамках нашей статьи мы можем рассмотреть лишь часть из них. Посмотрим, как реализованы карточки товаров на выбранных нами сайтах.
На сайте divine-light.ru представлено 9 из 11 блоков.
![Пример оформления карточек товаров сайте divine-light.ru](https://uexpert.ru/wp-content/uploads/2020/07/eccf8a80f132ff888704dca990d0ae3a.png)
Пример оформления карточек товаров сайте divine-light.ru
Помимо стандартных признаков товаров типа “Новинка”, “Акция” или “Бестселлер” в этом магазине используются такие признаки как “Лампы в подарок”, “В этой серии есть бра”. Также на карточке присутствует информация о размерах лампы и площади освещения. Есть информация о наличии товара. Есть возможность купить в 1 клик.
На сайте techno-rus.com представлено 10 из 11 блоков.
![Пример оформления карточек товаров на сайте techno-rus.com](https://uexpert.ru/wp-content/uploads/2020/07/af5c9d95a658422bb9079c925be6c4af-1024x454.png)
Пример оформления карточек товаров на сайте techno-rus.com
Дополнительно есть информация о наличии товара.
На сайте akcentr.ru представлено 9 из 11 блоков.
![Пример оформления карточек товаров на сайте akcentr.ru](https://uexpert.ru/wp-content/uploads/2020/07/ae8c7d84d1aa05c992af8c7299395e44.png)
Пример оформления карточек товаров на сайте akcentr.ru
Дополнительно есть информация о размере скидки и о наличии товара.
На сайте vertical.ru представлено 6 блоков из 11.
![Пример оформления карточек товаров на сайте vertical.ru](https://uexpert.ru/wp-content/uploads/2020/07/48082061c846b1df7a7bc28bb5e1f234-1024x488.png)
Пример оформления карточек товаров на сайте vertical.ru
Можем отметить качественные крупные фотографии товаров и заметную цену. На карточке товара есть информация об объеме, базисе и цвете краски. Есть возможность купить в 1 клик. Нет информации о наличии товара.
Все рассмотренные карточки товаров реализованы хорошо.
Для улучшения можно посоветовать добавить оценку популярности товара (например, звездочки) как на сайте techno-rus.com
Хорошим примером является отображение дополнительных важных характеристик товара, с возможностью их изменения как на сайте vertical.ru
Клиентам также очень полезна возможность купить товар в 1 клик.
В следующей части мы рассмотрим поиск товара по заданным условиям.
А ваш сайт соответствует современным требованиям юзабилити? → Закажите юзабилити-экспертизу прямо сейчас!