Дизайн-прожарка: что не так с редизайном «М.Видео»
«Дизайн-прожарка» — рубрика, в которой команда 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.
Реакция на комментарий сделана далеко и незаметно — серое на сером.
Выводы
Я понимаю, что редизайн запускают итерациями, но способ тестирования довольно странный.
Часть городов смотрит на старое оформление, часть — на новое, но с множеством недоработок. Что это покажет — неизвестно. Возможно, тестировать дизайн решили сначала на тех, кто приносит меньше прибыли. Много вопросов, мало ответов.
Расскажите, как вам рубрика? Если понравилось, подпишитесь на нас и оставьте самые ненавистные сайты на «Дизайн-прожарку» в комментариях.
Комментарий недоступен
Мы были готовы оправдываться заранее :) У нас сейчас слабенькая, мягко говоря, заглушка на ReadyMag вместо нормального сайта.
Хороший можно будет покритиковать уже в начале 2021 года! Позвать вас?
а что именно на этом экране не так? :)
1. Банеры намного веселее чем серые бездушные блоки, это сайт продаж и маркетинговая составляющая вполне логична. В баннерах отражены key visual продуктов и целевым группам проще сориентироваться по ним чем вчитываться в однотипные блоки. Основная навигация, как в любом магазине, заложена в каталоге и поисковой строке. Поиск, может, не самый лучший — в предиктиве не предоставляют выбор по категориям поиска. Со своей задачей поиск справляется хорошо. Про цикличность. Думаю, дизайнеры заложили ограниченный набор баннеров и индикация количества тут не нужна. Что нам даст знание о количестве баннеров? Обычный пользователь в этом контексте не будет об этом задумываться. Про начало и конец и карусели. Отчетливо виден прием обрыва петли на твоем же скрине — отсутствие отступа между первым и последним баннером. Решение спорное, сначала может показаться что баг, но думаю все же прием)
2. Про стрелки. Возможно, метрика показала что на них не кликали. В качестве эксперимента решили сделать их более заметными и чтобы на нах хотелось нажать.
3. Про статус заказа. Когда авторизуешься, вместо Статуса заказа икона с Бонусами мвидео. Статус заказа нужен для пользователей, которые оформляли заказ будучи неавторизованными. Все логично. Для авторизованных юзеров статус заказа отображается в личном кабинете.
4. Про неактивность корзины, избранного и сравнения соглашусь. Может, это своего рода, эксперимент))
5. Про выпадающие списки. Это не основные категории, а выдержки из каталога, которые, наверное, периодически меняются в зависимости от задач бизнеса. Какой выпадающий список должен быть у iPhone 12?)
6. Про поле ввода мыла в блоке с подпиской. Маски для мыла — спорная тема. Не известно сколько символов до собаки, сколько после, какой домен. В любом случае придется переставлять курсор самостоятельно. А вот подсказку с примером под полем можно было бы вывести в случае неудачи, соглашусь. При авторизации, мыло всегда подставлено автоматически, остается только кнопку нажать.
7. Не думаю что для инет магазина техники нужен функционал изменения количества товара на карточке товара, это не аптека и не магазин продуктов
Остальные — дельные замечания)
Сначала хочу сказать, кайфовый коммент. Всегда радуюсь, когда на vc.ru есть, с кем поболтать. Обо всем по порядку ниже:
1. Баннеры веселее. К сожалению, если их слишком много, то они такие однотипные, как и любые другие элементы. На мой взгляд, прием с «обрывом петли» максимально спорный. Я бы не стал использовать никогда :) Плюс, оно нетипичное, а значит кроется еще и законом Джейкоба
2. Было бы интересно глянуть, потому что я очень сомневаюсь в этом. В целом, штука минорная. Я просто предложил потенциальное улучшение для UI.
3. Тут никаких вопросов у меня не было. Механика прикольная.
4. Ну я просто хейтер выключенных кнопок. Не вижу от них профита и триггерюсь везде, где замечаю.
5. Тут получилась неловкая история и мой косяк. Материал готовился до презентации iPhone и там были просто «ноутбуки», «телевизоры» и т.д. А скриншоты сделали уже после. Теперь претензий никаких)
6. Маски могут просто задавать формат, не ограничивая количество знаков до @ или до .
7. Для крупных товаров — да. Для аксессуаров я бы сделал. Основной вопрос все же в модалке — почему от нее решили отказаться? И очень хочется посмотреть, упадут ли из-за этого допродажи.
Приз за лучший комментарий 💙
Комментарий удален модератором
Рискованно студиям писать такие посты. Первая картинка — понятно, на второй, если кто не понял — загрузка страницы где нет ничего кроме текста. Понятно, что интернет у всех сейчас быстрый, но все равно страшно представит какой там ад в коде.
Сайт у нас самих — слабая заглушка на редимаге, чтобы как-то конверсить людей.
Но мы уже пилим новый и приглашаем вас стать частью нашей фокус-группы, если хотите 😉
Токсичность 1/10, тактичность и конструктивность 10/10 🌶
Спасибо,что обратили внимание на просьбу в начале :) Старались не жестить с панчлайнами.
🤣
Рады, что кому-то заходит наш юмор :)
💙
Странно что косяков верстки и сетки никто не описал развернуто.
На это ушла бы ещё одна статья. Кстати, спасибо за идею.
потому что им пофиг на верстку и они в ней видимо не разбираются
Коллеги, благодарим вас за внимание к нашей работе и подробный аудит. Мы всегда ценим обратную связь и принимаем её во внимание. Об основных проблемах мы знаем и работаем над их устранением. Это только первые обновления на пути к новому сайту, который станет максимально удобным и полезным для клиентов. Уже сейчас мы видим позитивный фидбэк, а также улучшение бизнес и технических метрик. Мы продолжим выкатывать новые изменения итерационно, будем рады услышать вашим идеи и предложения.
Доброго времени суток! И вам спасибо за адекватную реакцию на нашу публикацию 💙
Дизайн это безусловно важно. Но я, в основном, прихожу на подобные сайты чётко зная, что я хочу и мне нужно лишь узнать цену.
На скрине я вижу Redmi Note 8 Pro 6/128 за 21990 р. Лично я покупал его за 16500 р. с доставкой месяц назад. Такие завышенные цены гораздо сильней отталкивают, чем дизайн.
Комментарий недоступен
Вы правы, но среди прочих задач дизайна — сделать так, чтобы смартфон купили и за 21990 :)
Правда, это уже совсем другая история.
МВидео - это не про покупашек ради 3 рублей бегущих на другой сайт. Для них есть yandex market или Озон.
Спасибо за разбор полетов — рад перенимать опыт и полезные ссылки от профессионалов 🙂
Рады стараться 💙
На следующий неделе выйдет третья статья про «мобилку» — не пропустите.
Было бы любопытно прочитать про tickets.ru
Зачем тикетс, когда есть авиасэ...
Не совсем еком, но подумаю ✈️
"У товаров, которых нет в наличии, всё равно должен быть CTA."
А какой CTA здесь можно использовать? Возможность уведомления о поступлении? В карточке товара такой функции нет, значит, ее вообще не предусмотрено. Показать похожие модели? Но ведь пользователь и так находится в поиске по фильтрам, и ему показываются похожие по критериям позиции.
Конечно, уведомить о поступлении. Функция не предусмотрена — признак плохого проектирования. Нельзя отпускать пользователя без возможности снова с ним связаться.
Альтернативные товары обязательно показывать на любой продукт пейдж :)
Новая версия сайта получилась адски глючной, постоянно перекидывает в другие разделы, долгая загрузка, залогиниться невозможно (вернее зашел, но потом меня выкинуло, 3 раза пытался снова зайти, вводил смс, но все безуспешно). Фотографии низкого качества смотрятся не очень. Но больше всего режет глаз половинчатые обрубки товара в слайдерах справа! Я прекрасно понимаю задумку того, кто это придумал, но визуально это кошмар.
Мобилку сделали куда лучше. Очень понравился таб бар снизу, получилось удобно, об этом недавно писал Mojo. Классно сделали каталог (что мешало на десктопе так же сделать иконки рядом с категориями товаров?).
И подскажите, пожалуйста, не накладывает ли Яндекс фильтр на такие переоптимизированные страницы?
Дочитав до «фотографии низкого качества» — солидарно кивнул. На это обратил внимание при первом заходе на сайт. Сильно сжатие сделали, понятно, что в угоду быстрой прогрузки сайта, учитывая количество выводимых товаров, но есть примеры, когда с высоким качеством скорость просмотра сайта не падает.
Про фильтры ответить однозначно сложно. Нужно в динамике смотреть + проверять сайт в платном чекере на наложение фильтров.
Думаю, что SEO М.Видео следят за таким :)
Смотрите-ка, какой нежный эстет )))))) Такие не являются ЦА для М Видео.
«Осталась одна штука» - это товар с витрины, что вводит в заблуждение пользователя. Сам уже наступил на эти грабли...
Интересная гипотеза 🤔 Но не уверены, что это применимо ко всем интернет-магазинам.
Комментарий недоступен
Да, я выше уже рассказал, что мы накосячили. Разбор делали до айфона, там были просто категории. Скриншот сделали уже после — получилось нелогично :)
Комментарий недоступен
А я и не про Эльдорадо 🤔Там такая механика появилась сравнительно недавно. Первым мы заметили её у другого крупного ритейлера.
Может и статью для вас написать потом?
Как говорит наш редактор
Сейчас бы в 2к20 критиковать десктопную версию, когда 70% пользователей е-комов сидят с мобил, а в вебе давно прослеживается тенденция к переиспользованию мобильных элементов и унификации с ними.
Мобильный трафик действительно растёт, но в е-коме всё не так однозначно — конверсия в покупки ещё отстаёт. Пользователи выбирают товар с «мобилки», но завершают заказ с десктопа. В нашей статье есть ссылки на исследования.
ахах. рили. тем более разбор десктопной версии от джуна какойто непонятной студии. бесконечно ценная инфа.
а у какого ритейлера?
У «Связного», только 🤫
+1