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

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

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

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

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

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

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

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

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

Мобильная версия

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

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

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

Главная страница

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Карточка товара

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

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

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

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

Категории

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Регистрация и корзина

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

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

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

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

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

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

Десктопная версия

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

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

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

Поиск

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

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

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

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

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

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

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

Главная

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Карточка товара

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

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

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

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

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

Каталог

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

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

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

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

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

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

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

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

Корзина

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

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

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

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

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

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

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

Выводы

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

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

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

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

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

5757
80 комментариев

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

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

Плачем всем дизайн-отделом 😂 Пиращик тоже пустил скупую слезу.

17
Ответить

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

27
Ответить

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

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

Идеальный интернет-магазин с идеальным бюджетом на проект и идеальным заказчиком — было бы здорово о таком рассказать :)
Если серьёзно, то в скором времени мы опубликуем кейс, которым действительно гордимся. Скриншоты из проекта есть почти в каждой статье про «мобилку». 

3
Ответить

вооот, это очень хороший вопрос :) как тут подписаться на комментарии?

2
Ответить

Каталог у wildberries очнеь неудобный. К примеру вбиваем в поиск носки, жмём на понравившиеся, как дальше попасть в раздел носки?
Или нашли телевизор LG, выше появились подкатегории. (часто их нет)
 Что будет если мы нажмём на LG? Не угадали. Мы попадём в каталог всех товаров по бренду LG. Включая холодильники, микроволновки и тд . А не телевизоры торговой марки LG.

10
Ответить