Close
Telegram
WhatsApp
VK
Messenger
Mail
Phone

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

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

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

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

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

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

Интуитивно расположен

Разместите индикатор там, где клиенты ожидают его увидеть и где чаще сталкиваются с ним в других интернет-магазинах – в шапке или под названием товара.
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

Без числа оценок, если их мало

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

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

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

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

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

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

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

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

Не виден, если отзывов нет

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Без ошибок

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

Число отзывов не дублируется

Разместить число отзывов в блоке – хорошо. Но важно знать меру и не перестараться. Слишком часто дублировать этот показатель нет смысла.
hardclient

Число соответствует highlight'у

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

Соответствие внутри блока

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

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

Не размещайте текст о снятии ответственности магазина за отзывы клиентов. Тем более, не выделяйте его в рамках интерфейса. Это лишь отпугнет клиента.
hardclient

Раздел для медиа-контента

Части клиентов может быть интересно не читать, а посмотреть на товар. Поэтому медиа-контент можно вывести в отдельный блок. Visual first.
hardclient

Медиа в формате stories

Блок с медиа-контентом также можно под знакомый многим формат stories из соц.сетей. Так большее количество клиентов могут на него среагировать.
hardclient

Число объектов в медиа-разделе

Как и в общем блоке, ожиданиями клиента по объему контента можно управлять еще до перехода к просмотру фото/видео – на уровне самой подборки.
hardclient
hardclient

5. ПОЛНЫЙ СПИСОК ОТЗЫВОВ

Ограничение блока по размеру

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

Кнопка расположена интуитивно

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

Текст кнопки интуитивный

Если подгружается только часть отзывов, лучше пишите в кнопке просто «Показать еще», чем указывать еще и число. Иначе будет не понятно, все это отзывы или лишь часть.

Авто-прокрутка в полном списке

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

Без прокрутки при подгрузке

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