Блог Yagla » Маркетинг » Как сделать визуально привлекательную страницу продукта

Как сделать визуально привлекательную страницу продукта

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

Используйте контраст

Это разница между пикселями или зонами по яркости или цвету. Она в буквальном смысле приводит глаза пользователей туда, куда надо вам.
 
Посмотрите на изображение и скажите, что вы увидели в первую очередь:
 
Страница продукта – пример Adidas
 
Сравните с этим:
 
Страница продукта – пример Zappos
 
В обоих вариантах товар по центру, справа – цена и кнопка СТА. На первых взгляд все в порядке.
 
Теперь посмотрим, что заметят прежде всего покупатели. Используем искусственный интеллект – специальный инструмент, который делает прогнозы по айтрекингу и тепловым картам.
 
Красным выделены зоны, которые привлекут больше внимания:
 
Страница продукта – тепловая карта Adidas
 
Страница продукта – тепловая карта Zappos
 
Лучше всего справился Adidas. В глаза бросаются самые важные детали: продукт, название, стоимость и информация о доставке и возврате. Навигация легкая, дизайн сам направляет на нужные точки.
 
У Zappos меньше контрастных моментов, поэтому детали видны хуже. Другие элементы – товар и название – видны более четко. Следует чуть сместить акцент вправо, сделать кнопку с СТА ярче.
 
В примере магазина Decathlon важные элементы невольно сразу притягивают взгляд, хотя на странице много лишнего:
 
Страница продукта – пример Decathlon

Уберите отвлекающие моменты

Внимание человека – штука хрупкая. Всего за пару секунд пользователи решают, смотреть / читать дальше или пролистать. Многие страницы товаров перегружены ненужными деталями, и каждая мелочь привлекает внимание.
 
JCPenney добавляет баннер с акционным предложением. Так куда смотреть? На продукт или на рекламу?
 
Страница продукта – пример JCPenney
 
Вот что видят посетители:
 
Страница продукта – тепловая карта JCPenney
 
Во-первых, баннер отвлекает от цены и выбора цвета. Чтобы завершить покупку, придется потратить больше сил, чем хотелось бы. Во-вторых, он занимает слишком много места. Главный СТА из-за этого почти съехал под сгиб.
 
Без баннера картинка намного лучше:
 
Страница продукта – тепловая карта без баннера JCPenney
 
Внимание покупателей – на названии товара, цене и призыве к действию.
 
Страница продукта в интернет-магазине «Эльдорадо» над сгибом показывает самое важное:
 
Страница продукта – пример Эльдорадо, важные элементы
 
А описание и технические характеристики – под сгибом:
 
Страница продукта – пример Эльдорадо, описание и технические характеристики

Используйте ключевые блоки по максимуму

Не все зоны страницы имеют равную ценность. Исследования движений глаз (Eye tracking) показывают, что некоторые части экрана бросаются в глаза первыми:
 
Страница продукта – результаты исследования движения глаз
 
Почему? Очень просто. Большинство людей читают слева направо. Они ожидают увидеть самую ценную информацию именно в этих зонах. Однако этим правилом часто пренебрегают.
 
Вот страница товара в интернет-магазине Neiman Marcus:
 
Страница продукта – пример Neiman Marcus
 
Тот же принцип расположения: слева – товар, справа – информация о нем. Попробуйте предположить, что покажет тепловая карта:
 
Страница продукта – пример Neiman Marcus
 
Пристальное внимание уделяется середине и верхней левой части. Остальные моменты не в фокусе. Значит, покупателям придется приложить усилия, чтобы завершить покупку.
 
Что можно изменить? Добавить контраст к кнопке выбора размера, чтобы сделать ее более заметной. Также изменить структуру сайта и убрать большой кусок с описанием продукта. И более эффективно использовать ту часть сайта, куда первым делом падает взгляд.
 
Как это выглядит:
 
Страница продукта – пример Neiman Marcus, улучшенный вариант
 
Вот прогноз тепловой карты:
 
Страница продукта – тепловая карта Neiman Marcus, улучшенный вариант
 
Пользователи обратили внимание на многие элементы. Самые важные детали хорошо видно. Навигация интуитивная, пользоваться страницей удобнее. Значит, клиенты ближе к конверсии.
 
Менее удачный пример одного интернет-магазина – сложно заметить кнопку «Купить». Зато взгляд прикован к левому верхнему блоку, который не имеет отношения к покупке:
 
Страница продукта – пример без учета ключевых блоков
 
Придется постараться, чтобы добавить продукт в корзину.
 
Выводы:
 
  • Используйте контраст, чтобы показать преимущества и привлечь внимание к цене и СТА. Правило избитое, но у большинства страниц много отвлекающих элементов – пользователи просто не доходят до следующего шага.
  • Месторасположение имеет значение. Смещайте главные элементы в середину и верхнюю левую часть.
  • Сосредоточьтесь на контенте, который хотят видеть пользователи, а не на том, что хотите показать вы.
 
Высоких вам продаж!
 
Статья подготовлена по материалам eyequant.com.