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

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

Лучшие практики UX/UI в мобильном e-commerce

220 гайдлайнов

Избранное в e-commerce приложениях делает опыт пользователя удобнее и повышает шансы на покупку товаров в будущем, влияя тем самым на LTV.

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

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

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

Станислав Хрусталёв

Автор hardclient.com

Структура статьи

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

Empty state избранного
Кнопка добавления в избранное
Кнопка перехода в раздел
Добавление в избранное
Просмотр товаров в избранном
Работа со списками
Побуждение к покупке
От избранного – к корзине
Удаление из избранного

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

59 гайдлайнов

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

Empty state реализован

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

Пример • Буквоед

Без чрезмерного минимализма

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

Пример • Lichi

Контент центрирован

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

Пример • Holodilnik

Экран не перегружен

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

Пример • iHerb

Без использования шаблонов

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

Пример • Benetton, Ecco, Baon и прочие

Таббар доступен

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

Пример • AliExpress

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

Констатирует факт отсутствия товаров

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

Пример • 12 Storeez

Содержит призыв к действию

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

Пример • Lime

Отталкивается от позитива

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

Пример • Broniboy

Управляет ожиданиями по контенту

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

Пример • 12Storeez

Без явного сожаления

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

Пример • Askona

Empty state – начало пути

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

Пример • 12 Storeez

Полноценные vs. устаревшие emoji

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

Пример • Kari

Содержит пояснение

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

Пример • Cozy Home

Пояснение визуально вторично

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

Пример • Золотой

Текст легко читается

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

Пример • Flor2U

Пояснение сопровождается иконками

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

Пример • AllTime

Пояснение сопровождается анимацией

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

Пример • SHEIN

Highlight удобства использования

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

Пример • ASOS

Пояснение подсвечивает ценность

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

Пример • Rendez-Vous

Highlight точек добавления в избранное?

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

Пример • Sela

Пояснение однозначно

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

Пример • Kolesa.kz

Пояснение соответствует ToV приложения

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

Пример • Street Beat

Нестандартные формулировки

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

Пример • Яндекс.Маркет

Эксплуатация fomo?

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

Пример • Lamoda

Текст не содержит ошибок

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

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

Текст локализован корректно

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

Пример • MANGO

Размер текста vs. экрана

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

Пример • Цех85

Иллюстрация

Добавлена

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

Пример • Kazan Express

Релевантна деятельности сервиса

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

Пример • Kolesa.kz

Релевантна контексту избранного

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

Пример • Духи.рф

Анимирована

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

Пример • DNS

Подсвечивает интерфейс

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

Пример • Акушерство

Текст как иллюстрация

Иногда ключевой посыл выполняют не в формате plain text, а в виде нестандартного начертания. Выглядит интересно.

Пример • Достаевский

Легко читается

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

Пример • FlowWow

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

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

Пример • Kuchenland

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

Добавлена на экран

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

Пример • Spardostavka

Удобно расположена

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

Пример • Love Republic

Часть композиции

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

Пример • 12Storeez

Большого размера

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

Пример • Впрок

Текст – целевое действие

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

Пример • Fitness Formula

Нестандартный текст

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

Пример • Яндекс.Маркет

Переход в каталог

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

Пример • Hoff

Переход в разделы каталога

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

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

Переход к поиску

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

Пример • Gipfel

Переход на главный экран

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

Пример • SOKOLOV

Переход к акциям

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

Пример • Улыбка Радуги

Переход к авторизации

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

Пример • FarFetch

Переход к заказам

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

Пример • Комус

Действия приближены к контексту

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

Пример • belle you

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

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

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

31 гайдлайн

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

В полных карточках товаров

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

Пример • Rendez-Vous

В листинге товаров

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

Пример • Henderson

В списках сравнения

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

Пример • Ситилинк

В корзине

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

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

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

Карточки листинга: в верхней правой части

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

Пример • No One

Карточки листинга: не в левой части

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

Пример • igooods

Карточки листинга: гармонично вписывается в карточку

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

Пример • Порядок

Полные карточки: под фото

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

Пример • Cozy Home

Полные карточки: не вверху экрана

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

Пример • AliExpress

Полные карточки: фиксация

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

Пример • Rendez-Vous

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

Часто в карточках товаров в корзине кнопку добавления в избранное делают видимой по умолчанию.

Пример • Uzum Market

Корзина: боковое действие

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

Пример • РИВ ГОШ

Не виде бокового действия в листинге

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

Пример • Ярче Плюс

Не вплотную к другим кнопкам

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

Пример • Lalafo

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

В виде сердечка

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

Пример • Street Beat

В виде закладки

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

Пример • 12 Storeez

Не в виде звезды

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

Пример • Триал-Спорт

Вид не вызывает вопросов

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

Пример • Lichi

Видна по умолчанию

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

Пример • Эльдорадо

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

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

Пример • Poison Drop

Контрастна относительно фона

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

Пример • Love Republic

Иконка на подложке

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

Пример • FlowWow

Подложка полупрозрачная

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

Пример • Комус

Использование тени

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

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

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

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

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

Не слишком мелкая

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

Пример • Пятерочка

Кликабельная область

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

Пример • РИВ ГОШ

Текст в листинге

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

Пример • МегаМаркет

Текст в полных карточках товаров

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

Пример • MANGO

Текст в корзине

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

Пример • Wildberries

Highlight числа лайков

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

Пример • OSKELLY

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

29 гайдлайнов

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

Таббар

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

Пример • Ekonika

Профиль

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

Пример • Ozon

Каталог

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

Пример • Магнит

Главный экран

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

Пример • OSKELLY

Доступна без скролла экрана

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

Пример • Самокат

Корзина

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

Пример • iHerb

Интерфейс сравнения

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

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

Быстрые действия

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

Пример • AliExpress

Без дублирования в рамках экрана

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

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

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

Иконка добавлена

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

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

Иконка релевантна

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

Пример • Леонардо

Иконка соответствует кнопке добавления

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

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

Иконка консистентна по дизайну

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

Пример • ЦУМ

Содержит подпись

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

Пример • Сантехника-Онлайн

Подпись интуитивно понятна

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

Пример • СберМаркет

Контрастна по отношению к фону

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

Пример • Omoloko

Иконка и подпись – единое целое

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

Пример • Askona

Без индикации отсутствия товаров

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

Пример • OBI

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

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

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

Пример • Adamas

Содержит метку

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

Пример • Farfetch

Содержит число товаров

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

Пример • lgCITY

Бейдж не перекрывает иконку

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

Пример • befree

Цвет бейджа vs. иконки

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

Пример • befree

Контрастность бейджа

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

Пример • belle you

Расположение бейджа, если кнопка в таббаре

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

Пример • befree

Расположение бейджа, если кнопка в профиле

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

Пример • Технопарк

Бейдж vs. plain text

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

Пример • OBI

Бейдж vs. текст другого формата

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

Пример • Подружка

Не только изменение цвета текста

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

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

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

46 гайдлайнов

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

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

Пример • belle you

Без ограничений по числу товаров

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

Пример • OLX.kz

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

Товары

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

Пример • Перекрёсток

Бренды

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

Пример • ЦУМ

Образы

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

Пример • OSKELLY

Полезный контент

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

Пример • Самокат

Продавцы и магазины

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

Пример • FlowWow

Поиск

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

Пример • Циан

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

Изменение иконки в кнопке добавления

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

Пример • Зоозавр

Изменение текста кнопки

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

Пример • Эконика

Реакция на нажатие

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

Пример • Rendez-Vous

Изменение без задержек

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

Пример • Fix Price

Нужно подождать? Добавляем индикатор

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

Пример • FlowWow

Индикатор рядом с кнопкой

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

Пример • Иль де Боте

Изменениие анимировано

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

Пример • Лента-Онлайн

Анимация не прерывистая

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

Пример • belle you

Обновление счетчиков

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

Пример • Rendez-Vous

Реакция кнопки vs. контейнера

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

Пример • Светофорнадом

Тактильный фидбэк

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

Пример • FlowWow

Без реакции сторонних элементов

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

Пример • Hoff

Кнопка в активном состоянии заметна

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

Пример • 12 Storeez

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

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

Пример • No One

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

Реализовано

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

Пример • O'STIN

Подтверждение vs. фоновый контент

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

Пример • OBI

Размещение блока

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

Пример • Сима-Ленд

Цвет блока контрастный

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

Пример • Дром База

Динамический цвет подтверждения

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

Пример • Бристоль

Читаемость текста подтверждения

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

Пример • TanukiFamily

Иллюстрирации к тексту

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

Пример • Rendez-Vous

Информация о товаре

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

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

Без чрезмерной анимации

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

Пример • OLX.kz

Без конкуренции подтверждений

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

Пример • OLX.kz

Без быстрого добавления в список

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

Пример • FlowWow

Без запроса выбора списка

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

Пример • О'КЕЙ

Без уточнения: избранное vs. список

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

Пример • КуулКлевер

Предложение выбрать список

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

Пример • Ozon

Выбор списка в карточке товара

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

Пример • Джум

Предложение перейти в избранное?

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

Пример • Детский мир

Активна вся область подтверждения

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

Пример • Ozon

Подтверждение исчезает само

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

Пример • Gulliver Market

Скорость скрытия подтверждения

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

Пример • Rendez-Vous

Возможность скрытия подтверждения

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

Пример • Adamas

Необходимость выбора параметров?

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

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

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

Изменение кнопки перехода в избранное

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

Пример • BUNGLY

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

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

Пример • lgCITY

Изменение кнопки перехода vs. анимация

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

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

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

21 гайдлайн

Избранное – отдельный экран

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

Пример • Утконос

Избранное – часть каталога

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

Пример • Кофемания

Без рекламы

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

Пример • AliExpress

Фиксация хедера

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

Пример • Henderson

Доступность таббара

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

Пример • AliExpress

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

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

Пример • Ecco

Highlight общего числа товаров

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

Пример • Cozy Home

Highlight общей стоимости?

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

Пример • DNS

Категоризация используется

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

Пример • Мой Ашан

Горизонтальная коллекция категорий

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

Пример • igooods

Вертикальный список категорий?

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

Пример • Fix Price

Highlight числа товаров по категориям

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

Пример • Мой Ашан

Разделение на избранное и сравнение

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

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

В наличии vs. не в наличии

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

Пример • ЦУМ

Фильтрация избранного

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

Пример • Впрок

Быстрые фильтры

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

Пример • SimpleWine

Наличие сортировки

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

Пример • Wildberries

Сортировка по умолчанию

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

Пример • Впрок

Поиск по избранному

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

Пример • METRO

Изменение лэйаута

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

Пример • Stockmann

Вечная сессия

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

Пример • DNS

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

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

11 гайдлайнов

Функция используется

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

Пример • igooods

Подсказки по названиям списков

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

Пример • Ozon

Оформление списков

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

Пример • igooods

Редактирование и удаление

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

Пример • FlowWow

Highlight количества товаров

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

Пример • ВкусВилл

Highlight самих товаров

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

Пример • FlowWow

Быстрое добавление в корзину

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

Пример • igooods

Добавление в несколько списков

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

Пример • Ozon

Шеринг списка

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

Пример • Джум

Совместная работа

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

Пример • Ozon

Все товары vs. списки

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

Пример • Stockmann

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

10 гайдлайнов

Подборка похожих товаров

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

Пример • Lamoda

Уведомления о снижении цен

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

Пример • Sokolov

Призыв включить уведомления

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

Пример • Sokolov

Highlight снижения цены

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

Пример • ВсеИнструменты

Рекомендации в избранном

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

Пример • Lamoda

Upsell и cross-sell на уровне товара

Допродажа и предложение ознакомиться с похожими товарами также внедряют и на уровне карточек товаров в избранном. Их можно спрятать в меню.

Пример • Ozon

Шеринг избранного

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

Пример • FlowWow

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

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

Пример • ВкусВилл

Любимые категории

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

Пример • Магнит

Прогрессивная активация категорий

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

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

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

5 гайдлайнов

Добавление одного товара

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

Пример • befree

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

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

Пример • Globus

Быстрая покупка набора

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

Пример • igooods

Добавление нескольких товаров

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

Пример • METRO

Без полного перемещения в корзину

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

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

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

8 гайдлайнов

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

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

Пример • Столплит

Без изменений в верстке

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

Пример • Юла

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

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

Пример • Rendez-Vous

Без дополнительных действий

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

Пример • КуулКлевер

Возможность вернуть в подтверждении

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

Пример • Технопарк

Без нулевых бейджей

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

Пример • belle you

Быстрая очистка избранного

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

Пример • Ekonika

Кнопка быстрой очистки однозначна

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

Пример • Spardostavka

To be continued...

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

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

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

Все статьи по e-commerce