Маркетинг
Редакция Yagla
Как сделать визуально привлекательную страницу продукта
Задача страницы товара – показать то, что интересует покупателя, рассказать подробнее и закрыть сделку. Это место, где стиральные машины, платья, обувь и книги убеждают посетителей, что стоят своих денег.
В этой статье вы узнаете, какая страница продукта заставит добавить его в корзину.
Используйте контраст
Это разница между пикселями или зонами по яркости или цвету. Она в буквальном смысле приводит глаза пользователей туда, куда надо вам.
Посмотрите на изображение и скажите, что вы увидели в первую очередь:
Сравните с этим:
В обоих вариантах товар по центру, справа – цена и кнопка СТА. На первых взгляд все в порядке.
Теперь посмотрим, что заметят прежде всего покупатели. Используем искусственный интеллект – специальный инструмент, который делает прогнозы по айтрекингу и тепловым картам.
Красным выделены зоны, которые привлекут больше внимания:
Лучше всего справился Adidas. В глаза бросаются самые важные детали: продукт, название, стоимость и информация о доставке и возврате. Навигация легкая, дизайн сам направляет на нужные точки.
У Zappos меньше контрастных моментов, поэтому детали видны хуже. Другие элементы – товар и название – видны более четко. Следует чуть сместить акцент вправо, сделать кнопку с СТА ярче.
В примере магазина Decathlon важные элементы невольно сразу притягивают взгляд, хотя на странице много лишнего:
Уберите отвлекающие моменты
Внимание человека – штука хрупкая. Всего за пару секунд пользователи решают, смотреть / читать дальше или пролистать. Многие страницы товаров перегружены ненужными деталями, и каждая мелочь привлекает внимание.
JCPenney добавляет баннер с акционным предложением. Так куда смотреть? На продукт или на рекламу?
Вот что видят посетители:
Во-первых, баннер отвлекает от цены и выбора цвета. Чтобы завершить покупку, придется потратить больше сил, чем хотелось бы. Во-вторых, он занимает слишком много места. Главный СТА из-за этого почти съехал под сгиб.
Без баннера картинка намного лучше:
Внимание покупателей – на названии товара, цене и призыве к действию.
Страница продукта в интернет-магазине «Эльдорадо» над сгибом показывает самое важное:
А описание и технические характеристики – под сгибом:
Используйте ключевые блоки по максимуму
Не все зоны страницы имеют равную ценность. Исследования движений глаз (Eye tracking) показывают, что некоторые части экрана бросаются в глаза первыми:
Почему? Очень просто. Большинство людей читают слева направо. Они ожидают увидеть самую ценную информацию именно в этих зонах. Однако этим правилом часто пренебрегают.
Вот страница товара в интернет-магазине Neiman Marcus:
Тот же принцип расположения: слева – товар, справа – информация о нем. Попробуйте предположить, что покажет тепловая карта:
Пристальное внимание уделяется середине и верхней левой части. Остальные моменты не в фокусе. Значит, покупателям придется приложить усилия, чтобы завершить покупку.
Что можно изменить? Добавить контраст к кнопке выбора размера, чтобы сделать ее более заметной. Также изменить структуру сайта и убрать большой кусок с описанием продукта. И более эффективно использовать ту часть сайта, куда первым делом падает взгляд.
Как это выглядит:
Вот прогноз тепловой карты:
Пользователи обратили внимание на многие элементы. Самые важные детали хорошо видно. Навигация интуитивная, пользоваться страницей удобнее. Значит, клиенты ближе к конверсии.
Менее удачный пример одного интернет-магазина – сложно заметить кнопку «Купить». Зато взгляд прикован к левому верхнему блоку, который не имеет отношения к покупке:
Придется постараться, чтобы добавить продукт в корзину.
Выводы:
- Используйте контраст, чтобы показать преимущества и привлечь внимание к цене и СТА. Правило избитое, но у большинства страниц много отвлекающих элементов – пользователи просто не доходят до следующего шага.
- Месторасположение имеет значение. Смещайте главные элементы в середину и верхнюю левую часть.
- Сосредоточьтесь на контенте, который хотят видеть пользователи, а не на том, что хотите показать вы.
Высоких вам продаж!
Статья подготовлена по материалам eyequant.com.
Читайте ещё статьи по этой теме
Как за счет горячих запросов и гиперсегментации повысить конверсию сайта в 2,5 раза. Кейс турфирмы Статья
Слишком мало заявок, к тому же дорогих– стандартная ситуация для малого бизнеса. Как её исправить, на что сделать ставку– своим опытом делится специалист по контекстной рекламе Александр Матвеев.
Как найти клиентов начинающему маркетологу Статья
В этой статье мы не будем обсуждать вечный вопрос «Агентство или фриланс». Мы дадим рекомендации и идеи о том, как начинающему маркетологу-фрилансеру найти клиентов и с чего вообще всё начинать.
Google Optimize: руководство по применению Статья
Google Optimize, или Google Оптимизация – сервис для работы с посадочными страницами. Его функционал включает практически всё, что связано с повышением конверсии страниц – от A/B тестирования до оптимизации, причем, бесплатно.1
Написать комментарий
Обсуждаемое
Трипвайер и 25 000 ₽ за клик? Как магазин элитной мебели продавал богатым диваны за 1 млн. и вырос в 8 раз Статья
Как рекламировать бренды с высоким чеком? Мы прошли весь путь от тестирования разных рекламных форматов до товарной стратегии с трипвайером, но все это не работало. Нашли универсальный рецепт на стыке форматов: контекстная реклама с медийным эффектом + медийная реклама в связке с ретаргетингом.1
Как продавать без УТП? Выделились – увеличили продажи пиломатериалов в 6 раз и снизили стоимость клиента вдвое Статья
Как выделиться в нише, где все предлагают одно и то же? У производителя пиломатериалов “Киржач-лес” не получалось масштабировать продажи с рекламы. Высокая цена лида (5000 ₽ - при средней по рынку 3000р.1
Используем подписчиков: как компаниям работать с UGC-контентом Статья
Люди любят искренность, это видно по отклику на пользовательский контент в соцсетях. В статье рассказываем про UGC-контент: что это такое простыми словами, зачем его использовать и как не нарушить авторские права.
Свежее
Исследование: на сколько нейросети реально ускоряют работу бизнесу? Статья
Провели опрос среди 276 предпринимателей — от владельцев малого бизнеса до начинающих стартаперов — и выяснили, как они используют нейросети в своих проектах. Они поделились, какие процессы автоматизирует ИИ, с какими трудностями приходится сталкиваться и сколько времени это экономит.
Маркетинг в фильме «Мастер» с Джейсоном Стэйтемом Статья
«Мастер» – новый экшен-боевик 2025 года с бессменным героем жанра Джейсоном Стэйтемом. Фильм привлекает внимание не только зрелищными драками на экране, но и продуманной маркетинговой подачей.
Как создать презентацию с помощью нейросети за 2 минуты? Статья
Сегодня мы рассмотрим 5 сервисов, которые полностью меняют подход к созданию презентаций. Каждый сервис - это не просто инструмент, а настоящий креативный помощник, способный превратить тему или сырой текст в привлекательную презентацию с грамотной структурой, текстом и картинками, обернув это всё в выбранный шаблон презентации.
