Подписывайтесь на мой новый канал: делюсь интересными фичами из мира e-commerce 3 раза в неделю

РЕЙТИНГ И ОТЗЫВЫ О ТОВАРЕ

ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
146
ГАЙДЛАЙНОВ
Фидбэк – важный драйвер продаж. Выбирая товар, мы все чаще обращаемся к отзывам и оценкам тех, кто уже его купил. Каковы лучшие практики размещения оценок и отзывов на странице товара? Какие ошибки лучше не совершать? Разберем в этой статье.

Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
Партнер Experience.Partners
Автор сайта HardClient.com
СТРУКТУРА СТАТЬИ
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
29 детальных чек-листов по e-commerce доступны в моем Telegram.

1. HIGHLIGHT ОЦЕНОК И ОТЗЫВОВ

Доступен в рамках первого экрана

Индикатор оценки позволяет сформировать первое впечатление о товаре, поэтому разместите его на первом экране, без прокрутки – как на ПК, так и на мобильных.
hardclient

Привычно расположен

Разместите индикатор там, где клиенты ожидают его увидеть и где чаще сталкиваются с ним в других интернет-магазинах – в шапке или под названием товара.
hardclient

Соответствует реальным оценкам

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

Привычный формат

Не изобретайте колесо: если клиенты привыкли к формату 1 или 5 звезд с текстом оценки, не стоит их удивлять форматом, который может вызвать вопросы.
hardclient

Иконки не пикселят

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

Частичное заполнение звёзд

Если используете формат звезд, предусмотрите их частичное заполнение. Например, при оценке 4.5 из 5.0 последняя звезда должна быть заполнена наполовину.
hardclient

Рейтинг высокий

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

Highlight высокого рейтинга

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

Описание методологии

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

Характеристики с высокой оценкой

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

Информация при наведении

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

Прокрутка к блоку при клике

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

Без возможности оставить оценку

Не давайте посетителям сайта оставлять оценку по товару, который они не покупали. Это делает полезность оценок близкой к нулю.

Количество отзывов

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

Отзывы без ошибок

Учитывайте, что текст отзывов будет изменяться в зависимости от их числа. Если этот момент не прорабатывать, получится вот такой пример:
hardclient

Не путаем отзывы с оценкой

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

Отзывы кликабельны

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

Иконки для отзывов

Если мы не хотим визуально перегружать интерфейс, вместо слова «отзывов» можно использовать понятную для клиента иконку (но этот момент стоит тестировать).
hardclient

Highlight отзыва

Интересной практикой может быть вынесение хорошего отзыва на первый экран. Такой highlight может сыграть свою роль при принятии решения о покупке.
hardclient

Без указания количества ответов

Зачем показывать число ответов наравне с вопросами? Если их меньше, чем вопросов, это лишь подсветит факт того, что компания ответила не на все вопросы.
hardclient

Микроразметка

С помощью микроразметки рейтинг может оказаться на странице результатов поиска Яндекс/Google, повышая конверсию в клик и придавая больше доверия магазину. (Юрий Головчанский, спасибо за идею).
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

2. RATING SUMMARY

Содержится на странице

Разместите элемент с общей оценкой и распределением оценок в блоке оценок и отзывов, чтобы сделать его более информативным и сократить время восприятия информации.
hardclient

Общая оценка хорошо заметна

Сделайте так, чтобы общая оценка хорошо выделялась на фоне остальных элементов, т.к. это фактически ключевой показатель в рамках блока.
hardclient

Визуализация оценки

Представьте общую оценку в визуальном формате, чтобы привлечь внимание клиента. Это могут быть 5 звезд или, например, кольцевая диаграмма.
hardclient
hardclient

Визуализация распределения

Представьте распределение по оценкам в визуальном формате баров, чтобы сократить время, необходимое для восприятия информации.
hardclient
hardclient

Оценки по убыванию

Выстройте оценки в наиболее привычном порядке убывания. Так, чтобы клиент сначала сталкивался с числом положительных оценок. Иначе будет когнитивный диссонанс.
hardclient

Подписи к барам

Сделайте распределение оценок более информативным, добавив к барам подписи. Можно использовать как абсолютные значения, так и % от общего числа оценок.
hardclient
hardclient

Соответствие числа оценок

Если в общей оценке вы пишите, на основании скольких отзывов она рассчитана, в сумме число оценок в распределении должно быть равно общему числу.
hardclient

Понятность оценок

Названия оценок можно сделать более понятными, снабдив подписями. Это позволит легче донести, чему именно соответствует оценка.
hardclient

Не содержит отзывов без оценки

В распределении не должно быть отзывов без звезд: это просто означает, что клиент не оценил товар. Смысла добавлять такие оценки нет.
hardclient

Общее число оценок

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

Терминология корректна

Будьте корректны в терминологии. Оценки и отзывы – это разные вещи. В противном случае это может вызвать у клиента вопросы («написано, что отзывов 7, а он один»).
hardclient
hardclient

Highlight % рекомендаций

Если % рекомендаций товара достаточно высокий, это можно отдельно подсветить в рамках summary.
hardclient

Без highlight'а, если % низкий

И наоборот, не отображайте % рекомендаций по товарам с низким рейтингом. Такой highlight будет дополнительно его «топить». Купили бы товар со скриншота?
hardclient

Работает, как фильтр

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

Корректная фильтрация

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

Оценки без отзывов не кликабельны

Зачем давать клиенту возможность фильтровать значения только для того, чтобы он столкнулся с нулевыми результатами?
hardclient

Кликабельная область

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

3. ОЦЕНКИ ХАРАКТЕРИСТИК

Используются

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

Характеристики релевантны

Убедитесь в том, что характеристики, по которым вы предлагаете оценить товар, не слишком общие и релевантны конкретно для него.
hardclient

Количество оценок, если их много

Разместите рядом с блоком оценок по характеристикам количество оценок, на основании которых они рассчитаны. Это позволит повысить доверие клиента к оценкам.
hardclient

Распределение оценок при клике

Блок можно сделать более информативным, и при клике по характеристике показывать, как распределены оценки клиентов.
hardclient

Визуализация

Представьте оценки по характеристикам в виде баров. Это сделает блок более заметным и лучше привлечет к нему внимание клиента.
hardclient
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

4. БЛОК С ОТЗЫВАМИ

Всегда доступен в 1 клик

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

Не виден в премиальном сегменте

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

Не виден, если может навредить

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

Доступен при прокрутке страницы

Часть клиентов могут не заметить вкладки с контентом. Поэтому лучше разместить краткую версию блока с отзывами о оценками на основной странице товара.

Placeholder, если отзывов нет

Если вы решили отображать блок всегда, предусмотрите визуально привлекательный placeholder, который подсвечивал бы, что товар новый или по нему пока нет отзывов.
hardclient
hardclient

Если отзывов нет, без СТА

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

Нестандартный заголовок

Хорошо продуманный нестандартный заголовок для отзывов может дополнительно привлечь внимание и вызвать позитивную реакцию клиентов.
hardclient

Подсвечивает количество отзывов

Добавьте в шапку блока количество отзывов, чтобы лучше управлять ожиданиями клиента относительно объема фидбэка.
hardclient

Без ошибок

Если вы поясняете число отзывов в явной форме, прописывая «отзывов» или «оценок», изменяйте текст в зависимости от числа. Иначе получится вот так:
hardclient