Пользовательский опыт каталога товаров: персонализация вашего e-commerce сайта

Статья является вольным переводом оригинального материала с сайта Baymard Institute.

Ссылка на оригинал: http://baymard.com/blog/highlight-products-if-in-u...

Пользовательский опыт списка товаров

Плохо

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

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

Забавно то, что решение этой проблемы довольно простое — выделять в общем списке товаров те, что уже добавлены в корзину. Однако ещё забавнее, что среди 50 крупнейших e-commerce ресурсов США в нашем списке 96% этого не делают.

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

Идентификация товаров, которые уже добавлены в корзину

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

Плохо

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

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

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

Хорошо

Добавление довольно яркого и информативного элемента к товарам уже находящимся в корзине значительно облегчает их идентификацию

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

Хорошо

Отличное решение используется на сайте B&HPhoto, где у товара из корзины присутствует функция «посмотреть корзину», а ниже него располагается связанная продукция

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

Также у товара уже добавленного в корзину можно добавлять возможность изменения количества, ссылку на похожие товары с их количеством (например, «Посмотреть похожие товары, 23») или же указывать дату поставки.

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

Подумайте над выделением уже посещённых товаров

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

Хорошо

В данном случае пользователь искал сетевой адаптер для своего ноутбука DELL. Среди шести очень похожих изображений товаров выделение уже посещённых позиций на сайте Wallmart's было единственным решением, которое держало пользователя в нужном русле. Это позволило посетителю сайта методично изучать продукты и в итоге найти нужный товар

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

Юзабилити тестирование показало, что подобная проблема легко решается выделением уже посещённых товаров (например, за счёт клиентской части, посредством браузера, через CSS-сортировку посещённых ресурсов). Подобное выдвижение посещённых позиций исключает напрасную трату времени на их случайный повторный просмотр. Особенно это важно для мобильных устройств, на которых пользователи как правило не открывают новые вкладки, а сёрфят сайт посредством возврата назад или через меню навигации в формате одной вкладки.

Зарезервированные товары

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

Плохо

Пользователь добавил в корзину товар и продолжил просматривать каталог Gift. Сайт отметил добавленный товар, как «Остался всего один». Пользователь выразил сомнения и сказал: «Скорее всего он уже продан или вскоре его не останется» и заколебался в дальнейшем сёрфинге. На самом деле сомнения были напрасны, ведь этот товар уже в корзине пользователя, но в интерфейсе это не было отражено явно

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

Простой шаг к персонализации

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

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

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