9/11/2017 в 1:27 PM
Как сделать визуально привлекательную страницу продукта
Задача страницы товара – показать то, что интересует покупателя, рассказать подробнее и закрыть сделку. Это место, где стиральные машины, платья, обувь и книги убеждают посетителей, что стоят своих денег.
В этой статье вы узнаете, какая страница продукта заставит добавить его в корзину.
Используйте контраст
Это разница между пикселями или зонами по яркости или цвету. Она в буквальном смысле приводит глаза пользователей туда, куда надо вам.
Посмотрите на изображение и скажите, что вы увидели в первую очередь:
Сравните с этим:
В обоих вариантах товар по центру, справа – цена и кнопка СТА. На первых взгляд все в порядке.
Теперь посмотрим, что заметят прежде всего покупатели. Используем искусственный интеллект – специальный инструмент, который делает прогнозы по айтрекингу и тепловым картам.
Красным выделены зоны, которые привлекут больше внимания:
Лучше всего справился Adidas. В глаза бросаются самые важные детали: продукт, название, стоимость и информация о доставке и возврате. Навигация легкая, дизайн сам направляет на нужные точки.
У Zappos меньше контрастных моментов, поэтому детали видны хуже. Другие элементы – товар и название – видны более четко. Следует чуть сместить акцент вправо, сделать кнопку с СТА ярче.
В примере магазина Decathlon важные элементы невольно сразу притягивают взгляд, хотя на странице много лишнего:
Уберите отвлекающие моменты
Внимание человека – штука хрупкая. Всего за пару секунд пользователи решают, смотреть / читать дальше или пролистать. Многие страницы товаров перегружены ненужными деталями, и каждая мелочь привлекает внимание.
JCPenney добавляет баннер с акционным предложением. Так куда смотреть? На продукт или на рекламу?
Вот что видят посетители:
Во-первых, баннер отвлекает от цены и выбора цвета. Чтобы завершить покупку, придется потратить больше сил, чем хотелось бы. Во-вторых, он занимает слишком много места. Главный СТА из-за этого почти съехал под сгиб.
Без баннера картинка намного лучше:
Внимание покупателей – на названии товара, цене и призыве к действию.
Страница продукта в интернет-магазине «Эльдорадо» над сгибом показывает самое важное:
А описание и технические характеристики – под сгибом:
Используйте ключевые блоки по максимуму
Не все зоны страницы имеют равную ценность. Исследования движений глаз (Eye tracking) показывают, что некоторые части экрана бросаются в глаза первыми:
Почему? Очень просто. Большинство людей читают слева направо. Они ожидают увидеть самую ценную информацию именно в этих зонах. Однако этим правилом часто пренебрегают.
Вот страница товара в интернет-магазине Neiman Marcus:
Тот же принцип расположения: слева – товар, справа – информация о нем. Попробуйте предположить, что покажет тепловая карта:
Пристальное внимание уделяется середине и верхней левой части. Остальные моменты не в фокусе. Значит, покупателям придется приложить усилия, чтобы завершить покупку.
Что можно изменить? Добавить контраст к кнопке выбора размера, чтобы сделать ее более заметной. Также изменить структуру сайта и убрать большой кусок с описанием продукта. И более эффективно использовать ту часть сайта, куда первым делом падает взгляд.
Как это выглядит:
Вот прогноз тепловой карты:
Пользователи обратили внимание на многие элементы. Самые важные детали хорошо видно. Навигация интуитивная, пользоваться страницей удобнее. Значит, клиенты ближе к конверсии.
Менее удачный пример одного интернет-магазина – сложно заметить кнопку «Купить». Зато взгляд прикован к левому верхнему блоку, который не имеет отношения к покупке:
Придется постараться, чтобы добавить продукт в корзину.
Выводы:
- Используйте контраст, чтобы показать преимущества и привлечь внимание к цене и СТА. Правило избитое, но у большинства страниц много отвлекающих элементов – пользователи просто не доходят до следующего шага.
- Месторасположение имеет значение. Смещайте главные элементы в середину и верхнюю левую часть.
- Сосредоточьтесь на контенте, который хотят видеть пользователи, а не на том, что хотите показать вы.
Высоких вам продаж!
Статья подготовлена по материалам eyequant.com.
Читайте ещё статьи по этой теме
Оптимизация рекламы в Facebook Лонгрид
Как правильно выбрать цель рекламной кампании в Facebook и какая модель оптимизации показа рекламы лучше всего подойдет для выбранной цели– рассказываетруководитель агентства Thetargeting Валентин Ларин. .1
Автоматические правила в Facebook: руководство по применению Лонгрид
Чтобы управлять рекламными аккаунтами Facebook на большое количество кампаний, групп и объявлений, нужно постоянно выполнять множество рутинных операций. Или настроить автоматические правила – и алгоритм будет делать некоторые действия за вас, освободив вам время на более важные задачи.
Как в 2,5 раза увеличить объем продаж в узкой B2B тематике. Кейс по заточным станкам
Часто бывает так, что в промышленной тематике есть качественный продукт, есть на него спрос, а продажи идут«ни шатко ни валко». Что с этим делать – рассказывает специалист по контекстной рекламе Алексей Веретенников.
Обсуждаемое
YouTube хочет отменить дизлайки из-за атак хейтеров
YouTube в ближайшие недели протестирует новые варианты дизайна интерфейса. В обновленной версии не будут представляться данные о количестве антипатий (дизлайков) к тому или иному видео.22
Продажи через мессенджеры в России выросли в два раза
Оборот платежей по счетам, выставленным с помощью ЮKassa через мессенджеры, электронную почту или SMS в 2020 году, вырос в 1,8 раза относительно 2019. .12
Samsung сделал приложения Яндекса неудаляемыми в новых телефонах
В компании Samsung решили проявить небывалое рвение в области исполнения поправок о предустановке отечественного ПО, внесённых в «Закон о защите прав потребителей». .8
Примеры роста конверсий, заказов и прибыли
Свежее
Рекламный бюджет ВКонтакте теперь можно пополнить автоматически
ВКонтакте выкатил новую функцию – автопополнение рекламного бюджета. Это позволяет автоматически пополнять бюджет с банковской карты, когда в рекламном кабинете заканчиваются деньги.
Как решить проблему дорогих заявок в B2B: кейс по продаже поломоечных машин Лонгрид
Какие шаги позволяют снизить стоимость обращения с контекстной рекламы в B2B– рассказывает эксперт по комплексному маркетингу Александр Гринёв. .1
Продажи через мессенджеры в России выросли в два раза
Оборот платежей по счетам, выставленным с помощью ЮKassa через мессенджеры, электронную почту или SMS в 2020 году, вырос в 1,8 раза относительно 2019. .12