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

Проектируем избранное в e-com приложении

Лучшие практики UX/UI в мобильном e-commerce
220 гайдлайнов
Избранное в e-commerce приложениях делает опыт пользователя удобнее и повышает шансы на покупку товаров в будущем, влияя тем самым на LTV.

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

Как спроектировать функционал избранного, близкий к идеальному и не наступить на грабли, на которые уже наступили другие? Узнаем в этой статье, основанной на анализе ~200 приложений.

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

Автор hardclient.com
Структура статьи
Чтобы облегчить восприятие, статью я разбил на смысловые блоки в соответствии с этапами клиентского пути и функциональными элементами:

Empty state избранного

59 гайдлайнов

Общие моменты

Empty state реализован
Если пользователь еще не добавил в избранное ни одного товара, дайте ему знать об этом. Не оставляйте его один-на-один с пустым экраном.

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

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

Пример Holodilnik
hardclient
Экран не перегружен
И наоборот, не стоит перегружать экран элементами, которые будут нефункциональны в текущем контексте. Если товаров нет, зачем показывать мне сортировку и фильтры?

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

Пример Benetton, Ecco, Baon и прочие
hardclient
Таббар доступен
Если в избранном ничего нет, не стоит скрывать таббар: он поможет упростить навигацию и быстрее переключиться к нужным разделам.

Пример AliExpress
hardclient

Текстовый компонент

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

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

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

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

Пример 12Storeez
hardclient
Без явного сожаления
То, что в избранном еще ничего нет, не должно вызывать сожаления. Это не какая-то невыполненная задача. Печальные emoji излишни.

Пример Askona
hardclient
Empty state – начало пути
Вместо этого в заголовке можно намекнуть, что пустое состояние – это временно, и это лишь начало пути.

Пример 12 Storeez
hardclient
Полноценные vs. устаревшие emoji
Если уж вы и решили использовать печальные смайлики, позаботьтесь о том, чтобы добавить современные emoji, а не символику из прошлого века.

Пример Kari
hardclient
Содержит пояснение
Чтобы целевое действие было более понятно, можно не просто призвать клиента добавить товары в избранное, но и пояснить, как это сделать.

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

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

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

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

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

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

Пример Rendez-Vous
hardclient
Highlight точек добавления в избранное?
Иногда в пояснении в явной форме рассказывают, откуда можно добавить товар в избранное. Как вам такое исполнение? Хорошо или избыточно? Напишите в комментах.

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

Пример Kolesa.kz
hardclient
Пояснение соответствует ToV приложения
Empty state должен соответствовать тональности всего приложения: если вы общаетесь с клиентом дружелюбно и на "ты", избранное не должно стать исключением.

Пример Street Beat
hardclient
Нестандартные формулировки
Иногда компании отходят от общепринятых формулировок и используют нестандартную подачу, которая может зацепить внимание пользователя.

Пример Яндекс.Маркет
hardclient
Эксплуатация fomo?
Иногда текст фокусируется не на ценности, которую клиент получит, а на том, что он упустит (fear of missing-out, fomo). Как вам такая формулировка? Обсудим в комментах?

Пример Lamoda
hardclient
Текст не содержит ошибок
Казалось бы, настолько базовый момент. Но на просторах 200 приложений набрался добрый десяток кейсов, когда допускаются пунктуационные ошибки.

Пример Пятёрочка
hardclient
Текст локализован корректно
При локализации приложения "прогоняйте" тексты через носителей языка. Возможно, то, что в примере, сделано специально. Но может и звучать, как некорректный перевод.

Пример MANGO
hardclient
Размер текста vs. экрана
Спроектируйте текст с пояснением так, чтобы он вписывался в экран устройства, на котором его читают, не выходил за границы и не прилипал к ним.

Пример Цех85
hardclient

Иллюстрация

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

Пример Kazan Express
hardclient
Релевантна деятельности сервиса
Лучше сделать иллюстрацию не аморфной и слишком общей, а привязать ее к деятельности компании, привлекая тем самым дополнительное внимание пользователя.

Пример Kolesa.kz
hardclient
Релевантна контексту избранного
Также стоит привязать иллюстрацию к контексту, в котором находится пользователь: если он сейчас в избранном, зачем показывать ему что-то, связанное с рейтингом?

Пример Духи.рф
hardclient
Анимирована
Чтобы еще больше оживить экран, вместо статичной можно реализовать анимированную иллюстрацию. Такой формат позволит дополнительно вовлечь пользователя.

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

Пример Акушерство
hardclient
Текст как иллюстрация
Иногда ключевой посыл выполняют не в формате plain text, а в виде нестандартного начертания. Выглядит интересно.

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

Пример FlowWow
hardclient
В хорошем качестве
Базовый момент: иллюстрация в empty state избранного, как и впрочем все остальные визуальные элементы, не должна пикселить и размываться.

Пример Kuchenland
hardclient

Кнопка действия

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

Пример Spardostavka
hardclient
Удобно расположена
Расположите кнопку в центре или чуть ниже центральной части экрана. Не заставляйте пользователя далеко тянуться пальцем – это неудобно.

Пример Love Republic
hardclient
Часть композиции
Лучше визуально не отрывать кнопку от других элементов интерфейса в empty state. Она должна быть частью единой композиции.

Пример 12Storeez
hardclient
Большого размера
Так как нажатие на кнопку в текущем контексте – основное целевое действие, сделайте ее достаточно большой, чтобы упростить переход в нужный раздел.

Пример Впрок
hardclient
Текст – целевое действие
Чаще всего текст кнопки отталкивается от целевого действия – перехода в один из разделов. Какой именно? Обсудим через один пункт.

Пример Fitness Formula
hardclient
Нестандартный текст
Однако иногда в кнопках встречаются и нестандартные варианты текста, которые могут привлечь внимание и заинтересовать пользователя.

Пример Яндекс.Маркет
hardclient
Переход в каталог
Наиболее частое действие, которое предлагают совершить клиенту в empty state избранного – переход в каталог товаров.

Пример Hoff
hardclient
Переход в разделы каталога
Вариация предыдущего пункта: если разделов верхнего уровня в каталоге немного, их можно разместить прямо в empty state избранного: это сократит путь клиента на 1 тап.

Пример Бетховен
hardclient
Переход к поиску
В качестве альтернативы перехода в каталог пользователю можно предложить найти товары с помощью поиска. Чаще это реализовано в виде не кнопки, а строки.

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

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

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

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

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

Пример belle you
hardclient

Подборки товаров

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

Пример befree
hardclient
Новинки
Если у компании выходят новые коллекции, empty state избранного становится еще одной точкой контакта, которая знакомит клиента с новинками.

Пример ADAMAS
hardclient
Рекомендации
В empty state нередко встречаются и персонализированные подборки товаров, основанные на истории действий пользователя в приложении.

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

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

Пример Сантехника-Онлайн
hardclient
История просмотров
Если клиент до этого просматривал товары, есть шанс, что какие-то из них зацепили его внимание. Почему бы не отложить их на будущее?

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

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

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

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

Кнопка добавления в избранное

31 гайдлайн

Где можно встретить кнопку

В полных карточках товаров
Наиболее часто кнопку добавления в избранное можно встретить в полных карточках товаров: при ознакомлении клиент может сохранить товар на будущее.

Пример Rendez-Vous
hardclient
В листинге товаров
Кнопки в карточках листинга позволяют сохранить товар без необходимости перехода в полную карточку, если он импульсно привлек внимание клиента.

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

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

Пример Бетховен
hardclient

Расположение кнопки

Карточки листинга: в верхней правой части
Чаще всего кнопку избранного можно встретить в верхней правой части карточек в листинге. Это наиболее привычный вариант её расположения.

Пример No One
hardclient
Карточки листинга: не в левой части
Вариант размещения кнопки в левой части карточек будет уступать размещению в правой: тянуться пальцем придется дольше, а это менее удобно.

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

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

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

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

Пример Rendez-Vous
hardclient
Корзина: часть карточек
Часто в карточках товаров в корзине кнопку добавления в избранное делают видимой по умолчанию.

Пример Uzum Market
hardclient
Корзина: боковое действие
Однако, чтобы разгрузить интерфейс, очень часто ее вместе с кнопкой удаления товара прячут в качестве боковых действий, которые давно стали привычны для большинства.

Пример РИВ ГОШ
hardclient
Не виде бокового действия в листинге
В отличие от корзины, для листинга боковые действия несвойственны. От практики, указанной в примере, лучше воздержаться.

Пример Ярче Плюс
hardclient
Не вплотную к другим кнопкам
Желательно разместить кнопку не вплотную к другим кликабельным элементам. Иначе риск ошибочного нажатия повышается.

Пример Lalafo
hardclient

Внешний вид кнопки

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

Пример Street Beat
hardclient
В виде закладки
Формат закладки (bookmark) для кнопки избранного также передает суть функции. Но встречается такой вариант реже, чем формат сердечка.

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

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

Пример Lichi
hardclient
Видна по умолчанию
Чаще всего кнопка избранного видна по умолчанию. Но в некоторых кейсах ее прячут за кнопкой "ещё". Как считаете, хорошо это или плохо? Поделитесь мыслями в комментах.

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

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

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

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

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

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

Пример Каталог КБ
hardclient
Не слишком мелкая
Не стоит делать кнопку добавления в избранное слишком мелкой. Это может вызвать проблемы с заметностью и нажатием на нее.

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

Пример РИВ ГОШ
hardclient
Текст в листинге
В случае если используется общепринятая иконка, дополнять ее текстовым пояснением в листинге будет излишне.

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

Пример MANGO
hardclient
Текст в корзине
В корзине имеет смысл дополнить кнопку избранного текстом, так как он позволит передать контекст: не просто добавить в избранное, а отложить из корзины на будущее.

Пример Wildberries
hardclient
Highlight числа лайков
В некоторых кейсах встречается совмещение механики избранного и лайков: кнопка избранного подсвечивает, скольким пользователям понравился товар.

Пример OSKELLY
hardclient

Кнопка перехода в раздел

29 гайдлайнов

Где можно встретить кнопку

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

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

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

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

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

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

Пример iHerb
hardclient
Интерфейс сравнения
Часто функции избранного и сравнения используются вместе. Поэтому интерфейс сравнения товаров может содержать и точку входа в избранное

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

Пример AliExpress
hardclient
Без дублирования в рамках экрана
Дублировать кнопку перехода в избранное в рамках одного экрана – даже без скролла – излишне. Если у вас другое мнение на этот счет, напишите, пожалуйста, в комментах.

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

Вид кнопки перехода в пустое избранное

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

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

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

Пример Золотое Яблоко
hardclient
Иконка консистентна по дизайну
Сделайте иконку в кнопке избранного консистентной по дизайну с иконками остальных разделов: она не должна выбиваться из общего ряда.

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

Пример Сантехника-Онлайн
hardclient
Подпись интуитивно понятна
Чаще всего в подписи можно увидеть именно "Избранное": этот вариант точно не вызовет вопросов. Но такие варианты, как "любимые" или "вишлист" также допустимы.

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

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

Пример Askona
hardclient
Без индикации отсутствия товаров
Индикаторы количества товаров в разделе чаще всего используются тогда, когда они там есть. В явной форме подсвечивать, что товаров в избранном нет, излишне.

Пример OBI
hardclient

Вид кнопки перехода в избранное с товарами

Кнопка видоизменяется
Базовый момент: если товары уже добавлены в избранное, кнопка должна визуально об этом сообщать и не должна оставаться такой же, как и при empty state.

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

Пример Farfetch
hardclient
Содержит число товаров
В качестве альтернативы небольшой метке в кнопку можно добавить бейдж с числом товаров в разделе. Это позволит повысить информативность и привлечет больше внимания.

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

Пример befree
hardclient
Цвет бейджа vs. иконки
Бейдж лучше выполнить в цвете, отличном от цвета иконки. Это позволит избежать проблем с восприятием и повысит его заметность.

Пример befree
hardclient
Контрастность бейджа
Желательно, чтобы бейдж не был более блеклым по отношению к фону, чем сама кнопка. В данном контексте его функция – все же привлечь внимание.

Пример belle you
hardclient
Расположение бейджа, если кнопка в таббаре
И небольшую метку, и бейдж лучше располагать в правой верхней части кнопки – это наиболее привычное их расположение.

Пример befree
hardclient
Расположение бейджа, если кнопка в профиле
Если переход в избранное вынесен в профиль, бейдж можно сделать больше и разместить после названия раздела, так как пространство позволяет.

Пример Технопарк
hardclient
Бейдж vs. plain text
Если к наличию товаров в разделе нужно привлечь внимание, бейдж справится с задачей лучше, чем просто отображение числа в том же шрифте, что и название раздела.

Пример OBI
hardclient
Бейдж vs. текст другого формата
Однако в некоторых случаях текст вполне может заменить собой бейдж и смотреться гармонично. Например, в виде визуально вторичной подписи.

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

Пример Каталог КБ
hardclient

Добавление в избранное

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

Пример belle you
hardclient
Без ограничений по числу товаров
Встречаются кейсы, когда клиента ограничивают в числе товаров, которые он может добавить в избранное. Кто знает, какой в этом глубинный смысл? Напишите в комментах.

Пример OLX.kz
hardclient

Что можно добавить в избранное

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

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

Пример ЦУМ
hardclient
Образы
Некоторые представители fashion retail позволяют сохранять не только отдельные товары, но и целые образы, по сути являющиеся подборками.

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

Пример Самокат
hardclient
Продавцы и магазины
Маркетплейсы могут реализовать возможность для клиента сохранить понравившийся магазин или селлера с интересными предложениями.

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

Пример Циан
hardclient

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

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

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

Пример Эконика
hardclient
Реакция на нажатие
Добавив реакцию кнопки не только на тап, но и на событие нажатия, когда палец только касается кнопки (touchDown), можно сделать интерфейс чуть более отзывчивым.

Пример Rendez-Vous
hardclient
Изменение без задержек
Реакция интерфейса на действия клиента должна быть моментальной: запрос к серверу лучше осуществлять в фоновом режиме без необходимости ожидания.

Пример Fix Price
hardclient
Нужно подождать? Добавляем индикатор
Если ожидания все же невозможно избежать, в интерфейс можно добавить индикатор, который подсвечивал бы, сколько еще осталось ждать.

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

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

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

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

Пример Rendez-Vous
hardclient
Реакция кнопки vs. контейнера
Иногда встречается реакция на нажатие, при которой изменяется не сама кнопка, а ее контейнер. Выглядит неидеально. Благо, что используется это в 1 случае из 100.

Пример Светофорнадом
hardclient
Тактильный фидбэк
Видоизменение кнопки при нажатии можно сопроводить ненавязчивой вибрацией устройства – тактильной обратной связью. Картинкой не передашь – попробуйте сами.

Пример FlowWow
hardclient
Без реакции сторонних элементов
Обновляться должны только элементы, связанные с избранным. Обновление прочих элементов интерфейса может стать сюрпризом (не сказать, что приятным).

Пример Hoff
hardclient
Кнопка в активном состоянии заметна
Как и в случае с неактивным состоянием, убедитесь, что кнопка в активном состоянии будет заметной на любом фоне: светлом, темном, пестром.

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

Пример No One
hardclient

Подтверждение добавления

Реализовано
Изменение состояния кнопки можно дополнить с помощью подтверждения в формате тоста. Это сделает реакцию интерфейса на действия пользователя более явной.

Пример O'STIN
hardclient
Подтверждение vs. фоновый контент
Тост с подтверждением лучше разместить ближе к краю области с листингом товаров, чтобы он слишком сильно не перекрывал контент.

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

Пример Сима-Ленд
hardclient
Цвет блока контрастный
Подтверждение не должно сливаться с остальным экраном, поэтому цвет его фона желательно сделать достаточно контрастным.

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

Пример Бристоль
hardclient
Читаемость текста подтверждения
Текст подтверждения должен быть выполнен в легко читаемом шрифте достаточного для комфортного чтения размера. Особенно если пространство позволяет.

Пример TanukiFamily
hardclient
Иллюстрирации к тексту
Иногда в подтверждение добавляют не только текст, но и релевантную иконку. И смотрится неплохо, и интерфейс не перегружает.

Пример Rendez-Vous
hardclient
Информация о товаре
Встречаются кейсы, когда в текст подтверждения добавляют информацию о только что добавленном товаре. Как вам? Излишне или неплохо? Напишите в комментах.

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

Пример OLX.kz
hardclient
Без конкуренции подтверждений
Подтверждение должно быть лишь одно. В примере их 2, и они конкурируют, перекрывая друг друга. А компания-то – далеко не последняя на рынке.

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

Пример FlowWow
hardclient
Без запроса выбора списка
Также не стоит при добавлении в избранное сталкивать клиента с жестким запросом на добавление в какой-либо из списков: это лишнее действие для пользователя.

Пример О'КЕЙ
hardclient
Без уточнения: избранное vs. список
Такая механика не особо отличается от предыдущей в плане числа действий со стороны клиента: каждый раз при добавлении ему приходится совершать минимум 2 действия.

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

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

Пример Джум
hardclient
Предложение перейти в избранное?
В отличие от добавления в корзину, призыв перейти в избранное после добавления товара – механика более спорная. Что думаете об этом? Напишите в комментах.

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

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

Пример Gulliver Market
hardclient
Скорость скрытия подтверждения
Задайте скорость скрытия подтверждения так, чтобы оно не висело слишком долго и не исчезало раньше, чем его успеют прочитать. 2-3 секунд будет достаточно.

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

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

Пример Спортмастер
hardclient

Реакция кнопки перехода в избранное

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

Пример BUNGLY
hardclient
Скорость изменения кнопки перехода в избранное
Кнопка перехода в избранное должна реагировать на изменение состояния кнопки добавления моментально, без каких-либо задержек.

Пример lgCITY
hardclient
Изменение кнопки перехода vs. анимация
И наоборот, можно достичь обратной несогласованности, если кнопка в таббаре обновляется моментально, в то время как анимация кнопки добавления происходит медленно.

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

Просмотр товаров в избранном

21 гайдлайн
Избранное – отдельный экран
Чаще всего под избранное отводится полноценный экран: это наиболее привычный формат.

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

Пример Кофемания
hardclient
Без рекламы
Разумеется, рекламу при желании можно разместить на каждом экране. Но в избранном она все же не очень уместна.

Пример AliExpress
hardclient
Фиксация хедера
При просмотре избранного хедер с названием раздела желательно фиксировать, чтобы клиент всегда понимал, где он находится, даже если он отвлекся на какое-то время.

Пример Henderson
hardclient
Доступность таббара
Избранное – не последний этап пути клиента, с которого его никуда нельзя "выпускать". Поэтому таббар скрывать не стоит: не усложняйте клиенту возврат к другим разделам.

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

Пример Ecco
hardclient
Highlight общего числа товаров
Подсвечивая в заголовке избранного общее число товаров, вы делаете интерфейс более информативным. Особенно если товаров добавлено много.

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

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

Пример Мой Ашан
hardclient
Горизонтальная коллекция категорий
Чаще всего категории реализуют с помощью горизонтальной коллекции чипсов, которая не занимает много места и которую можно при необходимости прокрутить.

Пример igooods
hardclient
Вертикальный список категорий?
Реже встречаются кейсы, когда категории идут вертикальным списком. Есть риск, что такой список сам по себе начнет занимать много места, если товары разнообразные.

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

Пример Мой Ашан
hardclient
Разделение на избранное и сравнение
Так как часто избранное и сравнение идут рука об руку в процессе выбора товара, некоторые сервисы объединяют их в едином интерфейсе с возможностью переключения.

Пример М.Видео
hardclient
В наличии vs. не в наличии
Некоторые сервисы разделяют блок избранного по наличию товаров. Это облегчает навигацию и позволяет лучше управлять ожиданиями.

Пример ЦУМ
hardclient
Фильтрация избранного
Помимо разбиения на категории, для облегчения навигации также нередко используются фильтры по различным параметрам.

Пример Впрок
hardclient
Быстрые фильтры
Некоторые участники рынка выносят наиболее популярные фильтры в формате чипсов прямо на экран избранного, упрощая задачу фильтрации.

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

Пример Wildberries
hardclient
Сортировка по умолчанию
Чаще всего в избранном используется сортировка по дате добавления, по новизне и по популярности.

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

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

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

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

Работа со списками

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

Пример igooods
hardclient
Подсказки по названиям списков
Некоторые при создании списка подсказывают один из вариантов его названия. Для кого-то эта подсказка может стать идеей для нового списка.

Пример Ozon
hardclient
Оформление списков
Пользователю можно дать возможность не только задать название списка, но и, например, цвет или фото, чтобы легче было их различать.

Пример igooods
hardclient
Редактирование и удаление
У пользователя должна быть возможность отредактировать созданные списки и удалить, если они стали неактуальны.

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

Пример ВкусВилл
hardclient
Highlight самих товаров
Некоторые сервисы, помимо общего числа, подсвечивают один из товаров, содержащихся в списке. Выглядит неплохо и делает интерфейс живее.

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

Пример igooods
hardclient
Добавление в несколько списков
Дайте клиенту возможность добавлять товары в несколько списков. Такая механика может работать, например, при подборе разных образов в fashion retail.

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

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

Пример Ozon
hardclient
Все товары vs. списки
Некоторые участники рынка дают пользователю возможность переключаться между общим пулом товаров в избранном и конкретными списками. Идея неплохая.

Пример Stockmann
hardclient

Побуждение к покупке

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

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

Пример Sokolov
hardclient
Призыв включить уведомления
Если предыдущая функция реализована, но пользователь еще не дал вам доступ к пушам, ему можно ненавязчиво предложить это сделать, подсветив ценность.

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

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

Пример Lamoda
hardclient
Upsell и cross-sell на уровне товара
Допродажа и предложение ознакомиться с похожими товарами также внедряют и на уровне карточек товаров в избранном. Их можно спрятать в меню.

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

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

Пример ВкусВилл
hardclient
Любимые категории
Иногда клиенту предлагают выбрать в качестве любимых целые категории товаров. При этом он получает не скидку, а бонусы, которые можно потратить на будущие покупки.

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

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

От избранного – к корзине

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

Пример befree
hardclient
Добавление всех товаров
В некоторых кейсах встречается функция добавления сразу всех товаров из избранного в корзину. Как считаете, когда эта функция будет полезна? Напишите в комментах?

Пример Globus
hardclient
Быстрая покупка набора
Покупка набора – более актуальная фича: понимая, что клиенты формируют наборы для регулярных покупок, сервисы позволяют добавлять их в корзину в 1 касание.

Пример igooods
hardclient
Добавление нескольких товаров
Быстрый выбор нескольких товаров с помощью чекбоксов чаще встречается в корзине, но и в избранном также может быть полезен.

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

Пример Пятёрочка
hardclient

Удаление из избранного

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

Пример Столплит
hardclient
Без изменений в верстке
Везде, кроме списка избранного, при нажатии на активное сердечко в карточке товара верстка должна сохраняться, и кнопка не должна перемещаться куда-либо.

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

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

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

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

Пример belle you
hardclient
Быстрая очистка избранного
Если клиент добавил в избранное много товаров, и они уже неактуальны, можно реализовать быструю очистку раздела. Главное – убедиться, что он не нажал на кнопку по ошибке.

Пример Ekonika
hardclient
Кнопка быстрой очистки однозначна
Однако, проектируя кнопку быстрой очистки, убедитесь, что она не введет клиента в заблуждение: в примере вместо иконки мусорной корзины красуется корзина с продуктами.

Пример Spardostavka
hardclient
To be continued...
Статью я постарался сделать максимально полной. Если вы прочитали ее и решите ознакомиться с избранным в каком-нибудь e-commerce приложении, для вас уже мало что будет в новинку.

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

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