Лента: прокачиваем карточки товаров
70+ идей для улучшения интерфейса
Лента – гигант российского ритейла, который активно развивается и не прекращает скупать торговые сети и e-com сервисы. Разумеется, у Ленты есть своё приложение, и я решил посмотреть, насколько оно конкурентно относительно рынка в плане UX/UI.
Сегодня я остановлюсь на карточках товаров и подсвечу 70+ моментов, которые можно в них улучшить. В части пунктов текст будет сопровождаться скриншотом из самой Ленты, в части – сразу же будет приправлен хорошим примером с рынка.
Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с коллегами, которым материал может быть полезен. А если кто захочет составить мне компанию и дополнить список моментов для улучшения, добро пожаловать в комменты.
Сегодня я остановлюсь на карточках товаров и подсвечу 70+ моментов, которые можно в них улучшить. В части пунктов текст будет сопровождаться скриншотом из самой Ленты, в части – сразу же будет приправлен хорошим примером с рынка.
Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с коллегами, которым материал может быть полезен. А если кто захочет составить мне компанию и дополнить список моментов для улучшения, добро пожаловать в комменты.
Структура статьи
Чтобы облегчить восприятие, все замечания и предложения в статье я разбил по функциональным блокам:
Слайдер с фото, видео и галерея
18 предложений
Placeholder фото – не его отсутствие
В качестве placeholder'а для фото, пока они загружаются, используется картинка с отсутствием фото. Это неправильно задает ожидания клиента.
Placeholder – фото из карточки листинга
Как альтернативу такому placeholder'у, можно выбрать фото, уже доступное в карточке в листинге, и улучшить качество при загрузке версии с более высоким разрешением.
Пример • Lamoda
Пример • Lamoda
Побуждение к прокрутке слайдера
Если пользователь только скачал приложение и в первый раз открыл карточку товара, ему можно подсветить, что слайдер прокручивается, слегка сделав это программно.
Пример • ВкусВилл
Пример • ВкусВилл
Размеры фото
По части товаров фото реализованы в небольшом размере и занимают лишь небольшую часть, отведенную под них в слайдере.
Такие особенности размера затрудняют восприятие, могут вызвать вопросы и заставляют клиента переходить в галерею для более детального просмотра, хотя этого можно избежать.
Такие особенности размера затрудняют восприятие, могут вызвать вопросы и заставляют клиента переходить в галерею для более детального просмотра, хотя этого можно избежать.
Увеличение через pinch
Сейчас увеличить фото товара в карточке нельзя. Для того, чтобы это сделать, необходимо отдельно нажимать на него и переходить в галерею, а уже там увеличивать.
Однако увеличение фото можно реализовать с помощью разведения пальцев (pinch) прямо из слайдера, тем самым сокращая количество требуемых действий.
Пример • Лавка
Однако увеличение фото можно реализовать с помощью разведения пальцев (pinch) прямо из слайдера, тем самым сокращая количество требуемых действий.
Пример • Лавка
Увеличение через скролл карточки
Интересный формат увеличения фото, который Ленте можно было бы позаимствовать на рынке – с помощью протягивания карточки вниз.
Пример • SUNLIGHT
Пример • SUNLIGHT
Консистентность контента
По схожим товарам – даже одного и того же бренда – можно встретить разные фото: где-то состав указан полностью, где-то – лишь его часть, где-то его вообще нет.
Отсутствие консистентности в контенте по однотипным товарам может ухудшить опыт и создать впечатление, что ответственные сотрудники делают свою работу не на 100%.
Отсутствие консистентности в контенте по однотипным товарам может ухудшить опыт и создать впечатление, что ответственные сотрудники делают свою работу не на 100%.
Реакция фото на касание
Сейчас фото в слайдере на касание никак не реагируют, хотя им можно было бы добавить реакцию вдавливания, сделав интерфейс более отзывчивым.
Пример • ЦИАН
Качество фото в галерее
По товарам нередко встречаются некачественные фото в низком разрешении. Если вы решили почитать контент на упаковки, придется напрячь глаза.
Зум двойным тапом в галерее
Быстро приблизить фото товара в галерее двойным касанием не получится, хотя это достаточно распространенный паттерн.
Пример • ЦУМ
Пример • ЦУМ
Обновление page control
При прокрутке слайдера вперед обновление page control происходит в конце анимации, при прокрутке назад – мгновенно. В чем такая неконсистентность, непонятно.
Пример • Спортмастер
Миниатюры в галерее
При просмотре фото товара в формате галереи вместо точек page control можно использовать миниатюры фото. Они могут сделать интерфейс более информативным.
Пример • Детский мир
Закрытие галереи через смахивание
Галерею можно закрыть, лишь нажав на кнопку в верхней части экрана. А это относительно неудобно. При этом закрыть её через смахивание вниз не получится.
Закрытие галереи через pinch
Также интересную практику Ленте можно подсмотреть в другой категории – fashion – у одного из участников которой галерею можно закрыть, сведя пальцы (pinch action).
Пример • Lamoda
Пример • Lamoda
Маркеры о наличии видео
Если по товару есть видео, и в карточках вы размещаете маркеры о их наличии, неплохо было бы сделать их кликабельными, чтобы при тапе по ним видео проигрывалось.
Дублирование маркеров о видео
Подсвечивать, что по товару есть видео, никто не запрещает. Но два раза подсвечивать этот факт в рамках одного экрана может быть излишне.
Видео как часть галереи
Видео – это часть медиаконтента по товару. Поэтому его также можно было бы продублировать и в галерее наравне с фотографиями.
Пример • Ozon
Пример • Ozon
Видео в page control слайдера
Причем если видео будет доступно в галерее, этот факт можно специально подсветить, заменив точку в page control на релевантную иконку.
Пример • Rendez-Vous
Пример • Rendez-Vous
Характеристики и описание
17 предложений
Выцветание текстов
Для текстов, которые обрезаются, можно добавить легкое выцветание снизу, дополнительно подчеркнуть, что видна лишь часть контента.
Пример • Магнит
Область раскрытия блоков
Чтобы раскрыть текстовый блок, нужно нажать на небольшой label, хотя тап по текстовому контенту – хороший индикатор того, что клиент хочет ознакомиться с ним полностью.
Анимация раскрытия и скрытия
Сейчас текстовые блоки раскрываются и скрываются мгновенно и прерывисто, хотя им можно было бы добавить быструю, но плавную и приятную глазу анимацию.
Пример • Lamoda
Haptic feedback при раскрытии блока
Раскрытие и скрытие блоков также можно сопровождать тактильной обратной связью – слабой вибрацией, которая сыграет роль дополнительного подтверждения действия.
Пример • Впрок
Пример • Впрок
Пищевая vs. энергетическая ценность
Хотя наиболее привычный формат – это разместить пищевую и энергетическую ценность рядом друг с другом, в Ленте они почему-то разбиты на 2 отдельных блока.
Визуализация КБЖУ
Пищевая ценность представлена в формате plain text и плохо считывается. Хотя её можно реализовать в более визуально привлекательном формате.
Пример • Food.ru
Пример • Food.ru
КБЖУ на порцию
Ценность указывается лишь в расчете на 100г, хотя для тех, кто следит за фигурой, было бы полезно ознакомиться и с тем, сколько выходит на порцию, без необходимости считать.
Пример • Лавка
Кликабельность характеристик
Часть характеристик можно сделать кликабельными так, чтобы они вели в листинг товаров с такими же значениями характеристик. Например, все йогурты со вкусом черники.
Такой функционал облегчает навигацию и позволяет быстрее искать нужные товары без необходимости возвращаться из карточки в листинг и менять значения фильтров.
Такой функционал облегчает навигацию и позволяет быстрее искать нужные товары без необходимости возвращаться из карточки в листинг и менять значения фильтров.
Срок годности
В карточках подсвечиваются условия хранения, но сколько товар можно хранить при таких условиях, не сообщают. Хотя эта информация далеко не менее важна, не так ли?
Пример • Магнит
Highlight аллергенов
Если у клиента на что-то аллергия, ему придется вчитываться в состав и отдельные характеристики товара: в явной и визуальной форме их наличие не подсвечивается.
Пример • Лавка
Пример • Лавка
Название товара у поставщика
Среди характеристик можно встретить полное название товара у поставщика. Какую ценность это несет для клиента? Если есть идеи, напишите в комментах.
Характеристика вкуса
Если у продукта есть один вкус, писать, что это именно первый из вкусов, не стоит: есть риск, что у клиента появятся ненужные вопросы или он подумает, что это какой-то баг.
Нумерация подходящих блюд
Если взглянуть на характеристики вин, можно заметить список блюд, причем после второго идет сразу тридцать первое. А можно огласить весь список, пожалуйста?🧐
Дублирование характеристик
По тем же самым винам наблюдается еще один интересный момент: после блока, посвященного блюдам, идет блок с гастрономией, практически дублирующий его. Зачем?
Единицы измерения
По части характеристик единицы измерения указываются в названии, по части – в значениях. Причина такой неконсистентности не совсем понятна.
Формат характеристик vs. описания
В характеристиках значения идут в шрифте черного цвета. Текст описания же выполнен в сером цвете и относительно хуже читается, особенно если яркость экрана низкая.
Копирование артикулов
Артикулы можно сделать кликабельными: так, чтобы при тапе по артикулу он копировался в буфер обмена и его легко было вставить в сообщение.
Пример • Ozon Fresh
Пример • Ozon Fresh
Рейтинг и отзывы
9 предложений
Placeholder рейтинга при открытии карточки
В при открытии карточки, пока контент ещё не загрузился, можно заметить информацию о том, что оценок нет. Хотя затем они магическим образом появляются.
Область для открытия списка (1/2)
В rating highlight под фото кликабельна лишь кнопка с отзывами, хотя при нажатии на рейтинг высоки шансы, что клиент хочет посмотреть детали.
Область для открытия списка (2/2)
Чтобы открыть список со всеми отзывами, нужно нажать на небольшой label «Все», хотя кликабельным можно было бы сделать весь заголовок блока.
Rating summary
Rating summary не предусмотрено: посмотреть, как распределяются оценки, нельзя. При этом многие конкуренты в этом плане более прозрачны.
Пример • Впрок
Сортировка отзывов
Сортировка отзывов предусмотрена лишь по свежести. Это усложняет жизнь тем, кто хочет, например, посмотреть самые полезные отзывы или уточнить, с чем был связан негатив.
Highlight количества отзывов
В кратком списке отзывов их количество не подсвечивается, и если вы пропустили его в rating highlight'е на первом экране, непонятно, насколько этот список будет глубоким.
Медиаконтент
Если по товарам есть только фото от компании, у клиента может возникнуть недоверие и опасение, что реальность будет отличаться от фотошопа.
Поэтому текстовые отзывы можно дополнить возможностью поделиться фото реальных товаров, которые уже были доставлены реальным клиентам.
Пример • Впрок
Поэтому текстовые отзывы можно дополнить возможностью поделиться фото реальных товаров, которые уже были доставлены реальным клиентам.
Пример • Впрок
Аватары клиентов в отзывах
В подавляющем числе отзывов фото клиентов отсутствуют и заменены на аватары, которые продолжают изображать восторг, даже если отзыв резко негативный.
Реакции на отзывы
Хотя такой функционал и предусмотрен, реакции на отзывы встречаются редко. Это может сыграть роль своего рода социального доказательства, что их никто не читает.
Исправить ситуацию можно, во-первых, за счет интерфейса: подсвечивать возможность оценки при первом посещении, изредка спрашивать, полезен ли тот или иной отзыв.
Также может помочь программа лояльности с привязкой целевых действий, включая реакции на отзывы, к баллам: выбрал топовые отзывы по купленному товару – заработал.
Исправить ситуацию можно, во-первых, за счет интерфейса: подсвечивать возможность оценки при первом посещении, изредка спрашивать, полезен ли тот или иной отзыв.
Также может помочь программа лояльности с привязкой целевых действий, включая реакции на отзывы, к баллам: выбрал топовые отзывы по купленному товару – заработал.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
Избранное
4 предложения
Расположение кнопки избранного
Кнопка избранного расположена в верхней части экрана, как у многих сервисов. И как и них, до неё относительно сложно дотянуться.
При этом есть примеры, в которых избранное расположено более удобно – рядом с кнопкой корзины – и на него гораздо легче нажать.
При этом есть примеры, в которых избранное расположено более удобно – рядом с кнопкой корзины – и на него гораздо легче нажать.
Пример • Золотое Яблоко
Социальные механики
Как вариант, в функционал избранного также можно было бы внедрить социальные механики, подсвечивая, скольким людям товар уже успел понравиться.
Пример • Rendez-Vous
Пример • Rendez-Vous
Микроанимация избранного
При добавлении и удалении из избранного сердечко меняется мгновенно, хотя для него можно было бы предусмотреть приятную глазу микроанимацию.
Пример • РИВ ГОШ
Тактильная обратная связь
Добавляя товар в корзину, можно ощутить слабую вибрацию устройства, играющую роль подтверждения и делающую интерфейс более отзывчивым.
При этом, добавляя товар в избранное, пользователь ничего подобного не ощущает, хотя по сути это далеко не вторичное целевое действие.
Пример • Магнит
При этом, добавляя товар в избранное, пользователь ничего подобного не ощущает, хотя по сути это далеко не вторичное целевое действие.
Пример • Магнит
Цена и скидки
6 предложений
Размещение маркера скидки
Маркер процентной скидки размещен вплотную к текущей и старой ценам, делая блок скомканным и перегруженным. Его можно было бы разместить поверх фото.
Пример • Золотое Яблоко
Подписи к ценам за штуку
Если товар весовой, по нему имеет смысл писать, за какой вес указана цена. Но по товарам, которые продаются явно поштучно, такие подписи будут излишни.
Подписи к старым ценам
Уж как минимум в старых ценах «₽/шт» будет излишней, т.к. изначально подразумевается, что единицы одни и те же. Это также позволит разгрузить интерфейс.
Сколько отображать копеек?
Разумеется, есть силы внутри компании, которым позарез нужно отобразить цену вплоть до копеечки, «ведь мы заработаем на 9 копеек больше!».
Однако не стоит забывать про то, что эти 9 копеек делают цену визуально гораздо более увесистой, а это уже может подсознательно повлиять на клиента не в лучшую сторону.
Навскидку: Самокат, Лавка, Впрок, ВкусВилл так не делают и отображают цены максимум до 10 копеек (а то и до рубля). Хотя давайте-ка обсудим это с экспертами в комментах😉
Однако не стоит забывать про то, что эти 9 копеек делают цену визуально гораздо более увесистой, а это уже может подсознательно повлиять на клиента не в лучшую сторону.
Навскидку: Самокат, Лавка, Впрок, ВкусВилл так не делают и отображают цены максимум до 10 копеек (а то и до рубля). Хотя давайте-ка обсудим это с экспертами в комментах😉
Вторичная часть цены
Если уж подписи и необходимы, часть с копейками, валютой и штуками можно делать визуально вторичной относительно рублёвой части.
Такое решение позволит сделать цену визуально менее массивной и дополнительно облегчит окружающую область карточки.
Такое решение позволит сделать цену визуально менее массивной и дополнительно облегчит окружающую область карточки.
Пример • Купер
Цвет линии перечеркивания
Если выполнить линию перечеркивания старой цены в цвете, отличном от её цвета (например, красным), значение цены легче будет считываться, т.к. не будет сливаться с линией.
Пример • Лавка
Добавление в корзину
4 предложения
Добавление большого числа единиц
Если клиент закупается оптом, быстро добавить нужное число товаров с помощью клавиатуры или барабана нельзя. Придется тыкать нужное число раз на кнопку плюса.
Пример • ВкусВилл
Нужно больше, чем доступно?
Если клиенту требуется больше единиц товара, чем доступно в магазине, кнопка добавления в корзину просто становится неактивной: приложение ему никак не помогает.
Хотя ему можно предложить выбрать другой магазин, в котором остаток больше, доставку или выбрать другой промежуток доставки, к которому товар будет в наличии.
При этом во время выбора альтернативного магазина важно заметить, что это действие может повлиять на доступность других товаров.
Хотя ему можно предложить выбрать другой магазин, в котором остаток больше, доставку или выбрать другой промежуток доставки, к которому товар будет в наличии.
При этом во время выбора альтернативного магазина важно заметить, что это действие может повлиять на доступность других товаров.
Магия добавления в корзину
Интересно, что при добавлении некоторых товаров в корзину их цена меняется. Как это получается, не совсем понятно. Да просто магия какая-то!
Если у вас есть догадки, давайте обсудим в комментах. Но, как у рядового покупателя, у меня бы точно возникли вопросы по такой интересной игре с ценами.
Если у вас есть догадки, давайте обсудим в комментах. Но, как у рядового покупателя, у меня бы точно возникли вопросы по такой интересной игре с ценами.
Скорость реакции на добавление в корзину
Заметим ещё один момент: насколько ощутима задержка кнопки корзины в таббаре при добавлении товара. Ведь другие как-то делают реакцию мгновенной для клиента?
Upsell, cross-sell и навигация
10 предложений
Допродажа vs. ключевой контент
Блок с допродажей идёт в карточке практически в самом начале – до блоков с описанием, пищевой ценностью, составом и отзывами.
Решение спорное, учитывая, что основное намерение клиента при переходе в карточку – всё-таки не увидеть альтернативы, а ознакомиться с деталями по товару.
Решение спорное, учитывая, что основное намерение клиента при переходе в карточку – всё-таки не увидеть альтернативы, а ознакомиться с деталями по товару.
Контент карточек допродажи
В карточках допродажи сильно обрезаются заголовки и старые цены. При этом присутствуют вторичные элементы, такие как лейблы «Цена за 1шт» и «С Картой №1».
Что приготовить с товаром?
Клиентов можно дополнительно вовлечь, добавив в карточки товаров идеи блюд, в которых они участвуют в качестве ингредиентов. Я люблю шампиньоны – с чем их приготовить?
Пример • Food.ru
Пример • Food.ru
Комплекты
В Ленте есть персональные предложения по комплектам товаров, которые пойдут со скидкой. Информацию об этом не помешало бы разместить и в карточках товаров.
Дополнительная точка контакта с персональной скидкой повысит шансы на то, что клиент с ней ознакомится, заинтересуется и приобретет комплект.
Дополнительная точка контакта с персональной скидкой повысит шансы на то, что клиент с ней ознакомится, заинтересуется и приобретет комплект.
Дополнительные услуги
Возможности заказать товар в нарезанном (колбаса, сыр) или очищенном (рыба) состоянии у клиента нет, хотя их можно было бы оказывать и за дополнительную плату.
Товары-комплементы для вин
По всем товарам есть блок с товарами-комплементами, а по винам он почему-то отсутствует. Подборка из сыров, колбас, мёда и прочих закусок сюда, видимо, не очень подойдёт?
Область перехода к полному списку
Для просмотра полного списка допродажи нужно нажать на небольшой label «Все», хотя можно было бы сделать активной всю область заголовка.
Последняя в подборке – кнопка перехода
Так как в подборках содержится лишь часть общего списка допродажи, в качестве последнего их элемента можно добавить кнопку большую перехода ко всем товарам.
Такое решение позволит лучше управлять ожиданиями клиента и снизит риск ошибочного восприятия, что он просмотрел подборку полностью.
Такое решение позволит лучше управлять ожиданиями клиента и снизит риск ошибочного восприятия, что он просмотрел подборку полностью.
Выбор вариантов
Несмотря на то, что в каталоге есть разные варианты товаров, в карточках нет возможности выбрать другой вариант: например, вкус, вес, жирность и т.д.
При этом некоторые конкуренты активно используют такой функционал, позволяя клиентам быстрее найти нужное без необходимости возвращаться из карточек в листинг.
Пример • Яндекс Еда
При этом некоторые конкуренты активно используют такой функционал, позволяя клиентам быстрее найти нужное без необходимости возвращаться из карточек в листинг.
Пример • Яндекс Еда
Быстрые ссылки
В карточках товаров нет быстрых ссылок на категории и бренд, хотя они позволили бы облегчить навигацию: не возвращаться в листинг и не применять фильтры лишний раз.
Пример • Lamoda
Пример • Lamoda
Прочие моменты
5 предложений
Шеринг товара
Если вы собираете корзину не в одиночку, вам придется пересылать артикулы товаров или перепечатывать их названия, т.к. возможности поделиться товаром нет.
Эту возможность не помешало бы реализовать, не забывая про deep linking, чтобы ссылка сразу же открывалась в приложении, если оно установлено.
При этом можно пойти дальше и реализовать возможность создания общих корзин – так, чтобы и делиться товаром не потребовалось. Но это уже другая история.
Эту возможность не помешало бы реализовать, не забывая про deep linking, чтобы ссылка сразу же открывалась в приложении, если оно установлено.
При этом можно пойти дальше и реализовать возможность создания общих корзин – так, чтобы и делиться товаром не потребовалось. Но это уже другая история.
Обработка снимка экрана
Если клиент хочет послать товар другому человеку, при снимке экрана можно предлагать ему переслать не скриншот, а ссылку на товар.
Таким образом, тот, кому требуется переслать товар, сможет ознакомиться с большим количеством информации, чем просто на скриншоте, и быстро добавить товар в корзину.
Помимо прочего, такая механика может влиять на рост базы пользователей: если у того, кому послали ссылку, приложение ещё не скачано, у него будет лишний повод это сделать.
Пример • Ozon
Таким образом, тот, кому требуется переслать товар, сможет ознакомиться с большим количеством информации, чем просто на скриншоте, и быстро добавить товар в корзину.
Помимо прочего, такая механика может влиять на рост базы пользователей: если у того, кому послали ссылку, приложение ещё не скачано, у него будет лишний повод это сделать.
Пример • Ozon
Пояснения к маркерам
Некоторые маркеры, используемые в карточках, можно сделать активными так, чтобы при тапе по ним появлялась карточка с пояснением.
Информацию в пояснении можно преподнести так, чтобы лучше донести ценность и повысить интерес покупателя к товарам с такими маркерами.
Информацию в пояснении можно преподнести так, чтобы лучше донести ценность и повысить интерес покупателя к товарам с такими маркерами.
Граммы vs. граммы
После названия товара в карточках добавляется его вес. И время от времени мы встречаем такие вот кейсы. Хм, можно ли как-то наладить проверку на соответствие весов?🤔
Просмотр наличия товаров
Если клиент не в Москве и решает проверить наличие товара в другом магазине, по умолчанию его переводят на карту Москвы и лишь затем – в текущий магазин.
To be continued...
Итак, это была Лента с её карточками товаров. В каком-то плане классно, когда ты работаешь над приложением, которое пока неидеально: показать хорошие результаты в таком случае легче😊
Может как-нибудь звёзды так сойдутся, что пройдусь и по другим разделам приложения. А пока желаю ребятам из Ленты, которые меня читают, больших успехов в дальнейшем развитии.
Как всегда, не забудьте поделиться этим постом с коллегами, которым материал может быть полезен. Всего наилучшего и до связи в следующих статьях.
Может как-нибудь звёзды так сойдутся, что пройдусь и по другим разделам приложения. А пока желаю ребятам из Ленты, которые меня читают, больших успехов в дальнейшем развитии.
Как всегда, не забудьте поделиться этим постом с коллегами, которым материал может быть полезен. Всего наилучшего и до связи в следующих статьях.
Все статьи по e-commerce