РАБОТА С ИЗБРАННЫМ

ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
115
ГАЙДЛАЙНОВ
Избранное – одна из базовых функций интернет-магазина. Но качество ее исполнения может очень сильно различаться. Как сделать работу с избранным удобной для клиента? Какие тонкости стоит учесть? Разберем на 115 примерах.

Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
Партнер Experience.Partners
Автор сайта HardClient.com
СТРУКТУРА СТАТЬИ
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
Это один из 18 больших чек-листов по eCommerce. Остальные – в моем Telegram.

1. ДОБАВЛЕНИЕ В ИЗБРАННОЕ

Доступно в листинге

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

Доступно на странице товара

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

Доступно в корзине

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

Иконка привычна

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

Иконка визуально вторична

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

Иконка заметна в карточке

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

Иконка контрастна к фону

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

Расположение привычно

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

Появляется при наведении

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

Счетчик избранного

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

Реакция на наведение

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

Курсор при наведении

При наведении курсора на кнопку курсор должен становиться кликабельным. Это позволит подчеркнуть, что на кнопку можно нажать. А в примере все наоборот:

Анимация при наведении

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

Закольцованная анимация

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

Контекстная подсказка

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

Текст подсказки краткий

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

Текст подсказки корректный

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

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

При клике иконка должна изменять внешний вид. Чаще всего это осуществляется за счет добавления заливки и изменения ее цвета на более яркий.

Изменение хорошо заметно

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

Анимация при клике

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

Реакция моментальна

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

Добавление без усложнений

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

Активный маркер виден

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

Повторный клик – удаление

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

Вид после первого клика

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

Рядом с кнопкой покупки

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

Целевое действие в тексте

Если кнопка добавления в избранное содержит текст, лучше если он будет отталкиваться от целевого действия (глагола), чем просто от существительного.
hardclient

Выбор (?) параметров

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

Без авторизации

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

Авторизация на новой странице?!

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

Пояснение для неавторизованных

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

Единообразие кнопки

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

Любимый продукт

Концепцию избранного можно вывести на совершенно другой уровень и объединить его с программой лояльности. Вкусвилл уже давно и успешно применяет эти механики.
hardclient
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

2. ПОДТВЕРЖДЕНИЕ

Реализовано

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

Ненавязчиво

Разместите сообщение с подтверждением ближе к краю страницы. Так, чтобы оно было заметно, но при этом не бросалось в глаза и не перекрывало собой основной контент.
hardclient

Пропадает само

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

Не пропадает слишком быстро

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

Кнопка перехода

Размещение кнопки избранного в сообщении с подтверждением позволит упростить переход на страницу с сохраненными товарами.
hardclient

3. КНОПКА ПЕРЕХОДА В ИЗБРАННОЕ

Доступна в шапке

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

Доступна в таббаре

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

Видна всегда

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

В хорошем качестве

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

Иконка общепринятая

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

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

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

Не выглядит неактивной

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

Реакция на наведение

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

Призыв к авторизации

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

Контекстная подсказка

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

Подсказка пропадает

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

Неактивна, если в избранном пусто

Если в избранном нет товаров, зачем вести клиента на пустую страницу? Сделайте кнопку некликабельной, а при наведении скажите, что товаров в избранном пока что нет.
hardclient

Количество товаров

Если в избранном есть товары, добавьте к иконке избранного бейдж. Это сделает ее более информативной.
hardclient

Бейдж хорошо заметен

Функция бейджа – привлекать внимание клиента. Если бейдж выполнен в формате plain text, эффект от него будет ограниченным.
hardclient

Расположение бейджа

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

Без нулевого бейджа

Отображение числа товаров имеет смысл тогда, когда они в избранном есть. Показывать в явной форме, что товаров в избранном 0, может быть излишне.
hardclient

Иконка – это бейдж

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

Реакция на добавление

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

Бейдж анимирован

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

Корректность счетчика

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

Реакция моментальна

При добавлении товара в избранное реакция элемента должна быть моментальной, без каких-либо задержек со стороны системы.

Обновление на всех страницах

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

4. PLACEHOLDER В ИЗБРАННОМ

Предусмотрен

Предусмотрите на странице избранного placeholder, если клиент еще не добавил товары. Клиент не должен сталкиваться просто с пустым списком или таблицей.
hardclient

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

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

Визуализация

Добавьте в placeholder визуализацию. Не ограничивайтесь при проектировании страницы избранного лишь plain text'ом.
hardclient
hardclient

Изображение в хорошем качестве

Если вы используете визуализацию в placeholder'е, загрузите изображение в приемлемом качестве, чтобы оно не размывалось и не пикселило.
hardclient

Призыв к действию

Вместо того, чтобы просто констатировать факт отсутствия товаров, разместите в placeholder'е призыв к тому, чтобы их добавить.
hardclient

Призыв к авторизации

Если товаров нет в избранном, одна из причин может быть в том, что клиент просто не авторизован. Об этом можно заметить в placeholder'е, разместив ссылку на вход.
hardclient

Кнопка перехода

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

Возврат к предыдущей странице

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

Целевая страница в той же вкладке

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