hardclient scroll to top
hardclient telegram

Проектируем характеристики и описание в карточке товара

Лучшие практики UX/UI в мобильном e-commerce
117
гайдлайнов
Продолжаем проектировать идеальный клиентский путь в мобильном e-commerce и прокачивать насмотренность.

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

Просмотр около 200 приложений превратился в 117 гайдлайнов.

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

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

Блоки в карточке товара

12 гайдлайнов

Блоки обособлены

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

Антипример Wildberries
hardclient

Не видны, если контента нет

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

Пример Ozon
hardclient

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

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

Антипример Юла
hardclient

Заголовки vs. категории

Заголовки блоков («Описание» и «Характеристики» ) лучше выделить на фоне остальных объектов, содержащихся в блоках, чтобы соблюдалась визуальная иерархия.

Антипример Onliner
hardclient

Краткие версии блоков

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

Пример Галамарт
hardclient

Блоки расположены рядом

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

Антипример МегаМаркет
hardclient

В краткой версии – ключевой контент

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

Антипример Ozon
hardclient

Контента в кратких версиях достаточно

При этом не стоит размещать в краткой версии блока слишком мало контента. Отдать под этот блок половину экрана – вполне нормально.

Антипример Hoff
hardclient

Без скролла кратких версий

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

Антипример Sello
hardclient

Блоки доступны при скролле

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

Пример Яндекс.Маркет
hardclient

Блоки в виде вкладок

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

Пример Ozon
hardclient

Полностью скрытые блоки?

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

Пример Rendez Vous
hardclient

Названия и значения характеристик

34 гайдлайна

Формат в 2 столбца

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

Пример Ситилинк
hardclient

Формат в 1 столбец

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

Пример Лента
hardclient

Разбиение на ячейки

В случае если не используется разделение, названия и значения могут визуально сливаться друг с другом и станут относительно трудны для восприятия.

Антипример Wildberries
hardclient

Характеристики с новой строки

Базовый момент: каждую следующую характеристику лучше начинать с новой строки. Не все следуют этому совету, а пример – просто «жемчужина» моей коллекции.

Антипример Sello
hardclient

Единая ширина ячеек

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

Антипример Все Инструменты
hardclient

Выравнивание названий по левому краю

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

Пример М.Видео
hardclient

Выравнивание значений по правому краю, если тексты краткие

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

Пример Яндекс.Маркет
hardclient

Без выравнивания значений по правому краю, если тексты объемные

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

Антипример Яндекс.Маркет
hardclient

Без массивных значений

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

Антипример METRO
hardclient

Выравнивание значений по левому краю

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

Пример М.Видео
hardclient

Вертикальное выравнивание

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

Пример Яндекс.Маркет
hardclient

Соединительные линии

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

Пример Яндекс.Маркет
hardclient

Разделительные линии

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

Пример Впрок
hardclient

Контрастность линий

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

Антипример Hoff
hardclient

Отступы между характеристиками

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

Антипример Sello
hardclient

Разделение строк по цветам

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

Пример Zenden
hardclient

Цвета названий и значений

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

Пример Ozon
hardclient

На чем делать акцент?

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

Пример Золотое Яблоко
hardclient

Размер шрифта

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

Антипример Hoff
hardclient

Шрифт легкочитаемый

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

Антипример Все Инструменты
hardclient

Текст осмысленный

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

Антипример AliExpress
hardclient

Полная локализация

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

Антипример eBay
hardclient

Возможность перевода

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

Пример Etsy
hardclient

Тексты не обрезаются

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

Антипример Юла
hardclient

Просмотр полного текста значений

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

Пример Лента
hardclient

Перенос по словам

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

Антипример Юла
hardclient

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

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

Антипример Комус
hardclient

Единый регистр названий

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

Антипример Яндекс.Маркет
hardclient

Единый регистр значений

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

Антипример Auto.ru
hardclient

Без caps lock

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

Антипример Rendez Vous
hardclient

Пояснения к характеристикам

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

Пример Эльдорадо

Символы наличия и отсутствия характеристик

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

Пример Onliner
hardclient

Инфографика

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

Пример Азбука Вкуса
hardclient

Визуализация характеристик

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

Пример Auto.ru
hardclient

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

5 гайдлайнов

Значения кликабельны

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

Пример Яндекс.Маркет
hardclient

Кликабельность без подчеркивания

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

Антипример METRO
hardclient

Какие характеристики кликабельны?

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

Антипример METRO
hardclient

Быстрые фильтры – отдельный блок

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

Пример МегаМаркет
hardclient

Фильтрация листинга при тапе

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

Пример Яндекс.Маркет
hardclient

Единицы измерения

6 гайдлайнов

Добавлены

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

Антипример Все Инструменты
hardclient

Единообразно размещены

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

Антипример Ozon
hardclient

Используются сокращения

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

Антипример Подружка
hardclient

Единообразие форматов

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

Антипример Ситилинк
hardclient

Без предлогов

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

Антипример МегаМаркет
hardclient

Единицы измерения общепринятые

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

Антипример Мираторг
hardclient

Категории характеристик

9 гайдлайнов

Разбиение по категориям

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

Пример Ozon
hardclient

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

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

Пример Ситилинк
hardclient

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

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

Пример Эльдорадо
hardclient

На чем делаем акцент?

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

Пример Сима-ленд
hardclient

Категории фиксируются при скролле

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

Пример М.Видео
hardclient

Анимация замещения категорий

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

Пример Эльдорадо
hardclient

Отступы между категориями

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

Антипример М.Видео
hardclient

Свертывание категорий

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

Пример Технопарк
hardclient

Карусель категорий

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

Пример Sokolov
hardclient

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

19 гайдлайнов

Присутствует в карточке

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

Антипример Ригла
hardclient

Частично скрыто

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

Пример Лента Онлайн
hardclient

Описание vs. характеристики

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

Антипример Kazan Express
hardclient

Разбиение на параграфы

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

Антипример Wildberries
hardclient

Параграфы небольшие

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

Пример Ecomarket
hardclient

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

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

Пример Leroy Merlin
hardclient

Заголовки содержательны

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

Антипример Street Beat
hardclient

Отступы между параграфами

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

Пример Leroy Merlin
hardclient

Единообразие отступов

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

Антипример Uzum Market
hardclient

Текст без ошибок

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

Антипример Все Инструменты
hardclient

Контент соответствует действительности

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

Антипример Adamas
hardclient

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

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

Пример СпортМастер
hardclient

Форматирование в меру

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

Антипример PetShop
hardclient

Caps lock обоснован

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

Антипример Циан
hardclient

Без выхода за контур приложения

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

Антипример Shop
hardclient

Когда скролл не нужен

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

Антипример Все Инструменты
hardclient

Скролл vs. контент

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

Антипример Sello
hardclient

Лендинг вместо текста

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

Пример Ozon
hardclient

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

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

Антипример Ozon
hardclient

Переход к полным версиям контента

18 гайдлайнов

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

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

Пример Ozon
hardclient

Размещение кнопки

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

Антипример Эльдорадо
hardclient

Кнопка заметна

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

Пример Ozon
hardclient

Кнопка с иконкой

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

Пример Яндекс.Маркет
hardclient

Без чрезмерного фокуса

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

Антипример Sello
hardclient

Содержит текст

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

Антипример Эльдорадо
hardclient

Текст интуитивно понятен

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

Пример Ozon
hardclient

Видна, если полная версия есть

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

Антипример Столплит
hardclient

Кликабельная область

Если кнопка состоит из нескольких элементов, сделайте кликабельной всю её область, а не только текст.

Пример Яндекс.Маркет
hardclient

Реакция на касание

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

Пример Leroy Merlin
hardclient

Когда 2 кнопки перехода уместны

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

Пример МегаМаркет
hardclient

Когда 2 кнопки перехода неуместны

На контрасте можно привести пример, когда и кнопки, и заголовок дублируются. А из-за размеров самого списка они еще и расположены рядом друг с другом.

Антипример М.Видео
hardclient

Переход при тапе по краткой версии

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

Пример Leroy Merlin
hardclient

Полная версия – отдельный экран

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

Пример Ситилинк
hardclient

Полная версия – часть карточки товара

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

Пример Золотое Яблоко
hardclient

Полная версия – отдельная карточка

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

Пример AliExpress
hardclient

Анимированное появление

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

Пример Lamoda
hardclient

Без задержек в загрузке контента

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

Пример Яндекс.Маркет
hardclient

Закрытие полных версий блоков

7 гайдлайнов

Через кнопку закрытия

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

Пример Яндекс.Маркет
hardclient

Смахиванием карточки

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

Антипример Shein
hardclient

Тапом по фоновой области

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

Пример AliExpress
hardclient

Через левый edge swipe

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

Пример Ситилинк
hardclient

Длина edge swipe

При закрытии через левый edge swipe не стоит делать длину свайпа слишком большой: 20% ширины экрана будет вполне достаточно, чтобы считать намерение пользователя.

Антипример Эльдорадо
hardclient

Возможность свернуть список

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

Антипример Wildberries
hardclient

Закрытие через тап по контенту

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

Пример Lamoda
hardclient

Прочие интересные фичи

7 идей

Сравнение товаров

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

Пример МегаМаркет
hardclient

Вопросы о товаре

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

Пример Яндекс.Маркет
hardclient

Характеристики комплекта

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

Пример Сантехника-Онлайн
hardclient

Расширение списка с помощью фидбэка

Компания может использовать фидбэк от клиентов в том числе и для расширения списка характеристик: «Чего-то не хватает? Дайте нам знать – обязательно добавим».

Пример Все Инструменты
hardclient

Контроль качества с помощью клиентов

Если компания – маркетплейс, с помощью клиентов также можно контролировать достоверность информации в характеристиках от продавцов.

Пример МегаМаркет
hardclient

Копирование артикула

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

Пример Ozon
hardclient

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

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

Пример Leroy Merlin
hardclient
To be continued...
Как видим, при проектировании блоков с характеристиками и описанием товара есть много нюансов, которые стоит учитывать для обеспечения хорошего UX.

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

Следующие материалы будут с таким же высоким уровнем детализации. Продолжаем создавать крупнейшую русскоязычную базу знаний по UX/UI в e-commerce.

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

Благодарность

Благодарю за дополнение статьи идеями хорошего исполнения и антипримерами. Вместе мы делаем контент еще лучше и полезнее.
Все статьи по e-commerce