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 и нажать на кнопку в нем.
Содержит число товаров
Добавьте в подтверждение число товаров в сравнении, если индикатор сравнения с бейджем не виден на странице по умолчанию.
Содержит миниатюры
В подтверждении можно также отображать миниатюры товаров. Смотреться может симпатично, но главное – не перегрузить за счет такой механики интерфейс.
Содержит категорию сравнения
При добавлении товара в подтверждении можно подсвечивать категорию сравнения. Это также повысит информативность подтверждения.
Не в мобильной версии
На мобильных область экрана сильно ограничена, и всплывающее окно может вызвать негативную реакцию. Поэтому такую механику в этом случае лучше не использовать.
Автоматическое скрытие
Настройте автоматическое скрытие сообщения с подтверждением, чтобы клиенту не приходилось самостоятельно его закрывать.
Не скрывается слишком быстро
Спроектируйте тайминг скрытия сообщения с подтверждением так, чтобы клиент успел прочитать текст или совершить целевое действие.