• Пн. Ноя 28th, 2022

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

Автор:admin

Ноя 9, 2022

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

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

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

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

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

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


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


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

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

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

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


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

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

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

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


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

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


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

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


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

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

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

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


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

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


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


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

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

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

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

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

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

Поиск

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


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

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


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

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

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


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

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


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

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

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

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


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

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

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


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

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


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

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

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

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

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

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

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


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

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


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

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


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

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

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

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


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

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

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


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

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


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

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


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

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

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


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

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


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

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

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

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

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

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


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

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


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


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

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


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


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

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

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


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

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


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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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


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

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

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


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

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

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

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

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

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

Итоги

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

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

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

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

Источник: vc.ru

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *