Как улучшить карточки товаров в приложении Азбуки Вкуса?
50 недочётов, которые стоит поправить, и идей, которые можно внедрить
Азбука Вкуса для многих была и остаётся любимым магазином. Компания сильно вкладывается в то, чтобы опыт посещения офлайн-магазинов был на 5+, и продумывает путь клиента в деталях.
Однако, в отличие от офлайна, в digital коллегам ещё есть к чему стремиться. Сегодня мы разберем полсотни идей по улучшению карточек товаров в приложении Азбуки: недочёты, которые стоит поправить, и практики, которые можно перенять.
Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с коллегами, которым материал может быть полезен.
Однако, в отличие от офлайна, в digital коллегам ещё есть к чему стремиться. Сегодня мы разберем полсотни идей по улучшению карточек товаров в приложении Азбуки: недочёты, которые стоит поправить, и практики, которые можно перенять.
Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с коллегами, которым материал может быть полезен.
1. Placeholder фото при открытии карточки
При открытии карточки и загрузке данных по товару в слайдере в течение какого-то времени отображается серое изображение placeholder'а.
Вместо него можно было бы взять уже загруженное фото товара из листинга, а после загрузки версии в лучшем разрешении повысить качество фото.
Вместо него можно было бы взять уже загруженное фото товара из листинга, а после загрузки версии в лучшем разрешении повысить качество фото.
2. Позиция слайдера при открытии карточки
В карточках листинга можно пролистывать фото. Эта полезная фича позволяет быстрее знакомиться с товарами и сокращает время на поиск того, что нужно.
Но в текущем исполнении есть недочет: если клиент уже полистал слайдер в листинге, слайдер в полной карточке должен открываться на той же позиции. Сейчас он всегда открывается на первой.
Но в текущем исполнении есть недочет: если клиент уже полистал слайдер в листинге, слайдер в полной карточке должен открываться на той же позиции. Сейчас он всегда открывается на первой.
3. Брендирование фото
Часть фотоконтента выполнена с помощью водяных знаков. С одной стороны, клиенту это ценности не дает. С другой – если кому-то понадобятся фото товаров, такую маркировку легко будет обрезать.
4. Расположение page control
Page control в слайдере расположен прямо поверх фото и никак не выделяется. Из-за этого во многих случаях он может плохо читаться, и его легко не заметить.
5. Цвет активной точки в page control
При переходе от листинга к карточке товара можно заметить, что активная точка в page control меняет свой цвет с зеленого на черный. Хотя можно было бы сделать её вид консистентным.
6. Цвет неактивных точек в page control
В случае с неактивными точками также есть проблема: они полностью белые. А учитывая, что у многих товаров они попадают на белый фон, становится непонятно, что слайдер можно прокрутить.
7. Видимость кнопок
Кнопки избранного и шеринга расположены поверх фото. В случае с фото на белом фоне проблем никаких. Но по многим товарам фон фото не белый, и кнопки становятся слабо заметны.
8. Зум фото из карточки товара
Для того чтобы посмотреть фото товара в деталях, можно было бы и не переходить в галерею, а реазизовать зум через разведение пальцев (pinch action), как это реализовано, например, в Лавке.
9. Анимация появления и скрытия галереи
Галерея появляется и исчезает резко и прерывисто, хотя и то, и то можно было бы реализовать с помощью более плавной и приятной глазу анимации.
10. Задержка при отображении фото в галерее
Несмотря на то, что фотография товара к этому моменту уже загружена в карточке, при открытии галереи наблюдается заметная задержка (вероятно, из-за загрузки более качественного фото).
Пока фото в более высоком разрешении грузится, можно было бы отображать не просто темный экран, а уже имеющееся фото, затем незаметно для клиента заменив его загрузившейся версией.
Пока фото в более высоком разрешении грузится, можно было бы отображать не просто темный экран, а уже имеющееся фото, затем незаметно для клиента заменив его загрузившейся версией.
11. Цвет фона галереи
При переходе из карточки товара, выполненной в светлых тонах, в галерее клиент сталкивается с резкой сменой цвета – темно-серым фоном экрана.
При этом белый фон был бы более уместен за счет того, что сливался бы с фоном фото и тем самым не оттягивал на себя лишнее внимание.
При этом белый фон был бы более уместен за счет того, что сливался бы с фоном фото и тем самым не оттягивал на себя лишнее внимание.
12. Закрытие галереи через смахивание
Галерею с фото нельзя закрыть через смахивание вниз, хотя это давно прижившийся и удобный паттерн во многих e-com приложениях.
13. Выцветание текстов
В конце кратких версий текстовых блоков можно добавить эффект выцветания текста: так факт, что это лишь часть контента, будет подсвечиваться более явно.
Пример • Магнит
Пример • Магнит
14. Анимация скрытия и раскрытия блоков
Раскрытие и скрытие описания происходит резко и прерывисто, хотя эти действия можно было бы реализовать с помощью приятной глазу анимации с вертикальным смещением контента под описанием.
Пример • Lamoda
Пример • Lamoda
15. Кнопки раскрытия текстовых блоков
В то время как полные тексты описания и состава открываются кнопкой «Подробнее», в характеристиках эта кнопка называется «Ещё». Причина такой неконсистентности не совсем понятна.
16. Уместность кнопок раскрытия блоков
Кнопки раскрытия текстов отображаются даже тогда, когда тексты по сути не обрезаются и видны полностью. В таких случаях кнопки неуместны и их лучше скрывать.
17. Смещение текста
При скрытии и раскрытии описания текст по непонятной причине смещается на несколько пикселей. Непонятную причину также лучше устранить.
18. Псевдокликабельные характеристики
Некоторые характеристики выглядят кликабельными за счет того, что подчёркиваются. При этом они некликабельны, и могут ввести клиента в заблуждение.
19. Дублирование характеристик
По многим товарам рекомендуемая температура хранения и условия хранения дублируются. Для клиента в этом ценность таких дубликатов близится к нулю.
20. Дополнительный срок годности
Среди характеристик часто встречается «дополнительный» срок годности. Восприятие было бы гораздо легче, если написать по-человечески: «Годен после вскрытия упаковки».
21. Рекомендации по приготовлению
По готовой продукции среди характеристик можно встретить рекомендации по приготовлению, развернув которые, клиент узнаёт лишь, что товар готов к употреблению.
Как считаете, стоит ли для готовых блюд добавлять такой блок в характеристики или это будет просто излишняя информация? Напишите, пожалуйста, в комментах.
Как считаете, стоит ли для готовых блюд добавлять такой блок в характеристики или это будет просто излишняя информация? Напишите, пожалуйста, в комментах.
22. Сокращения в рекомендациях
Рекомендации по некоторым продуктам даются в крайне сжатой форме. Конечно же, разобрать, что хотели сказать можно. Но «Гот. к употр. Разогр в СВЧ» все-таки звучит не очень. Согласитесь?
23. Рецепты
В карточки продуктов, особенно экзотических, можно внедрить рецепты, которые не только позволяют вдохновить клиента на приготовление блюд, но и повысить средний чек.
Пример • Food.ru
Пример • Food.ru
24. Отображение свёрнутых характеристик
По товарам, у которых есть несколько характеристик, свёрнутых по умолчанию, при сворачивании одной характеристики на краткое время отображаются значения других характеристик.
25. Переход по характеристикам и обратно
Значения некоторых характеристик кликабельны и ведут к листингу товаров, отфильтрованному по этим значениям (например, по бренду).
В целом, это механика неплохая. Вот только загвоздка в том, что в Азбуке, если вы решили вернуться обратно, у вас это не получится: вы вернетесь не в карточку, а в листинг товаров.
В целом, это механика неплохая. Вот только загвоздка в том, что в Азбуке, если вы решили вернуться обратно, у вас это не получится: вы вернетесь не в карточку, а в листинг товаров.
26. Быстрые ссылки на категории
Помимо кликабельности характеристик, в карточки товаров можно добавить блок с быстрыми ссылками на категории, которым принадлежит товар. Это также позволит облегчить навигацию.
Например, в карточке пирожного можно добавить ссылки на все пирожные, все товары производителя и все пирожные от этого производителя.
Пример • Lamoda
Например, в карточке пирожного можно добавить ссылки на все пирожные, все товары производителя и все пирожные от этого производителя.
Пример • Lamoda
27. КБЖУ на порцию
Пищевая и энергетическая ценность отображаются только в расчете на 100г продукта. Если клиент заботится о потребляемых калориях, ему придется высчитывать их самому.
Хотя можно отображать КБЖУ и в расчете на вес всего продукта, чтобы было понятнее, сколько калорий я получу, съев, например, порцию готовой еды.
Хотя можно отображать КБЖУ и в расчете на вес всего продукта, чтобы было понятнее, сколько калорий я получу, съев, например, порцию готовой еды.
28. Последовательность БЖУ
Информация по пищевой ценности приводится не в каноническом порядке «белки – жиры – углеводы», а в порядке, логика которого не совсем понятна.
Такое представление нестандартно, отличается от того, как это сделано в большинстве сервисов на рынке, и может вызвать у клиента когнитивный диссонанс.
Такое представление нестандартно, отличается от того, как это сделано в большинстве сервисов на рынке, и может вызвать у клиента когнитивный диссонанс.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
29. Формат состава ингредиентов
Состав продуктов реализован в формате сплошного текста, который в случае с большим количеством ингредиентов может превратиться в длинную «простыню», вчитываться в которую будет проблематично.
В качестве альтернативы, учитывая, что высота блока по умолчанию ограничена, можно реализовать состав в формате списка с bullet point'ами. Так он будет читаться гораздо легче.
Пример • igooods
В качестве альтернативы, учитывая, что высота блока по умолчанию ограничена, можно реализовать состав в формате списка с bullet point'ами. Так он будет читаться гораздо легче.
Пример • igooods
30. Первый vs. второй уровень ингредиентов
Также на читаемость состава влияет и то, что по комплексным ингредиентам в скобках прописывается ещё и их состав. Это, визуально раздувает текст и рассеивает фокус внимания.
В качестве альтернативы можно реализовать текст ингредиентов второго уровня в сером цвете – так, чтобы акцент был на основных ингредиентах, но при этом их детализация также читалась.
В качестве альтернативы можно реализовать текст ингредиентов второго уровня в сером цвете – так, чтобы акцент был на основных ингредиентах, но при этом их детализация также читалась.
31. Highlight аллергенов
Сейчас, если у клиента на что-то аллергия, он вынужден вчитываться в состав продуктов. Хотя можно дать ему возможность отметить аллергены и подсвечивать их в составе.
P.S. некоторые аллергены видны среди характеристик, но 1) никак не подсвечиваются и не привлекают внимания 2) отсутствует какая-либо персонализация под клиента.
Пример • Лавка
P.S. некоторые аллергены видны среди характеристик, но 1) никак не подсвечиваются и не привлекают внимания 2) отсутствует какая-либо персонализация под клиента.
Пример • Лавка
32. Отсутствующие ингредиенты
По некоторым товарам приводятся отсутствующие ингредиенты. Например, в карточке хачапури компания подсвечивает, что там нет орехов.
Возникает вопрос: только ли орехов нет в хачапури? А как же другие десятки потенциальных аллергеров?... А, может, просто не стоит выводить это в качестве характеристики?
Возникает вопрос: только ли орехов нет в хачапури? А как же другие десятки потенциальных аллергеров?... А, может, просто не стоит выводить это в качестве характеристики?
33. Empty state оценки
Если по товару нет оценок, в качестве оценки по нему отображается 0. Такая визуализация может ввести в заблуждение о том, что оценка крайне низка, либо просто вызвать ненужные вопросы.
Вместо этого по новым товарам без оценок можно в явной форме сообщать этот факт «оценок пока нет» либо поступать более креативно, как во ВкусВилл с маркировкой «Я новенький».
Вместо этого по новым товарам без оценок можно в явной форме сообщать этот факт «оценок пока нет» либо поступать более креативно, как во ВкусВилл с маркировкой «Я новенький».
34. Оценка в листинге vs. в карточке
Встречаются случаи, когда оценка в листинге не соответствует оценке в карточке. Как видно в примере, оценка в листинге – 1, а при переходе в карточку магическим образом превращается в 3.
35. Размещение блока с отзывами
Блок с отзывами реализован в виде вкладки наравне со списком характеристик и недоступен при обычном вертикальном скролле. Это снижает его видимость при ознакомлении с деталями по товару.
В качестве альтернативы можно реализовать блоки один под другим, а вкладки будут играть роль быстрой навигации: при тапе по ним будет происходить скролл до нужного блока.
В качестве альтернативы можно реализовать блоки один под другим, а вкладки будут играть роль быстрой навигации: при тапе по ним будет происходить скролл до нужного блока.
36. Клик по оценке в карточке
Оценка в карточке товара кликабельна: при нажатии на неё открывается вкладка с отзывами. Вот только скролла до начала этой вкладки не происходит: приходится прокручивать карточку вручную.
37. Полезные отзывы
Блок с отзывами озаглавлен, как «Полезные отзывы». В ряде случаев это может вызвать конфуз, т.к. в «полезные» отзывы попадают оценки без текста, а показатели лайков (полезности) очень часто нулевые.
38. Подписи к оценкам
В карточках отзывов оценки отображаются как в формате 5 звёзд, так и текстом. В случае с 5-звёздочным форматом дополнительная подпись излишня, и от неё можно отказаться.
39. Оценка без покупки
Оценить товар предлагается даже без факта совершения покупки. Такая свобода открывает широкие возможности для поставщиков в плане накрутки оценок по своим товарам.
40. Шаблонные ответы
Ответы на отзывы даются по одному и тому же шаблону. Особенно если клиент пожаловался на что-то, такой подход может вызвать ещё больший негатив.
41. Сохранение реакций на отзывы
Оценив отзыв в общем списке оценок и открыв его повторно, с удивлением замечаешь, что реакция попросту не сохранилась. Интересно, не поэтому ли так мало реакций на отзывы?
42. Подсвечивание числа штук
Под названием штучных товаров в карточках можно встретить подпись «1 шт». Такая информация будет излишней, так как уже подразумевается, что это карточка одного товара.
Более того, если клиент просматривает пачки с несколькими единицами товара, это может вызвать диссонанс, так как в 2 соседних элементах цифры по количеству штук будут разными.
Более того, если клиент просматривает пачки с несколькими единицами товара, это может вызвать диссонанс, так как в 2 соседних элементах цифры по количеству штук будут разными.
43. Добавление нескольких единиц
Если клиент решил добавить много единиц товара (например, сырки для детей на неделю или корм для животных), их нужно добавлять, каждый раз нажимая на кнопку корзины.
При этом хорошей практикой является возможность ввести нужное количество товаров с помощью текстового ввода при нажатии на количество штук, добавленных в корзину.
При этом хорошей практикой является возможность ввести нужное количество товаров с помощью текстового ввода при нажатии на количество штук, добавленных в корзину.
44. Отображение копеек
По всем товарам в карточках отображаются копейки, даже если они нулевые – а в эту категорию попадает очень большая часть ассортимента. В таких случаях копейки можно упразднить.
45. Highlight процентной скидки
Даже в случае со внушительными скидками их размер в процентах никак не подсвечивается, и чтобы понять, какова скидка, нужно вглядываться в мелкий шрифт старой цены.
Процентную скидку можно разместить в блоке с маркерами, заменив ей маркер «заманчивая цена», который не несет особой информативности для клиента.
Процентную скидку можно разместить в блоке с маркерами, заменив ей маркер «заманчивая цена», который не несет особой информативности для клиента.
46. Маркеры с бонусами
В некоторых карточках отображаются маркеры с бонусами. Новым клиентам может быть непонятно, как они соотносятся с реальной валютой и как их тратить.
Маркер с бонусами можно сделать активным, так чтобы при тапе по нему появлялся небольшая модалка, которая кратко рассказывала бы про механики, связанные с бонусами.
Маркер с бонусами можно сделать активным, так чтобы при тапе по нему появлялся небольшая модалка, которая кратко рассказывала бы про механики, связанные с бонусами.
47. Дублирование маркеров
В карточках товаров можно встретить случаи, когда маркеры дублируются в рамках одного экрана. Зачем это сделано, не совсем понятно.
48. Рекомендуем попробовать
В блоке допродажи текст заголовка «рекомендуем попробовать» разбит на 2 строки, хотя вполне мог бы уместиться в рамках одной строки. Интересно, так специально или с разметкой проблемы?
49. Комплементарные товары
Помимо рекомендуемых товаров в карточки также можно добавить и товары, которые сочетаются с данным товаром. Например, в карточке свежего хлеба показывать сыры, джемы, намазки и прочее.
50. Знакомство с фермерскими продуктами
Клиент может ознакомиться с описанием того, как производят фермерские продукты. Само по себе это отлично, так как доносит историю и лучше погружает клиента в детали по продукту.
Но зачем после прочтения статьи и возврате к покупкам закрывать карточку товара, которым клиент заинтересовался – большой вопрос.
Но зачем после прочтения статьи и возврате к покупкам закрывать карточку товара, которым клиент заинтересовался – большой вопрос.
To be continued...
Азбуке Вкуса ещё есть что доработать в карточках товаров, и это в каком-то плане хорошо для тех, кто за них ответственен – ведь лучше, когда есть потенциал для улучшения и возможность показать хорошие результаты, чем когда всё уже близко к идеалу и выверено до пикселя.
Коллегам из Азбуки желаю успехов в дальнейшем улучшении продукта, а вы, дорогие читатели, не забудьте поделиться этим постом с коллегами, которым материал может быть полезен. Всего наилучшего и до связи в следующих статьях.
Коллегам из Азбуки желаю успехов в дальнейшем улучшении продукта, а вы, дорогие читатели, не забудьте поделиться этим постом с коллегами, которым материал может быть полезен. Всего наилучшего и до связи в следующих статьях.
Все статьи по e-commerce