12 1160x620 - Улучшаем карточку товара в интернет-магазине

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

Продавайте лайфстайл

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

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

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

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

Улучшаем карточку товара в интернет-магазине

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

Институт Baymard так же предлагает позволить пользователям загружать свои изображения на сайт. Это может привести к взаимовыгодному партнерству с фешн-блогерами, журналами и ритейлерами. Например, MADE.com позволяет пользователям ставить теги на постах в Instagram, некоторые из которых размещаются на их сайте.

Улучшаем карточку товара в интернет-магазине

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

Улучшаем карточку товара в интернет-магазине

Примите к сведению стандарт индустрии

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

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

Улучшаем карточку товара в интернет-магазине
Страницы продукта COS & Farfetch

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

Улучшаем карточку товара в интернет-магазине

Дайте возможность купить аутфит целиком

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

Улучшаем карточку товара в интернет-магазине

Покажите товар

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

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

  • Показывайте товар как на невидимом манекене, так и на модели.
  • Обозначьте мерки модели и размеры надетых товаров.
  • Снимите детали крупным планом: подкладку, швы, ткань, метки, молнии, пуговицы.
  • Снимите видео: так покупатель сможет лучше представить товар.
  • Соблюдайте консистентность для всех изображений: убедитесь, что товары имеют одинаковый размер в кадре и одинаково центрированы на каждом изображении. Фотографии похожих по размеру товаров должны иметь одинаковый зум, положение по оси Y, резкость, настройки баланса белого и т. д.
  • Если продукт, например пальто, имеет застежку-молнию или пуговицы, покажите его как застегнутым, так и расстегнутым.
  • Покажите продукты в масштабе. Если размер и пропорции продукта изначально не очевидны, поместите на фото какой-то объект известного размера, например монету. Для сумок, обуви и украшений должно быть хотя бы одно фото на модели.
  • Покажите больше фотографий под разными углами одновременно. На таких сайтах, как ASOS, пользователь должен помнить, как продукт выглядит спереди, когда он смотрит на него сзади, и наоборот. Это делает процесс оценки сложнее, длительнее и утомительнее для клиента.

Улучшаем карточку товара в интернет-магазине

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

Улучшаем карточку товара в интернет-магазине

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

Не используйте карусель

Многочисленные исследования показывают, что карусели не работают, потому что на самом деле никто не кликает на них. Хотя имеются в виду промо-карусели, некоторые из этих недостатков справедливы и для карусели фотографий, например:

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

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

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

Улучшаем карточку товара в интернет-магазине

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

Улучшаем карточку товара в интернет-магазине

Используете миниатюры, но не обрезайте их

Исследования института Baymard показывают, что 50–80% пользователей вообще не просматривают фотографию, если из-за экономии места ее миниатюра не показана.

Улучшаем карточку товара в интернет-магазине

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

Проектируйте для пограничных случаев

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

Итак, представьте, что товар имеет скидку или принимает участие в акции. У вас может быть таймер скидки, ярлык «распродано» / «осталось мало», или «осталось мало» только в размере M. Длинное название товара, бренд, название коллекции, артикул, НДС и информация о наличии в магазине должны быть сразу видны на странице. Нельзя просто свернуть их под «Подробнее» в угоду чистоте визуального дизайна.

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

Улучшаем карточку товара в интернет-магазине

Опишите продукт и как его купить

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

  • Покажите ссылку на руководство по подбору размера и размерную сетку рядом с селектором размеров.
  • Покажите мерки модели рядом с фотографиями.
  • Разместите конвертер величин рядом с размерами модели / продукта (для международных магазинов).
  • Покажите инструкцию по уходу рядом с составом изделия.
  • Разрешите получить уведомление об отсутствующем сейчас размере.
  • Покажите стоимость доставки. Исследования Baymard показывают, что 64% ​​пользователей ищут стоимость доставки прямо на странице товара, а 24% утверждают, что отказались от покупки, потому что не смогли ее найти. Это может быть особенно важно для международных заказов, когда стоимость доставки иногда удваивает цену.

Улучшаем карточку товара в интернет-магазине

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

Будьте вежливы и предупредительны

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

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

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

Вот несколько советов, как сделать ваш интерфейс более вежливым:

  • Убедитесь, что контакты и помощь легко найти.
  • Не стесняйтесь дублировать полезную информацию. Вы можете разместить информацию о доставке и возврате товара на каждой странице продукта и на протяжении всего процесса оформления заказа, тогда, если пользователю это понадобится, ему не придется просматривать раздел часто задаваемых вопросов (FAQ).
  • Указывайте артикул или ID продукта, чтобы при необходимости общения с поддержкой, пользователь мог легко его найти и указать.
  • Не упрекайте пользователя за ошибки, которые он никогда не совершал. Например, если пользователь пытается добавить товар в корзину, не выбрав размер, деликатно направьте его внимание на селектор размеров с помощью анимации или всплывающей подсказки, но избегайте красного цвета, капса, иконок, звуков или анимации, ассоциируемых с ошибками.
  • Используйте визуальный фидбек при добавлении товаров в корзину/вишлист и при входе в систему. Это гораздо важнее, чем кажется на первый взгляд, согласно исследованиям NNGroup.

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

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

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

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

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Различие в проектировании нативных приложений iOS и Android

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

Как упростить свой дизайн, большое руководство

Свыше 20 понятных иллюстрированных примеров Компании постоянно стремятся создавать простые и полезные…

Модальность – одна из концепций UX, которую большинство дизайнеров не до конца понимают

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