Дизайн-прожарка 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», чтобы её увидело больше людей.
Новый выпуск уже скоро, подписывайтесь, чтобы не пропустить. А ещё анонсы будут в нашем тг-канале — мы там выкладываем полные версии исследований, красивый визуал и рассказываем о внутряках.
Вы советуете убирать с карточек отзывы и рейтинг, когда оценок мало. У меня вопрос: как такие карточки будут смотреться в каталоге среди тех, где отзывы и рейтинг есть? Такое решение не вызовет вопросов у пользователя, — «Почему тут есть, а там нет?»
К этому тоже нужно подходить с умом. В общем каталоге товаров оставлять какие-то товары без отзывов и рейтинга, а на каких-то показывать — так себе идея. Пользователя скорее это дезориентирует, чем поможет.
Убирать отзывы и рейтинг стоит в блоках, например, с новинками товаров на главной странице. Ведь, если товары только появились в продаже и пользователи еще не успели их купить/оценить/прокомментировать, то лучше убирать эти «нули» с карточек :)
Кстати, смешные примеры интерфейсов с нулями можно найти в тг @uxfromhell по хештегу #нули 😄😄
Связному это вот никак не помешало — поставил себе тегов и вперёд :) А по теме Макс уже ответил
Мы в Antro блаблабла
На связи кто-то там высокий из блаблабла
После этого желание читать отпадает почему-то
Это мое лично бе не более. Но не надо разбирать кейсы больших проектов не работая с ними. А второе это не нужно учить других не умея самим
Вот у вас страница https://antro.cx/cases грузится долго выполняя фетчи несколько раз подряд при этом показываются всего 6 кейсов на странице. Третий момент картинки кейсов зачем с таким большим разрешением если ширина айтема всего 800px?
Это не допустимо для людей дающих советы на крупных ресурсах
Заголовок: "дизайн-прожарка"
Foo Bar лезет в код и баги сайта*
Ну это кст не критично, грузится долго по другой причине. От сервера почему-то долго ответы идут. Проверим, спасибо)
У меня вообще сайт не открывается)
А как вам сравнение на моих 1280?
*Кто не понял — при скролле скроллится только нижняя строчка высотой в 1см. Весь экран занимают бесполезные карточки товаров растянутые на весь экран)))))
У меня на 1920 получше, но проблема все равно есть. Смеюсь.
Я думаю, что мы не показали еще много всяких приколдесов с багами и косяками)
Справедливости ради, если смотреть на разных разрешениях, устройствах и браузерах — то выйдет через чур объемная прожарка)
Хороший разбор. Лайк однозначно
Спасибо, приятно слышать!
Подробная интересная статья 👍🏼
"автоподсказки для имени"
Всегда опасаюсь не заметить ошибку в подсказке. Например, вместо Морковкин будет Московкин и это можно не увидеть.
В этом и проблема.
Одно дело, когда автоподсказки используются для общепринятых названий. Например, улиц, городов и другого.
И совсем иначе работает, когда это личные имена и фамилии
Оооо да
хорошая статья, только связному карачун не сегодня/завтра наступит, так что больше похоже на аутопсию. Интересно было бы разбор Ситилинка или днс увидеть))
Заказ приняли!
Тоже читали об этом. Они сейчас пытаются договориться на рассрочки — может, ещё выплывут, хотя шансы невелики
Комментарий недоступен
Комментарий недоступен
Да, мы в целом там примерно так и написали ведь. Зарабатывать на новых сервисах, когда у тебя уже есть большая аудитория, круто)
Почему нам нельзя говорить о проблемах в дизайне бесплатно?
Что насчет залитой аж 2 цветами шапки? В таком виде она неплохо смещает акцент с товаров, которые, вроде как на первом месте в интернет-магазине.
Одни и те же карточки в дополнительных сервисах и других категориях используют разные правила — тень на фоне и заливка цветом. Чем больше правил в схожих блоках, тем меньше баланса в дизайн-системе.
То же самое и на странице с фильтрами — карточки товаров, построенные по каркасной системе, при наведении дополняются тенью. То есть накручиваются стилистики там, где они не требуются.
При отображении карточек в горизонт кнопка "Купить" соразмерна примерно 1/3 от фото. Добавляем к этому гигантский круглый шильдик сверху слева и получаем отсутствие абсолютного акцента на фото товара. Сделать кнопку хотя бы контурной, а не залитой и заменить круг с неиспользуемыми пространствами сверху и снизу на прямоугольник со скруглениями — получим лучший акцент на фото, чем сейчас.
В характеристиках товара засилье знаков типа : и (), повторяющихся из строчки в строчку. Та функция, которую выполняют эти знаки в русском языке (отделить один блок от другого) в проектировании может выполнять пустое пространство (например тройной пробел).
Комментарий интересный, спасибо вам за дополнение :) Мы сознательно сфокусировались на более общих вещах. Оригинал прожарки вышел в два раза длиннее. Пришлось резать
Спасибо за обзор, наконец то разложено по полочкам, чем меня связной бесит.
Спасибо за статью
С интересом прочел
Спасибо за фидбек :)
Ребята комментаторы, жду ваших дискуссий))
это я утром в понедельник
А кого из магазинов техники вы могли бы похвалить? У них всех вроде ± похожие сайты, интересно, у кого можно хорошие решения смотреть
Да полностью никого. У всех свои проблемы. Частично мы приводили с Максом примеры хороших решений.
Удалено.
Поддерживаю почти все пункты.
В Связном еще напрягает большое количество допродаж в корзине. У каждого товара предлагают докупить услугу. Мало того, что это мешает просматривать товары, так и в целом выглядит навязчиво. Чуть-чуть отвратно. Может я, конечно, гиперболизирую свое впечатление, но вот так и е.
Допродажи — тема сложная. Навязчивость однозначно присутствует, если вы подкованы в диджитале. Если мы представляем себя человека, для которого это единственное место, где он может увидеть, какие взять аксессуары и доп. плюшки, то это неплохо.
В то же время, как правило, именно на них магазин техники и зарабатывает, так как это продукты с высокой маржинальностью
круто, что вы сделали такой обзор, который полезно почитать не только Связному)
спасибо!
Всегда рады :)
Пользователю в принципе пофиг на карусели, держу в курсе. Лид занимается борьбой с ветряными мельницами.
Не претендую на большинство, но карусели улетают в блок мгновенно и самыми первыми.
Сделайте свой сайт и перепродавайте технику.
И только тогда вы поймете истинную цену вашей «прожарки».
Сперва добейся!
Ничего не понимаю в веб-дизайне, но ни разу не смог купить ничего на сайте связного, не помню по каким причинам. Неоднократно не было в наличии того, что выдавало ссылку на связной в поиске.
Может многое и по делу, но минусы можно найти во всем…
Это так, но ведь это не повод о них не говорить?
спасибо, классная прожарка, помогла мне с одним вопросом по проектированию сайта для клиента