Дизайн страницы продукта: как создать идеальную страницу продукта

1. Часть 1. Понимание компонентов дизайна отличного продукта.
2. Часть 2. Ответьте на эти вопросы в вашей копии продукта
3. Что это?
4. Как это решает проблему?
5. Почему ваш продукт?
6. Из чего это сделано?
7. Часть 3. Создание великолепных изображений продуктов
8. Начните с хорошей фотографии
10. Редактировать ваши фотографии
11. Оптимизируйте ваши изображения
12. Часть 4. Сохраняйте постоянство фотографии вашего продукта
13. Сфотографируйте ваши продукты на белом фоне
14. Используйте одинаковые размеры или пропорции
15. Используйте шаблоны продуктов
16. Часть 5: Возьмите фотографии вашего продукта на новый уровень!
17. Ускорить ваши изображения
18. Оптимизируйте свою страницу для мобильных устройств
19. Помните SEO
20. Оптимизировать изображения для увеличения
21. Заключение

Дизайн страницы вашего продукта - одна из самых важных и сложных страниц вашего магазина. Рассмотрите все ситуации, когда потенциальный клиент может попасть на страницу вашего продукта:

• Прямо из поисковой системы
• После просмотра вашего магазина
• После нажатия на целевую рекламу

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

• Оптимизирован, чтобы его можно было легко найти,
• Достаточно информативен, чтобы внушить доверие вашему клиенту,
• Разработанный, чтобы обеспечить большой опыт покупок в Интернете

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

Часть 1. Понимание компонентов дизайна отличного продукта.

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

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

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

1. Название продукта и обзор легко найти. Таким же образом здания и знаки действуют как ориентиры Когда вы посещаете новый город, хорошие названия помогают клиентам перемещаться по новому сайту.
2. Галерея изображений, демонстрирующих продукт под разными углами, с моделью и вблизи.
3. Изображение продукта спереди и по центру. Четкое фото на белом фоне демонстрирует продукт в лучшем свете. Изображения - это то, что ищет клиент, поэтому стоит сделать их заметными.
4. Уникальное, подробное описание продукта, в котором описывается, что это такое, что стоит за его дизайном и как он решает проблему покупателя.
5. Искренние отзывы клиентов, которые помогают укрепить доверие к вашему продукту и бренду.
6. Клиенты знают, чего хотят, но могут не знать, как это найти. Отображение недавно просмотренных или связанных продуктов помогает им быстрее сузить выбор и дает вам возможность продемонстрировать продукты, которые вы считаете предпочтительными.
7. Множество опций и вариантов на одной странице означает, что клиенту не нужно переходить по нескольким продуктам.
8. Сразу после того, как клиент заканчивает выбор своих опций, их ждет кнопка «Добавить в корзину».
9. Не готовы совершить? Ссылки на дополнительную информацию, такую ​​как политика доставки и возврата, помогут ответить на любые давние вопросы.

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

На страницах с наиболее успешными продуктами вы найдете вариант этих самых компонентов:

• Четкие и уникальные описания
• Отличная фотография продукта
• Отзывы, чтобы вселить уверенность покупателя
• Варианты настройки
• Очистить кнопку «Добавить в корзину»
• Дополнительная информация о доставке или покупке

Часть 2. Ответьте на эти вопросы в вашей копии продукта

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

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

Что это?

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

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

Как это решает проблему?

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

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

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

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

Почему ваш продукт?

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

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

Из чего это сделано?

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

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

Часть 3. Создание великолепных изображений продуктов

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

Итак, вот что вам нужно сделать, чтобы создать отличные изображения продукта:

Начните с хорошей фотографии

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

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

Ваши основные требования для настройки DIY Product Photography должны включать:

• Камера хорошего качества или смартфон: Вам не обязательно нужна камера DSLR для фотографирования продукта. Ваш смартфон будет выдавать фотографии с достаточно высоким разрешением и достаточным количеством настроек для регулировки освещенности и условий диафрагмы.
• Источник постоянного света. Ваше освещение должно помочь осветить наиболее важные функции вашего продукта и скрыть любые тени. Естественный свет идеально подходит для начала работы, поскольку он не такой дорогой или привередливый, как искусственное освещение; однако вам также необходимо использовать заполняющий свет или зеркало, чтобы равномерно распределить источник света с обеих сторон.
• Белый фон: белые фоны помогают равномерно отклонять свет, поэтому для исправления контраста требуется меньше работы. Это также значительно облегчает редактирование фотографий с помощью Волшебной палочки или пера. Вы можете использовать рулон бумаги или даже достаточно белый лист, чтобы начать.
• Устойчивая поверхность: для равномерного нанесения фотографий.
• Клипы: чтобы держать фон или освещение на месте.
• Штатив: чтобы держать камеру. Наличие штатива не является необходимостью, но оно поможет вам быстро сделать последовательные фотографии для различных продуктов. Если вы работаете с одним человеком, это может упростить задачу и сэкономить ваше время в пост-продакшн.

Использовать несколько изображений

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

Разные фотографии также могут иметь различный уровень важности на разных этапах процесса покупки.

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

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

Редактировать ваши фотографии

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

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

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

Оптимизируйте ваши изображения

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

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

• GIFS - изображения низкого качества, которые подходят для значков и миниатюр. Они также поддерживают анимацию, но не подходят для больших изображений из-за размера файла и низкого качества.
• SVG - векторный формат, что означает, что он использует XML для описания содержимого изображения в текстовом формате. Он будет загружать значки и основные изображения практически мгновенно и с очень маленьким размером файла, но обычные изображения будут слишком сложными для использования с этим форматом.
• Изображения PNG - это более быстрые файлы, которые поддерживают меньшее сжатие, что означает, что они сохранят исходное качество изображения. Они также поддерживают оттенки серого и прозрачность, но размер файла обычно слишком велик для целей электронной коммерции.
• JPG относится к методу сжатия, который позволяет изменять степень сжатия. Обычно изображения JPG может уменьшить размер файла до 10 раз без ощутимых потерь в качестве , Это делает их идеальными для создания высококачественных изображений продуктов с низким размером файла.

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

Бонус:

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

Часть 4. Сохраняйте постоянство фотографии вашего продукта

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

Вот лучшие способы сделать фотографии вашего продукта непротиворечивыми:

Сфотографируйте ваши продукты на белом фоне

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

Наличие ваших фотографий на белом фоне позволяет:

• Создайте согласованность во всех ваших продуктах
• Улучшение определенных аспектов вашего продукта
• Легко редактируйте свои фотографии в будущем, и
• Продавайте свои продукты на таких торговых площадках, как Google Shopping и Amazon, которые требуют белого фона.

Используйте одинаковые размеры или пропорции

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

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

Который выглядит лучше?

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

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

Используйте шаблоны продуктов

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

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

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

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

Чтобы создать базовый файл шаблона продукта с помощью Photoshop:

• Создайте новый файл фотошопа с желаемой шириной и высотой. Убедитесь, что ваш цветовой режим установлен на RGB Color - 8 бит, разрешение не менее 72 пикселей / дюйм, а фоновое содержимое белое или прозрачное.

• Далее в разделе «Вид» в главном меню выберите «Новое руководство».

• Создайте вертикальную направляющую 10% и повторите шаги, чтобы получить:
  • 10% вертикальная и горизонтальная направляющая
  • 90% вертикальная и горизонтальная направляющая
  • 50% вертикальная и горизонтальная направляющая

• Вы должны в конечном итоге это:

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

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

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

Часть 5: Возьмите фотографии вашего продукта на новый уровень!

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

Ускорить ваши изображения

Изображения могут оказать огромное влияние на время загрузки страницы. Если страницы вашего продукта загружаются медленно, ваши посетители будут разочарованы, ожидая, пока они загрузятся, и посетят меньшее их количество. По факту, 40% посетителей покинет ваш сайт, если загрузка займет более 3 секунд. Таким образом, страницы продукта должны быть быстро загружаться и легко просматриваться. Вот несколько способов оптимизировать ваши изображения для достижения этой цели.

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

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

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

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

Для этого в Google Chrome:

• Щелкните правой кнопкой мыши на странице, которую вы хотите проанализировать
• Выберите сеть"
• Обновите страницу

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

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

Оптимизируйте свою страницу для мобильных устройств

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

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

Некоторые соображения относительно страниц вашего мобильного продукта:

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

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

Помните SEO

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

Чтобы улучшить SEO вашего продукта:

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

Оптимизировать изображения для увеличения

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

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

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

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

• Шаблон миниатюры размером 50px x 50px
• Шаблон изображения коллекции размером 100px x 100px
• Шаблон родственного изображения размером 150px x 150px
• Основной шаблон фотографии размером 500 на 500 пикселей

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

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

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

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

Заключение

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

Похожие

Комментарии