20 советов по оптимизации дизайна и тестирования страницы продукта электронной торговли

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

В Growcode мы понимаем, что все имеет значение. Красиво оформленные домашние страницы жизненно важны для того, чтобы произвести хорошее впечатление. А надежные формы оформления заказа являются ключом к закрытию нижней части вашей воронки продаж и предотвращению отказа от корзины.

Но никакие страницы не имеют большего влияния на продажи и общее количество конверсий, чем страницы продуктов. Именно здесь ваши клиенты оценивают ваши продукты, принимают ваши специальные предложения и подсластители (например, бесплатную доставку) и в конечном итоге решают нажать эту важнейшую кнопку «Добавить в корзину». Страницы ваших продуктов похожи на машинные отделения, которые поддерживают весь корабль на плаву.

Количество конверсий, добавленных в корзину, в среднем составляет около 10% . Это означает, что из всего трафика на сайт около 10% добавят товар в корзину. Из всех сессий сайта, около 50% включает просмотр страницы продукта.

В Growcode мы думаем, что это относительно небольшое число. Большинство розничных продавцов электронной коммерции оставляют легкие деньги на столе из-за неспособности оптимизировать страницы своих неэффективных продуктов . Исследования показали, что некоторые розничные торговцы конвертируют почти половину (49,73%) всего трафика на страницы своих продуктов в продажи .

Итак, в этом руководстве мы дадим вам 20 простых, но очень эффективных советов по оптимизации, которые помогут вам получить как можно больше конверсий, добавляемых в корзину. Мы также будем использовать некоторые из лучших страниц продуктов в Интернете в качестве практических примеров.

Как вы можете улучшить страницу своего продукта электронной коммерции?

1. Достаточно ли крупный снимок продукта, чтобы можно было рассмотреть конкретные детали?
2. Правильно ли работает функция увеличения фото?
3. Фотографии высокого разрешения и качества?
4. Подчеркивают ли фотографии продуктов наиболее важные для пользователей особенности (например, подошвы обуви)?
5. Вы показываете более одной картинки и легко ли их просматривать?
6. Для розничных торговцев одеждой: указываете ли вы информацию о модели рядом с фотографией?
7. Легко ли получить оценки и отзывы, нажав кнопку или прокрутив вниз?
8. Легко ли можно сканировать мнения рецензентов?
9. Вы группируете «большую четверку» информации на странице сведений о продукте?
10. Ваш основной призыв к действию - повелительное предложение, а не отдельное слово?
11. Виден ли CTA над сгибом в шаблоне дизайна страницы продукта?
12. Используете ли вы методы создания срочности?
13. Являются ли шаги, ведущие к оформлению заказа, очевидными (после того, как пользователь добавляет товар в корзину)?
14. Если товар распродан, показываете ли вы покупателям похожие товары или альтернативы?
15. Вы четко показываете информацию о доставке на странице продукта?
16. Если в вашей отрасли принято устанавливать высокие цены на доставку, включаете ли вы на страницу калькулятор доставки?
17. Все ли характеристики указаны в описании продукта?
18. Четко ли видны пользователю настраиваемые параметры (например, цвет, размер, подарочная упаковка и т. Д.) И просты ли они в использовании?
19. Есть ли у вас видимое напоминание о выборе размера / цвета, если покупатель забудет?
20. Вы включаете пользовательский контент, например, из Instagram?

Наслаждаться!

1. Достаточно ли крупный снимок продукта, чтобы можно было рассмотреть конкретные детали?

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

Ваша задача - как можно точнее воспроизвести уличный опыт. Убедитесь, что все изображения достаточно большие, чтобы видеть конкретные детали. Не нужно переусердствовать с изображениями размером с рекламный щит. Но все особенности и нюансы должны быть видны.

Само собой разумеется, что вы должны использовать профессиональную фотографию продукта и, в идеале, оптимизировать страницы, чтобы наиболее привлекательные фотографии отображались на видном месте. Сплит-тестирование для поиска лучшего флагманского изображения (того, которое посетители увидят, когда впервые попадут на страницу) предоставит вам конкретные данные, на которых можно основывать свое решение.

2. Правильно ли работает функция увеличения фото?

Правильно настроить функцию масштабирования на фотографиях может быть непросто. Важно обеспечить, чтобы изображения увеличивались до подходящего размера (и не заполняли весь экран), чтобы пользователям было легко сфокусировать другие части изображения и чтобы они могли быстро минимизировать изображение, чтобы взаимодействовать с другими элементами изображения. страница .

Уровень детализации фотографий Zappos оставляет мало места для воображения. Посетители могут подробно ознакомиться со всеми особенностями продукта. Вы должны стремиться к тому, чтобы у покупателей был опыт, максимально приближенный к обычным магазинам.

Функции масштабирования изображений важны, потому что они воспроизводят интерактивность, которую человек чувствовал бы, делая покупки в обычном магазине. Протестируйте функцию масштабирования фотографий - убедитесь, что она соответствует общему восприятию страницы - в рамках процесса дизайна страницы вашего продукта.

3. Отличаются ли фотографии высоким разрешением и качеством и подходят ли они к оформлению страницы товара?

Помимо обеспечения достаточного размера изображений и работы функции масштабирования, важно также дать возможность зрителям видеть определенные детали , как если бы они осматривали продукт лично. Это особенно актуально для продуктов, которые имеют множество функций.

Качественные изображения также говорят о профессионализме. Клиенты с большей вероятностью будут сомневаться в целостности вашего бренда и сайта, если вы показываете второсортные изображения. Покупатели также с большей вероятностью будут отождествлять хорошие изображения с хорошими товарами.

Вероятно, вы заходили на сайт только для того, чтобы видеть пиксельные изображения низкого качества. Бьюсь об заклад, вы не задержались надолго. Просмотр изображений продуктов перед их публикацией - важная часть передовых методов электронной торговли.

4. Отражают ли фотографии продуктов наиболее важные для пользователей особенности (например, подошвы обуви)?

Некоторые продукты будут обладать выдающимися характеристиками, которые составляют основные УТП. У этих функций должны быть свои собственные фотографии с высоким разрешением и возможностью масштабирования, когда это необходимо.

Также важно включать фотографии, которые подчеркивают наиболее заметные особенности продуктов, такие как подошвы обуви, клавиатуры на ноутбуках, основные элементы дизайна одежды и т. Д.

В приведенном выше примере Zappos особое внимание уделяется наиболее важным характеристикам таких товаров, как подошва.

Также убедитесь, что описания продуктов совпадают с изображениями. Если вы ссылаетесь на определенные функции и УТП в описаниях, убедитесь, что есть соответствующие изображения, которые клиенты могут проверить. Также стоит расположить изображения по наиболее важным функциям, чтобы клиенты видели их первыми.

Хотите больше подобных идей?

Получайте еженедельные советы, стратегии и передовые отраслевые знания по электронной торговле.
Доставлено прямо в ваш почтовый ящик.

на Я прочитал политику конфиденциальности и принимаю условия рассылки.

Установите этот флажок, чтобы продолжить

Woohoo! Вы только что зарегистрировались. Проверьте свой почтовый ящик, чтобы подтвердить подписку.

5. Показываете ли вы несколько изображений и легко ли их просматривать?

Показ нескольких изображений, даже если они сделаны под одинаковым углом, воссоздает ощущение обращения с продуктом. Клиенты обычно хотят увидеть продукт с разных точек зрения и получить полное представление о нем перед покупкой. Это особенно касается определенных товаров, таких как одежда и аксессуары, с которыми обычно приходится много работать.

Имейте в виду, что объем внимания в Интернете, как известно, ограничен. Эти изображения должно быть легко прокручивать, особенно на мобильных устройствах. Если вы затрудняете пользователям быстрый просмотр различных изображений, вы просто увеличиваете вероятность того, что они покинут сайт.

Вот небольшой совет: убедитесь, что пользователи могут использовать оба больших пальца для прокрутки изображений на мобильных устройствах. Не пытайтесь угадать их любимую комбинацию!

Обратите внимание на то, как легко щелкнуть изображения на скриншоте из Simply Hike выше, а также показать продукт с разных ракурсов. Тонкие различия между изображениями призваны дать посетителю ощущение, будто он сам пробует продукт.

6. Для продавцов одежды: указываете ли вы информацию о модели рядом с фотографией?

Информация о размере предмета одежды и модели, которая его носит, может побудить посетителей с похожими размерами купить. Это также сделает продукт более перспективным для покупателя. Даже клиенты, у которых нет таких же размеров, будут иметь твердую точку отсчета для выбора размера.

Помните, что покупатели стараются быстро составить обоснованное мнение о предмете одежды, не позволяя себе роскоши примерить его. Они вряд ли будут тратить много времени на поиск на странице продукта всей необходимой информации. Предоставляя как можно больше деталей в одном месте, вы увеличиваете вероятность того, что клиенты будут чувствовать себя достаточно уверенно, чтобы совершить покупку.

Описание на Forever 21 под надписью «Размер + крой» гласит: «Модель ростом 5 футов 8 дюймов», на ней маленькая.

7. Легко ли получить оценки и отзывы, нажав кнопку или прокрутив вниз?

Рейтинги и отзывы имеют огромное влияние на конверсию. Вы должны максимально упростить доступ потенциальных клиентов к отзывам, включая их сразу после описания продукта .

Также рекомендуется добавлять агрегированную информацию, такую ​​как общий рейтинг и средние значения отзывов, которые имеют пять, четыре, три звезды и т. Д. В разделе обзора (см. Снимок экрана ниже).

Кратчфилд включает обзоры сразу после описания продукта с упрощенной информацией, такой как среднестатистические отзывы покупателей.

8. Легко ли можно просмотреть мнения рецензентов?

Если ваши клиенты не склонны писать читабельной прозой, структурируйте форму отзыва так, чтобы она запрашивала короткие ответы, которые можно было бы отображать в виде маркеров. Эти вопросы должны отражать наиболее важные проблемы, с которыми сталкиваются потенциальные покупатели. Вы также можете ранжировать отзывы по «полезности», помещая наиболее убедительные и полезные наверху.

Некоторые сайты электронной коммерции включают сводку обзоров с указанием того, что клиентам больше всего нравится и не нравится в продуктах, чтобы предоставить клиентам исчерпывающий и удобный для чтения обзор.

9. Сгруппировали ли вы «большую четверку» информации, и выделяются ли они как часть дизайна страницы продукта?

При структурировании страниц продукта важно размещать элементы «большой четверки» на видном месте и в одном месте. Эти:
а. Название продукта
б. Цена
c. Доступность
d. «Добавить товар в корзину» или аналогичный

Прежде чем клиент нажмет на основной призыв к действию «Добавить в корзину» или «Купить сейчас», он должен знать эти ключевые основные элементы информации. Размещая их рядом с основной кнопкой на странице (которая представляет собой наиболее желаемое действие), вы избавляете многих клиентов, особенно готовых к покупке, от необходимости прокручивать страницу вниз, чтобы найти важные детали.
Simply Hike отображает самую важную информацию, избавляя клиентов от необходимости искать страницу или прокручивать ее вниз.

10. Является ли ваш основной CTA (призыв к действию) повелительным предложением, а не отдельным словом?

«Повелительное предложение» - это приговор, который «приказывает» посетителю совершить действие. «Добавить в корзину» и «Нажмите здесь, чтобы купить сейчас» являются примерами. Не беспокойтесь о том, чтобы расстроить или обидеть посетителей. При правильном использовании императивы не похожи на команды.

Также стоит протестировать варианты императивных фраз, которые включают дополнительные подсказки, такие как предложения и скидки. Такие фразы, как «Купите сейчас, чтобы получить скидку 50%» или «Купите до 17:00, получите бесплатную доставку», гораздо интереснее обычного «Купи сейчас».

«Добавить в корзину» от Budapester - это обычное дело. Фразы, подобные приведенной на скриншоте выше, так часто используются в макете страниц продукта не зря. Они работают!

11. Виден ли призыв к действию над сгибом?

Не мешайте посетителям совершить покупку! Включение кнопки покупки над сгибом - одна из тех небольших настроек, которые могут существенно повлиять на конверсию страницы вашего продукта.

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

12. Используете ли вы методы создания срочности?

Срочность - один из самых эффективных способов увеличения конверсии на страницах ваших товаров. Убедитесь, что вы используете хотя бы некоторые из следующих методов:

• Покажите, сколько людей недавно купили товар (если он популярен) или товары из той же категории .
• Показать количество людей, просматривающих элемент.
• Гарантия доставки в тот же или следующий день для заказа, сделанного в определенное время.
• Включите предупреждения об ограниченном количестве товаров, например: «Остался только 1. Купи сейчас!"
• Если товары определенных размеров распроданы, сообщите об этом.

Zappos повышает актуальность приведенного выше списка продуктов, выделяя ограниченную по времени продажную цену и показывая низкие уровни запасов.

13. Являются ли шаги, ведущие к оформлению заказа, очевидными (после того, как пользователь добавляет товар в корзину)?

Необходимо наличие двух элементов, чтобы покупателям было легко перейти к корзине:

1. Четкое сообщение о том, что товар был добавлен в корзину - это устранит любые сомнения, что товар не был добавлен в корзину. Клиенты часто покидают сайт из-за разочарования, когда результат нажатия кнопки «Добавить в корзину» не ясен.
2. Четкая кнопка перехода в корзину - ее нужно включить в двух местах. В идеале призыв к переходу в корзину должен появляться сразу после того, как покупатель выбрал товар. Он также должен находиться на навигационной панели всего сайта, чтобы клиенты могли перейти к своей корзине независимо от того, где они находятся на вашем сайте.

14. Если товар распродан, показываете ли вы покупателям похожие товары или альтернативы (или даете ли им возможность подписаться на напоминание в случае, если товар появится снова)?

Снятые с производства продукты - это позиции или позиции позиций, которых у вас больше нет. Многие розничные торговцы полагают, что если покупатель заходит на страницу продукта, когда товара нет в наличии, он полностью его теряет. Но так бывает не всегда. Включив форму подписки по электронной почте вместе с предложениями аналогичных продуктов, вы можете эффективно воспользоваться преимуществом того, что в противном случае было бы «потерянным» трафиком.

Добавление формы подписки (желательно там, где будет обычный CTA) - простой способ гарантировать, что клиенты получат напоминание, когда товар, которого нет в наличии, станет доступным.

15. Вы четко указываете информацию о доставке?

Отсутствие информации о доставке на страницах товаров - одна из основных причин, по которым клиенты не добавляют товары в корзину. Посетители сайта часто ожидают завышенных ставок, если они не четко видны рядом с ценой товара.

Если вы предлагаете бесплатную доставку или доставку со скидкой, укажите это на видном месте рядом с основным призывом к действию. Бесплатная доставка - главный стимул для клиентов. Если бесплатная доставка или доставка в тот же день ограничена по времени - например, если покупка должна быть сделана до 17:00, чтобы соответствовать требованиям, - также отобразите эту информацию.

Зарезервировано понимаем, насколько важна для клиентов информация о доставке. Они многократно подчеркивают свое предложение бесплатной доставки и предоставляют заметную ссылку на более подробную информацию.

16. Если в вашей отрасли принято устанавливать высокие цены на доставку, включаете ли вы калькулятор доставки на страницу продукта?

Устранение сомнений - ключевая часть оптимизации страниц продукта для повышения коэффициента конверсии. Предоставление четкой информации о стоимости доставки позволяет покупателям принять решение о том, вписывается ли товар в их бюджет.

Иногда, однако, не всегда возможно указать точные тарифы на доставку, особенно в таких отраслях, как строительство, где стоимость доставки варьируется в зависимости от размера заказа, страны (или области страны) доставки, срочных цен, предлагаемых судоходные компании и многое другое.

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

17. Все ли характеристики указаны в описании продукта?

Покупателям, совершающим покупки в определенных вертикалях, потребуется очень конкретная информация о товарах. Например, покупателям строительных материалов, вероятно, потребуется доступ к подробным спецификациям.

Даже страницы с описанием обычных розничных продуктов обычно привлекают более широкую клиентскую базу, включая описание множества функций. Например, обращаются ли ваши списки товаров для одежды к экологически сознательным покупателям, включая подробную информацию о том, как они производятся с соблюдением принципов устойчивого развития?

18. Четко ли видны пользователю настраиваемые параметры (например, цвет, размер, подарочная упаковка и т. Д.) И просты ли они в использовании?

Нет ничего более разочаровывающего, чем кнопки настройки продукта, которые просто не работают. Если вы продаете товары, которые доступны в различных стилях, размерах или с индивидуальными функциями, убедитесь, что все параметры работают правильно.

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

19. Включаете ли вы видимое напоминание о выборе размера / цвета, если покупатель забудет?

Если клиент совершил ошибку, не выбрав необходимые функции продукта, уведомите его с помощью видимого напоминания рядом с основным призывом к действию . Когда клиенты не могут оформить заказ и им не объясняют, почему, это вдвойне неприятно . Один из самых простых способов улучшить качество обслуживания клиентов - это отображать уведомления о допущенных ошибках.

Если вы включили варианты продукта рядом с основным призывом к действию, покупателям будет легко исправить ошибку и перейти к оформлению заказа с минимумом трений.

Все, что нужно, - это простое напоминание, как в примере из Forever 21 выше. Если клиенты не знают, как исправить ошибку, они с большей вероятностью откажутся от процесса полностью.

20. Включаете ли вы пользовательский контент, например, из Instagram?

Пользовательский контент, такой как фотографии в Instagram и мультимедийные обзоры (которые включают видео и изображения клиентов), имеет большое количество правдоподобия и социальных доказательств . Подумайте о том, чтобы включить их где-нибудь на страницах ваших продуктов, если сможете. Они помогут привлечь внимание и укрепить положительный эффект от хороших отзывов.

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

На странице продукта Vanity Planets мы можем видеть контент пользователей из Instagram. Это дает покупателям подлинное представление о продукте и помогает им представить, как они его используют.

Помните, что всего несколько простых настроек дизайна страницы продукта могут иметь большое значение!

Не пугайтесь длины этого списка! Хотя может показаться, что на вас напали с огромным количеством советов по оптимизации магазина электронной коммерции, важно помнить, что большинство советов в этом списке - не что иное, как небольшие настройки.

Но хотя для реализации этих изменений требуется всего лишь несколько строк кода, результаты могут быть значительными. Небольшие изменения в описании продуктов, фотографиях и дизайне часто повышают конверсию, добавленную в корзину, на несколько процентных пунктов.

Как всегда, ключевым моментом является тестирование . Единственный реальный способ определить те изменения, которые будут работать для вашего магазина и вашей аудитории, - это тестирование. К счастью, выполнение сплит-тестов для описанных здесь типов настроек оптимизации является относительно простым делом. А как только у вас появятся базовые данные, вы сможете продвигаться вперед с новыми улучшениями, мозговым штурмом и дальнейшими настройками.

Хотите полный контрольный список из 115 пунктов?

Получите полный контрольный список бесплатно. Загрузите контрольный список оптимизации электронной торговли для интернет-магазина из 7+ рисунков прямо сейчас!

Мы охватываем все - от домашних страниц до форм оформления заказа и не только. Только не пытайтесь использовать сразу все советы!

Не сомневайтесь и ждите. Получите бесплатную копию сейчас: