Карточка товара в интернет-магазине стройматериалов. Часть 1 — Первый экран

Мы уже более 10 лет сотрудничаем с компаниями из сфер DIY, строительных материалов, товаров для дома и инженерных систем. Среди наших клиентов — ТД «Петрович», ДКС, Rehau и другие. Три года назад мы запустили крупный интернет-магазин строительных материалов в Казахстане под названием «Аквилон».

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

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

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

Блоки первого экрана страницы

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

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

1. Область заголовка (шапка карточки товара)
2. Фотографии и видео
3. Выбор варианта
4. Краткие подробности о товаре
5. Блок заказа
6. Информация о получении и наличии

Рассмотрим подробно каждый из этих блоков.

1. Шапка карточки товара

Шапка карточки товара располагается в верхней части страницы под «хлебными крошками» и состоит из Заголовка страницы и области под заголовком.

Заголовок

В заголовке страницы указывают название товара. Как правило, заголовок размещают сверху слева. ВсеИнструменты.ру Петрович Бауцентр и другие

Но можно найти примеры, когда заголовок располагают справа в блоке заказа. Лемана ПРО Чуть дальше мы раскроем, что это даёт.

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

Область под заголовком

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

Следующие элементы почти всегда есть в этой области страницы:

• Код товара (артикул).
• Средняя оценка.
• Кнопка добавления в избранное.
• Кнопка добавления к сравнению.

А другие элементы встречаются лишь иногда:

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

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

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

Зафиксированная шапка карточки товара

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

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

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

Дополнительно, иногда также в шапке показываются все разделы текущей страницы (описание, характеристики, отзывы, подборки и т.д.) — для быстрой навигации. ВсеИнструменты.ру Строительный двор Лемана ПРО Бауцентр

2. Фотографии и видео товара

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

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

Крупный размер фотографий

Размер блока, отведенного под фотографии, не должен быть маленькими. Удачный размер блока: Лемана ПРО Бауцентр. Слишком маленький размер блок фотографий: Петрович OBI.

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

Миниатюры фотографий

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

Но чтобы работа с миниатюрами была комфортной, важно учитывать некоторые особенности:

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

Видео с товаром

Обычно видео размещают вместе с фотографиями, в общей ленте миниатюр.

Рекомендации для видео:

• Показывать фото-превью в списке миниатюр, а не просто иконку видео.
• Видео по-умолчанию должно запускаться без звука.
• Должна быть возможность управлять видео: нажимать на паузу и переходить к нужному месту.
• Нужна возможность развернуть видео на весь экран.
• Для удобства, можно разместить видео на стороннем хостинге, например RuTube.

Маркетинговые «бирки»

Маркетинговые бирки это ярлыки, которые сообщают о том, что товар относится к какой-то акции. Бирки могут обозначать какую-то общую характеристику, например «Лучшая цена», «Новинка», «Ликвидация», «+100 баллов», «Сделано под контролем», но могут и обозначать какую-то конкретную временную маркетинговую акцию, например «15% Бонус в июне».

Поиск по фото («Похожие»)

Относительно новая функция в интернет-магазинах — поиск похожего товара по фото. Петрович Стройландия

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

Удобное пролистывание фотографий

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

• Реализовать пролистывание фотографий захватом мыши (свайпом). Бауцентр
• Реализовать пролистывание по кругу: т.е. после последней фотографии вы автоматически возвращаетесь обратно к первой. ВсеИнструменты.ру
• При переключении между фотографиями важно, чтобы это происходило плавно и естественно. Это можно сделать через смену слайдов слева направо. Петрович Бауцентр Или можно просто сделать плавный переход. Максидом

Качество фотографий

Для лучшего пользовательского опыта нужно хорошее качество исходных фотографий. Здесь есть свои тонкости:

• Исходные фотографии должны быть высокого разрешения.
• Важно не только высокое разрешение, но и фактически высокое качество исходных изображений. Бывает, что фотография низкого качества, но разрешение искусственно увеличено — такой вариант нежелателен.
• Сайт должен определять, каким должно быть разрешение фотографии, которая показывается пользователю. Это должно считаться, исходя из параметров его монитора и системных настроек: разрешения и плотности пикселей.
• При этом сайт должен сжимать фотографии, а также ограничивать их разрешение. Ведь если выдавать исходные фото без какого-то либо сжатия и изменения размера, то они будут много весить и загружаться на страницу слишком долго.
• Для изображений на сайте нужно использовать оптимизированные форматы файлов, созданные специально для веба: WebP и AVIF.

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

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

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

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

Водяные знаки

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

Приближение при наведении (лупа)

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

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

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

Модальное окно для фотографий

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

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

Как показать, что по клику откроется модальное окно

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

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

Содержание модального окна

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

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

Масштабирование через колесо мыши

Интересное решение можно заметить в модальном окне на сайте Бауцентр — там можно масштабировать (приближать и отдалять) изображение колёсиком мыши.

Закрывать модальное окно по клавише «esc»

Важно всегда поддерживать общепринятые соглашения по работе c веб-интерфейсами. В случае с модальным окном всегда должна быть возможность закрыть его нажатием на кнопку Esc на клавиатуре. Нарушено у: Сатурн Максидом Бауцентр.

3. Выбор варианта товара

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

Элементы, предназначенные для переключения между вариантами, чаще всего располагают между фотографиями и блоком заказа ВсеИнструменты.ру Петрович Стройландия Сатурн, но иногда они могут быть прямо в блоке заказа Бауцентр или даже в отдельном модальном окне Лемана ПРО.

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

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

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

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

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

4. Краткие подробности о товаре

Некоторые ИМ предпочитают делать первый экран максимально лаконичным — изображение занимает более половины страницы, а оставшуюся часть занимает блок заказа. Бауцентр Максидом Лемана ПРО Строительный двор

Тогда как другие ИМ стараются еще показать на первом экране хоть немного текстовой информации о товаре: некоторые основные характеристики ВсеИнструменты.ру Стройландия OBI или краткое описание. Петрович Сатурн

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

5. Блок заказа

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

Заголовок в блоке заказа

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

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

Цена, скидка, баллы

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

Заметная кнопка «В корзину»

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

Поэтому кнопка «В корзину» должна соответствовать правилам call-to-action — она должна быть яркой и заметной, но не раздражающей. Самый эффективный вариант — красная кнопка. Конечно, удобней всего использовать красный цвет, когда он является частью фирменного стиля. ВсеИнструменты.ру Сатурн Максидом

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

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

Также неоднозначным вариантом можно считать кнопку черного цвета. Лемана ПРО Черный цвет считается нейтральным и привлекает меньше внимания.

Когда товар добавлен в корзину

Когда товар добавлен в корзину, то надпись на кнопке «В корзинУ» обычно сменяется надписью «В корзинЕ», а стиль кнопки меняется с яркого на нейтральный. Например, с фирменного красного или синего цвета на белый или зеленый.

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

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

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

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

Иногда в этом же блоке размещают кнопки для дополнительных действий:

• Это может быть кнопка «Быстрый заказ» или «Заказать в 1 клик», которая запускает сценарий упрощенного оформления заказа.
• Бывает, что действие является специфичным для данного типа товара. Например, для краски это может быть кнопка «Заколеровать и купить».
• Также это может быть кнопка какого-нибудь подходящего калькулятора, например «Рассчитать количество». Петрович
• Другой вариант — кнопка выбора помощи мастера, например, замер под лакокрасочные работы. Лемана ПРО

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

6. Информация о получении и наличии

Информация о способах получения обычно размещается под блоком заказа. Как минимум, обычно есть Самовывоз и Доставка. Иногда самовывоз разделяется на Магазины и Пункты выдачи. Бывает, что к доставке добавляется Экспресс-доставка.

Как правило, возле каждого пункта сразу выводится информация о сроках доставки.

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

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

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

Заключение

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

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

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

А пока, чтобы скрасить ожидание, предлагаем почитать наше исследование целиком:

Исследование e-commerce решений на рынке стройматериалов и товаров для дома

Предлагаем ознакомиться с полной версией отчёта по результатам нашего исследования 10 крупнейших компаний рынка DIY (Do It Yourself).