Как сделать визуально привлекательную страницу продукта
Задача страницы товара – показать то, что интересует покупателя, рассказать подробнее и закрыть сделку. Это место, где стиральные машины, платья, обувь и книги убеждают посетителей, что стоят своих денег.
В этой статье вы узнаете, какая страница продукта заставит добавить его в корзину.
![Страница продукта – пример визуально привлекательной страницы Страница продукта – пример визуально привлекательной страницы](/img/01-stranica-produkta--primer-vizualno-privlekatelnoy-stranicy.png)
Используйте контраст
Это разница между пикселями или зонами по яркости или цвету. Она в буквальном смысле приводит глаза пользователей туда, куда надо вам.
Посмотрите на изображение и скажите, что вы увидели в первую очередь:
![Страница продукта – пример Adidas Страница продукта – пример Adidas](/img/02-stranica-produkta--primer-adidas.png)
Сравните с этим:
![Страница продукта – пример Zappos Страница продукта – пример Zappos](/img/03-stranica-produkta--primer-zappos.png)
В обоих вариантах товар по центру, справа – цена и кнопка СТА. На первых взгляд все в порядке.
Теперь посмотрим, что заметят прежде всего покупатели. Используем искусственный интеллект – специальный инструмент, который делает прогнозы по айтрекингу и тепловым картам.
Красным выделены зоны, которые привлекут больше внимания:
![Страница продукта – тепловая карта Adidas Страница продукта – тепловая карта Adidas](/img/04-stranica-produkta--teplovaya-karta-adidas.png)
![Страница продукта – тепловая карта Zappos Страница продукта – тепловая карта Zappos](/img/05-stranica-produkta--teplovaya-karta-zappos.png)
Лучше всего справился Adidas. В глаза бросаются самые важные детали: продукт, название, стоимость и информация о доставке и возврате. Навигация легкая, дизайн сам направляет на нужные точки.
У Zappos меньше контрастных моментов, поэтому детали видны хуже. Другие элементы – товар и название – видны более четко. Следует чуть сместить акцент вправо, сделать кнопку с СТА ярче.
В примере магазина Decathlon важные элементы невольно сразу притягивают взгляд, хотя на странице много лишнего:
![Страница продукта – пример Decathlon Страница продукта – пример Decathlon](/img/06-stranica-produkta--primer-decathlon.png)
Уберите отвлекающие моменты
Внимание человека – штука хрупкая. Всего за пару секунд пользователи решают, смотреть / читать дальше или пролистать. Многие страницы товаров перегружены ненужными деталями, и каждая мелочь привлекает внимание.
JCPenney добавляет баннер с акционным предложением. Так куда смотреть? На продукт или на рекламу?
![Страница продукта – пример JCPenney Страница продукта – пример JCPenney](/img/07-stranica-produkta--primer-jcpenney.png)
Вот что видят посетители:
![Страница продукта – тепловая карта JCPenney Страница продукта – тепловая карта JCPenney](/img/08-stranica-produkta--teplovaya-karta-jcpenney.png)
Во-первых, баннер отвлекает от цены и выбора цвета. Чтобы завершить покупку, придется потратить больше сил, чем хотелось бы. Во-вторых, он занимает слишком много места. Главный СТА из-за этого почти съехал под сгиб.
Без баннера картинка намного лучше:
![Страница продукта – тепловая карта без баннера JCPenney Страница продукта – тепловая карта без баннера JCPenney](/img/09-stranica-produkta--teplovaya-karta-bez-bannera-jcpenney.png)
Внимание покупателей – на названии товара, цене и призыве к действию.
Страница продукта в интернет-магазине «Эльдорадо» над сгибом показывает самое важное:
![Страница продукта – пример Эльдорадо, важные элементы Страница продукта – пример Эльдорадо, важные элементы](/img/10-stranica-produkta--primer-eldorado-vajnye-elementy.png)
А описание и технические характеристики – под сгибом:
![Страница продукта – пример Эльдорадо, описание и технические характеристики Страница продукта – пример Эльдорадо, описание и технические характеристики](/img/11-stranica-produkta--primer-eldorado-opisanie-i-tehnicheskie-harakteristiki.png)
Используйте ключевые блоки по максимуму
Не все зоны страницы имеют равную ценность. Исследования движений глаз (Eye tracking) показывают, что некоторые части экрана бросаются в глаза первыми:
![Страница продукта – результаты исследования движения глаз Страница продукта – результаты исследования движения глаз](/img/12-stranica-produkta--rezultaty-issledovaniya-dvijeniya-glaz.png)
Почему? Очень просто. Большинство людей читают слева направо. Они ожидают увидеть самую ценную информацию именно в этих зонах. Однако этим правилом часто пренебрегают.
Вот страница товара в интернет-магазине Neiman Marcus:
![Страница продукта – пример Neiman Marcus Страница продукта – пример Neiman Marcus](/img/13-stranica-produkta--primer-neiman-marcus.png)
Тот же принцип расположения: слева – товар, справа – информация о нем. Попробуйте предположить, что покажет тепловая карта:
![Страница продукта – пример Neiman Marcus Страница продукта – пример Neiman Marcus](/img/14-stranica-produkta--primer-neiman-marcus.png)
Пристальное внимание уделяется середине и верхней левой части. Остальные моменты не в фокусе. Значит, покупателям придется приложить усилия, чтобы завершить покупку.
Что можно изменить? Добавить контраст к кнопке выбора размера, чтобы сделать ее более заметной. Также изменить структуру сайта и убрать большой кусок с описанием продукта. И более эффективно использовать ту часть сайта, куда первым делом падает взгляд.
Как это выглядит:
![Страница продукта – пример Neiman Marcus, улучшенный вариант Страница продукта – пример Neiman Marcus, улучшенный вариант](/img/15-stranica-produkta--primer-neiman-marcus-uluchshennyy-variant.png)
Вот прогноз тепловой карты:
![Страница продукта – тепловая карта Neiman Marcus, улучшенный вариант Страница продукта – тепловая карта Neiman Marcus, улучшенный вариант](/img/16-stranica-produkta--teplovaya-karta-neiman-marcus-uluchshennyy-variant.png)
Пользователи обратили внимание на многие элементы. Самые важные детали хорошо видно. Навигация интуитивная, пользоваться страницей удобнее. Значит, клиенты ближе к конверсии.
Менее удачный пример одного интернет-магазина – сложно заметить кнопку «Купить». Зато взгляд прикован к левому верхнему блоку, который не имеет отношения к покупке:
![Страница продукта – пример без учета ключевых блоков Страница продукта – пример без учета ключевых блоков](/img/17-stranica-produkta--primer-bez-ucheta-klyuchevyh-blokov.png)
Придется постараться, чтобы добавить продукт в корзину.
Выводы:
- Используйте контраст, чтобы показать преимущества и привлечь внимание к цене и СТА. Правило избитое, но у большинства страниц много отвлекающих элементов – пользователи просто не доходят до следующего шага.
- Месторасположение имеет значение. Смещайте главные элементы в середину и верхнюю левую часть.
- Сосредоточьтесь на контенте, который хотят видеть пользователи, а не на том, что хотите показать вы.
Высоких вам продаж!
Статья подготовлена по материалам eyequant.com.
Читайте ещё статьи по этой теме
Как за счет горячих запросов и гиперсегментации повысить конверсию сайта в 2,5 раза. Кейс турфирмы Статья
Слишком мало заявок, к тому же дорогих– стандартная ситуация для малого бизнеса. Как её исправить, на что сделать ставку– своим опытом делится специалист по контекстной рекламе Александр Матвеев.
Как найти клиентов начинающему маркетологу Статья
В этой статье мы не будем обсуждать вечный вопрос «Агентство или фриланс». Мы дадим рекомендации и идеи о том, как начинающему маркетологу-фрилансеру найти клиентов и с чего вообще всё начинать.
Google Optimize: руководство по применению Статья
Google Optimize, или Google Оптимизация – сервис для работы с посадочными страницами. Его функционал включает практически всё, что связано с повышением конверсии страниц – от A/B тестирования до оптимизации, причем, бесплатно.1
Написать комментарий
Обсуждаемое
Как юристу вести Telegram канал. Отвечает адвокат Валерий Рогальский Статья
В современном мире цифровых технологий и социальных медиа юристам предоставляется уникальная возможность расширить свою аудиторию и продвигать свои услуги через онлайн-платформы. Telegram – одна из таких платформ, которая предлагает удобный и эффективный способ взаимодействия с клиентами и коллегами.
Кейс клиента Vitamin.tools о продвижении детского лагеря в VK Ads: как получать заявки по 500 рублей 3 месяца подряд Статья
Таргетолог Марк Косых, клиент Vitamin. tools — рекламной экосистемы, возвращающей до 18% с пополнения рекламы, — пробовал запускать рекламу и в старом, и в новом рекламном кабинетах.
Лидогенерация на мероприятия Статья
Я расскажу в целом о том, как выстроить грамотный диджитал для продвижения мероприятий. Это актуально как для онлайна, так и для оффлайна.
Свежее
Пустые бланки резюме для устройства на работу – где взять? Статья
Создать современное резюме с оформлением и структурой можно с помощью готовых шаблонов резюме. Пустые бланки в формате docx и pdf подойдут для заполнения в любом текстовом редакторе: используйте шаблоны, заполняйте их с помощью пошаговой инструкции и привлекайте работодателей.
6 советов от клиента Vitamin.tools по продвижению психолога в TG через Директ Статья
Директолог Ольга Сивцова, клиент Vitamin. tools — рекламной экосистемы, возвращающей до 18% с пополнения рекламы, — отливала бюджет на TG-бота 2,5 месяца.
Работа на фрилансе или в агентстве: плюсы и минусы Статья
Первый плюс работы в агентстве – меньше ответственности, потому что у нас ее нет перед конечным заказчиком, другими сотрудниками, если не нанимаем помощников и ничего не делегируем. У нас есть ответственность только перед нашим работодателем.