Увеличение продаж с помощью миниатюр изображений товаров

Процесс онлайн-покупок часто можно разделить на две части:

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

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

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

Показ изображения продукта во время покупки

Хорошая страница корзины должна быть настолько простой, насколько возможно. Это делается того, чтобы уменьшить «уровень отчуждения» пользователя (например, благодаря знакомым и логичным элементам пользовательского интерфейса). Помимо единства стиля и общего дизайна, для связи страниц просмотра и оформления покупки должны использоваться изображения товаров: при добавлении в корзину, на странице просмотра заказа, и даже в письме с подтверждением заказа.

1. Корзина

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

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

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

Обзор 100 крупнейших сайтов интернет-магазинов, проведенный мной в апреле 2012 года показал, что 86% из них отображают миниатюры в корзине.

2. Страница обзора заказа

Некоторые сайты: например, упомянутый выше Macy, показывают миниатюры на странице «Обзор заказа». Эта страница – ключевой момент обработки клиента. Даже если покупателю нужно всего лишь нажать кнопку «Разместить заказ», именно в этот момент он решает стоит ли расстаться с кровно заработанными деньгами или нет. И вот здесь миниатюра товара поможет вам убедить его еще раз в том, что он покупает именно то, что ему нужно, или же просто выступает визуальным напоминанием того, почему ему стоит купить этот товар.

Мой тест 100 лучших сайтов, выполненный в апреле 2012, показал, что 60% из них используют миниатюры на странице «Обзора заказа».

3. Подтверждение заказа по E-mail

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

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

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

Реализация

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

Соответствие изображений

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

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

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

Если по техническим или практическим соображениям вы не можете предоставить отдельную миниатюру для каждой разновидности товара (например, по цвету), то в качестве альтернативного способа вы можете использовать черный \ белый варианты с небольшим цветовым наложением, как показано на модифицированной странице корзины сайта Victoria’s Secrets (полноразмерный оригинал). Как можно увидеть на этом сайте, наложения цвета явно недостаточно, однако, в целом это правильный подход, который используется в случае, если вы не можете предоставить миниатюру каждой разновидности товара. Важно обесцветить исходное изображение, чтобы было понятно, что наложенный цвет – и есть выбранный клиентом вариант.

Фокусировка на основном действии

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

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

Вот страница заказа Nordstorm с восемью товарами в корзине. Поля кредитных карточек и кнопка «Подтвердить заказ» располагаются далеко внизу страницы (полноразмерный оригинал).

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

Понятный процесс покупки

Общая концепция проста: добавьте немного зрелищности на страницах товаров, которая разбавит скучный процесс покупки. Обзор 100 лучших Интеренет-магазинов показал, что 86% из них используют показ миниатюр товаров в своих корзинах, и 60% используют миниатюра на странице просмотра заказа.

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

На основе публикации “A Consistent Shopping Experience With Product Thumbnails”

Понравилось? Тогда лайк, плиз!