Подписывайтесь на мой новый канал: делюсь интересными фичами из мира e-commerce 3 раза в неделю

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

Лучшие практики UX/UI в мобильном e-commerce

117

гайдлайнов

Продолжаем проектировать идеальный клиентский путь в мобильном e-commerce и прокачивать насмотренность.

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

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

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

Станислав Хрусталёв

Автор hardclient.com

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

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

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

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

12 гайдлайнов

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

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

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

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

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

Пример • Ozon

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Ozon

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

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

Пример • Rendez-Vous

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

34 гайдлайна

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Zenden

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

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

Пример • Ozon

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Etsy

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Без caps lock

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

Антипример • Rendez-Vous

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

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

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

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

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

Пример • Onliner

Инфографика

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

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

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

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

Пример • Auto.ru

Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

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

5 гайдлайнов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6 гайдлайнов

Добавлены

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

9 гайдлайнов

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

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

Пример • Ozon

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Sokolov

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

19 гайдлайнов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Ecomarket

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

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

Пример • Leroy Merlin

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

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

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

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

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

Пример • Leroy Merlin

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Caps lock обоснован

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Ozon

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

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

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

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

18 гайдлайнов

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

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

Пример • Ozon

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

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

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

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

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

Пример • Ozon

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

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

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

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

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

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

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

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

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

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

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

Пример • Ozon

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

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

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

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

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

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

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

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

Пример • Leroy Merlin

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

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

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

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

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

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

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

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

Пример • Leroy Merlin

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

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

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

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

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

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

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

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

Пример • AliExpress

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

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

Пример • Lamoda

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

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

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

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

7 гайдлайнов

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

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

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

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

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

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

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

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

Пример • AliExpress

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

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

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

Длина edge swipe

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

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

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

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

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

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

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

Пример • Lamoda

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

7 идей

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Ozon

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

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

Пример • Leroy Merlin

To be continued...

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

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

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

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

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

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

Надежда Литвинец, UX/UI дизайнер, EPAM

Все статьи по e-commerce