Оптимизация изображений для улучшения юзабилити интернет-магазинов

Posted on by riasevastopol

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

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

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

  • Визуальный маркетинг: из-за чего лучше один раз заметить, чем 100 раз услышать?

1. Не скупитесь на картины

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

Вебмагазин The Urban Outfitters.

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

  • Оптимизируйте изображения под web

2. Имплементируйте на сайт разработку вращения фотографий на 360°

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

Вебмагазин Adidas.

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

Когда вебмагазин DueMaternity.com имплементировал эту разработку, коэффициент конверсии вырос на 27%. Фактически та же история произошла и с сайтом Golfsmith.com, но в том месте поступили умнее: возможность прокрутить изображение товара на 360° была добавлена не на все продукты. В итоге маркетологам магазина удалось распознать, что коэффициент конверсии на страницах этих продуктов был на 30-40% выше, чем на остальных.

  • 12 распространенных неточностей форматирования изображений

3. Добавьте контекст

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

Вебмагазин Amazon.

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

  • Что ответственнее в веб-дизайне, изображения либо текст?

4. Отыщите совершенный вариант зума

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

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

Вебмагазин newegg.com.

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

  • Форматы изображений для веб-применения

5. Покажите текстуру продукта

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

Вебмагазин AshleyFurniture.com.

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

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

  • Как создавать совершенные изображения для социальных медиа?

6. Покажите товар в стилях и разных цветах

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

Вебмагазин nike.com.

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

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

7. Укажите размер товара

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

Вебмагазин Urbanoutfitters.com.

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

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

  • Что такое формат изображения WebP (и из-за чего это принципиально важно знать)?

8. Не забудьте про скрытые возможности

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

Вебмагазин Ikea.com.

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

  • 16 способов оптимизации товарного лендинга

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

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

Вебмагазин Amazon.

Как именно люди держат продукт в руках? Как он выглядит под различным освещением? Как им пользоваться?

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

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

  • Преимущества применения видео-роликов на целевых страницах

10. Экономьте клики клиентов

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

Вебмагазин Urbanoutfitters.com.

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

Перемещение по сайту и совершение всех главных действий должно быть логичным и несложным.

Высоких вам конверсий!

По данным: usabilitygeek.com

Случайные статьи:

Оптимизация изображений для сайта — Константин Хмелев


Подборка похожих статей:

riasevastopol

More Posts