Ищем разработчика, который без ума от JavaScript и клёвых анимаций
Дизайн
Mojo
10 715

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

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

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

Выводы

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

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

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

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

Mojo — digital-студия с фокусом на дизайне. Разрабатываем интерфейсы с заботой о клиентском опыте.
{ "author_name": "Mojo", "author_type": "self", "tags": ["\u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d","\u043c\u0432\u0438\u0434\u0435\u043e"], "comments": 67, "likes": 54, "favorites": 142, "is_advertisement": false, "subsite_label": "design", "id": 166465, "is_wide": false, "is_ugc": true, "date": "Wed, 14 Oct 2020 17:05:38 +0300", "is_special": false }
Объявление на vc.ru Отключить рекламу
SEO
Как мы продвигали крупный обувной интернет-магазин по трафику
В сентябре 2017 года к нам в iTargency пришел довольно крупный интернет-магазин обуви. За два года работы с нами общая…
0
67 комментариев
Популярные
По порядку
Написать комментарий...
26

Ребята @Mojo вы серьезно?!😂

Ответить
0

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

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

Ответить
3

Однозначно! Я вас прожарю сразу))

Ответить
5
Ответить
4

💙 мы любим погорячее.

Ответить
1

Кого-то он мне напоминает

Ответить
0

Ой, и меня не забудьте! Хочется же посмотреть на труды людей, которые критикуют мвп редизайнов всех подряд ;) что бы прям зайти на сайт mojo и обалдеть

Ответить
0

Похоже, пора открывать регистрацию на мероприятие :)

Ответить
1

Не повторите учесть Сбера 😂

Ответить
0

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

Ответить
9

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

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

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

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

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

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

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

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

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

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

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

Ответить
4

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

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

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

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

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

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

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

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

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

Ответить
1

Что-то как-то мимо прошло) Спасибо за приз, поймал) 

Ответить

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

9

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

Ответить
0

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

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

Ответить
2

У вас небольшой сайт и не думаю что вы обновляете контент там каждый день (проекты добавлять это все же требует времени). Можете сделать вообще на (почти) чистом html/css/js. Нет ничего, чтобы бы вам понадобилось, что не сделать сделать без фреймворка/сервиса. Это может показаться дико сейчас, когда почти любой фронт-энд считает дабы не отстать нужно разбираться с каждый новой технологией/фичей допустим раз в месяц (а то и чаще). Хотя на самом деле стоит удалять фичи, редуцировать, оптимизировать.

Современный веб страдает от энтропии, когда один раздутый фреймворк прикручивается (синей изолентой) к другому фреймфорку и API работают поверх API. Лучше back to the primitive . Это добавит аутентичности (больше кастомизации страниц с учетом контента проекта например) гибкости, скорости (стоит ли говорить, что vanilla будет работать значительно быстрее чем любой фреймворк). В разработке, скорее всего тоже будет быстрее, так как меньше настройки, меньше поиска багов и допиливания напильником. Ближе к дизайну, почти все по верстке можно сделать (если конечно дизайнер не выдумывает мега-экшен анимацию в афтер эфекте). Чтоб не копировать повторяющиеся компоненты достаточно сборщика 

Ответить
0

У нас портфолио должно обновляться довольно часто. Не так, как сейчас 😇

А еще мы планируем одну штуку с ежедневными обновлениями. Так что будет немного не back to primitive. 

Ответить
1

Тут Вас уже вызвались прожарить, так что не претендую), а в фокус-группу зовите 🧐

Ответить
0

Договорились, мы запомнили :) 

Ответить
6

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

Ответить
0

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

Ответить
5

в мире есть вещи и пострашнее, например, редизайн «М.Видео»

🤣

Ответить
0

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

Ответить
0

Рады, но не рады?

Ответить
0

Это какой-то глюк

Ответить
4

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

Ответить
2

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

Ответить
0

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

Ответить
0

Мы люди простые

Ответить
0

Нет, движок такой - с особенностями.

Ответить
3

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

Ответить
0

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

Ответить
2

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

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

Ответить
1

Заметил, что цены изменились почти во всех интернет-магазинах. Возможно это произошло из-за курса рубля 

Ответить
3

Просто оставлю это здесь 

Ответить
0

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

Ответить
1

Не в 2020 году. с маркетплейсами. и когда 2 или 3 ссылка это алик, с доставкой в 5-10 дней. Может быть раньше, но не сейчас. Или я ошибаюсь?

Ответить
1

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

Ответить
0
Ответить
0

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

Ответить
1

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

Ответить
1

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

Ответить
1

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

Ответить
1

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

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

Ответить
1

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

Ответить
1

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

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

Ответить
0

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

Ответить
1

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

Ответить
0

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

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

Ответить
–1

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

Ответить
1

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

Ответить
0

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

Ответить
1

Это не гипотеза. Речь идёт о том как это сделано в мвидео. Я так заказал телефон у них и оплатил его онлайн. После заказа я узнал что товар оформился не в тот магазин на самовывоз который был в избранном, а в первый попавшийся. 
Далее я позвонил в колл-центр и попросил переоформить заказ, в результате чего менеджер по телефону сказал что товар который числится как одна штука, это ветреный образец. В результате отказ, потому что мне не нужен товар с ветирины . Вот такой замечательный ux на сайте мвидео.

Ответить
0

Ужасная история. Спасибо, что поделились, будем знать 👍

Ответить
1

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

Ответить
0

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

Ответить
0

У Мвидео и Эльдорадо один владелец, некоторые сходства, вроде товара дня, не удивительны 

Ответить
2

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

Ответить
0

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

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить

Комментарии

null