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

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

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

Руководствуемся в прожарке своим опытом, лучшими практиками на рынке, гайдами Baymard Institute и Nielsen Norman Group.

Главная и навигация, десктоп

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

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

Люди постепенно привыкают и многие уже привыкли искать одну большую кнопку каталог рядом с поиском, поэтому, скорее всего, метрики не упали. Третий «этаж» навигации продвигает не только товары, но и сервисы.
Типичное решение для главной. Баннеров многовато, VWO в выводах своего исследования рекомендует «чем меньше слайдов, тем лучше».

Две карусели с автоматической прокруткой рядом — не лучшее решение. Мозгу не удаётся следить за двумя объектами, человек испытывает дискомфорт.

Максим Отмахов, лид продуктовых дизайнеров Antro

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

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

Помните, избыток рекламы в самом начале главной страницы негативно воспринимается многими пользователями

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

Небольшие и аккуратные пункты в меню OZON

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

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

Мы рекомендуем не отображать отзывы и оценки, если их мало. Тем более, если их нет.

Главная и навигация, мобилка

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

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

Отдельная задача — дотянуться и закрыть это всплывающее окно

Не располагайте кликабельные элементы в левом верхнем углу при проектировании экранов для мобильных устройств.

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

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

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

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

Поиск

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

Фишка с недавно просмотренными товарам нам понравилась — выглядит заботливо

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

Каталог, десктоп

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

Хорошая фишка, чтобы забрать к себе в интернет-магазин, если актуально для вашей аудитории

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Каталог, мобилка

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

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

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

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

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

Страница товара, десктоп

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

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

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

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

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

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

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

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

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

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

Ну явно не на пятёрку этот товар
Хейтеры скажут «фотошоп».

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

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

Например, для смарт-часов Samsung нет никакой возможности посмотреть на них «в жизни»: на руке, в комплекте с одеждой и разными приложениями.

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

Кстати, раньше на кнопке «Добавить в корзину» на OZON не было цены — она появилась, потому что ребята прислушались к нашей прожарке. Так мы делаем мир ещё чуть лучше.

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

Страница товара, мобилка

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

Смогли найти плашку?
Да, сразу появилась
Нет
Вообще не понимаю, о чём вы
Показать результаты
Переголосовать
Проголосовать

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

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

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

Это не дарк паттерн, но контринтуитивно.

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

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

Якоб Нильсен, сооснователь Nielsen Norman Group

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

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

Саму страницу при скролле знатно так «шатает», если открыть вкладку «Вопрос-ответ» или отзывы. Это, конечно, никуда не годится

Оформление заказа, десктоп

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

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

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

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

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

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

Оформление заказа, мобилка

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

При возвращении к блоку галочка тоже появляется снова.

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

Конечно, пользовательский опыт на оформлении заказа не заканчивается. Тем более не заканчивается и клиентский, но в рамках дизайн-прожарки мы остановимся здесь.

Итоги

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

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

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

Если вам нужна команда, чтобы разработать интернет-магазин с нуля или помочь с его развитием, то напишите Antro.

0
53 комментария
Написать комментарий...
Дарья Т

Вы советуете убирать с карточек отзывы и рейтинг, когда оценок мало. У меня вопрос: как такие карточки будут смотреться в каталоге среди тех, где отзывы и рейтинг есть? Такое решение не вызовет вопросов у пользователя, — «Почему тут есть, а там нет?»

Ответить
Развернуть ветку
Максим Отмахов из Antro.cx

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

Убирать отзывы и рейтинг стоит в блоках, например, с новинками товаров на главной странице. Ведь, если товары только появились в продаже и пользователи еще не успели их купить/оценить/прокомментировать, то лучше убирать эти «нули» с карточек :)

Кстати, смешные примеры интерфейсов с нулями можно найти в тг @uxfromhell по хештегу #нули 😄😄

Ответить
Развернуть ветку
Женя Князев из antro.cx

Связному это вот никак не помешало — поставил себе тегов и вперёд :) А по теме Макс уже ответил

Ответить
Развернуть ветку
Петя Вася

Мы в Antro блаблабла
На связи кто-то там высокий из блаблабла
После этого желание читать отпадает почему-то

Это мое лично бе не более. Но не надо разбирать кейсы больших проектов не работая с ними. А второе это не нужно учить других не умея самим
Вот у вас страница https://antro.cx/cases грузится долго выполняя фетчи несколько раз подряд при этом показываются всего 6 кейсов на странице. Третий момент картинки кейсов зачем с таким большим разрешением если ширина айтема всего 800px?

Это не допустимо для людей дающих советы на крупных ресурсах

Ответить
Развернуть ветку
Тим

Заголовок: "дизайн-прожарка"
Foo Bar лезет в код и баги сайта*

Ответить
Развернуть ветку
4 комментария
Константин из antro.cx

Ну это кст не критично, грузится долго по другой причине. От сервера почему-то долго ответы идут. Проверим, спасибо)

Ответить
Развернуть ветку
C5BiwYBXC3lwpmDq08QK

У меня вообще сайт не открывается)

Ответить
Развернуть ветку
2 комментария
Аня Назаренко

А как вам сравнение на моих 1280?

*Кто не понял — при скролле скроллится только нижняя строчка высотой в 1см. Весь экран занимают бесполезные карточки товаров растянутые на весь экран)))))

Ответить
Развернуть ветку
Максим Отмахов из Antro.cx

У меня на 1920 получше, но проблема все равно есть. Смеюсь.
Я думаю, что мы не показали еще много всяких приколдесов с багами и косяками)
Справедливости ради, если смотреть на разных разрешениях, устройствах и браузерах — то выйдет через чур объемная прожарка)

Ответить
Развернуть ветку
Анастасия Silver

Хороший разбор. Лайк однозначно

Ответить
Развернуть ветку
Женя Князев из antro.cx

Спасибо, приятно слышать!

Ответить
Развернуть ветку
Павел Павлов

Подробная интересная статья 👍🏼

Ответить
Развернуть ветку
тест тестов

"автоподсказки для имени"
Всегда опасаюсь не заметить ошибку в подсказке. Например, вместо Морковкин будет Московкин и это можно не увидеть.

Ответить
Развернуть ветку
Максим Отмахов из Antro.cx

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

Ответить
Развернуть ветку
Женя Князев из antro.cx

Оооо да

Ответить
Развернуть ветку
p0sted

хорошая статья, только связному карачун не сегодня/завтра наступит, так что больше похоже на аутопсию. Интересно было бы разбор Ситилинка или днс увидеть))

Ответить
Развернуть ветку
Antro
Автор

Заказ приняли!

Ответить
Развернуть ветку
Женя Князев из antro.cx

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Максим Отмахов из Antro.cx

Да, мы в целом там примерно так и написали ведь. Зарабатывать на новых сервисах, когда у тебя уже есть большая аудитория, круто)

Ответить
Развернуть ветку
Женя Князев из antro.cx

Почему нам нельзя говорить о проблемах в дизайне бесплатно?

Ответить
Развернуть ветку
Глеб Голубев

Что насчет залитой аж 2 цветами шапки? В таком виде она неплохо смещает акцент с товаров, которые, вроде как на первом месте в интернет-магазине.

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

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

При отображении карточек в горизонт кнопка "Купить" соразмерна примерно 1/3 от фото. Добавляем к этому гигантский круглый шильдик сверху слева и получаем отсутствие абсолютного акцента на фото товара. Сделать кнопку хотя бы контурной, а не залитой и заменить круг с неиспользуемыми пространствами сверху и снизу на прямоугольник со скруглениями — получим лучший акцент на фото, чем сейчас.

В характеристиках товара засилье знаков типа : и (), повторяющихся из строчки в строчку. Та функция, которую выполняют эти знаки в русском языке (отделить один блок от другого) в проектировании может выполнять пустое пространство (например тройной пробел).

Ответить
Развернуть ветку
Женя Князев из antro.cx

Комментарий интересный, спасибо вам за дополнение :) Мы сознательно сфокусировались на более общих вещах. Оригинал прожарки вышел в два раза длиннее. Пришлось резать

Ответить
Развернуть ветку
Андрей Ка

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

Ответить
Развернуть ветку
Nikita.kos

Спасибо за статью
С интересом прочел

Ответить
Развернуть ветку
Женя Князев из antro.cx

Спасибо за фидбек :)

Ответить
Развернуть ветку
Максим Отмахов из Antro.cx

Ребята комментаторы, жду ваших дискуссий))

Ответить
Развернуть ветку
Роман Славутин

это я утром в понедельник

Ответить
Развернуть ветку
3 комментария
Даниил Болотский

А кого из магазинов техники вы могли бы похвалить? У них всех вроде ± похожие сайты, интересно, у кого можно хорошие решения смотреть

Ответить
Развернуть ветку
Женя Князев из antro.cx

Да полностью никого. У всех свои проблемы. Частично мы приводили с Максом примеры хороших решений.

Ответить
Развернуть ветку
Компаньон Единорог

Удалено.

Ответить
Развернуть ветку
Eazy Haze

Поддерживаю почти все пункты.
В Связном еще напрягает большое количество допродаж в корзине. У каждого товара предлагают докупить услугу. Мало того, что это мешает просматривать товары, так и в целом выглядит навязчиво. Чуть-чуть отвратно. Может я, конечно, гиперболизирую свое впечатление, но вот так и е.

Ответить
Развернуть ветку
Женя Князев из antro.cx

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

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

Ответить
Развернуть ветку
Daria Sergeevna

круто, что вы сделали такой обзор, который полезно почитать не только Связному)
спасибо!

Ответить
Развернуть ветку
Женя Князев из antro.cx

Всегда рады :)

Ответить
Развернуть ветку
Уинстон Смит
Две карусели с автоматической прокруткой рядом — не лучшее решение. Мозгу не удаётся следить за двумя объектами, человек испытывает дискомфорт.

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

Ответить
Развернуть ветку
Alex

Не претендую на большинство, но карусели улетают в блок мгновенно и самыми первыми.

Ответить
Развернуть ветку
Marat Nigametzianov

Сделайте свой сайт и перепродавайте технику.
И только тогда вы поймете истинную цену вашей «прожарки».

Ответить
Развернуть ветку
Женя Князев из antro.cx

Сперва добейся!

Ответить
Развернуть ветку
Alex

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

Ответить
Развернуть ветку
Mikhail Pavlov

Может многое и по делу, но минусы можно найти во всем…

Ответить
Развернуть ветку
Женя Князев из antro.cx

Это так, но ведь это не повод о них не говорить?

Ответить
Развернуть ветку
Екатерина Мензарарь

спасибо, классная прожарка, помогла мне с одним вопросом по проектированию сайта для клиента

Ответить
Развернуть ветку
50 комментариев
Раскрывать всегда