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