Дизайн-прожарка: что нужно поменять Wildberries

Если вы ещё не знаете, «Дизайн-прожарка» — рубрика, в которой команда Mojo разбирает интерфейсы интернет-магазинов. Мы по-прежнему не просто находим ошибки, но и рекомендуем свои решения.

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

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

Герой сегодняшней «Прожарки» — Wildberries. Маркетплейс четыре года подряд занимает первое место в топ-100 интернет-магазинов Data Insight. В 2020 году оборот онлайн-ритейлера вырос до 103,4 млрд рублей. Это самый высокий квартальный показатель за всю историю компании.

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

В «Дизайн-прожарке» мы не даём советов по кадровой политике и работе с партнёрами. Наша цель — сайты компаний. В этой сфере Wildberries тоже не преуспел, почему — расскажем ниже.

Меня зовут Женя Князев, и я — продуктовый дизайнер в Mojo. В этот раз начну с мобильной версии, потому что мы с вами знаем, откуда пользователи в основном ищут товары. А ещё мы почти завершили цикл статей про «мобилку» — рекомендую ознакомиться перед чтением «Прожарки».

Wildberries — единственный интернет-магазин с верхним таб баром в 2020. Пишите в комментариях, если встречали подобное где-то ещё.

Неудобный вариант навигации — мы уже писали об этом. Занимает место в ущерб контенту и заставляет пользователя заниматься растяжкой. Если переместить его вниз — пользы будет больше.

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

Снова мои любимые дефисы вместо минусов. Эта проблема встречается из магазина в магазин. Ребята, если вам нужна пара уроков по типографике, вы знаете, куда обращаться. С этим массовым помешательством нужно что-то делать.

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

Минутка вкусовщины: тени на карточках и кнопках слишком жирные и мрачные, как комментарии к нашей прошлой прожарке ASOS. Дизайн-команда «Райффайзенбанка» на своей конференции рассказывала, что лёгкие тени создают ощущение «воздушности».

Wildberries, похоже, наоборот хотел заземлиться.

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

В «мобилке» есть быстрый просмотр, но в него сложно попасть. Сойдёмся на том, что это не считается. Хоть Wildberries и вывесил тултип с пояснениями.

Быстрый просмотр — зло, писал об этом в цикле про дизайн интернет-магазина. Пользователь путается в структуре сайта и принимает модальное окно за страницу продукта. В окне быстрого просмотра информации меньше, чем на отдельной странице. Человек не находит нужные данные и ищет их в другом месте.

Кнопку «Добавить в корзину» я бы сделал ярче — это CTA, и больше — для этого перенёс бы её чуть ниже.

Фотографии на главной разномастные, из-за этого нет ощущения единства и чистоты. Чувство, будто зашёл в неприбранную детскую комнату. Возможно, это связано с тем, что Wildberries крупнее того же Ozon, и им сложно все товары изображать в одной стилистике. Брендов много и за всеми не уследишь.

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

Минус: нет возможности добавить в «Избранное» без регистрации. Люди будут пользоваться корзиной для сохранения товаров и портить метрики.

Фотографии в карточках хорошего качества, их можно приближать, они масштабируются — всё круто.

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

Забили на текст в навигации и на хлебные крошки. Стрелка — это всё, что у вас есть, чтобы вернуться на главную из карточки товара. Если пользователь попадёт в карточку из поисковой системы, он не поймёт, в какой части сайта находится. Плюс, из-за экономии места эту стрелку вообще могут не заметить.

Перенесли бургер-меню внутрь категории. Интересная механика, но непривычно. В фильтрах можно выбрать вид каталога. Хорошая функция, но в ней больше смысла, когда фильтрация находится на одной странице со списком продуктов. Здесь изменения не видны, пока не вернёшься обратно в каталог. Показывают применённые фильтры, но на отдельной странице. Лучше это делать над списком продуктов — уже писали в цикле про мобилку.

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

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

В похожих и сопутствующих товарах фильтрации нет. При этом там миллион вещей: ботинки, сумки, юбки, худи, как пользователю их разделять?

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

Нет слайдера у числовых фильтров. Впрочем, оно к лучшему. Лучше отсутствующий слайдер, чем плохо спроектированный. Во время тестирования «Бэймард» 50% испытуемых сталкивались с проблемами при использовании ползунков, потому что те были слишком чувствительными.

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

У фильтров есть поиск, это прикольно, но если ввести вместо 100 «сто» — система беспомощна.

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

Сортировки классические, то есть непонятные. Мы писали, что нужно внедрять сортировки по категориям. Чем рейтинг отличается от популярности — непонятно.

Скорее всего, это связано с частотой покупки, но почему бы так и не написать — «Чаще всего покупают»? «По цене min» и «max» — тоже странная история. Это от минимума к максимуму или наоборот? На мой взгляд, стрелка была бы более информативной.

Поиск по категории не работает. Крупному интернет-магазину вроде Wildberries с таким количеством товаров точно стоило бы задуматься об этой функции. Не пишут стоимость за единицу товара.

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

В аккаунте можно посмотреть историю посещений. Также Wildberries запоминает все товары, которые ты когда-либо открывал — это круто.

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

Минус: удаленные товары нельзя восстановить.

Оплата только онлайн, но это нововведения, связанные с карантином.

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

Wildberries — одни из немногих российских интернет-магазинов, кто прячет каталог в бургер-меню на десктопе. Скрывать навигацию, на мой взгляд, неудачное решение. Плюс, никто не подписал, что это каталог. Nielsen Normann Group в своём исследовании показали, что скрытую навигацию почти в 2 раза сложнее найти на странице.

Поиск слабый — не поддерживает распространённые поисковые запросы. Вводишь «порошок», а там химические соединения только для стирки. Поисковая выдача не показывает карточки товаров и категории. Хорошо, что отражают частые поисковые запросы (либо просто залежавшиеся товары).

Пользователи вводят в поиск не только точные запросы, но и свои проблемы, когда не знают, каким товаром их решить. Делаем запрос «много мух». Выдача предлагает купить «Новые правила деловой переписки». Что ж, будем бить мух Ильяховым, хорошо.

Классно, что делают для поисковой выдачи дополнение с тематическими тегами. Правда, иногда они выглядят странно.

Есть поиск по фото — для крупного маркетплейса must-have-механика.

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

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

Можно сделать карточки побольше, как в каталоге, например. Поменять форматы, чтобы они были не такие однотипные. В общем, с визуалом надо что-то делать, чтобы его проще воспринимали. Сейчас это просто бесконечная хаотичная лента.

Заголовок «Хиты продаж» вообще теряется в этом сумбуре. Не знаю, использует ли Wildberries вебвизор и проводит ли какие-то исследования. Мне кажется, неопытный пользователь не отыщет в ленте заголовки.

Например, «М.Видео» сделал карточки не такими мелкими. Из-за ранжирования разных по размеру элементов домашняя страница выглядит чище и приятнее. Благодаря хорошим отступам заголовки не теряются.

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

Ужасно: Wildberries сокращает названия товаров. Так делать нельзя. Модель и серия выпуска должны отображаться вместе. А ещё отдельный дизреспект за Вы с большой буквы.

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

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

Но если нажать «Смотреть все», начинается трэш. Непонятно, зачем окно с прокруткой, если внизу есть список по алфавиту.

Теги текстом — их лучше поместить в «островки».

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

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

Минус: если захочется попасть наверх с конца страницы — нет кнопки.

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

К слову, это то, чем маркетплейс может гордиться — пунктов выдачи действительно много. Хоть к сайту это и не относится. Обратите внимание, как Wildberries отказался от фирменного узнаваемого цвета в угоду ЧП — проверенный временем маркетинговый ход.

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

Плюс: можно увеличивать изображения. Хотя, без этой функции в интернет-магазине никто покупать не будет.

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

Wildberries использует вертикальную карусель для фотографий — пользователи не станут листать её до конца.

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

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

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

К слову, Ozon даёт возможность добавить несколько позиций в корзину и показывают цену товара за единицу. Плюсом, на странице продукта в видное место выносят UGC. Wildberries заставит вас сделать 3-4 скролла, чтобы добраться до отзывов.

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

Плюс: большинство фильтров дополнены внутренним поиском.

Как и в «мобилке», удалённый товар нельзя восстановить. Зато кнопка «Удалить» появляется при наведении курсора на продукт — неплохая функция, уменьшает визуальную нагруженность.

Минус: нельзя менять цвет и размер в корзине.

Wildberries жмёт смски для уже зарегистрированных пользователей — предлагает посмотреть код на другом устройстве. Если доступа к телефону нет — жди целую минуту. А ещё сервис постоянно пытается навязать СМС-рассылку. Это серая механика, которая увеличивает метрику подписки, но бесит пользователей. Мы в Mojo такое не любим.

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

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

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

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

По традиции, оставляйте заявки на следующие «Прожарки» в комментариях. Ответьте на вопрос, встречали ли вы верхний таб бар где-то ещё.

Не забудьте «+1» и подписывайтесь на Mojo, если нравится рубрика и хотите ещё :)

#wildberries