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

За многие годы, которые мы сотрудничаем с разными компаниями из сферы строительства, ремонта и DIY (ТД «Петрович», ДКС, Rehau, Аквилон), мы накопили определенный опыт по части создания эффективных интернет-магазинов строительных материалов.

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

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

В первой части мы рассмотрели только первый экран страницы товара. А в этот раз посмотрим на остальное содержание страницы — контент.

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

Два подхода к выводу контента

Есть два варианта вывода секций на странице: целиком или с разбивкой на разных вкладках.

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

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

У обоих подходов свои плюсы и минусы, но мы рекомендуем первый вариант: когда весь контент сразу виден на странице. Так удобней для пользователей и надёжней в плане SEO.

Панель навигации

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

Рассмотрим, как сделать панель навигации удобной.

1. Все пункты должны вмещаться

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

Посмотрим, что бывает, если этим пренебречь.

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

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

2. Выделение активного пункта

Активная вкладка должна явно подсвечиваться. Для этого можно менять цвет шрифта, подчеркивания или фона.

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

Самый надежный вариант — когда активный пункт меняет фон. Тогда он становится особенно заметным. Строительный двор

3. Ссылка на выбранный пункт

Когда пользователь кликает на пункт навигации, то адрес страницы должен меняться — в конце url должен появляться т.н. «якорь». Это символ # («решетка»), за которым следует название секции на английском языке. Например, #description, #reviews, #consumables. Такая особенность в целом сейчас является стандартом, поэтому встречается почти везде.

У большинства ИМ с этим порядок, однако ошибки в наименовании якоря можно заметить у OBI и Строительный двор. У них встречаются некорректные названия вида #ProductSpecsTabComponent или #Похожие%20товары.

4. Сохранять панель сверху

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

5. Плавные и резкие переходы

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

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

Секции на странице товара

Теперь переходим к рассмотрению разных секций на странице товара. Вот какие варианты встречаются:

1. Промо-описание
2. Описание
3. Детали
4. Характеристики
5. Файлы
6. Связанные товары
7. Ссылки на подборки
8. Отзывы
9. Вопросы и ответы
10. Наличие и способы получения
11. Сервис
12. Калькуляторы
13. Статьи

1. Промо-описание

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

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

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

2. Описание

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

Структура и форматирование текста

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

Дизайн текста

При подготовке дизайна страницы часто недооценивают важность дизайна самого текста.

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

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

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

• размер шрифта,
• жирность начертания,
• межстрочное расстояние,
• межбуквенное расстояние,
• расстояние между абзацами.

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

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

Разворачивание текста

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

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

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

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

3. Дополнительное описание (Детали)

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

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

• Информация о бренде
• Преимущества товара.
• Комплектация.
• Информация об упаковке (вес; габариты; что является единицей товара).

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

Примечательно, что блок о бренде не ограничен только логотипом, а содержит подробности:

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

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

4. Характеристики

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

Ширина столбцов

Распространённая проблема — слишком большая ширина столбцов. ВсеИнструменты.ру Бауцентр Из-за это остаётся больше пустое расстояние между названием характеристики и её значением, что усложняет считывание информации.

Примеры оптимальной ширины: Петрович, Стройландия, Максидом, Лемана ПРО.

Стилизация строк

Есть разные дизайнерские приёмы, которые помогают зрительно соединить название характеристики и ее значение.

Самое распространенное решение — точечное или пунктирное подчеркивание пустого пространства. Петрович ВсеИнструменты.ру Лемана ПРО

Но есть и другой вариант — полосатый фон для строк. OBI Этот подход тоже вполне эффективный и выглядит аккуратно.

Количество колонок

На некоторых сайтах характеристики расположены в одну колонку. ВсеИнструменты.ру Бауцентр

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

Ссылки из характеристик

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

В той или иной степени так делают большинство рассмотренных ИМ. Один из самых активных примеров: OBI. Лишь немногие игнорируют это удобство. Стройландия Строительный двор

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

Всплывающие подсказки

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

Сворачивание и разворачивание

Как и в случае с описанием товара, характеристик может быть много, поэтому может быть лучше по-умолчанию скрывать часть из них и раскрывать по клику на «читать далее». Бауцентр Лемана ПРО

Кнопка, чтобы сообщить об ошибке

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

5. Файлы (инструкции, документы, сертификаты, лицензии)

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

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

Наши рекомендации по разделу с файлами:

• Использовать формат PDF.
• Оптимизировать PDF специальными инструментами, чтобы файлы весили как можно меньше.
• Не отдавать файл на скачивание сразу, а открывать его в браузере на просмотр. Если будет нужно, пользователь сможет скачать файл из режима просмотра.
• Дополнительно дать возможность скачать за раз все файлы одним архивом. Петрович

6. Связанные товары

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

• Сопутствующие товары (Вам могут понадобиться, Не забудьте про это).
• Альтернативные товары (Похожие товары, Аналогичные товары).
• Покупают вместе (С этим товаром покупают).
• Расходные материалы.
• Популярно в категории.
• Товары коллекции.
• Вам это понравится.
• Вы недавно просматривали (Последние просмотренные, Ранее вы смотрели).

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

Например, на сайте ВсеИнструменты.ру в секции *«Сопутствующие товары»** сверху показывается список категорий. Можно выбрать другую категорию, и список сопутствующих товаров сразу поменяется.

Аналогичный прием можно посмотреть и у Петрович в секции «Вам могут понадобиться».

7. Подборки данного товара

Иногда в интернет-магазине есть функция подборок. Подборка это группа товаров по тому или иному признаку.

На странице товара обычно размещают список подборок, в которых он состоит.

Иногда подборок немного и они просто отражают разделы каталога. Например, в случае с краской: «Все товары производителя», «Краски», «Краски для внутренних работ», «Краски для стен и потолков». Лемана ПРО

Но иногда подборки делают и более специфичными: «Матовая краска для дерева для внутренних работ», «Краски и эмали по металлу для наружных работ DALI», «Акриловая краска белая 1 л» и т.д. Могут упоминаться марка, производитель, цвет, объема и другие характеристики. Тогда список подборок будет очень длинным.

Для таких случаев оптимальный вариант — показать их как «облако тэгов» и по-умолчанию выводить только пару строк. А по ссылке «Показать еще» раскрывать полный список. ВсеИнструменты.ру

8. Отзывы

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

Наши рекомендации по отзывам:

• Сам отзыв должен состоять из 3-х частей: Плюсы товара, Минусы товара, Общий комментарий.
• Показывать, к какому именно варианту товара был оставлен отзыв.
• Показывать, что отзыв подтвержден (т.е. покупатель доказал, что он купил этот товар в этом ИМ).
• Показывать детализацию рейтинга, т.е. сколько разных оценок было поставлено.
• Возможность комментариев к отзывам.
• Кнопки «понравилось» и «не понравилось» к отзывам.
• Фотографии.
• Видео.
• Дата отзыва.
• Не стоит добавлять к отзывам функцию «развернуть» и «свернуть». Потому что отзывы обычно небольшие, и такая функция только мешает, принуждая посетителей к лишним кликам.
• Сортировка отзывов (по оценке, по дате, по лайкам).
• Фильтрация отзывов (в т.ч. по наличию фотографий, по оценке и по варианту)

9. Вопросы и ответы

Функция вопросов и ответов также призвана повысить доверие покупателей и тем самым повысить конверсию. Поэтому она реализована в большинстве ИМ. ВсеИнструменты.ру Петрович Стройландия Сатурн

Наши рекомендации по разделу вопросов и ответов:

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

10. Наличие и способы получения

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

Но иногда эту информацию дублируют в контенте страницы.

11. Сервис

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

• Условия гарантии
• Сроки обмена и возврата
• Сроки ремонта
• Наличие и расположение авторизированных сервисов производителя.

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

12. Калькуляторы

Часто строительные интернет-магазины предоставляют разные полезные калькуляторы. Например, калькулятор расхода краски, исходя из введенных данных о длине и высоте стены.

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

Но иногда форма калькулятора открывается в модальном окне. Лемана ПРО

13. Статьи

Если у интернет-магазина есть блог с полезными статьями, то имеет смысл выводить на страницах товаров связанные с этим товаром статьи. Строительный двор Бауцентр

Заключение

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

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

Также, если вы до сих пор не изучили наше масштабное исследование интернет-магазинов на рынке DIY в России, то вот заветная ссылка:

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

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