Полное руководство по дизайну эффективной страницы продукта

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

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

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

1. Цели продуктовой страницы

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

• Объяснить, что продается. Страница должна показать, как выглядит продукт, как он функционирует и сколько стоит.
• Завоевать доверие. Первая покупка у компании — это всегда прыжок в неизвестность, особенно если она совершается онлайн. Именно поэтому страница продукта должна предугадывать и развеивать сомнения посетителей.
• Создать приятный опыт взаимодействия. На продуктовой странице следует использовать привлекательный визуал и убедительный текст, чтобы клиент по-настоящему прочувствовал цифровой опыт.
• Быть интуитивно понятной. Страница должна выполнять все перечисленные выше задачи, не перегружая пользователя информацией.

2. Цели страницы продукта и цели покупателя

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

Если продукт может решить эту задачу, страница должна убедить посетителя, что это правда так. Если же нет, это также следует сразу разъяснить.

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

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

3. Контент продуктовой страницы

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

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

• Хедер (или “шапка”). Здесь размещаются логотип бренда и пункты меню. Это стандартный элемент, который можно обнаружить на большинстве веб-сайтов. Не следует делать хедер слишком большим. Многие бренды предпочитают скрывать навигацию даже в десктопной версии сайта, например, с помощью иконки гамбургера.
• Описание продукта. Название, цена, ценностное предложение и иногда общий рейтинг (например, в виде звезд). Этот раздел дает представление о товаре и кратко объясняет, почему посетителю следует его приобрести.
• Изображения продукта и медиа. Содержит основные изображения товара, обычно в форме карусели, чтобы посетитель мог пролистать их и рассмотреть его с разных углов. Сюда также входят параметры просмотра, например, различные цвета и модели.
• Кнопка призыва к действию (CTA). Эта кнопка ведет на страницу покупки. Рядом с ней обычно указывают параметры покупки, такие как количество или размер.

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

• Вспомогательная информация. Это более подробные сведения о том, как работает продукт, его вес и габариты, ответы на часто задаваемые вопросы и даже сведения о конкретных частях продукта.
• Одобрение продукта. Включает отзывы, награды, списки известных брендов или людей, которые использовали ваш продукт в прошлом.
• Дополнительная графика. Второстепенные изображения, побуждающие пользователя дальше прокручивать страницу, например, иллюстрации / анимации, которые делают ее интерактивной и более живой. Обычно они являются частью общего брендинга сайта.
• Рекомендованные товары. Список продуктов, которые также могут заинтересовать посетителя. Если человек принял решение не совершать покупку, этот раздел даст ему возможность продолжить изучение ассортимента на сайте вместо того, чтобы просто покинуть его.

4. Как тип продукта влияет на контент страницы

Содержимое страницы может варьироваться в зависимости от природы представленного на ней товара / услуги. Чаще всего речь идет о разнице между физическими и цифровыми продуктами (или видимыми и невидимыми).

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

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

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

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

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

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

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

5. Как сделать продуктовую страницу максимально эффективной

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

1. Используйте подходящее программное обеспечение для разработки дизайна страницы продукта

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

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

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

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

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

Ознакомьтесь с нашим руководством по выбору программного обеспечения для веб-дизайна

2. Создавайте продуктовые страницы на основе шаблона

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

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

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

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

В этом дизайне для всех продуктов используется один и тот же лейаут, однако фоновое изображение и цветовая схема отличаются. Дизайн Francesco Zagami, Dribble

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

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

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

3. Помните о том, что страница продукта должна вписываться в общую концепцию сайта

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

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

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

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

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

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

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

4. Расставляйте информацию о продукте в приоритетном порядке

Страница продукта должна информировать потенциального покупателя, но не перегружать его информацией. Дизайнеру следует решить, что и когда увидит пользователь.

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

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

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

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

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

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

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

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

5. Расскажите историю с помощью изображений

Безусловно, изображения — самая эффектная часть дизайна продуктовой страницы. Пользователи просматривают их быстрее, чем текст. Неудивительно, что исследование Salsify показало, что покупатели в настоящее время ожидают увидеть на странице продукта в среднем 6 изображений и 3 видеоролика.

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

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

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

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

Ссылка на видео

Дизайн tubik, Dribbble

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

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

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

6. Не стоит недооценивать контент, генерируемый пользователями

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

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

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

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

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

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

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

7. Тестируйте, анализируйте, дорабатывайте

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

Другими словами, эффективность продуктовой страницы определяется тем, показывают ли инструменты аналитики, такие как Glew или Google Analytics (в последнем есть специальная функция для получения данных о сайтах электронной коммерции), что люди покупают ваши товары или услуги.

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

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

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

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

А если на странице низкий трафик, пересмотрите свою SEO-стратегию.

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

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

А/Б-тестирование — отличный способ быстро протестировать альтернативные версии дизайна. На основе полученных данных вы сможете принять решение, какой вариант является наиболее эффективным.

Для создания отличного дизайна продуктовой страницы нужен отличный дизайнер

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