Дизайн-прожарка 2.0: интернет-магазин «Связной», так ли всё хорошо?

Мы в Antro вернули популярный формат слегка хулиганского обзора интернет-магазинов. Сегодня разберёмся, причастен ли интерфейс к тому, что за 3 года Связной упал в рейтинге eCommerce с 8 на 20 место.

На связи CEO Antro Женя Князев и лид продуктовых дизайнеров Максим Отмахов. Многие наши клиенты считают интерфейс Связного одним из лучших на рынке eCommerce. Он действительно неплох, но есть, что улучшить.

Сюда попадают люди по прямым запросам, с контекстной рекламы, из различных медиа, интеграций с онлайн-кинотеатрами и других источников. Кто-то впервые знакомится с брендом и ассортиментом магазина.

«Связной» много экспериментировал со своей навигацией, но пришёл к стандартному её формату. Похожий шаблон у Wildberries, OZON, М.Видео, МТС и многих других.

Несколько смущает излишний фокус на дополнительных сервисах, который можно заметить ещё на предыдущем скриншоте.

Понять логику легко. Связной запускает новые сервисы, как многие большие бренды в eCommerce. Увеличивать прибыль за счёт лояльной бренду аудитории — частая стратегия.

Мы бы рассмотрели менее агрессивные способы рекламы сервисов. Даже OZON делает это куда менее навязчиво.

Категории из «третьего этажа» хэдера переехали в карточки, до которых придётся долистать и найти нужную в карусели. Это не самая удобная механика, чтобы оценить весь ассортимент. С 22 категориями справиться можно и без карусели.

Транслировать отсутствие отзывов к продвигаемому товару не стоит. Это «засоряет карточку» и отталкивает от покупки — раз никто не покупает, значит, не очень.

Главная со старта перегружена всплывающими окнами. Они перекрывают больше 30% контента. Буквально наслаиваются друг на друга и конфликтуют с FAB-кнопкой поддержки.

Кто должен со старта захотеть установить мобильное приложение, кроме лояльной аудитории?

При скролле верхняя навигация, где находится поиск, сравнение товаров и избранное скрывается, а реклама приложения остаётся.

Мы прекрасно понимаем, что пользователи приложения в среднем приносят больше денег, но нарушается причинно-следственная связь. Да, такие люди чаще покупают в Связном, поэтому им удобнее установить приложение и пользоваться им. Если обратный эффект и есть, то вряд ли достаточно серьёзный.

В отчёте Comscore Global State of Mobile 62% пользователей предпочитают изучать и покупать товары с мобильного сайта. ~3 из 10 приложений удалят в течение месяца после загрузки. Причём, это усреднённые данные.

Мы уже писали о проблемах мобильного приложения в eCommerce раньше. С тех пор мало что изменилось.

Стандартный для хорошего eCommerce. Естественно, можно и нужно улучшать, но минимальным требованиям соответствует.

В мобилке с поиском хуже. Во-первых тянуться наверх за ним снова неудобно. Лучше найти место в таб баре — хотя бы скрыть в пятом табе. Хотя иногда табов шесть. Во-вторых, он не фиксируется сверху. Соответственно, приходится прокручивать страницу, чтобы вернуться к поиску. В-третьих, если принципиально не закрывать рекламу приложения, то она перекроет поле поиска.

Начнём с того, что понравилось.

Подобную механику реализовали и в М.Видео

Интересную механику спроектировали и для сравнения товаров. Можно добавлять сразу много продуктов в сравнение прямо из каталога.

Теперь к минусам, они критичные.

В первую очередь это бедность контента карточек. Помимо фото, названия и цены вы не узнаете о характеристиках продукта абсолютно ничего.

Оставшееся место не заполнено вообще или заполнено рекламными тегами, которые похожи на попытку манипуляции. На скриншоте «Цена снизилась» — так себе новость, даже если я слежу за поведением цен из научного интереса. Если я просто ищу товар или самую низкую цену, такой тег бесполезен. Точно также как и «Цена по акции».

Связной же при каждом удобном случае заменяет отзывы, вопросы и оценки на неинформативные рекламные теги.

Эта проблема решается другим форматом карточек. Здесь рекламным тегам уделено меньше внимания и есть полезная информация.

Правда, по нашему опыту, далеко не все пользователи догадываются переключить вид карточки с вертикального на горизонтальный.

Другая неприятность — автоматическое переключение фото на карточке. Придётся ждать полный круг, пока вы снова увидите нужное изображение. Снова на пару секунд. Рассмотреть из каталога ничего не выйдет ни в вертикальной, ни в горизонтальной версии карточки.

Не говоря уже о том, что когда фотки всего две, то они довольно бесяче мигают. Особенно в горизонтальной версии карточки, где переключение фоток активно при наведении на любую область карточки.

К примеру, в М.Видео вы сами решаете, на каком изображении хотите остановиться.

Фильтрацию по рейтингу в Связном до сих пор не реализовали. Фильтры в магазине вообще довольно бедные и часто работают странно.

Поиск по вариантам появляется, только если раскрываешь полный список. Искать по производителю я могу захотеть и до изучения полного списка — на то это и поиск.

Применённые фильтры теряются при скролле и не выводятся в одном месте. Хотите сбросить фильтр? Сначала найдите. У OZON активные фильтры в быстром доступе перед карточками, как и кнопка сброса фильтрации.

Сортировки «по рейтингу» просто нет. Иконка направления сортировки выглядит также, как общепринятая иконка для выпадающего списка. Из приятного — сортировка по выгоде, который считает разницу в стоимости в абсолютных значениях, а не в процентах скидки.

В каких сценариях использования нужна сортировка от самого непопулярного, самой маленькой скидке и самого невыгодного варианта — непонятно. Кажется, об этом никто не подумал.

В мобилке, как обычно, всё становится хуже. Фильтры спрятаны в одну кнопку и также не выводятся при применении. Если я хочу отменить фильтр, то мне сначала придётся проскроллить страницу в начало и потом найти его в полном списке фильтров в модальном окне.

Проблема со скроллом внутри фильтра, которую мы даже не стали описывать в десктопной версии, здесь становится критической. Через раз ты скроллишь то всю страницу, то конкретный список внутри фильтрации.

Особенно понравилась кнопка «Оставить отзыв» — на что? Ещё и перекрывает кнопку «Показать» — ключевую для этого экрана.

Дополнительную информацию о товаре уже никак не получить. Здесь только один тип карточек — пустой в плане полезной информации о товаре.То же самое и с возможностью посмотреть разные изображения товара в каталоге — тоже отобрали.

OZON позволяет переключать фото и в мобильной версии интерфейса.

Сразу бросаются в глаза невыносимые темы на логотипах в блоке рассрочки. Тут даже вкусовщиной это назвать не получается — просто грязь.

Скрывать информацию о товаре в разных табах — устаревшая механика. С ней сразу несколько проблем. Во-первых, это усложняет поиск информации — людям свойственно не замечать узкие строчки с вкладками.

Во-вторых, на них нужно кликать, что не очень удобно. Каждое переключение таба инициирует перезагрузку страницы. Это затрудняет взаимодействие, если у вас не очень мощный ноутбук или низкая скорость интернета.

Из табов «растут» и другие проблемы со взаимодействием. Например, при клике на кнопку «Все характеристики», если открыт другой таб, то страница обновится и оставит вас сверху. Для любого пользователя такой «финт» будет выглядеть как баг.

На деле, нужна вкладка открылась, нас просто не проскроллили к ней. То же самое происходит и с кнопкой «Выбрать аксессуары»

Другая проблема — пустые табы. То есть ты нашёл, нажал, дождался загрузки страницы, а в итоге получил ни-че-го.

Печалит и отсутствие контента даже для лидеров продаж. Айфоны, которые Связной продвигает на главной и делает для них отдельные лендинги, снабжены 3 фотографиями.

Переключение между разными фото товаров возможно только по клику на миниатюру. Стрелки вправо и влево — базовое требование для любой подобной механики.

К подсчёту оценок тоже есть вопросы. Такая система округлений даже выглядит некорректной по отношению к пользователям.

При этом, в отзывах нет возможности отфильтровать по оценке — нельзя посмотреть даже количество отзывов с разными оценками и оценить среднее.

Фотографий от пользователей в Связном найти тоже не удастся, хотя UGC-контенту люди доверяют куда больше. Особенно важным он становится, когда фото магазина не хватает. А их не хватает.

Следующей за вами плашки с возможностью добавить товар в корзину из любой точки страницы тоже не нашли. Вот, как она реализована у OZON.

На странице товара в Связном нет и лёгкого доступа к политике по возвратам — она помогает пользователям чувствовать себя в большей безопасности при покупке в интернет-магазине.

В мобильной версии плашка с возможностью добавить товар в корзину из любой точки страницы появляется. Правда, её можно закрыть, а по какому принципу она потом возвращается мы так и не нашли.

Причём, перестала она появляться и на других товарах тоже. Если закрыли случайно, вернуть не выйдет. Хорошо, что плашку с товаром в конце страницы не оптимизировали подобным образом.

Крайне неприятную проблему мы обнаружили при обзоре мобильной версии, но она дублируется и в десктопе. Если определённого варианта товара нет в наличии, то вы об этом узнаете только после клика и загрузки страницы. После долгого ожидания и постоянного скролла до выбора цвета человек может и бросить это дело вовсе.

Другая проблема в мобильной версии — снова табы. Внешне они выглядят как раскрывающиеся списки. А внутри те же табы. Из-за этого пункт «О товаре», который открыт автоматически, нельзя сразу свернуть

Помните закон Якоба?

Механика вкладки на Связном не только обманывает пользователя, но и теряет основное преимущество раскрывающихся списков — возможность быстро открывать и скрывать дополнительный контент

Открытие вкладки, выглядящей как список, тоже требует полной перезагрузки страницы. К счастью, здесь нас хотя бы возвращают на нужное место.

Отдельной корзины у Связного нет, вы сразу попадаете на страницу оформления заказа — его же мы дальше называем чекаут.

Связной использует чекаут-аккордеон — это механика, при которой страница построена из нескольких блоков раскрывающихся и скрывающихся поочерёдно блоков.

Первый блок — это довольно странная смесь корзины и самого оформления заказа. С одной стороны мы видим товары, с другой в первом же блоке есть не только привычные и подходящие корзине способы повышения среднего чека.

Но в этом же блоке нам предлагают заранее выбрать способ оплаты. Хотя эта же часть оформления заказа значится и в третьем блоке. Это может запутать пользователя при заполнении, а ошибки на финальных этапах пути — самые дорогие.

Связной лишил нас возможности видеть краткую сводку всего заказа. На экран влезает не больше 2-3 товаров. При обновлении страницы пользовательские данные заполняемого блока просто… стираются!

В большинстве блоков здесь мало что отличается. Зато нашли тёмный паттерн — галочка при добавлении email ставится автоматически.

Количество способов оплаты, которые ещё нормально воспринимаются на десктопе в мобилке приходится скроллить несколько секунд. Интересно, тестировали ли группировку списка?

У Связного действительно неплохой интерфейс. Его проектировали талантливые ребята, хотя и допускали странные ошибки. Многие из них легко исправить. С прошедшим днём рождения, Связной! Желаем твоей команде развивать интернет-магазин по всему пользовательскому пути, а не только главную страницу. Надеемся, так и случится.

Расскажите в комментах, что мы упустили? Может быть, какие-то баги или неудобные лично для вас вещи — нам интересно. Если вам понравилась прожарка ставьте «+1», чтобы её увидело больше людей.

Новый выпуск уже скоро, подписывайтесь, чтобы не пропустить. А ещё анонсы будут в нашем тг-канале — мы там выкладываем полные версии исследований, красивый визуал и рассказываем о внутряках.