I am ready for a long road flight for work with a week- or months-long projects.
ПРОЦЕСС СРАВНЕНИЯ ТОВАРОВ
ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
156
ГАЙДЛАЙНОВ
Функция сравнения товаров облегчает выбор клиентам интернет-магазинов во многих сферах. Но опыт ее использования сильно различается от компании к компании, и даже крупнейшие игроки допускают ошибки. Что стоит учесть, чтобы спроектировать идеальный интерфейс сравнения? 156 гайдлайнов в этой статье.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
СТРУКТУРА СТАТЬИ
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
29 детальных чек-листов по e-commerce доступны в моем Telegram.
1. РАЗМЕЩЕНИЕ ТОЧЕК ВХОДА
Доступно в листинге
Возможность добавления в сравнение прямо из карточек товаров в листинге позволит упростить процесс выбора и сделает его более удобным.
Доступно на странице товара
Если клиент заинтересовался товаром, просматривая его страницу, и решил сравнить его с другими моделями, дайте ему возможность сделать это в 1 клик.
Доступно в блоке характеристик
Когда клиент сравнивает товар, скорее всего, он интересуется характеристиками. Поэтому предложить добавить товар в сравнение можно именно при просмотре этого блока.
Доступно в блоке допродажи
Если клиент заинтересовался одним из аналогов товара в cross-sell подборке, дайте ему возможность быстро добавить его в сравнение без перехода на отдельную страницу.
Подборка сравниваемых товаров
Товары, с которыми пользователи наиболее часто сравнивают данный, можно вывести в качестве отдельной полноценной подборки в рамках его страницы.
Массовое добавление в сравнение
Если вы используете подборку аналогов на странице товара, ее можно снабдить функцией массового добавления этих товаров в сравнение.
2. КНОПКА ДОБАВЛЕНИЯ В СРАВНЕНИЕ
Иконка понятна
Выполните иконку кнопки добавления в сравнение в одном из часто используемых форматов. Не заставляйте клиента гадать, какую функцию она выполняет.
Сопровождается текстом
В отличие от избранного и корзины, кнопка добавления в сравнение может быть менее привычной для клиента. Поэтому иконку можно дополнить текстом.
Целевое действие в тексте
Если кнопка добавления в сравнение содержит текст, лучше если он будет отталкиваться от целевого действия (глагола), чем просто от существительного.
Контекстная подсказка
Если кнопка содержит только иконку и клиенту не понятна ее функция, при наведении курсора на кнопку можно отображать соответствующую контекстную подсказку.
Без дублирующих подсказок
Если в кнопке добавления в сравнение уже содержится текст с целевым действием, дублировать его в контекстной подсказке при наведении не стоит.
Кнопка заметна в листинге
Если workflow покупки товара через сравнение – один из ключевых, сделайте кнопку сравнения хорошо заметной в рамках карточки товара в листинге.
Кнопка не выглядит неактивной
Не делайте кнопку добавления в сравнение слишком выцветшей, чтобы у клиента не сложилось ложное впечатление о том, что она неактивна.
Кнопка заметна на странице товара
Разместите кнопку добавления в сравнение в рамках первого экрана на странице товара, рядом с другими кнопками действия и сделайте ее визуально заметной.
Кнопка не мельчит
Сделайте размер кнопки достаточным для того, чтобы ее легко было заметить даже клиентам, испытывающим проблемы со зрением.
Иконка контрастна к фону
Спроектируйте расположение и цвет кнопки так, чтобы она была заметна в карточке на любом фоне. В этом примере кнопка относительно плохо заметна:
Иконка в хорошем качестве
Загрузите иконку кнопки сравнения в хорошем качестве, чтобы она не пикселила слишком заметно. В идеале используйте векторное изображение.
Без прерывистого подчеркивания
Не используйте в кнопке добавления в сравнение прерывистое подчеркивание, т.к. этот паттерн чаще всего используется для отображения контекстной подсказки.
Появляется при наведении
Чтобы визуально разгрузить интерфейс листинга, кнопку добавления в сравнение можно отображать только при наведении курсора на карточку товара.
Реакция на наведение
Сделайте кнопку добавления в сравнение интерактивной, чтобы она реагировала на наведение курсора и меняла свой вид, давая визуальную обратную связь.
Курсор при наведении
При наведении курсора на кнопку добавления в сравнение курсор должен становиться кликабельным. Это дополнительно подчеркнет факт того, что на нее можно нажать.
Анимация при наведении
Изменение вида иконки можно снабдить микро-анимацией, делающей взаимодействие с ней более вовлекающим и приятным глазу.
Реакция на клик
При клике кнопка должна изменять свой внешний вид, давая тем самым клиенту понять, что товар добавлен в сравнение.
Изменение хорошо заметно
Если кнопка при клике изменяется незначительно, это может побудить клиента нажать на нее повторно по ошибке, тем самым убирая товар из сравнения.
Анимация при клике
Изменение элемента при клике с помощью ненавязчивой анимации позволит сделать взаимодействие более вовлекающим и приятным глазу.
Реакция моментальна
Исключите какие-либо задержки в реакции интерфейса при добавлении в сравнение. При клике по кнопке товар должен добавляться в сравнение моментально.
Добавление лишь 1 раз
Убедитесь, что товар можно добавить в сравнение лишь один раз, после чего можно перейти к сравнению либо удалить его. Такого, как в примере, допускать не стоит:
Без блокировки интерфейса
Если для добавления в сравнение требуется время, не используйте какие-либо экраны, блокирующие весь интерфейс. Это может стать раздражающим фактором.
Добавление всех вариантов
Если в листинге для одной и той же модели, но разных цветов используются разные карточки, при добавлении в сравнение одной из них можно помечать и остальные.
Реакция всех связанных объектов
Если в интерфейсе страницы размещены несколько кнопок добавления в сравнение, убедитесь, что при клике по одной из них корректно обновляются и остальные.
Активный маркер виден
Если товар добавлен в сравнение, отображайте соответствующий маркер по умолчанию, чтобы облегчить клиенту понимание того, какие товары в сравнении, а какие – нет.
Повторный клик – удаление
Удаление товара из сравнения – достаточно распространенный паттерн при работе с карточками товаров в рамках листинга.
Повторный клик – переход?
Если кнопку перехода в сравнение можно вынести в подтверждение, как считаете, стоит ли замещать этим действием удаление товара из сравнения при повторном клике?
Без усложнения отмены действия
Не используйте нестандартные паттерны отмены добавления в сравнение. Это затруднит восприятие и снизит шансы на успешное выполнение задачи.
Вид после первого клика
Если при повторном клике происходит удаление товара или переход к сравнению, вид кнопки и текст подсказки после первого клика должны соответственно меняться.
Изменение вида понятно
Убедитесь, что изменение вида кнопки при клике не будет вызывать вопросов. В примере кнопка превращается в счетчик, и функция, как минимум в начале, может быть не понятна.
Без ограничений по числу товаров
Не ограничивайте число товаров, которые клиент может добавить в сравнение. Не заставляйте клиента сравнивать товары в несколько этапов.
Без авторизации
Дайте клиенту возможность сравнивать товары без авторизации. Иначе он просто не воспользуется функцией, а процесс выбора будет затруднен.
Призыв к авторизации
При этом, при первом добавлении к сравнению клиенту можно ненавязчиво пояснить, что, если он не авторизован, товары не будут храниться в сравнении вечно.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
3. ПОДТВЕРЖДЕНИЕ
Реализовано
Реализуйте визуальное подтверждение при добавлении товара в сравнение. Это позволит сделать реакцию системы на действия клиента более явной.
Ненавязчиво
Сообщение с подтверждением должно быть заметным, но при этом не должно бросаться в глаза и перекрывать собой основной контент.
Кнопка перехода к сравнению
Разместив кнопку перехода к сравнению в подтверждении, вы упростите клиенту жизнь: ему не придется искать ее где-либо еще в рамках интерфейса.
Призыв к действию выделен
Выделите призыв к действию – дайте клиенту понять, что это кнопка. Не смешивайте его визуально с текстом подтверждения.
Переход без лишних действий
Реализуйте переход к сравнению без лишних действий. В этом примере вместо клика по основной кнопке требуется переместить курсор в popup и нажать на кнопку в нем.
Содержит число товаров
Добавьте в подтверждение число товаров в сравнении, если индикатор сравнения с бейджем не виден на странице по умолчанию.
Содержит миниатюры
В подтверждении можно также отображать миниатюры товаров. Смотреться может симпатично, но главное – не перегрузить за счет такой механики интерфейс.
Содержит категорию сравнения
При добавлении товара в подтверждении можно подсвечивать категорию сравнения. Это также повысит информативность подтверждения.
Не в мобильной версии
На мобильных область экрана сильно ограничена, и всплывающее окно может вызвать негативную реакцию. Поэтому такую механику в этом случае лучше не использовать.
Автоматическое скрытие
Настройте автоматическое скрытие сообщения с подтверждением, чтобы клиенту не приходилось самостоятельно его закрывать.
Не скрывается слишком быстро
Спроектируйте тайминг скрытия сообщения с подтверждением так, чтобы клиент успел прочитать текст или совершить целевое действие.
4. КНОПКА ПЕРЕХОДА К СРАВНЕНИЮ
Доступна в шапке
Зафиксируйте кнопку сравнения в шапке при прокрутке, чтобы клиенту легче было перейти к сравнению вне зависимости от уровня прокрутки страницы.
Доступна в таббаре
Если workflow сравнения товаров – один из ключевых, в мобильной версии можно разместить кнопку сравнения в качестве полноценного элемента таббара.
Видна всегда
Отображайте иконку сравнения даже если в нем еще нет товаров. Это позволит клиенту с самого начала понять, что такой функционал есть на вашем сайте.
В хорошем качестве
Загрузите иконку сравнения в хорошем качестве, чтобы она не пикселила и не размывалась. В идеале используйте для иконок векторные изображения.
Иконка единообразна
Сделайте кнопку перехода к сравнению товаров похожей на кнопку добавления, чтобы не создавать дополнительную когнитивную нагрузку на пользователя.
Содержит текст
Не всегда можно сделать кнопку понятной для всех клиентов. Поэтому иконку сравнения можно дополнить текстом, чтобы она не вызывала вопросов.
Контекстная подсказка
Если текст в кнопку не добавлен, в реакцию на наведение можно включить контекстную подсказку. Она облегчит восприятие и понимание клиентом функции кнопки.
Реакция на наведение
Сделайте кнопку перехода к сравнению в шапке интерактивной, чтобы она реагировала на наведение курсора и давала визуальную обратную связь.
Предпросмотр при наведении
При наведении курсора на кнопку можно отображать предпросмотр со списком товаров и возможностью быстро удалить ненужные, если они были добавлены по ошибке.
Подсказка пропадает
Контекстная подсказка должна пропадать, когда клиент уводит курсор с кнопки перехода к сравнению. Логично? Да. У всех реализовано? Нет.
Неактивна, если в сравнении пусто
Если в сравнении нет товаров, зачем вести клиента на пустую страницу? Поэтому кнопку можно сделать неактивной.
Если добавлен лишь один товар
Если в сравнение добавлен всего 1 товар, смысла переходить на страницу в этот момент нет. Поэтому рядом с кнопкой можно подсказывать: «добавьте, как минимум, еще 1 товар».
Пояснение, если неактивна
Однако если вы решили сделать кнопку неактивной, если товаров в сравнении нет, снабдите ее подсказкой при наведении, которая поясняла бы, почему она неактивна.
Количество товаров
Если в сравнении есть товары, добавьте к иконке в шапке бейдж с их количеством. Это позволит привлечь внимание клиента и сделает ее более информативной.
Бейдж хорошо заметен
Сделайте бейдж с количеством товаров достаточно ярким и хорошо заметным, чтобы он привлекал внимание клиента и способствовал переходу к сравнению.
Корректное число в бейдже
Убедитесь, что бейдж корректно отображает число уникальных товаров, которые клиент добавил в сравнение. Вот пример того, когда кто-то что-то не учел:
Без нулевого бейджа
Отображайте бейдж с числом товаров только тогда, когда они есть в сравнении. Показывать в явной форме, что товаров нет – излишне.
Реакция на добавление
При добавлении товара в сравнение кнопка в шапке должна визуально меняться, играя роль подтверждения действия.
Бейдж анимирован
Анимированное обновление бейджа при изменении количества товаров позволит сделать элемент перехода на страницу сравнения более заметным.
Реакция моментальна
При добавлении товара в сравнение реакция элемента должна быть моментальной, без каких-либо задержек со стороны системы.
Обновление на всех страницах
Если у клиента открыто несколько вкладок со страницами магазина, и он добавляет товар в сравнение на одной из них, кнопка должна обновляться на всех остальных.
Интеграция с избранным
Сравнение по факту может быть частью избранного, и их можно хорошо интегрировать, например, предложив перейти к сравнению напрямую из избранного:
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
5. PLACEHOLDER СТРАНИЦЫ СРАВНЕНИЯ
Предусмотрен
Реализуйте на странице сравнения placeholder, чтобы клиент не сталкивался с пустым интерфейсом, если еще не добавил ни одного товара.
Визуализация
Не ограничивайтесь при проектировании страницы сравнения товаров лишь plain text'ом. Добавьте в placeholder релевантное изображение.
Изображение в хорошем качестве
Если вы используете визуализацию в placeholder'е, загрузите изображение в приемлемом качестве, чтобы оно не размывалось и не пикселило.
Призыв к действию
Вместо того, чтобы просто констатировать факт отсутствия товаров в сравнении, разместите в placeholder'е призыв к тому, чтобы их туда добавить.
Призыв к авторизации
Если клиент не авторизован, есть вероятность, что он мог добавлять товары ранее в авторизованном состоянии. Поэтому ему можно предложить войти в свой профиль.
Пояснение корректно
Если вы призываете добавлять товары в сравнение, просите добавить как минимум 2 товара, а не 1. Если будет добавлен всего 1 товар, сравнение не будет иметь смысла.
Кнопка перехода
В рамках placeholder'а клиенту можно предоставить возможность быстро вернуться к выбору товаров с помощью кнопки перехода в каталог или к поиску.
Возврат к предыдущей странице
Вместо просто перехода в каталог клиента можно возвращать в тот листинг, с которым он работал до перехода к сравнению.
Целевая страница в той же вкладке
При клике по кнопке открывайте целевую страницу в той же вкладке. Пользы во вкладке с пустой страницей сравнения нет.
Подсказки по добавлению
В placeholder'е можно не просто призвать к добавлению товаров в сравнение, но и пояснить, как именно это можно сделать.
Товарные рекомендации?
Как считаете, стоит ли подборки рекомендуемых товаров размещать на странице сравнения? Какие плюсы и минусы у такого решения? Напишите в комментариях.
6. ТИПЫ СРАВНЕНИЯ ТОВАРОВ
По характеристикам
Базовый момент, присутствующий практически у всех участников рынка – сравнение товаров по ключевым характеристикам.
По рейтингу и количеству оценок
Помимо характеристик, некоторые игроки включают в сравнение информацию о рейтинге и количестве оценок. Это также важный фактор при принятии решения.
По детальным оценкам
Если вы собираете с клиентов не только общую оценку по товару, но и более детальные оценки по ключевым характеристикам, их также можно включить в сравнение.
По композитному индексу
Некоторые игроки идут еще дальше и по каждой категории товаров на основе ключевых характеристик рассчитывают индекс, который также можно учесть при сравнении.
По фото товаров
В некоторых случаях также встречается функция, позволяющая сравнивать размеры товаров по фотографиям. Там, где габариты имеют значение, может быть полезно.
По наличию акций
Если вы активно применяете различные акции, их наличие и состав также могут стать дополнительным фактором при сравнении товаров.
7. СРАВНЕНИЕ ПО КАТЕГОРИЯМ
Несколько категорий сравнения
Если вы продаете разнотипные товары, реализуйте возможность добавлять в сравнение товары сразу из нескольких категорий.
В рамках единого интерфейса
Если клиент сравнивает товары нескольких категорий, реализуйте для сравнения единый интерфейс, чтобы сделать опыт выбора товаров более бесшовным.
Без сравнения разных категорий
Нет смысла сравнивать в рамках единой схемы характеристик совершенно разные товары. Это может ввести клиента в заблуждение и затруднит выбор.
Разбиение по вкладкам
Если клиент добавил товары из нескольких категорий, разбейте интерфейс сравнения на соответствующие вкладки, чтобы можно было сравнивать подобное с подобным.
Прокрутка области с вкладками
Если клиент сравнивает товары из множества категорий и вкладки не вписываются экран, прокручиваться должна вся область с вкладками, а не вся страница.
Без выбора через dropdown
По возможности не используйте для категорий раскрывающийся список. Это не только снизит их видимость, но и увеличит количество кликов, необходимое для перехода.
Highlight числа товаров
Подсветив число товаров, находящихся в сравнении в каждой из категорий, вы сделаете соответствующие вкладки более информативными.
Число товаров корректно
Убедитесь, что добавление и удаление товаров в каждой из категорий сравнения корректно отражается в индикаторе числа товаров в соответствующей вкладке.
Highlight активной вкладки
Хорошо выделите вкладку, отвечающую за активную категорию сравнения на фоне остальных, чтобы облегчить навигацию для клиента.
Переключение моментально
Если клиент решил переключиться к сравнению товаров в другой категории, это должно происходить моментально, без каких-либо задержек.
Без полной перезагрузки страницы
При переключении между категориями перезагружайте лишь блок с самими товарами. В полной перезагрузке страницы нет смысла.
Динамические хлебные крошки
При переключении категории сравнения хлебные крошки могут динамически меняться и содержать быстрые ссылки к той категории товаров, которая выбрана в данный момент.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
8. ПРОКРУТКА СПИСКА ТОВАРОВ
Прокрутка доступна
Базовый момент: спроектируйте интерфейс сравнения так, чтобы он поддерживал прокрутку, если товары не помещаются в рамках одного экрана.
Количество видимых товаров
Спроектируйте страницу так, чтобы на ней помещалось как минимум 3-4 товара. Иначе это может сильно затруднить процесс сравнения нескольких вариантов.
Используется вся полезная площадь
Используйте всю полезную площадь страницы. Большие пустые пространства и области под характеристики могут создавать необходимость прокрутки.
Последний товар обрезается
Если товары не вписываются в экран, спроектируйте верстку так, чтобы последний видимый товар обрезался и выцветал, подсвечивая наличие прокрутки.
Прокрутка с помощью кнопок
Базовая прокрутка должна осуществляться с помощью элементов интерфейса. Если кнопок прокрутки нет, это может вызвать проблемы у большой части клиентов.
Кнопки хорошо заметны
Сделайте кнопки хорошо заметными, чтобы подсветить факт того, что не все товары видны на экране и интерфейс подразумевает прокрутку.
Кнопки не перекрывают карточки
Кнопки прокрутки не должны перекрывать собой карточки товаров. Иначе есть риск, что на часть кнопок в карточках клиент нажать просто не сможет.
Кнопки фиксированы в шапке
Зафиксируйте кнопки горизонтальной прокрутки при вертикальном скролле, чтобы переключиться между товарами можно было в любой момент.
Видимость кнопок
При достижении первой и последней позиций соответствующие кнопки прокрутки должны исчезать. Иначе их наличие может ввести клиента в заблуждение.
Прокрутка свайпом на мобильных
Если вы реализовали функцию сравнения в мобильной версии, реализуйте поддержку горизонтальной прокрутки списка товаров с помощью жестов (swipe).
Прокрутка свайпом на ПК
Помимо прокрутки кнопками, реализуйте также и прокрутку с помощью смахивания влево или вправо на ПК: это очень удобный и набирающий популярность паттерн.
Помимо кнопок и свайпа, для клиентов, активно использующих клавиатуру, на ПК также можно реализовать прокрутку с помощью клавиш «влево» и «вправо».
Прокрутка клавишами ← и →
Если горизонтальный скроллбар – единственный метод прокрутки, это не только неудобно. Его еще и сложно заметить в рамках интерфейса сравнения.
Прокрутка не через скроллбар
Page control
Добавив элемент page control в интерфейс сравнения товаров, вы можете дополнительно подсветить наличие прокрутки и облегчить навигацию.
Прокрутка плавная
Резкой и моментальной прокрутке предпочтите плавную и анимированную. Так сам факт прокрутки будет лучше заметен, да и выглядеть это будет более приятно.
Прокрутка не закольцована
Избегайте закольцованной горизонтальной прокрутки списка товаров, т.к. есть риск, что клиент по ошибке воспримет список товаров, как более длинный.
Фиксация характеристик
Фиксируйте названия характеристик при прокрутке товаров, чтобы клиенту в любой момент было понятно, значения какой характеристики он просматривает.
Выравнивание характеристик
Подавляющее большинство выравнивает названия характеристик по левому краю, но встречаются и исключения. Как вам такое исполнение? Напишите в комментариях.
Фиксация товаров
Если клиенту понравился товар и он хочет сравнить его со всеми остальными в списке, упростите ему задачу, позволив зафиксировать этот товар при горизонтальном скролле.
Ранняя подгрузка данных
Подгружайте данные, включая фото товаров, заранее, чтобы клиент не ожидал их загрузки уже после того, как прокрутил список.
Перемещение товаров
Если клиент хочет сравнить товары, но они в разных частях списка, упростить процесс сравнения поможет функция перемещения товаров. Например, с помощью drag'n'drop:
9. КАРТОЧКИ ТОВАРОВ
Добавлены в сравнение
Карточки товаров должны быть добавлены и должны содержать в себе ключевую информацию: фото, наименование и цену товара.
Добавление в корзину
Если клиент выбрал товар и решил его купить, у него должна быть возможность добавить его из интерфейса сравнения в корзину в 1 клик.
Добавление в избранное
Если клиент заинтересовался товаром из сравнения, но не решил покупать его в моменте, дайте ему возможность добавить товар в избранное с помощью соответствующей кнопки.
Кликабельность
Если клиент во время сравнения решил ознакомиться с подробной информацией о товаре, карточки должны быть кликабельными и вести на страницу с описанием товара.
Страница товара в новой вкладке?
Как считаете, должна ли страница товара открываться в новой или той же самой вкладке браузера? Какие плюсы и минусы у этих вариантов? Напишите в комментариях.
Привычный вид
Унифицируйте элементы карточек в листинге и интерфейсе сравнения. Любые визуальные изменения могут создать ненужную когнитивную нагрузку.
Фиксация карточек
Фиксируйте карточки товаров при вертикальной прокрутке так, чтобы клиент при любом уровне скролла понимал, к чему относится то или иное значение характеристики.
Фиксация ключевых кнопок
Зафиксируйте кнопки добавления в корзину и избранное, как и карточки, чтобы клиент мог совершить целевое действие без дополнительных усилий при любом уровне прокрутки.
Плавная трансформация карточек
Если при скролле вы фиксируете в шапке мини-версии карточек товаров, по возможности сделайте переход к ним и обратно более плавным, чтобы это не резало клиенту глаз.
Высота карточек товаров
Карточки товаров не должны быть слишком высокими, а отступы сверху должны быть минимальными. Иначе мы рискуем серьезно сократить ключевую область сравнения.
Видимость карточек
Убедитесь, что карточки товаров при прокрутке списка характеристик видны полностью и не перекрываются какими-либо другими элементами.
Корректная верстка
Карточки товаров, как и прочие элементы интерфейса должны быть корректно сверстаны и располагаться на корректных слоях в рамках интерфейса. Вот такого лучше избегать:
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
10. СРАВНЕНИЕ ХАРАКТЕРИСТИК
Все vs. только различающиеся
Функция отображения как всех характеристик, так и только тех, по которым товары различаются, позволяет сократить время, затрачиваемое на сравнение.
Highlight параметров с различиями
При отображении полного списка характеристик можно отдельно подсвечивать те, по которым товары различаются. Это дополнительно облегчит восприятие.
Разбиение по группам
Разбив характеристики по ключевым группам, вы облегчаете клиенту поиск и сокращаете время, затрачиваемое на выбор товара.
Скрытие/раскрытие групп
Функция скрытия и раскрытия групп позволяет массово скрыть нерелевантные характеристики и быстрее найти то, что нужно.
Выделение текущей строки
Строку, на которой находится курсор, можно дополнительно выделить, чтобы облегчить клиенту сравнение значений по характеристике.
Разный цвет строк
Кроме того, ненавязчивое выделение строк через одну цветом также позволяет быстрее визуально сравнивать параметры и облегчает процесс выбора товара.
Выделение строк понятно
Если вы как-то специально выделяете строки, помимо 2 вышеописанных пунктов, лучше пояснить, что это означает. Иначе это лишь вызовет вопросы на стороне клиента.
Highlight экстремумов
Минимальные и максимальные значения по параметрам можно специально подсвечивать, тем самым еще сильнее упрощая задачу для клиента.
Контекстные подсказки
Не все характеристики могут быть понятны клиенту. Поэтому желательно снабдить их подсказками, поясняющими суть. Это облегчит процесс сравнения.
Подсказки открываются
Базовый момент: если вы используете подсказки, они должны корректно открываться либо по клику, либо при наведении на их иконку.
Текст подсказок не пустой
Либо отображайте подсказку с корректным текстом, который дает клиенту ценность, либо вообще не отображайте ее. Вот таких ситуаций быть не должно:
Значения выровнены
Базовый момент: выровняйте значения параметров по горизонтали, чтобы их легче было сравнивать. Значения не должны «скакать» от товара к товару.
Без отсутствующих значений
Работайте над улучшением качества данных и сокращайте долю отсутствующих значений по товарам. Если данных по параметру по части товаров нет, это затрудняет сравнение.
Значения характеристик понятны
Убедитесь, что значения характеристик предельно понятны и не вызывают каких-либо вопросов на стороне клиента.
Shortlist характеристик
Клиенту также можно предложить добавить ключевые характеристики в shortlist. Это позволит избавиться от лишнего визуального шума и упростит процесс выбора.
Визуализация характеристик
Визуализация характеристик позволит привлечь внимание клиента и поддерживать его вовлеченность в процессе сравнения товаров.
11. УДАЛЕНИЕ ИЗ СРАВНЕНИЯ
Товар можно удалить
Базовый момент: у клиента должна быть возможность удалить товар со страницы сравнения, со страницы с его описанием и из листинга.
Удаление моментально
Если клиент решил удалить товар из сравнения, система должна реагировать моментально, без каких-либо задержек.
Без перезагрузки страницы
Не перезагружайте страницу при удалении товара из сравнения. Иначе можно вызвать раздражение у клиента, особенно если он хочет удалить несколько товаров.
Быстрая очистка всего сравнения
Если товары в сравнении больше не актуальны, предоставьте клиенту возможность очистить весь список в 1 клик.
Быстрая очистка категории
Если для клиента стали неактуальны товары из конкретной категории, хорошо, если у него также будет возможность сделать это в 1 клик. Например, в виде крестика во вкладке:
Удаление происходит корректно
И напоследок: если мы удаляем товары и очищаем категории сравнения, они же должны удаляться? Должны. У всех это работает корректно? Нет. Даже у крупных игроков:
TO BE CONTINUED...
Итак, в этой статье мы разобрали процесс сравнения товаров. Как видим, не все так просто, как кажется на первый взгляд, а причины успехов и фэйлов, как всегда, кроются в деталях.
Следующие статьи будут с таким же уровнем детализации. Продолжаем создавать крупнейшую открытую русскоязычную базу лучших практик UX/UI в eCommerce.
Не забудьте подписаться на канал в Telegram и поделиться этим постом с друзьями и коллегами. Будем на связи.
Все статьи по e-commerce