ЛИНЧ МАГАЗИНУСА
100+ МОМЕНТОВ ДЛЯ УЛУЧШЕНИЯ В МАГАЗИНЕ АРТЕМИЯ ЛЕБЕДЕВА
Да не постигнет меня участь белорусского филиала компании Sixt.
Если вы подписаны на мой Telegram, то заметили, что в последнее время я много пишу про путь клиента в eCommerce. А еще смотрю Артемия Лебедева: самые честные новости и бизнес-линч, на котором он разносит всех в пух и прах. И тут в одном из выпусков новостей Артемия я слышу про редизайн Sunlight, сделанный его студией. Вспоминаю их проекты для Wildberries, Ситилинка и многих других… А еще вспоминаю, что у Артемия есть свой Магазинус. Я просто не мог пройти мимо и не заценить его Customer Journey.
В итоге нашел 100+ моментов для улучшения. Уж что набрал за выходные, то набрал. Уверен, их гораздо больше, но время было ограничено. Плюс: тестировался только путь от главной страницы до момента оплаты. Артемий, надеюсь, будет полезно и сделает Магазинус еще лучше.
В итоге нашел 100+ моментов для улучшения. Уж что набрал за выходные, то набрал. Уверен, их гораздо больше, но время было ограничено. Плюс: тестировался только путь от главной страницы до момента оплаты. Артемий, надеюсь, будет полезно и сделает Магазинус еще лучше.
СТРУКТУРА СТАТЬИ
Для удобства список моментов для улучшения я разбил на блоки. По всем пунктам есть пояснение (скриншот/видео). Рекомендации не пишу: статья и так большая, а требуемые доработки станут очевидны.
1. ГЛАВНАЯ СТРАНИЦА
Отсутствующие товары
Включать отсутствующие товары в листинг можно: как минимум, клиент с ними столкнется. Но выводить их на главную – это чересчур. Лучше заполнить её тем, что можно продать.
Хедер без каталога
В мобильной версии в хедере нет каталога. Чтобы перейти к нему, клиенту приходится прокручивать страницу в самое начало.
Тянем-потянем
В мобильной версии каталог расположен на странице таким образом, что до него нужно тянуться пальцем через весь экран смартфона. Попробуйте сами.
Число товаров в подборках
Подборки новинок и популярных товаров содержат лишь по 5 карточек и не прокручиваются. Это ограничивает возможность клиента быстро ознакомиться с товарами прямо на главной.
Подборки на мобильных
Из подборок «Для чего», «Кому» и «Откуда» в мобильной версии есть всего по одной категории. Зачем так дискриминировать мобильных пользователей, не понятно.
Мы их старательно прячем
В футере личного кабинета клиент сталкивается с подборками, о которых ни в рамках основного контента главной, ни в каталоге нигде не упоминается.
Качество фото в подборках
Фото в подборках по типам клиентов загружены не в лучшем разрешении, из-за чего заметно размываются. Клиента это не отпугнет, но и в плюс также не сыграет.
Текст в карточках подборок
Подборки товаров – хорошая механика. Если бы их карточки еще и читались хорошо. А пока у нас голубой цвет на фоне неба и красный – на красном. Привет, инклюзивность.
Верстка на мобильных
Иногда по непонятной причине товары, стандартно отображаемые по два в ряд, начинают отображаться по одному, занимая лишь половину экрана.
Текст на пестром фоне
Карточки товаров спроектированы таким образом, что название товара идет поверх фото. В некоторых случаях оно попадает на пестрый фон и гораздо хуже читается.
Дублирование контактов
В конце страницы клиент сталкивается с блоком «Контакты». Все круто. Только не понятно, зачем размещать его вплотную к футеру, в котором они дублируются.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
2. ЛИСТИНГ ТОВАРОВ
Полная перезагрузка страницы
При сортировке и фильтрации листинга перезагружается не область с товарами, а вся страница. Клиент ждет дольше, да и мерцание хедера глазу приятным не будет.
Без кнопки корзины
Если у товара всего один вариант, кнопки быстрого добавления в корзину нет, и клиенту приходится отдельно переходить на его страницу, чтобы это сделать.
Качество фото товаров
Изображения товаров загружены не в лучшем качестве и сильно пикселят. Это может повлиять на восприятие и общее впечатление о самом продукте.
Качество маркеров
В листинге используются специальные авторские маркеры товаров-новинок. Цены бы им не было, если бы еще и не пикселили так заметно.
Сколько вешать в граммах?
Если клиенту предлагают добавить товар из листинга, значит, у него должно быть достаточно информации, чтобы принять решение. Но как это сделать, если даже вес пачки не указан?
Нет информации о вариантах
То, что по товару есть несколько вариантов, клиент из листинга узнать не может. Шансы, что он заинтересуется именно конкретным отображаемым вариантом, ниже.
Кстати, по оформлению карточек листинга есть отдельная большая статья.
Без отступов от края экрана
Каких-либо отступов между листингом и краями экрана нет. Из-за этого маркеры в карточках товаров прилипают к границам страницы.
Наааааши товары
В отличие от прочих страниц, листинг на странице «Наши товары» подгружается сразу же в полном объеме. Это увеличивает время ожидания загрузки страницы.
Айфоны Санкт-Петербурга
В 2022 году в листинге тематических товаров «Санкт-Петербург» продаются чехлы только для 5 и 6 iPhone. Не каждый клиент найдет себе подходящий.
Хедер в быстром просмотре
Если клиент открыл окно быстрого просмотра, при приближении курсора к верхней части экрана на заднем фоне появляется шапка, чего, вероятно, быть не должно.
Каталог в футере
В футере листинга нет быстрых ссылок на каталог. Клиенту, который просмотрел листинг и хочет перейти в другие разделы, приходится отдельно прокручивать в начало страницы.
Вы можете поддержать выпуск новых материалов, оформив подписку на Boosty или отправив донат.
3. СТРАНИЦА ТОВАРА
Фото не вписывается в экран
Фото ряда товаров не вписываются в первый экран: чтобы ознакомиться, приходится отдельно прокручивать страницу. Это менее удобно, чем отображение без прокрутки.
Хедер в мобильной версии
В мобильной версии, помимо прочего, фото товара не видно в рамках первого экрана из-за того, что четверть видимой области занимает шапка.
Кнопка корзины на смартфонах
В мобильной версии кнопка корзины не фиксируется. Чтобы добавить товар, страницу приходиться прокручивать отдельно.
Всплывающее окно доставки
Просматривая информацию о доставке в попапе на смартфоне, клиент может заметить, что при прокрутке фоновая страница становится частично видна. Такого быть не должно.
Системная обводка
В мобильной версии при клике по элементам страницы появляется визуально неприглядная системная обводка и заливка, которой, вероятно, быть не должно.
Формат характеристик
Характеристики на странице товара отображаются в формате plain text, без какого-либо форматирования. Это относительно затрудняет восприятие текстовой информации.
Как лучше оформить характеристики и описание по товару? Читаем тут.
Формат видео
Видео на странице товара отображается в формате квадрата. Из-за этого его обложка обрезается по бокам, а при отображении видео возникают пустые черные области.
Ну нет и нет
Если варианта товара нет на складе, у клиента по сути нет и возможности узнать, что этот вариант вообще бывает в продаже. Цвет футболки, дизайн открытки, вес пачки кофе и т.д.
Варианта нет. И не оповестим
Так как отсутствующие варианты вообще не отображаются, на их поступление (в отличие от отсутствующих товаров без вариантов) подписаться нельзя.
Детали по размерам
Чтобы узнать детали по размерам, нужно прокручивать страницу до описания: каких-либо пояснений к размерам (например, при наведении) в блоке с вариантами нет.
Интерактивность палитр
Цветовые палитры и варианты паттернов, в отличие от текстовых вариантов, на наведение курсора никак не реагируют. Inconsistency.
Варианты: заголовки vs. значения
Основной цвет по некоторым товарам указан, как значение варианта, хотя должен быть заголовком для выбора вариантов (по аналогии с текстом нанесения).
Визуализация вариантов
Варианты разных товаров визуализированы по-разному, хотя фактически это один и тот же элемент интерфейса.
Нет допродажи
По части товаров блок допродажи отсутствует, хотя в него гармонично вписались бы товары-комплименты.
Как организовать подборки допродажи на странице товара и что учесть?
Доставка vs. оплата
В блоке «Доставка и оплата» сначала говорится об оплате, и только потом – о доставке. Порядок тем в заголовке и контенте не согласован.
2 клика vs. 1 клик
При заказе оповещения о наличии поле для ввода email’а не активируется по умолчанию. На него приходится нажимать отдельно.
Валидация email'а
В оповещениях о наличии валидации email’а нет. Если клиент ошибся в адресе, о том, что товар стал доступен, он не узнает.
СТА заказа оповещения
Текст кнопки СТА при заказе оповещения о поступлении товара не совсем соответствует целевому действию клиента.
Нажал return – поехал в корзину
Заказывая оповещение о поступлении товара, клиент может попытаться подтвердить ввод email'а нажатием на клавишу return. Вместо подтверждения его отправляют в корзину.
Волшебные баллы
О том, что за покупки начисляются «волшебные баллы», клиент узнает в личном кабинете. Но сколько именно баллов будет начислено за товар, на его странице не говорится.
4. РЕЙТИНГ И ОТЗЫВЫ
На отзывы почти не отвечают
Негативный фидбэк очень часто остаётся без какого-либо ответа, «отравляя» впечатление о товаре у новых клиентов.
Отзыв без покупки
Отзыв может написать любой желающий, даже если он не покупал товар. Такая механика может снизить доверие к самим отзывам.
Отзыв полезен? Авторизуйся
Если отзыв был полезен для нового клиента, чтобы его оценить, требуется регистрация. Такая необходимость на ранних стадиях негативно влияет на число оценок по отзывам.
Оценил отзыв? Обратного пути нет
Оценку отзыва нельзя отменить или скорректировать. Если ты нажал не на ту кнопку по ошибке, исправить ее система тебе уже не даст.
Индикатор рейтинга не кликабелен
Индикатор рейтинга не кликабелен: чтобы прочитать отзывы, клиенту приходится отдельно прокручивать страницу.
Размер фото в отзывах
Фото в отзывах отображаются чрезмерно большими. Особенно если фидбэк подсвечивает недостатки товара, это усиливает негативное впечатление.
Галерея с одним фото
Если в отзыве есть фото, они отображаются с миниатюрами – даже если фото только одно. А это излишне.
Без сортировки отзывов
Какой-либо сортировки отзывов не предусмотрено. Если я хочу посмотреть свежий фидбэк, мне придётся искать его в общем списке вручную.
Оценки есть, индикатора нет
По некоторым товарам индикатора рейтинга нет, хотя оценки и отзывы есть. В случае позитивных оценок возможность подсветить их упускается.
Верстка отзывов на мобильных
Карточки отзывов в мобильной версии спроектированы таким образом, что оценки скачут от отзыва к отзыву в зависимости от длины ника клиента. Это затрудняет их считывание.
Что стоит учесть, проектируя рейтинг и отзывы на странице товара?
5. СПИСОК ЖЕЛАНИЙ
Индикатор избранного
При добавлении товаров в избранное индикатор избранного на странице не появляется. Чтобы он появился, нужно ее перезагрузить или перейти на другую страницу.
Задержки в работе с избранным
При добавлении и удалении товара из избранного возникает заметная задержка. Если клиент добавляет так несколько товаров, это может вызвать раздражение.
Разбитое сердце
В мобильной версии при добавлении товара в избранное иконка фиксируется в состоянии разбитого сердца – противоположно тому, что сделал клиент (но пропадает при скролле).
Верстка карточек товаров
В мобильной версии сайта верстка карточек товаров такова, что их названия и описания переносятся на новую строку через слово. Это затрудняет восприятие информации.
Без СТА, если нет желаний
Если желаний нет, на странице говорится о том, как добавить товар в избранное, но нет кнопки СТА, которая бы в 1 клик вела клиента к выбору товаров.
6. КОРЗИНА
Задержки в реакции системы
Добавление и удаление из корзины происходит с заметной задержкой. Особенно если клиент хочет взять несколько товаров, это может стать раздражающим фактором.
Подытог на странице товара
При покупке товара с его страницы появляется окно подытога, которое закрывает собой значительную часть экрана. Такая реакция нестандартна и может вызвать раздражение.
Подытог, снова ты?
Если клиент меняет количество приобретаемого товара, каждый раз появляется подытог – снова и снова – даже если клиент сокращает количество покупаемых позиций.
Подытог не интерактивен
В отличие от прочих объектов в интерфейсе, кнопка подытога никак не реагирует на наведение курсора, не давая какую-либо обратную связь.
Задержки в пересчете
Пересчёт стоимости при изменении состава товаров в рамках подытога также происходит с задержкой, что может вызвать раздражение.
Фокус на промокоде
Поле промокода в подытоге больше даже общей стоимости и привлекает много внимания. Клиент может уйти с сайта в поисках кода и не вернуться, если не найдет его.
Прокрутка фоновой страницы
В подытоге в мобильной версии иногда появляется ползунок прокрутки фоновой страницы, чего быть не должно.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
7. ОФОРМЛЕНИЕ ЗАКАЗА
Заказ vs. оформление заказа
Заказ и оформление разбиты на 2 разных шага, хотя единственный функционал вкладки «Заказ» – это изменение количества товаров по позициям.
Подарочная упаковка
Добавить упаковку можно лишь по части товаров. При этом добавить к покупке, например, подарочный пакет или открытку (которые также есть в продаже) клиенту не предлагают.
Авторизация
Если клиент не авторизован, ему предлагают войти лишь с помощью email'а и пароля. Возможности авторизоваться через oAuth на данном шаге нет.
Финальная сумма, где ты?
При оформлении заказа итоговая сумма вместе с кнопкой перехода к следующему шагу на экране не фиксируются. И чтобы добраться до них, нужно отдельно прокручивать страницу.