I am ready for a long road flight for work with a week- or months-long projects.
ХАРАКТЕРИСТИКИ И ОПИСАНИЕ НА СТРАНИЦЕ ТОВАРА
ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
101
ГАЙДЛАЙН
Характеристики и описание на странице товара в интернет-магазине помогают клиенту погрузиться в детали и узнать о нем больше. Казалось бы, простые элементы – что тут выдумывать? Но на практике есть очень много граблей, на которые не стоит наступать, а также интересных идей, применив которые, вы улучшите Customer Experience.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами по цеху.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами по цеху.
СТРУКТУРА СТАТЬИ
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
29 детальных чек-листов по e-commerce доступны в моем Telegram.
1. БАЗОВЫЕ МОМЕНТЫ ПО ХАРАКТЕРИСТИКАМ
Характеристики есть на странице
Особенно актуально для технических товаров: на странице нет блока с характеристиками – нет ответов на вопросы клиента – меньше шансов на покупку.
В качестве полноценного блока
В сферах, где они играют важную роль (техника, товары для дома и ремонта и т.д.), разместите характеристики в виде полноценного блока на странице.
В формате side bar
В некоторых случаях, когда фокус делается именно на визуальной составляющей, характеристики могут вместо блока на странице выноситься в боковую панель.
Highlight ключевых характеристик
Если блок с характеристиками массивный, вынесите на первый план только ключевые. Но с возможностью прокрутки до более детального контента.
Блок доступен в любой момент
Добавьте ссылки на все разделы в виде вкладок, зафиксированных при прокрутке, чтобы они были доступны на странице в 1 клик в любой момент.
В блоке есть контент
Если вы используете блок с характеристиками на страницах товаров, убедитесь, что по всем товарам есть контент, и не встречаются вот такие случаи:
Блок озаглавлен
Базовый момент: озаглавьте блок с характеристиками, чтобы в явной форме подсветить его специфику и упростить восприятие информации.
Блок не дублируется
При этом в размещении двух сильно сильно пересекающихся между собой блоков в рамках одной страницы смысла особого нет.
Блок вписывается по ширине
Блок должен быть виден полностью по ширине. Желательно с отступами. Базовый момент, но когда у анти-примера выручка 100+ млрд в РФ за 2021, грех не включить.
Без размытия фокуса
Наличие прочих блоков при просмотре основного блока характеристик может быть воспринято, как визуальный шум, и сместить фокус внимания клиента.
Наравне с фото товара
Но может быть и исключение: если характеристики подсвечивают визуальные особенности товара, их можно достаточно гармонично расположить рядом с его фото.
Не в виде фото товара
Хоть размещение характеристик на фото товара и низкозатратное решение, но не лучшее: считываться они могут гораздо хуже – особенно если качество фото невысокое.
Без перехода на новую страницу
Контент характеристик должен быть доступен сразу же на странице товара, чтобы клиенту не требовалось переходить на отдельную страницу.
2. КОНТЕНТ БЛОКА ХАРАКТЕРИСТИК
Ключевое – в начале
Как и в случае с многими другими элементами интерфейса, располагайте характеристики в порядке убывания важности, размещая ключевые в начале.
Только релевантные характеристики
Отображайте по товарам только релевантные и значимые характеристики. В противном случае они будут восприниматься, как шум, и будут лишь размывать фокус внимания.
Достаточно для принятия решения
В рамках клиентских исследований уточняйте, по каким критериям клиенты ищут товары и при необходимости добавляйте соответствующие характеристики на страницы.
Единообразны в рамках категории
Убедитесь, что по всем товарам в рамках категории есть единый список характеристик. Так клиенту будет легче их сравнивать.
Нет характеристик без значений
Базовый момент: если значения по характеристике не указаны, особого смысла добавлять ее в блок нет.
Без дублирования названий
Если по характеристике есть несколько значений, лучше вывести их списком с одним названием вместо того, чтобы дублировать название для каждого из значений.
Соответствие действительности
Возможное несоответствие характеристик действительности у многих клиентов, кроме вопросов и недоверия, ничего больше не вызовет.
Без ошибок в тексте
Контролируйте ошибки в тексте. В противном случае это станет «ложкой дегтя в бочке меда» и может создать негативное впечатление у клиента.
Без фактических ошибок
Настройте процессы контроля качества контента так, чтобы не допускать отличий в характеристиках товара на сайте и того, что получит клиент.
Без текста о потенциальных ошибках
Текст из разряда «Нашли ошибку? Напишите», хоть где-то и помогает, но в целом может создать впечатление, что компания сама не может контролировать качество данных.
3. ФОРМАТИРОВАНИЕ ХАРАКТЕРИСТИК
Применяется в блоке
Применяйте в характеристиках визуальное форматирование. Иначе они будут визуально непривлекательны и похожи на copy-paste из Microsoft Word. Как, например, тут:
Характеристики в 1 строку
Чтобы блок не приходилось прокручивать слишком долго, размещайте названия и значения в одну строку / в версии для ПК используйте несколько столбцов.
Цвет названий vs. цвет значений
Используйте различие в цветах названий и значений характеристик, чтобы клиенту было провести различие между ними, и информация легче воспринималась.
Связь названий и значений
Упростите клиенту сопоставление названий и значений характеристики в рамках строки: располагайте столбцы недалеко друг от друга или используйте соединительные линии.
Без чрезмерных разделителей
В отличии от линий связи, размещение разделителей между всеми характеристиками может перегрузить интерфейс и сделать его визуально менее привлекательным.
Без необоснованных переносов
Там, где окружающее пустое пространство позволяет это сделать, отображайте названия характеристик в одну строку, без переноса.
Строки не скомканы
Добавьте между характеристиками достаточное пространство по вертикали, чтобы интерфейс «дышал», и строки не выглядели скомканными.
Шрифт легкий для восприятия
Используйте шрифт, с чтением которого у клиента не возникнет проблем. Базовый момент? Базовый. Все придерживаются этого требования? Нет, не все.
Без пустых областей на мобильных
Если по характеристике много значений, на мобильных лучше отобразить их в 2 столбца, чтобы не допускать образования большого пустого пространства.
Значения выровнены
Сделайте выравнивание значений характеристик по левому или правому краю, чтобы они не сливались с названиями, и информация в рамках блока легче считывалась.
Выравнивание на мобильных
В мобильной версии сайта, если вы используете layout в 2 столбца, лучше выравнивать значения по левому краю – смотреться будет гораздо более аккуратно.
Каждое значение с новой строки
При этом, если по характеристике есть несколько значений, лучше разместить их списком, чтобы каждое шло с новой строки. Это облегчит восприятие информации.
Регистр унифицирован
Если значения характеристик отличаются по регистру, клиента за счет этого вы, конечно, не потеряете, но впечатление у него может сложиться не лучшее.
Единицы рядом со значениями
Размещайте единицы измерения рядом со значениями характеристик, чтобы клиенту легче было считать и воспринять информацию.
Единообразие единиц
Если у вас есть несколько характеристик по весу, размеру и т.д., используйте для них одни и те же единицы, чтобы не создавать когнитивную нагрузку на клиента.
Корректность единиц
Если вы используете единый состав характеристик, убедитесь, что они адекватны и релевантны для всех товаров. В противном случае можно получить вот это:
Без двоеточий
Если характеристики отображаются в 2 столбца и визуальная связь между названиями и значениями хорошо читается, в добавлении двоеточий нет особого смысла.
Применение иконок
Чтобы информацию легче было воспринять визуально, по ключевым характеристикам можно использовать релевантные иконки.
Инфографика
Также ключевые характеристики можно выделять на фоне общего блока с помощью инфографики, чтобы дополнительно привлечь внимание клиента.
Карточки на мобильных
В мобильной версии для ключевых характеристик можно применять механику карточек с горизонтальным свайпом: и уже стало привычным, и занимает меньше места.
Визуализация товара
По возможности снабжайте характеристики визуальными образами, чтобы облегчить восприятие информации и разбавить текстовый контент.
Без реакции на наведение/клик
Если характеристика не несет какой-либо функциональной нагрузки, она не должна реагировать на наведение и клик, чтобы не вводить клиента в заблуждение.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
4. ИСПОЛЬЗОВАНИЕ ПОДРАЗДЕЛОВ
Контент разбит на подразделы
Если характеристик много, вместо сплошного списка разбивайте блок на подразделы. Таким образом, клиенту легче будет сориентироваться и найти то, что он ищет.
Заголовки выделяются
Сделайте заголовки подразделов визуально более заметными за счет размера текста, жирности шрифта или разницы в цвете между заголовком и текстом.
Заголовки фиксируются в мобильной версии
Облегчите клиенту просмотр в мобильной версии, фиксируя заголовки при прокрутке и давая понять, к чему относятся те или иные характеристики.
Отступы и разделители
Добавьте между подразделами отступы или разделители, чтобы они выглядели более обособленными, и контент в них легче считывался.
Заголовок – часть подраздела
Спроектируйте отступы так, чтобы заголовок располагался относительно ближе к своему подразделу, чем к предыдущему, и визуально воспринимался, как его часть.
Несколько характеристик в разделе
Избегайте выделения характеристик в полноценные подразделы поодиночке: подразделы все же подразумевают содержание именно группы каких-либо значений.
Близкие по смыслу – рядом
Располагайте подразделы, близкие по смыслу, рядом, чтобы блок с характеристиками выглядел более взаимосвязанным и легким для восприятия.
5. КОНТЕКСТНЫЕ ПОДСКАЗКИ
Используются
Особенно в случае с технически сложными товарами клиенту не всегда может быть понятно, что означает характеристика. Поэтому ему в этом вопросе стоит помочь.
Иконки понятны
Не изобретайте колесо, где это не требуется: используйте наиболее распространенные иконки для подсказок (знак вопроса или символ i).
