Привет, меня зовут Станислав Хрусталёв, я автор блога hardclient.com. Работаю в сфере управления клиентским опытом с 2009 года. Пишу на эту тему, собираю лучшие практики из мира Customer Experience, оцениваю сервисные модели компаний.

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

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

Это один из 20+ чек-листов по UX/UI в e-commerce. К середине декабря 2022г все они будут доступны в моем профиле на Habr.

Структура статьи

Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.

1. Базовые моменты по характеристикам

Характеристики есть на странице

Особенно актуально для технических товаров: на странице нет блока с характеристиками – нет ответов на вопросы клиента – меньше шансов на покупку.

Смотреть пример
❌

В качестве полноценного блока

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

Смотреть пример
✅
✅

В формате side bar

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

Смотреть пример
✅

Highlight ключевых характеристик

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

Смотреть пример
✅
✅

Блок доступен в любой момент

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

Смотреть пример
✅

В блоке есть контент

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

Смотреть пример
❌
❌

Блок озаглавлен

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

Смотреть пример
❌
❌

Блок не дублируется

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

Смотреть пример
❌
❌

Блок вписывается по ширине

Блок должен быть виден полностью по ширине. Желательно с отступами. Базовый момент, но когда у анти-примера выручка 100+ млрд в РФ за 2021, грех не включить.

Смотреть пример
❌
❌

Без размытия фокуса

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

Смотреть пример
❌

Наравне с фото товара

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

Смотреть пример
✅
✅

Не в виде фото товара

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

Смотреть пример
❌
❌

Без перехода на новую страницу

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

2. Контент блока характеристик

Ключевое – в начале

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

Смотреть пример
❌
❌

Только релевантные характеристики

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

Смотреть пример
❌
❌
❌
❌

Достаточно для принятия решения

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

Смотреть пример
❌
❌

Единообразны в рамках категории

Убедитесь, что по всем товарам в рамках категории есть единый список характеристик. Так клиенту будет легче их сравнивать.

Нет характеристик без значений

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

Без дублирования названий

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

Смотреть пример
❌
❌

Соответствие действительности

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

Смотреть пример
❌
❌

Без ошибок в тексте

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

Смотреть пример
❌
❌

Без фактических ошибок

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

Смотреть пример
❌
❌

Без текста о потенциальных ошибках

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

Смотреть пример
❌
❌

3. Форматирование характеристик

Применяется в блоке

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

Смотреть пример
❌
❌

Характеристики в 1 строку

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

Смотреть пример
❌

Цвет названий vs. цвет значений

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

Смотреть пример
✅
✅

Связь названий и значений

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

Смотреть пример
✅
✅

Без чрезмерных разделителей

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

Смотреть пример
❌
❌

Без необоснованных переносов

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

Смотреть пример
❌
❌

Строки не скомканы

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

Смотреть пример
✅
✅

Шрифт легкий для восприятия

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

Смотреть пример
❌
❌

Без пустых областей на мобильных

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

Смотреть пример

Значения выровнены

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

Смотреть пример
❌
❌

Выравнивание на мобильных

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

Смотреть пример

Каждое значение с новой строки

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

Смотреть пример
✅
✅
❌
❌

Регистр унифицирован

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

Смотреть пример
❌
❌

Единицы рядом со значениями

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

Смотреть пример
❌
❌

Единообразие единиц

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

Смотреть пример
❌
❌

Корректность единиц

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

Смотреть пример
❌
❌

Без двоеточий

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

Смотреть пример
❌
❌

Применение иконок

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

Смотреть пример
✅
✅

Инфографика

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

Смотреть пример
✅
✅

Карточки на мобильных

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

Смотреть пример
✅

Визуализация товара

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

Смотреть пример
✅
✅

Без реакции на наведение/клик

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

Смотреть пример
❌

4. Использование подразделов

Контент разбит на подразделы

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

Смотреть пример
✅
✅
❌

Заголовки выделяются

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

Смотреть пример
✅
✅

Заголовки фиксируются в мобильной версии

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

Отступы и разделители

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

Смотреть пример
✅
✅
❌
❌

Заголовок – часть подраздела

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

Смотреть пример
❌
❌

Несколько характеристик в разделе

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

Смотреть пример
❌
❌

Близкие по смыслу – рядом

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

Смотреть пример
✅
✅

5. Контекстные подсказки

Используются

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

Смотреть пример
✅
✅

Иконки понятны

Не изобретайте колесо, где это не требуется: используйте наиболее распространенные иконки для подсказок (знак вопроса или символ i).

Смотреть пример
✅
✅

Иконки расположены корректно

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

Смотреть пример
❌
❌

Область клика на мобильных

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

И��онки реагируют на наведение

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

Смотреть пример
✅

Подсказка при наведении

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

Смотреть пример
✅

Затемнение фонового экрана

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

Смотреть пример
✅
✅

Подсказки релевантны

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

Смотреть пример
❌
❌

Подсказки по значениям

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

Смотреть пример
✅
✅

Продающие подсказки

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

Смотреть пример
✅
✅

Текст виден без скролла

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

Смотреть пример
❌

Подсказки без ошибок в тексте

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

Смотреть пример
❌
❌

Схематичные пояснения

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

Смотреть пример
✅
✅

Видео в подсказках

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

Смотреть пример
✅
✅

Подсказки легко скрываются

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

Смотреть пример
❌

6. Сравнение и помощь в выборе

Добавление в сравнение

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

Смотреть пример
✅
✅

Сравнение по характеристике

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

Смотреть пример
✅
✅

Спектр характеристик

Там, где можно сравнивать, значения должны быть кликабельны. В противном случае одинокое кликабельное значение может вызвать вопросы («Почему только оно?...»).

Смотреть пример
❌
❌

Формат сравнения

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

Смотреть пример
❌
❌

Листинг содержит результаты

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

Смотреть пример
❌

Ссылки на гайды

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

Смотреть пример
✅
✅

Предложение консультации

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

Смотреть пример
✅
✅

Консультация без авторизации

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

Смотреть пример
❌
❌

Интеграция с выбором вариантов

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

Смотреть пример
✅
✅

Интеграция с поиском

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

Смотреть пример
✅
✅

7. Скрытие и отображение характеристик

Скрытие, если список длинный

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

Кнопка раскрытия понятна

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

Выцветание краткого списка

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

Смотреть пример
✅
✅

Явное намерение – контент виден

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

Смотреть пример
❌

Свертывание секций

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

Смотреть пример
❌

Действия анимированы

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

Смотреть пример
❌

8. Описание товара

Добавлено на страницу товара

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

Содержит полезную информацию

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

Смотреть пример
❌
❌

Ключевой контент в начале

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

Контент актуален

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

Доносит историю

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

Смотреть пример
✅

Подсвечивает особенности

Подсветите с помощью описания ключевые особенности товара, чтобы привлечь к ним дополнительное внимание клиента.

Смотреть пример
✅
✅

Количество особенностей

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

Отвечает на вопросы клиента

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

Текста не слишком много

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

Смотреть пример
❌
❌

Текст разбит на блоки

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

Смотреть пример
✅
✅

Отступы между блоками

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

Смотреть пример
❌
❌

Без CAPS LOCK

Воздержитесь от необоснованного использования CAPS LOCK в описании. Это может сделать текст более «кричащим» и вызвать раздражение у клиента.

Смотреть пример
❌
❌

Текст не растянут по ширине

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

Смотреть пример
❌
❌

Не дублирует характеристики

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

Смотреть пример
❌
❌

Отдельно от характеристик

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

Смотреть пример
❌
❌

Мини-презентация

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

Смотреть пример
✅

Изображения доступны

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

Смотреть пример
❌
❌

Мобильная оптимизация

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

Смотреть пример
❌
❌

To be continued...

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

Следующие статьи будут с таким же уровнем детализации. Продолжаем покрывать все ключевые аспекты Customer Journey в eCommerce. Не забудьте подписаться на Habr, в Telegram и поделиться с друзьями и коллегами по цеху. Будем на связи.