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

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

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

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

Выводы

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

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

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

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

6464
68 комментариев

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

27
Ответить
Автор

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

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

1
Ответить

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

Ответить

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

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

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

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

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

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

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

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

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

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

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

10
Ответить
Автор

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

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

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

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

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

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

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

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

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

4
Ответить

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

9
Ответить