hardclient scroll to top
hardclient telegram

Проектируем рейтинг и отзывы о товарах в приложении

Лучшие практики UX/UI в мобильном e-commerce
200
гайдлайнов
Обратная связь сильно влияет на наши решения о покупках. Выбирая товар, мы все чаще обращаемся к отзывам и оценкам тех, кто уже его купил.

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

За одним исключением: о том, как клиенты оставляют отзывы о товаре, я напишу отдельно. Там много нюансов, и я не хочу, чтобы эта статья перевалила за 200 пунктов.

Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с коллегами.

Автор hardclient.com
Структура статьи
Чтобы облегчить восприятие, статью я разбил на смысловые блоки в соответствии с этапами клиентского пути и функциональными элементами:

Карточки товаров в листинге

56 гайдлайнов

Оценки есть в карточках

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

Пример Яндекс.Маркет
hardclient

Когда оценки не используются?

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

Пример Zarina
hardclient

Расположены под названием товара

Первый вариант размещения блока с рейтингом в карточках – под названием товара (либо под подписями снизу него). Встречается очень часто, в т.ч. в ключевых маркетплейсах.

Пример Ozon
hardclient

Расположены рядом с фото

Также довольно частый вариант размещения блока – поверх фото товара либо в непосредственной близости от него. Практика популярна в food-ритейле.

Пример СберМаркет
hardclient

Видны, если нет оценок

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

Пример М.Видео
hardclient

Нестандартное отображение, если оценок нет

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

Пример ВкусВилл
hardclient

Скрыты, если нет оценок?

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

Пример AliExpress
hardclient

Обособлены от других элементов

Лучше не размещать блок вплотную к другим элементам в карточке товара, чтобы они не прилипали друг к другу, как в примере.

Антипример Cozy Home
hardclient

Выровнены относительно других элементов

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

Антипример Лента
hardclient

Оценки – часть карточки

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

Антипример ecco
hardclient

Хорошо виден на фоне

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

Антипример Дикси
hardclient

Расположены на подложке

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

Пример Магнит
hardclient

Подложка как часть карточки

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

Пример ВкусВилл
hardclient

Подложка с отступами

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

Антипример Пятёрочка
hardclient

Визуализация в формате звёзд

Наиболее часто можно встретить визуализацию оценок по товарам именно в формате звёзд. Здесь есть развилка.

Пример М.Видео
hardclient

Формат 1 звезды

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

Пример СберМаркет
hardclient

Формат 5 звёзд

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

Пример Sokolov
hardclient

Звёзды в желтом цвете

Наиболее часто встречается визуализация звезд именно в привычном желтом цвете.

Пример МегаМаркет
hardclient

Звёзды в корпоративном цвете

Также достаточно часто компании отходят от общепринятых канонов и окрашивают звезды в корпоративный цвет. Смотрится неплохо.

Пример Эльдорадо
hardclient

Градиентная заливка звезд

Небольшая деталь, но о внимании к деталям – добрая часть этого блога. Иногда фон звезд может быть не монохромным, а в виде легкого градиента.

Пример Пятёрочка
hardclient

Цвет звезд зависит от рейтинга

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

Пример Ozon
hardclient

Размер звёзд

Сделайте звёзды достаточного размера, чтобы они легко воспринимались пользователями, включая тех, чьё зрение неидеально.

Антипример Леонардо
hardclient

Звёзды – только в рейтинге

Визуализацию в формате звёзд лучше использовать именно для рейтинга. Добавляя их в кнопку избранного, вы можете ввести клиента в заблуждение, будто по товару оценка 1/5.

Антипример Дром Авто
hardclient

Альтернатива звездам

Редко, но встречается и альтернатива звездам в формате индикатора, меняющего цвет в зависимости от оценки. Имеет право на существование? Напишите в комментах.

Пример Жизньмарт
hardclient

Числовая оценка присутствует

Оценка в числовом формате должна быть видна. Клиенту будет сложнее воспринять информацию на основе лишь звезд. Особенно если оценка не целая.

Антипример Петрович
hardclient

Видны все оценки

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

Пример М.Видео
hardclient

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

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

Антипример Kari
hardclient

Цвет оценки vs. звёзд

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

Антипример Утконос
hardclient

Оценка расположена после звезд

Наиболее привычный формат – это когда оценка размещена после звёзд. Так делает подавляющее большинство.

Пример Ozon
hardclient

Расположение оценки до звезд?

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

Пример Amazon
hardclient

Оценка выровнена относительно звёзд

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

Антипример Леонардо
hardclient

Точность оценки – до десятых

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

Пример Uzum Market
hardclient

Точность оценки – до сотых?

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

Пример Пятёрочка
hardclient

Точность оценки – до единиц?

И наоборот, округляя оценку до единиц, есть риск сделать ее слишком абстрактной и сообщить клиенту недостаточно информации. И встречается такой формат редко.

Пример Азбука Вкуса
hardclient

Когда точность можно изменить

Если оценка целая – например, 5.0 – ее можно представить в укороченном формате, не меняя смысла. Остальные оценки при этом могут отображаться с уточнением.

Пример Ситилинк
hardclient

Highlight числа оценок

Добавляя число оценок, мы делаем карточки товаров более информативными: товар с оценкой 5.0, основанной на 100 отзывах, внушает больше доверия, чем на основе лишь 1.

Пример Четыре Лапы
hardclient

Highlight числа отзывов

Отображая число отзывов, мы таким образом подсвечиваем объем пользовательского контента по товару, доступного в его карточке.

Пример СберМаркет
hardclient

Highlight числа покупок?

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

Пример AliExpress
hardclient

Что именно мы подсвечиваем?

Учитывая такую развилку в показателях, более понятно для клиента будет, если в блоке в явной форме будет написано, что именно вы подсвечиваете – отзывы или оценки.

Пример Wildberries, М.Видео
hardclient

Согласованность частей текста

Учитывайте, что в зависимости от числа отзывов/оценок у слова, которое их поясняет, могут быть разные окончания.

Пример М.Видео
hardclient

Избегание рисков согласованности?

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

Пример Галамарт
hardclient

Иконка вместо текста

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

Пример СберМаркет
hardclient

Число не видно, если оценки нет

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

Антипример Галамарт
hardclient

Число рядом с оценкой

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

Пример М.Видео
hardclient

Число и оценка как единый элемент

Иногда встречаются кейсы, когда оценка и число не просто располагаются вместе, а помещаются в единый контейнер, который подчеркивает их взаимосвязь.

Пример Джум
hardclient

Число после оценки

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

Пример Сима-ленд
hardclient

Число до оценки?

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

Пример Акушерство
hardclient

Разделение скобками

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

Пример Leroy Merlin
hardclient

Разделение слэшем

Также нередко можно встретить и разделение оценки и числа отзывов с помощью косой черты. Свою роль в данном контексте она хорошо выполняет.

Пример Джум
hardclient

Разделение цветом

Кроме того, облегчить восприятие помогает выполнение этих показателей в разном цвете. Число оценок в большинстве случае выступает, как визуально вторичное.

Пример Спортмастер
hardclient

Число оценок хорошо заметно

Однако в попытке сделать число отзывов визуально вторичным лучше не перебарщивать и проверять цвет шрифта на соответствие гайдлайнам контрастности.

Антипример Красное & Белое
hardclient

Сокращение числа оценок до тысяч

Если оценки исчисляются тысячами, их иногда сокращают в формате «Х.Хк», чтобы облегчить интерфейс. Главное – учитывать, что целевая аудитория поймет такое сокращение.

Пример DNS
hardclient

Сокращение числа через +

Чтобы снизить когнитивную нагрузку и показать, что реальное число превосходит указанное, можно использовать формат «Х+» обнуляя таким образом десятки, сотни и т.д.

Пример BroniBoy
hardclient

Комбинированный подход к сокращению

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

Пример Джум
hardclient

Без сокращений числа оценок?

Теперь можно посмотреть, как на больших числах смотрятся точные значения по числу оценок. Как считаете, лучше такой формат, чем предыдущие примеры? Напишите в комментах.

Пример Flor2U
hardclient

Возможность оценки из карточки листинга

Редкий кейс, но не мог обойти стороной, иначе обзор был бы неполным. Что думаете по поводу механики, позволяющей оценить товар прямо из листинга? Обсудим в комментах?

Пример Буквоед
hardclient
На что обратить внимание при проектировании карточек в листинге? Лучшие практики и грабли, на которые не стоит наступать.

Сортировка листинга

9 гайдлайнов

Сортировка по рейтингу

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

Пример Перекрёсток
hardclient

Сортировка по числу отзывов

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

Пример Все Инструменты
hardclient

Сортировка по обзорам

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

Пример Ситилинк
hardclient

Сортировка по рейтингу экспертов

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

Пример SimpleWine
hardclient

Покрытие товаров оценками

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

Пример DNS
hardclient

Без сортировки по умолчанию

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

Пример Ситилинк
hardclient

Сортировка односторонняя

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

Пример МегаМаркет
hardclient

Подписи к сортировке

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

Пример М.Видео
hardclient

Иллюстрации к сортировке

В некоторых кейсах к варианту сортировки по оценкам также добавляют релевантную визуализацию, которая упрощает восприятие.

Пример Жизньмарт
hardclient
Про проектирование сортировки листинга товаров в e-commerce приложениях есть отдельная большая статья на 100+ пунктов.

Фильтрация листинга

7 гайдлайнов

Предусмотрена

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

Пример ВкусВилл
hardclient

Фильтрация по диапазону

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

Пример Ситилинк
hardclient

Без пересечения диапазонов

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

Антипример Впрок
hardclient

Выбор из списка

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

Пример М.Видео
hardclient

Выбор с помощью слайдера с 1 ползунком

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

Пример FlowWow
hardclient

Выбор с помощью слайдера с 2 ползунками?

Слайдеры с 2 ползунками, которые позволяют ограничивать максимальную оценку, вызывают вопросы: зачем клиенту намеренно искать товары с более низким рейтингом?

Пример Hoff
hardclient

Выбор с помощью тумблера

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

Пример Ozon
hardclient
Проектирование интерфейса работы с фильтрами я уже дательно описал в одной из самых больших своих статей.

Индикатор в карточке товара

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

Добавлен в карточку

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

Пример СберМаркет
hardclient

В рамках первого экрана

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

Пример Яндекс.Маркет
hardclient

Элемент активен

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

Антипример Rendez-Vous
hardclient

Активна вся область

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

Антипример М.Видео
hardclient

Пояснение об активности

Иногда факт того, что индикатор активный, подсвечивают с помощью визуальных элементов: добавляют к нему стрелку вправо или выполняют в виде кнопки.

Пример Ozon
hardclient

При тапе переход к краткой версии списка

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

Пример Спортмастер
hardclient

При тапе переход к полной версии списка

В качестве альтернативы можно вести клиента сразу на общий экран с рейтингом и отзывами для более детального ознакомления.

Пример Яндекс.Маркет
hardclient

При тапе переход корректен

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

Антипример Sokolov
hardclient

Rating summary

29 гайдлайнов

Блок добавлен

Rating summary в карточке товара или на экране отзывов позволит клиенту быстрее сформировать впечатление без необходимости углубляться в детали.

Пример Л'Этуаль
hardclient

Содержит общий рейтинг

Один из ключевых элементов rating summary – общий рейтинг товара, основанный на оценках клиентов.

Пример Лента
hardclient

Рейтинг в листинге vs. в summary

Рейтинг товара должен быть единым везде. В примере клиент узнает, что рейтинг не 5.0, а 4.5, лишь перейдя на 2 экрана вглубь из листинга. Надеюсь, это просто баг.

Антипример Детский мир
hardclient

Отображение максимальной оценки

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

Пример Hoff
hardclient

Содержит текстовое пояснение

Иногда, помимо самой оценки, в rating summary также можно встретить и текстовое пояснение, призванное улучшить ее восприятие.

Пример М.Видео
hardclient

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

Если свободное пространство позволяет, оценку в текстовом формате можно снабдить визуализацией в формате 5 звезд. Это позволит облегчить восприятие информации.

Пример AliExpress
hardclient

Содержит число оценок

Хорошей практикой также будет добавить в блок общее число оценок, на основе которых сформирован рейтинг. Это повысит его информативность.

Пример Перекрёсток
hardclient

Содержит число отзывов

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

Пример Яндекс.Маркет
hardclient

Показатели корректны

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

Антипример МегаМаркет
hardclient

Содержит % рекомендаций

В некоторых кейсах при сборе отзывов также уточняется, порекомендовал бы клиент купленный товар или нет, и доля рекомендующих выносится в rating summary.

Пример Спортмастер
hardclient

Содержит разбиение оценки по характеристикам

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

Пример Спортмастер
hardclient

Содержит ключевые особенности

Некоторые компании анализируют общий массив отзывов с помощью AI и подсвечивают ключевые особенности товара, как позитивные, так и негативные.

Пример Яндекс.Маркет
hardclient

Содержит распределение оценок

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

Пример Ozon
hardclient

Распределение видно по умолчанию

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

Антипример Wildberries
hardclient

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

Распределение оценок лучше визуализировать. Формат горизонтальных частично закрашенных баров хорошо подойдет для решения этой задачи.

Пример Азбука Вкуса
hardclient

Уровень заполнения баров

Заполнение баров должно отражать долю числа оценок с данным рейтингом к общему числу оценок. Закрашенные части в сумме должны давать 1 полностью закрашенный бар.

Пример Впрок
hardclient

Незакрашенная часть баров

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

Антипример М.Видео
hardclient

Спектр оценок

Лучше для оценки использовать наиболее привычную шкалу от 1 до 5. У кого есть идеи, зачем в rating summary выводить оценку 0, напишите, пожалуйста, в комментах.

Антипример Все Инструменты
hardclient

Порядок размещения оценок

Наиболее часто встречающийся порядок, в котором выстроены оценки – от 5 звезд к 1 звезде.

Пример Ситилинк
hardclient

Формат подписей: текстовый

Текстовый формат подписей не оставит у клиента никаких вопросов.

Пример Ozon
hardclient

Формат подписей: звезда и оценка

В качестве аналога полностью текстовому формату также можно встретить замену слова «звезд» на символы. Это позволит слегка облегчить интерфейс.

Пример Детский мир
hardclient

Формат подписей: 5 звезд?

Кроме того, встречается и третий формат – отображение от 1 до 5 звезд. Однако в сравнении с предыдущим вариантом он может выглядеть достаточно тяжеловесным.

Пример AliExpress
hardclient

5 звезд vs. бары

Иногда формат подписей, содержащих 5 звезд может ввести в заблуждение, т.к. их из-за расположения можно визуально перепутать с барами распределения оценок.

Пример ВкусВилл
hardclient

Формат подписей: целые числа

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

Антипример М.Видео
hardclient

Оценки в распределении vs. общая оценка

Общую оценку лучше выделять на фоне оценок в распределении, чтобы не вызывать у пользователя лишних вопросов.

Антипример ВкусВилл
hardclient

Бары сопровождаются значениями

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

Пример Ozon
hardclient

Значения в распределении vs. summary

Базовый момент: в сумме значения в распределении должны соответствовать общему количеству оценок в summary.

Пример Wildberries
hardclient

Нулевые значения визуально вторичны

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

Пример Золотое Яблоко
hardclient

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

Бары в rating summary можно сделать интерактивными – так, чтобы при нажатии на бар в общем списке оставались лишь отзывы с данной оценкой.

Пример Л'Этуаль
hardclient

Список отзывов

38 гайдлайнов

Добавлен

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

Антипример Леонардо
hardclient

Доступен без авторизации

Не стоит ставить клиенту палки в колеса на пути к покупке: у него должна быть возможность посмотреть отзывы по товару без необходимости проходить процесс авторизации.

Антипример Дикси
hardclient

Доступен на отдельном экране

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

Пример Uzum Market
hardclient

В карточке товара – краткая версия списка

Вместо этого в карточке товара можно оставить лишь его краткую версию с несколькими отзывами.

Пример Rendez-Vous
hardclient

Краткая версия вертикальным списком

Часто отзывы в краткой версии можно встретить в привычном для многих вертикальном формате списка.

Пример Hoff
hardclient

Краткая версия в виде горизонтальной коллекции

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

Пример Золотое Яблоко
hardclient

Краткая версия – один отзыв

Также нередко встречаются кейсы, когда в карточке товара подсвечивается 1 отзыв с возможностью просмотреть остальные.

Пример Спортмастер
hardclient

Возможность прокрутки отзывов заметна

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

Антипример Все Инструменты
hardclient

Cell snapping при прокрутке

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

Антипример Kari
hardclient

Переход к списку при тапе по оценке

Наиболее часто переход к списку осуществляется при тапе по highlight'у оценки и отзывов в верхней части карточки товара.

Пример МегаМаркет
hardclient

Переход к списку через вкладки

Также встречается открытие списка отзывов при нажатии на соответствующую вкладку, зафиксированную наряду с остальными при скролле.

Пример AliExpress
hardclient

Переход к списку из краткой версии

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

Пример Золотое Яблоко
hardclient

Появление списка анимировано

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

Пример Яндекс.Маркет
hardclient

Доступность при отсутствии отзывов

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

Пример Иль де Боте
hardclient

Фильтрация по оценке

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

Пример Детский мир
hardclient

Варианты фильтрации по оценке недвусмысленны

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

Антипример AliExpress
hardclient

Фильтрация по наличию медиаконтента

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

Пример Wildberries
hardclient

Фильтрация по варианту товара

Иногда также можно встретить фильтрацию отзывов именно по выбранному варианту товара. Это позволяет сделать фидбэк более релевантным для пользователя.

Пример Ozon
hardclient

Фильтрация по локальным отзывам

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

Пример AliExpress
hardclient

Фильтрация по селлеру/производителю

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

Пример ВкусВилл
hardclient

Сортировка по полезности

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

Пример Эльдорадо
hardclient

Фильтрация по подтвержденным отзывам

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

Пример DNS
hardclient

Highlight числа отзывов в вариантах фильтра

Highlight числа отзывов, подпадающих под выбираемое значение фильтра, позволяет лучше управлять ожиданиями пользователя относительно объемов контента.

Пример Джум
hardclient

Сортировка по свежести

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

Пример ВкусВилл
hardclient

Старые отзывы вначале?

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

Пример МегаМаркет
hardclient

Сортировка по возрастанию оценки

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

Пример Спортмастер
hardclient

Сортировка по убыванию оценки

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

Пример Детский мир
hardclient

Сортировка по дате изменения?

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

Пример DNS
hardclient

Сортировка по умолчанию

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

Пример Эльдорадо
hardclient

Highlight самого полезного отзыва

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

Пример М.Видео
hardclient

Highlight отзыва, выбранного продавцом

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

Пример Ozon
hardclient

Автоподгрузка отзывов

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

Пример ВкусВилл
hardclient

Интеграция раздела вопросов

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

Пример Яндекс.Маркет
hardclient

Интеграция cross-sell блоков

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

Пример Ozon
hardclient

Фиксация кнопки корзины

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

Пример Ozon
hardclient

Динамическая подгрузка при скролле

Учитывая, что это полный список с отзывами на отдельном экране, желательно подгружать контент динамически и не заставлять клиента совершать лишние действия при скролле.

Антипример Sokolov
hardclient

Поиск по отзывам

Иногда клиенту предлагают найти ответы на свои вопросы в отзывах с помощью поисковой строки. Встречается редко. Как думаете, почему? Напишите идеи в комментах.

Пример DNS
hardclient

Возможность быстрого возврата

Реализуйте возможность возврата к карточке товара из списка отзывов вне зависимости от уровня прокрутки. Чаще всего это фиксированная кнопка и edge swipe.

Пример Лента
hardclient

Карточки отзывов

43 гайдлайна

Карточки выделяются

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

Пример СберМаркет
hardclient

Наличие оценки

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

Антипример Утконос
hardclient

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

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

Пример СберМаркет
hardclient

Даты отзывов

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

Пример Ozon
hardclient

Относительные даты

По свежим отзывам можно устанавливать не абсолютные, а относительные даты: 2 дня назад, неделю назад и т.д.

Пример FlowWow
hardclient

Указание авторства отзыва

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

Пример Яндекс.Маркет
hardclient

Аватары vs. оценки

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

Антипример Лента Онлайн
hardclient

Возможность скрыть автора

Однако при этом авторам лучше оставить возможность скрыть по желанию свои данные в целях приватности.

Пример Ozon
hardclient

Указание города

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

Пример Спортмастер
hardclient

Контент модерируется

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

Пример Утконос
hardclient

Выделение достоинств и недостатков

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

Пример DNS
hardclient

Блоки озаглавлены

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

Пример СберМаркет
hardclient

Иконки вместо заголовков

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

Пример Ozon
hardclient

Выделение характеристик

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

Пример Все Инструменты
hardclient

Оценки в виде карусели тегов?

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

Пример DNS
hardclient

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

Иногда у клиентов уточняют: порекомендуют они товар или нет. И если они отвечают утвердительно, карточки их отзывов помечаются специальным маркером.

Пример Kari
hardclient

Ограничение размера видимого текста

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

Антипример DNS
hardclient

Выцветание обрезаемого текста

То, что текст виден не полностью, можно дополнительно подсветить за счет его выцветания.

Пример М.Видео
hardclient

Текст кнопки раскрытия полной версии отзыва

Текст кнопки раскрытия полной версии отзыва может отталкиваться от целевого действия.

Пример Спортмастер
hardclient

Вариант товара

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

Пример Джум
hardclient

Подтверждение покупки на площадке

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

Пример Ozon
hardclient

Опыт использования

Иногда в карточках отзывов подсвечивается, насколько долго клиент использует товар. Как считаете, какие подводные камни есть у этого показателя? Напишите в комментах.

Пример Все Инструменты
hardclient

Оценка отзывов

Сообщество клиентов само даст вам знать, какие отзывы полезны, а какие – нет. Главное – дать им возможность оценить отзыв.

Пример DNS
hardclient

Разнонаправленная оценка

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

Пример Лента
hardclient

Оценка в одном направлении

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

Пример ВкусВилл
hardclient

Оценки в форме иконок

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

Пример DNS
hardclient

Иконки оценок легко читаются

Однако в попытке выделиться и нарисовать собственные иконки лайка и дизлайка важно не переборщить: они должны оставаться легко читаемыми и понятными для большинства.

Антипример Утконос
hardclient

Цвет кнопок оценки отзыва

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

Пример Детский мир
hardclient

Побуждение к оценке

Кнопки оценок можно дополнительно сопроводить вопросом к клиенту: помог ему отзыв или нет. Это может повысить шансы на то, что клиент его оценит.

Пример Wildberries
hardclient

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

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

Пример Hoff
hardclient

Оценка отзывов только с авторизацией

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

Пример Детский мир
hardclient

Понятность необходимости авторизации

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

Антипример М.Видео
hardclient

Комментарии к отзывам

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

Пример Ozon
hardclient

Highlight числа комментариев

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

Пример М.Видео
hardclient

Ограничение текста комментариев

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

Пример Wildberries
hardclient

Ответы и ветвление комментариев

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

Пример DNS
hardclient

Highlight ответа продавца

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

Пример KazanExpress
hardclient

Жалобы на отзывы

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

Пример Спортмастер
hardclient

Кнопка жалобы содержит текст

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

Антипример Лента
hardclient

Выбор типа жалоб

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

Пример МегаМаркет
hardclient

Жалобы на комментарии

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

Пример Wildberries
hardclient

Шеринг отзывов

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

Пример Детский мир
hardclient

Карточки без отзывов?

Ну и напоследок: есть кейсы, когда карточки делают под каждую оценку, даже если по ней нет отзывов. Какие есть «за» и «против» у такой механики? Жду вас в комментах.

Пример Джум
hardclient

Медиаконтент в отзывах

10 гайдлайнов

Наличие медиаконтента в карточках

Наличие фото- и видеоконтента в отзывах позволит клиенту сформировать более полное представление о товаре.

Пример Джум
hardclient

Медиаконтент в карточках в формате плитки

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

Пример Ozon
hardclient

Медиаконтент в карточках в формате карусели

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

Пример МегаМаркет
hardclient

Автовоспроизведение видео

В некоторых кейсах видео в отзывах воспроизводится по умолчанию, когда клиент просматривает отзыв. Хорошая практика или не очень? Напишите в комментах.

Пример Ozon
hardclient

Просмотр медиа в увеличенном формате

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

Пример FlowWow
hardclient

Добавление в корзину из просмотра медиаконтента

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

Пример Л'Этуаль
hardclient

Медиаконтент, как отдельный блок в списке отзывов

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

Пример Детский мир
hardclient

Highlight общего объема медиаконтента

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

Пример Л'Этуаль
hardclient

Highlight типа медиаконтента

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

Пример Ozon
hardclient

Медиаконтент, как единая карусель?

Отображать все фото и видео, как единую карусель, двояко: если фото и видео мало, это удобно. Но если объем контента большой, формат отображения в 1 ряд менее эффективен.

Пример Sokolov
hardclient
To be continued...

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


Нюансов, как видите, множество. Но надеюсь, эта статья помогла вам прокачать свою насмотренность и почерпнуть идеи для улучшения в вашем приложении.


Следующие материалы будут с таким же высоким уровнем детализации. Продолжаем создавать крупнейшую базу знаний по UX/UI в e-commerce.


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

Все статьи по e-commerce