Станислав Хрусталёв написал об избранном.
— Добавление в избранное должно быть доступно в списке товаров, корзине, на странице товара;
— Привычная иконка для избранного — сердечко или закладка. Привычное расположение — в правом верхнем углу карточки товара и рядом с кнопкой покупки на странице товара;
— Если надо разгрузить интерфейс, можно отображать её при наведении курсора. При этом маркер того, что товар в избранном, должен быть виден всегда;
— Рядом с иконкой можно показывать, сколько раз товар добавили в избранное, получится аналог счётчика лайков;
— Иконка удаления из избранного должна заметно отличаться от иконки добавления. Также должен меняться текст подсказки;
— Кнопка перехода в избранное должна быть в шапке, таббаре (на мобильных устройствах) и отображаться, даже если в избранном ничего нет. Если товары там есть, можно отображать бейдж с их количеством;
— Если пользователь не авторизован, можно предложить ему войти, так как у него могли быть товары в избранном. После авторизации можно пометить новые товары в избранном;
— Как плейсхолдер в пустом избранном можно также отображать лаконичное пояснение и призыв к действию, кнопки перехода в каталог, возврата назад;
— В избранном должны быть полноценные карточки товаров;
— Можно добавить разделение на категории, сортировку, возможность перенести всё в корзину, похожие товары;
— Дайте возможность очистить избранное в одно нажатие.
#favorites
— Добавление в избранное должно быть доступно в списке товаров, корзине, на странице товара;
— Привычная иконка для избранного — сердечко или закладка. Привычное расположение — в правом верхнем углу карточки товара и рядом с кнопкой покупки на странице товара;
— Если надо разгрузить интерфейс, можно отображать её при наведении курсора. При этом маркер того, что товар в избранном, должен быть виден всегда;
— Рядом с иконкой можно показывать, сколько раз товар добавили в избранное, получится аналог счётчика лайков;
— Иконка удаления из избранного должна заметно отличаться от иконки добавления. Также должен меняться текст подсказки;
— Кнопка перехода в избранное должна быть в шапке, таббаре (на мобильных устройствах) и отображаться, даже если в избранном ничего нет. Если товары там есть, можно отображать бейдж с их количеством;
— Если пользователь не авторизован, можно предложить ему войти, так как у него могли быть товары в избранном. После авторизации можно пометить новые товары в избранном;
— Как плейсхолдер в пустом избранном можно также отображать лаконичное пояснение и призыв к действию, кнопки перехода в каталог, возврата назад;
— В избранном должны быть полноценные карточки товаров;
— Можно добавить разделение на категории, сортировку, возможность перенести всё в корзину, похожие товары;
— Дайте возможность очистить избранное в одно нажатие.
#favorites
Hardclient
Проектируем работу с избранным в интернет-магазине: 117 гайдлайнов
Лучшие практики UX/UI в E-Commerce
Станислав Хрусталёв написал об избранном в мобильных приложениях интернет-магазинов.
— Если в нём ничего нет, не показывайте грустный смайлик. Добавление товаров — не задача, не сожалейте, что она не выполнена;
— Если объясняете, как добавлять товары в избранное, покажите конкретную иконку (обычно это сердечко или закладка). Иногда показывают анимацию с нажатием;
— Из пустого избранного чаще всего предлагают перейти в каталог (или в конкретные разделы, если их немного). Альтернативы: поиск, главный экран, скидки и акции, заказы (если есть у пользователя), связь с консультантом;
— В списке товаров кнопка добавления в избранное чаще всего в правом верхнем углу карточки. На экране товара — под фото, иногда её фиксируют в нижней части экрана рядом с кнопкой корзины;
— Переход в избранное — в таббаре. Если функций много, может стать частью профиля. Если ассортимент небольшой — частью каталога. Дополнительно его можно разместить в меню быстрых действий;
— Если в избранном не пусто, отображайте метку, как вариант — с количеством товаров;
— Добавление в избранное — доступно без входа в приложение;
— Иногда кроме товаров добавлять можно бренды, образы, полезный контент, магазины, параметры поиска;
— Нажатие на кнопку можно сопровождать лёгкой вибрацией устройства, а также подтверждать всплывающим сообщением (тостом);
— Если в избранном есть разные списки, не заставляйте сразу выбирать, куда именно добавить товар. Ozon ненавязчиво предлагает сделать это в тосте;
— В списке товаров в избранном лучше закрепить заголовок, чтобы пользователь понимал, что просматривает. Можно показать количество товаров;
— Интересные фильтры: в наличии и не в наличии (упрощает навигацию, помогает управлять ожиданиями), товары, на которые цена снизилась;
— Если товар закончился, можно сразу в карточке предложить посмотреть похожие;
— Многие предлагают разделение избранного на пользовательские списки. Полезна возможность добавить товар в несколько списков сразу;
— В избранном можно предложить разрешить пуши, чтобы узнать о снижении цены;
— После перемещения товара в корзину не удаляйте его из избранного автоматически;
— Не забудьте о возможности быстро очистить избранное.
#favorites
— Если в нём ничего нет, не показывайте грустный смайлик. Добавление товаров — не задача, не сожалейте, что она не выполнена;
— Если объясняете, как добавлять товары в избранное, покажите конкретную иконку (обычно это сердечко или закладка). Иногда показывают анимацию с нажатием;
— Из пустого избранного чаще всего предлагают перейти в каталог (или в конкретные разделы, если их немного). Альтернативы: поиск, главный экран, скидки и акции, заказы (если есть у пользователя), связь с консультантом;
— В списке товаров кнопка добавления в избранное чаще всего в правом верхнем углу карточки. На экране товара — под фото, иногда её фиксируют в нижней части экрана рядом с кнопкой корзины;
— Переход в избранное — в таббаре. Если функций много, может стать частью профиля. Если ассортимент небольшой — частью каталога. Дополнительно его можно разместить в меню быстрых действий;
— Если в избранном не пусто, отображайте метку, как вариант — с количеством товаров;
— Добавление в избранное — доступно без входа в приложение;
— Иногда кроме товаров добавлять можно бренды, образы, полезный контент, магазины, параметры поиска;
— Нажатие на кнопку можно сопровождать лёгкой вибрацией устройства, а также подтверждать всплывающим сообщением (тостом);
— Если в избранном есть разные списки, не заставляйте сразу выбирать, куда именно добавить товар. Ozon ненавязчиво предлагает сделать это в тосте;
— В списке товаров в избранном лучше закрепить заголовок, чтобы пользователь понимал, что просматривает. Можно показать количество товаров;
— Интересные фильтры: в наличии и не в наличии (упрощает навигацию, помогает управлять ожиданиями), товары, на которые цена снизилась;
— Если товар закончился, можно сразу в карточке предложить посмотреть похожие;
— Многие предлагают разделение избранного на пользовательские списки. Полезна возможность добавить товар в несколько списков сразу;
— В избранном можно предложить разрешить пуши, чтобы узнать о снижении цены;
— После перемещения товара в корзину не удаляйте его из избранного автоматически;
— Не забудьте о возможности быстро очистить избранное.
#favorites
Hardclient
Проектируем избранное в e-com приложении: 220 гайдлайнов с примерами
Лучшие практики UX/UI в мобильном e-commerce