Дизайн-прожарка: что не так с редизайном «М.Видео»

«Дизайн-прожарка» — рубрика, в которой команда Mojo разбирает интерфейсы интернет-магазинов. Наш принцип: «Отвергаешь — предлагай», поэтому мы не просто находим ошибки, но и рекомендуем свои решения.

Откройте форточку — сейчас будет душно. Мы в Mojo долго смотрели, как в пух и прах разносят новый логотип «СберБанка». Пришли к выводу, что в мире есть вещи и пострашнее, например, редизайн «М.Видео». Но это неточно.

Меня зовут Женя Князев, и я продуктовый дизайнер в Mojo. Перед чтением этой публикации рекомендую ознакомиться с моим циклом статей по eCommerce. В «Дизайн-прожарке» будет много субъективных моментов и меньше ссылок на исследования, чем обычно. Оцените токсичность публикации в комментариях по десятибалльной шкале.

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

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

Плюс: мне нравится, что сделали лендинги под каждую акцию. Если бы это были статичные элементы, никто бы не умер, а UX «М.Видео», наоборот, — воскрес.

В «Товаре дня» карусель в тему.

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

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

Вынесли статус заказа — наверное, у пользователей «М.Видео» часто возникают вопросы.

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

Плюс: поработали над взаимодействиями — анимация возникновения отличная. Для сканирования контента именная такая скорость и нужна.

Не сделали выпадающие списки на табах в меню, хотя это must have для всех интернет-магазинов.

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

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

При этом есть страница «Новинки». То ли вкусы у нового дизайнера весьма специфичные, то ли с вёрсткой что-то пошло не так. Скорее всего, и то, и другое. Стрелки сделаны гениально — в нужное время, в нужном месте.

Теги в png на ретине выглядят на 10/10.

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

В каталоге при скролле с тачпада всё начинает неистово флексить.

Классно, что вынесли в мегаменю «Подборки» и «Не пропустите», но получилось много текста — тяжело воспринимать. На мой взгляд, нужно дополнить категории иконками или иначе усилить визуальный контраст.

Google на минималках. Не показывает категории, статьи, бренды и карточки с фотографиями.

Фильтры в результатах поиска и в каталоге отличаются.

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

Выбранные пункты в фильтрах нигде не отображаются. Если нажать на критерий и случайно свернуть раздел сайдбара — потеряешься навсегда.

Неплохо сделал Ozon. Если параметров больше десяти — их нужно свернуть в раздел «Посмотреть всё». Ещё важно формировать ожидание от количества и показывать, сколько именно пунктов откроется. Идеально дополнить фильтр поиском.

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

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

Не хватает специальных сортировок для категории. Baymard уже писал об этом. Сортировка — удобный и недооцененный инструмент в eCommerce. Почему бы не дать пользователям сделать сортировку по размерам экрана в категории «Телевизоры»?

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

Минус: нет графического представления рейтинга, только числовое.

Плюс: выводят тематические разделы.

Минус: В сравнения добавить можно, а в избранное — нет. Если человек не может добавить в избранное — он будет пользоваться корзиной и портить статистику.

Внутри сравнения поехала вёрстка.

Понимаю, что это мелочи, но с ресурсами «М.Видео» можно было постараться и потестить верстку серьёзнее.

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

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

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

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

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

В карточках товаров текст 12 кеглем — совершенно нечитабельно. Посетитель с плохим зрением даже не будет стараться что-то рассмотреть. Много пустого пространства, огромные отступы, полоски — кому? Зачем? SEO-текст написан 16 кеглем, а важные параметры, ради которых карточка существует — 12.

Плюс: «Осталась одна штука» — давят на синдром упущенной выгоды. Должно помочь маркетингу и сформировать ожидания пользователей.

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

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

Проблема с изменением состояния кнопки «Добавить в корзину» на «Перейти в корзину» в том, что я не смогу добавить два товара сразу. Хорошо, что в корзине количество всё ещё можно менять.

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

«М.Видео» требует зарегистрироваться, чтобы посмотреть товар онлайн. Логин волл может стать причиной снижения конверсии.

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

Характеристики

Большие и подробные, но в таблицах мелкий текст и слабая типографика.

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

Отзывы

Решили проигнорировать числовое отображение оценки. Для покупателя 4,8 значительно отличается от 4,5.

Реакция на комментарий сделана далеко и незаметно — серое на сером.

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

Часть городов смотрит на старое оформление, часть — на новое, но с множеством недоработок. Что это покажет — неизвестно. Возможно, тестировать дизайн решили сначала на тех, кто приносит меньше прибыли. Много вопросов, мало ответов.

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

Расскажите, как вам рубрика? Если понравилось, подпишитесь на нас и оставьте самые ненавистные сайты на «Дизайн-прожарку» в комментариях.

#мвидео #редизайн