Рейтинг и отзывы: зачем нужны и лучшие практики

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

Кому-то может показаться, что рейтинги и отзывы — чисто маркетинговые инструменты, связанные с продвижением товара, его рекламой и, разумеется, продажами. Тогда причем здесь мы, UX/UI-дизайнеры?

Все дело в том, что на отзывы и рейтинги полагаются все! Об этом мы расскажем чуть ниже, пока придется поверить на слово. Давайте разберемся, почему эти понятия в современном ux/ui-дизайне практически объединились в одно целое, и чем же они все-таки различаются.

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

Рейтинг — количественный показатель, который товар приобретает за счет оценок пользователей. Это просто цифры (звезды) без указания преимуществ и недостатков. То есть только по рейтингу (без отзыва) вы не поймете, почему у этого худи средняя оценка: несоответствие размерному ряду, тусклый оттенок или вещь выцвела после стирки.

По данным исследования Baymard Institute 95% пользователей рассматривают отзывы как еще один источник информации о продукции, то есть они полагаются не только на контент от продавца, но и внимательно изучают отзывы.

Агентство Data Insight и вовсе после своего маркетингового исследования заявили, что 9 из 10 покупок онлайн происходят именно благодаря отзывам и оценкам.

Почему так происходит? Ответ прост — социальное доказательство.

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

А теперь подытожим все вышесказанное относительно нашей с вами работы.

Первое впечатление

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

Уверенность

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

Доверие

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

Дополнительная информация

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

Конверсия, продажи

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

Обратная связь

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

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

Звездочки и числа

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

Как правило, чаще всего используется 5-ти бальная шкала, если речь идет о звездах.

Хотя есть сервисы, которые установили высшую планку в 10.

Общая оценка, которую вы видите — число — среднее арифметическое всех голосов.

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

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

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

Видео и фотографии

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

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

Отзывы и рейтинги являются важным элементом social commerce и играют большую роль в процессе покупки.

Интернет-магазины

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

Сайты-портфолио

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

Сайты студий

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

Онлайн-образование

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

Стриминговые сервисы

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

Инфобиз

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

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

Индикатор оценки

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

Привычное расположение — шапка товара или под названием.

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

Укажите количество проставленных товару оценок.

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

Совет: не экспериментируйте с обозначениями.

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

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

Фильтрация

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

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

Рейтинг

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

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

Визуализируйте рейтинг с помощью 5 звезд.

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

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

Сделайте рейтинг кликабельным фильтром, чтобы пользователь мог посмотреть отзывы с конкретной оценкой. И данный фильтр должен быть взаимоисключающим, то есть работать как переключатель, а не флажки. (О проектировании селекторов можно почитать в этом лонгриде).

Сделайте рейтинг развернутым по умолчанию.

Блок с отзывами

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

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

Отобразите медиа-контент отдельно, пользователям всегда интересно посмотреть на «живые фотографии».

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

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

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

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

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

Отзывы

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

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

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

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

У каждого отзыва визуализируйте оценку.

Укажите дату отзыва.

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

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

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

Отзывы на отзывы

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

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

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

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

Карточки

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

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

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

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

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

Пример 1. ЯндексМаркет. 5-ти звездочная система, указаны оценка и количество отзывов, информация размещена под названием товара.

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

Нет отзывов

Если отзывов нет, то у вас есть 2 варианта:

1. Подчеркнуть это, указав четко и понятно «Нет отзывов».

Можно добавить креатива, мол «Жду ваш первый отзыв» и пр., в зависимости от голоса бренда.

2. Скрыть отсутствие отзывов.

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

Пример 1. В приложении Летуаль четко указано «отзывов нет».

Пример 2. В приложении ЯндексМаркет товары без отзывов не имеют никаких дополнительных надписей.

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

Звезды

Хоть в приложении и меньше места (чем на сайте), использование именно 5-ти звезд более предпочтительно, оно просто нагляднее и понятнее для пользователей.

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

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

Пример 1. На сайте ЛеруаМерлен используются 5 желтых звезд, закрашивают их соответственно рейтингу товара.

Пример 2. На сайте  СпортМастер дизайнер отдал предпочтение корпоративному цвету для отображения рейтинга.

Пример 3. На сайте Ozon подсвечены более популярные или понравившиеся пользователям товары, заметьте, что отаматон с рейтингом 1.0 имеет серую звезду, а с рейтингом 4.5 — желтую.

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

Оценки

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

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

Пример 1. Ozon указывает количество отзывов.

Пример 2.  Wildberries размещает количество оценок.

Пример 3. AliExpress отдает предпочтение количеству покупателей.

Оценки

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

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

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

Пример 2. В приложении Wildberries указаны рейтинг, оценки и отзывы, в Примере 3 можно увидеть визуализацию, которая появляется при клике на значок «>».

И в завершении нашего лонгрида мы не могли не сделать акцент на платформах, которые отказались от оценок. Первопроходцем в этом стал YouTube. Компания заменила систему рейтинга и оценок на 2 пальца: вверх и вниз, еще в 2009 году. Мотивировали они это тем, что практически все их видео имели максимальную оценку в 5 звезд. Чуть позже по этому пути пошел и Netflix.

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

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

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