Почему у товара вообще есть звезды? История одного привычного UI-паттерна

Почему у товара вообще есть звезды? История одного привычного UI-паттерна

Почему звезды? Почему рядом почти всегда стоит количество оценок? И в какой момент отзывы из отдельного раздела превратились в одну строчку прямо в карточке товара?

Почему у товара вообще есть звезды? История одного привычного UI-паттерна

Я начала искать старые интерфейсы Amazon, eBay, архивные сайты, различные исследования. Очень быстро стало ясно, что история рейтинга вообще не про звезды — она про доверие пользователя.

До рейтинга была проблема посерьезнее

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

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

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

Почему у товара вообще есть звезды? История одного привычного UI-паттерна

В 1995-м Amazon делает довольно странную для магазина вещь

Amazon запустил customer reviews в 1995 году. Идея в тот момент воспринималась довольно радикально: магазин собирался дать покупателям возможность публично писать, что они на самом деле думают о товаре — даже если отзыв будет негативным. Если задуматься, для торговли это действительно немного странно.

Почему у товара вообще есть звезды? История одного привычного UI-паттерна

Сегодня без этого сложно представить интернет-магазин. Тогда это было далеко не настолько очевидно. Но у такой идеи есть сильная сторона: продавец перестает быть единственным источником информации о товаре. Теперь рядом с описанием продавца появляется мнение других покупателей. И ему часто доверяешь больше.

На странице Amazon примерно 1999–2000 года уже была знакомая нам конструкция: средняя оценка товара → звезды → количество отзывов рядом

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

Примерно в это же время eBay решает ту же проблему с другой стороны

В феврале 1996 года eBay запускает Feedback Forum — систему публичной обратной связи между участниками сделок. Если Amazon пытался помочь покупателю понять, можно ли доверять товару, то у eBay задача была другой: можно ли доверять самому продавцу.

В своем письме пользователям Омидьяр прямо писал о доверии между незнакомыми людьми в сети. Получается, Amazon и eBay строили две разные модели доверия: у Amazon постепенно формировалась репутация товара, а у eBay — репутация продавца.

Почему у товара вообще есть звезды? История одного привычного UI-паттерна

А когда рейтинг появился именно в карточке?

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

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

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

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

А что происходит, когда отзывов становится слишком много?

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

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

4.8 ★

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

Потом рейтинг появляется в каталоге – и начинает работать по-другому

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

В каталоге еще до перехода на страницу товара уже виден рейтинг
В каталоге еще до перехода на страницу товара уже виден рейтинг

Исследования Baymard показывают, что в каталоге пользователям недостаточно видеть только среднюю оценку товара. Чтобы понять, насколько ей можно доверять, они смотрят еще и на количество оценок рядом. 4.5 ★ на основе 5 отзывов и те же 4.5 ★ на основе 1000 отзывов воспринимаются по-разному.

Почему недостаточно написать просто «5 звезд»

Сравним два товара:

5.0 ★ (4 оценки)

и

4.5 ★ (57 оценок)

Какой выглядит надежнее?

Скорее всего, второй. Хотя средняя оценка у него ниже. Именно в этом месте становится понятно, что пользователи читают не только сам рейтинг. Им важно еще и другое — сколько людей стоит за этой оценкой.

Это подтверждают и исследования Baymard. В одном из их опросов почти вдвое больше участников выбрали товар с рейтингом 4.5 на основе 57 оценок, чем товар с идеальными 5.0, но всего 4 оценками.

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

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

Вот привычная строка: ★★★★★ 4.8 (12 438)

Само число 4.8 говорит, как в среднем оценили товар. А 12 438 показывает, сколько людей участвовало в этой оценке. И это важная разница. Рейтинг 4.8 на основе 20 оценок и рейтинг 4.8 на основе 12 438 оценок воспринимаются не одинаково.

Baymard давно отслеживает этот паттерн. В 2015 году около 25% исследованных e-commerce-сайтов показывали средний рейтинг в каталоге без количества оценок. К 2022 году таких оставалось около 5%.

Рейтинг — это не только социальное доказательство

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

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

Сегодня без рейтинга карточка кажется непривычной

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

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

В итоге все оказалось не про звезды

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

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

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

11