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

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

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

Блоки в карточке товара
Названия и значения характеристик
Кликабельность характеристик
Единицы измерения
Категории характеристик
Описание товара
Переход к полным версиям контента
Закрытие полных версий блоков
Прочие интересные фичи

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Без caps lock

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

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

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

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

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

Инфографика

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавлены

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Caps lock обоснован

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Длина edge swipe

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

To be continued…

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

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

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

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