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

«Дизайн-прожарка» — рубрика, в которой команда 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.

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

Выводы

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

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

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

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

0
68 комментариев
Написать комментарий...
Аккаунт удален

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

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

Мы были готовы оправдываться заранее :) У нас сейчас слабенькая, мягко говоря, заглушка на ReadyMag вместо нормального сайта. 

Хороший можно будет покритиковать уже в начале 2021 года! Позвать вас?

Ответить
Развернуть ветку
8 комментариев
Александр Львов

а что именно на этом экране не так? :) 

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

1. Банеры намного веселее чем серые бездушные блоки, это сайт продаж и маркетинговая составляющая вполне логична. В баннерах отражены key visual продуктов и целевым группам проще сориентироваться по ним чем вчитываться в однотипные блоки. 

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

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

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

2. Про стрелки. Возможно, метрика показала что на них не кликали. В качестве эксперимента решили сделать их более заметными и чтобы на нах хотелось нажать.

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

4. Про неактивность корзины, избранного и сравнения соглашусь. Может, это своего рода, эксперимент))

5. Про выпадающие списки. Это не основные категории, а выдержки из каталога, которые, наверное, периодически меняются в зависимости от задач бизнеса. Какой выпадающий список должен быть у iPhone 12?)

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

7. Не думаю что для инет магазина техники нужен функционал изменения количества товара на карточке товара, это не аптека и не магазин продуктов

Остальные — дельные замечания) 

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

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

1. Баннеры веселее. К сожалению, если их слишком много, то они такие однотипные, как и любые другие элементы. На мой взгляд, прием с «обрывом петли» максимально спорный. Я бы не стал использовать никогда :) Плюс, оно нетипичное, а значит кроется еще и законом Джейкоба

2. Было бы интересно глянуть, потому что я очень сомневаюсь в этом. В целом, штука минорная. Я просто предложил потенциальное улучшение для UI.

 3. Тут никаких вопросов у меня не было. Механика прикольная. 

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

5. Тут получилась неловкая история и мой косяк. Материал готовился до презентации iPhone и там были просто «ноутбуки», «телевизоры» и т.д. А скриншоты сделали уже после. Теперь претензий никаких)

6. Маски могут просто задавать формат, не ограничивая количество знаков до @ или до .

7. Для крупных товаров — да. Для аксессуаров я бы сделал. Основной вопрос все же в модалке — почему от нее решили отказаться? И очень хочется посмотреть, упадут ли из-за этого допродажи.

Приз за лучший комментарий 💙

Ответить
Развернуть ветку
1 комментарий

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

Развернуть ветку
Yury S

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

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

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

Но мы уже пилим новый и приглашаем вас стать частью нашей фокус-группы, если хотите 😉

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

Токсичность 1/10, тактичность и конструктивность 10/10 🌶

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

Спасибо,что обратили внимание на просьбу в начале :) Старались не жестить с панчлайнами. 

Ответить
Развернуть ветку
Джонатан Айв
в мире есть вещи и пострашнее, например, редизайн «М.Видео»

🤣

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

Рады, что кому-то заходит наш юмор :)
💙

Ответить
Развернуть ветку
2 комментария
НечеловеческаяЛогика

Странно что косяков верстки и сетки никто не описал развернуто.

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

На это ушла бы ещё одна статья. Кстати, спасибо за идею. 

Ответить
Развернуть ветку
1 комментарий
Paco Official

потому что им пофиг на верстку и они в ней видимо не разбираются

Ответить
Развернуть ветку
2 комментария
М.Видео-Эльдорадо

Коллеги, благодарим вас за внимание к нашей работе и подробный аудит. Мы всегда ценим обратную связь и принимаем её во внимание. Об основных проблемах мы знаем и работаем над их устранением. Это только первые обновления на пути к новому сайту, который станет максимально удобным и полезным для клиентов. Уже сейчас мы видим позитивный фидбэк, а также улучшение бизнес и технических метрик. Мы продолжим выкатывать новые изменения итерационно, будем рады услышать вашим идеи и предложения. 

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

Доброго времени суток! И вам спасибо за адекватную реакцию на нашу публикацию 💙

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

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

На скрине я вижу Redmi Note 8 Pro 6/128 за 21990 р. Лично я покупал его за 16500 р. с доставкой месяц назад. Такие завышенные цены гораздо сильней отталкивают, чем дизайн.

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

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

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

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

Ответить
Развернуть ветку
3 комментария
Vladimir Goncharov

МВидео - это не про покупашек ради 3 рублей бегущих на другой сайт. Для них есть yandex market или Озон.

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

Спасибо за разбор полетов — рад перенимать опыт и полезные ссылки от профессионалов 🙂

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

Рады стараться 💙
На следующий неделе выйдет третья статья про «мобилку» — не пропустите. 

Ответить
Развернуть ветку
Антон Кочергин

Было бы любопытно прочитать про tickets.ru

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

Зачем тикетс, когда есть авиасэ... 

Не совсем еком, но подумаю ✈️

Ответить
Развернуть ветку
Никита Шуплецов

"У товаров, которых нет в наличии, всё равно должен быть CTA."
А какой CTA здесь можно использовать? Возможность уведомления о поступлении? В карточке товара такой функции нет, значит, ее вообще не предусмотрено. Показать похожие модели? Но ведь пользователь и так находится в поиске по фильтрам, и ему показываются похожие по критериям позиции. 

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

Конечно, уведомить о поступлении. Функция не предусмотрена — признак плохого проектирования. Нельзя отпускать пользователя без возможности снова с ним связаться.

Альтернативные товары обязательно показывать на любой продукт пейдж :)

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

Новая версия сайта получилась адски глючной, постоянно перекидывает в другие разделы,  долгая загрузка, залогиниться невозможно (вернее зашел, но потом меня выкинуло, 3 раза пытался снова зайти, вводил смс, но все безуспешно). Фотографии низкого качества смотрятся не очень. Но больше всего режет глаз половинчатые обрубки товара в слайдерах справа! Я прекрасно понимаю задумку того, кто это придумал, но визуально это кошмар.
Мобилку сделали куда лучше. Очень понравился таб бар снизу, получилось удобно, об этом недавно писал Mojo. Классно сделали каталог (что мешало на десктопе так же сделать иконки рядом с категориями товаров?).  
И подскажите, пожалуйста, не накладывает ли Яндекс фильтр на такие переоптимизированные страницы?

Ответить
Развернуть ветку
Игорь Маркелов

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

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

Про фильтры ответить однозначно сложно. Нужно в динамике смотреть + проверять сайт в платном чекере на наложение фильтров.

Думаю, что SEO М.Видео следят за таким :)

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

Смотрите-ка, какой нежный эстет )))))) Такие не являются ЦА для М Видео.

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

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

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

Интересная гипотеза 🤔 Но не уверены, что это применимо ко всем интернет-магазинам.

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

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

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

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

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

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

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

А я и не про Эльдорадо 🤔Там такая механика появилась сравнительно недавно. Первым мы заметили её у другого крупного ритейлера.

Ответить
Развернуть ветку
Вася Пражкин
 Недостатки мобилки предлагаем вам найти самостоятельно

Может и статью для вас написать потом?

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

Как говорит наш редактор

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

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

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

Мобильный трафик действительно растёт, но в е-коме всё не так однозначно — конверсия в покупки ещё отстаёт. Пользователи выбирают товар с «мобилки», но завершают заказ с десктопа. В нашей статье есть ссылки на исследования.

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

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

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

а у какого ритейлера?

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

У «Связного», только 🤫

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

+1

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