Как создать идеальную карточку товара для интернет-магазина

Содержание

Адаптивная сетка

Итак, начнем с создания адаптивных плиток — будущих карточек товаров. У нас будет 8 комнатных растений:

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

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

И зададим стили карточек товаров.

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

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

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

Как НЕ надо делать: лишняя информация в карточке товара

А теперь перечислим то, что стоит убрать на странице.

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

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

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

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

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

Подробное описание товара (преимущества товара)

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

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

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

Подумайте, что обычно важно для покупателей того или иного товара

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

Сколько вешать в граммах: определяем объем текста для карточек товаров

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

В интернете вы можете столкнуться с мнением, что для карточки товара достаточно 500–1 000 символов. Иногда да, но все-таки порой этого мало, а порой много. Вопрос состоит в том, о каком именно товаре идет речь: допустим для откидного болта DIN 444 с ушком достаточно только технических характеристик, цены и фотографии – тексты никто читать не будет. А вот для флагманского смартфона Samsung Galaxy S20 нужен практически целый лендинг – чтобы красиво презентовать все его преимущества, которые помогут сделать пользователю выбор.

Поэтому при определении объема и содержания текста карточки товара следуйте простой инструкции:

Выберите товар, для которого вы планируете подготовить текст. Пускай в нашем случае это будет смартфон Xiaomi Mi 10 Ultra

Посмотрите результаты поисковой выдачи по запросам с названием товара – «Xiaomi Mi 10 Ultra», «купить Xiaomi Mi 10 Ultra», «Xiaomi Mi 10 Ultra цена». Не забывайте, что нас интересует прежде всего не контекстная реклама, а органическая выдача – с этими сайтми вы будете конкурировать

Оцените обстановку – откройте 3–5 сайтов, чтобы узнать, как вообще обстоят дела с карточками товаров

Обратите внимание на три важных момента: объем и содержание текстов, функционал и дизайн страницы. Ведь чтобы хотя бы приблизиться к ТОПу, ваша карточка Xiaomi Mi 10 Ultra должна быть не хуже, чем у прямых конкурентов

Допустим, если у конкурентов в карточках товаров почти по 1 000 символов – то вам нужен текст такого же либо чуть большего объема. Что касается содержания, то ситуация аналогичная – смотрим и повторяем.

Таким образом, для страницы Xiaomi Mi 10 Ultra нужен текст объемом 1 000 символов, в котором будут кратко описаны преимущества смартфона с точки зрения выгодны покупателя

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

По аналогии с телефоном можно определить объем и содержание текста для карточки совершенного любого товара.

Что делать, когда товаров очень много

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

Можно обойтись и без таких жертв. Проанализируйте по 1–3 товарам из каждой категории, этого будет вполне достаточно, чтобы уловить суть.

Хорошая карточка дает исчерпывающую информацию о товаре

Иначе говоря, отвечает на все возможные вопросы потенциального покупателя. Поэтому если для дорогой двуспальной кровати с мягкой дизайнерской спинкой нужно 4 000 символов, чтобы рассказать обо всех ее преимуществах – подготавливайте текст именно такого объема. А если для подарочного пакета достаточно буквально одного предложения, то обойдитесь им – не заставляйте копирайтера писать бессмыслицу на 1 000 символов.

Тень, свечение и градиент

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

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

Слева — карточка с жесткой рамкой, а справа — карточка с тенью вместо рамки

Карточка товара на сайте

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

Магазин спорттоваров Decathlon:

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


Карточка товара в спортивном магазине Decathlon

Карточка настольной игры «Монополия» в магазине «Детский мир». Мне нравится, что все лаконично: много места под картинки, есть вся нужная информация про наличие в магазинах и доставку. При этом можно легко выйти в отзывы или описание товара — ссылки на них расположены прямо под названием.


Минималистичная, но функциональная карточка товара в магазине «Детский мир»

Карточка украшения в ювелирном магазине Sunlight. Тут тоже все здорово оформлено: есть и отзывы, и возможность найти ближайший магазин, и сохранить товар в избранное. Особенно нравится кокетливая кнопка «Намекнуть». И функция полезная, и сама формулировка забавная :).


Интересное оформление карточки товара в магазине Sunlight

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

Сделайте карточку «отзывчивой» — пусть она меняет внешний вид при наведении курсора. Так гораздо удобнее ориентироваться на странице: сразу видишь, где водишь мышкой. Можно менять внешний вид самой карточки, например, подсветить по краям. Попробуйте также при наведении менять фото на превью: например, показать обувь с другого ракурса. Это дает пользователю чуть больше информации без лишних действий. Вот пример отзывчивой карточки товара из магазина Lamoda:

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

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

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

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

Условно разделим их на три группы и рассмотрим каждую:

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

Это элементы карточки с информацией о товаре:

Наименование и марка товара.Оптимально оформить тегом

 — главного заголовка страницы.

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

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

Цена товара. Выделите цену крупным или жирным шрифтом.

Наличие товара на складе.Покупателю важно знать, что понравившийся товар есть на складе и он будет сразу же отправлен. Если такой информации нет, то если клиент только после заказа узнает, что товара нет и придется подождать, то вряд ли он к вам вернется. Для товаров, которые на складе отсутствуют, но пользуются спросом, лучше добавить кнопку «Сообщить о наличии».
Так вы получите адрес почты и изучите спрос. Потом вы сможете быстро продать товар при поступлении. Можно информировать об объеме товара на складе индикатором, надписью «Заканчивается» или количеством. Это может дополнительно мотивировать к покупке.

Способы оплаты.
Узнать способы оплаты товара, в том числе и в кредит, покупатель должен на странице товара. Установите значки платежных систем и банков, кнопку или вкладку «Способы оплаты».

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

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

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

Элементы обратной связи с покупателем

Конверсию посетителей поднимут интерактивные элементы на карточке товара.

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

Дополнительные возможности

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

Специалисты «Экзитерра» при работе с проектами клиентов используют в зависимости от особенностей ЦА. Подключение некоторых возможностей выполняется после А/Б тестирования.

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

Триггеры доверия

Гарантия возврата

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

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

Условия гарантийного обслуживания

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

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

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

Карточка расписания (Kanban):

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

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

Карточки Канбан разделяются по категориям состояния. Основные статусы — это “Выполнено”, “В работе” и “Завершено”, но в разных проектах статусы отличаются.

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

Выводы

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

  • Элементы минималистичного дизайна
  • Новые правила дизайна интерфейсов в Google
  • Как разработать систему для 100 миллионов пользователей: руководство для начинающих

Читайте нас в Telegram, VK и

Детали продукта

Детальная информация

Чем больше деталей, тем лучше. Укажите:

  • состав;
  • материалы;
  • габариты, вес;
  • инструкции по эксплуатации;
  • руководства.

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

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

Информация о бренде

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

Дополнительный товар

Выпускаем принтеры, но зарабатывать будем на расходниках — красках и тонерах.

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

Работать может и при ведении рассылок. Например, человек купил кепочку и остался ею доволен. Почему бы ему не направить письмо через какое-то время и не предложить купить сумку, которая будет подходить под приобретенную одежду?

Похожие товары

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

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

Карточки профиля (информация о пользователе)

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

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

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

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

Карточка товара на сайте: необходимые элементы

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

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

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

Так пользователь сможет рассмотреть все детали товара и быстрее принять решение о покупке.

Краткая информация о товаре

То есть те параметры, на которые пользователь обращает внимание в первую очередь: название, статус о наличии продукции, основные характеристики, стоимость. Здесь же можно указать об участии товара в акции и добавить небольшое описание о нем

Располагать информацию лучше справа от фотографии товара:

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

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

Располагаем подобные кнопки рядом с краткой информацией.

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

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

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

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

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

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

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

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

Если вы можете рассчитать стоимость доставки и указать примерную дату получения товара, то вместо вкладки эту информацию нужно показать в кратком описании товара:

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

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

Или список похожих товаров:

Или блок с рекомендованными товарами:

Допускается показать все три вида подборок, но лучше выбрать одну-две, чтобы сильно не удлинять страницу.

И уже как элемент навигации внизу страницы стоит разместить блок с ранее просмотренными товарами:

Какой контент должна содержать карточка товара?

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

Поэтому не нужно забывать о таких важных моментах, как:

  • Принцип прототипичности – соответствие паттерному восприятию.
  • Интуитивность – понимание процесса принятия решения пользователем.
  • Убедительность – дизайн и контент страницы (в том числе стоит учитывать «психологию цвета»).

Удачная карточка товара включает в себя подробную и достоверную информацию о продукте. На странице обычно присутствуют:

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

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

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

Отличная метафора

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

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

Каждая карточка представляет игрока. Источник картинки: liveauctiongroup

Изображение товара – уделяйте внимание визуализации

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

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

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

По данным исследования Forrester Consulting, около 55% людей никогда не покупают онлайн, так как предпочитают ознакомиться с продукцией лично. Эта цифра очень показательна: очевидно, что большинство людей хотят «увидеть» товар до приобретения. А так как посетители не могут его потрогать или примерить, то есть не взаимодействуют с продуктом лично, картинки на вашем сайте должны полностью компенсировать это. Качественные и яркие изображения помогут клиенту сделать выбор в вашу пользу и напрямую повлияют на вашу способность генерировать лиды.

№ 1: Высокое качество изображений товара

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

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

№ 2: 360°, или Взгляд на продукт со всех сторон

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

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

№ 3: Изображение всех вариантов продукта

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

Очень плохо, когда пользователь должен принимать решение о покупке с помощью палитры расцветок и материалов:

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

Намного полезнее, если пользователь сможет увидеть продукт в других расцветках:

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

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

№ 4: Возможность масштабирования

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

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

№ 5: Товары в реальной жизни

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

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

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

Пример № 2: Вы продаете сумки. Размер на изображении может быть обманчив, поэтому делайте снимки с предметами повседневного обихода или в руках модели – такие фото дают лучшее представление о габаритах товара. Вы также можете показать, какие предметы поместятся внутрь.

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

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

Организация контента

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

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

Привлекательный внешний вид

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

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

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

Сайт Dribbble.

Как спроектировать карточку

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

Высота карточки может быть фиксированной или переменной. Источник изображения: Intercom

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

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

Источник изображения: Behance

МЕНЮ

Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок