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