Как не нужно делать Ecommerce на примере №1 екома России

Вайлдберес номер 1 екомерс проект в России с почти ~110 000 заказов в день(ламода, следующий в рейтинге магазин одежды, имеет в 10 раз меньше). Сам работая в екомерсе не раз продавал дизайн решения, мол вон, у вайлдбериc так, можно делать, работает! И дальше особо не вглядывался. Номер один — авторитет. На днях решил купить себе кофту с замком и спортивные кроссовки. То что визуально сайт выглядит не ухоженно, списывал на доступность интерфейса для всех групп населения и сложность изменения в больших проектах, плюс радикальные изменения дизайна могут прибивать конверсию на какое то время. Но нет. После попытки воспользоваться их интерфейсом понял, что все гораздо хуже и глубже. Систематически плохо везде. И единственное простое объяснение которое я вижу, что интерфейсных дизайнеров к интерфейсу у них не подпускают. И так, оценка интерфейса https://wildberries.ru/ методом здравого смысла.

Информационная архитектура

Главная страница с телефона

Хотим купить кроссовки. Мужские. Нам подходят разделы мужчинам и обувь. Но иконка у обуви — женская. Давайте попробуем раздел «Мужчинам». И так, мужчинам — фильтры—… А там пусто. Нету сортировки по типу? И куда тут? Где найти мужскую обувь?

Окей, нужно было идти в обувь. Идем в обувь, но и там нет кроссовок, пытаемся это отфильтровать и … нельзя. Что делать? Куда идти? Где мне найти мои кроссовки?

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

Регистрация

Что мы знаем про формы?

— Каждый новый инпут в форме увеличивает процент отказов на странице. Чем меньше инпутов, тем лучше.

— Формы в одну колонку заполняются проще, чем в две (Но если форма умеренных размеров, то для экономии места норм)

— Спрашивать только обязательные поля. Звездочку обязательных полей можно не ставить и просто все не обязательные поля выпиливать.

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

—Перемещение по форме табами сначала идет слева направо, а на пароле сверху вниз

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

Подтверждение номера телефона. Вводим номер, нажимаем кнопку отправить и ждем:
—Текст успешной отправки выглядит как ошибка

—Видно что люди не дожидаются смс и хотят еще, поэтому дописали текст про задержку (шрифтом на два пункта меньше). Можно было просто написать что код отправлен и смс придет в течении 5 минут подождите. Таймер на худой конец поставить. Ну в общем можно придумать тысячу более лучших решений и текстов.

В моем случае, смс ни пришло совсем, а следующее отправить мне не удалось. Решил повторить на следующий день и примерно через 12 часов я все еще видел сообщение, что исчерпал смс-сообщения. Такой день. Зарегистрироваться мне так и не получилось. Вопрос где выбирать: на ламоде или вайлдберес решился сам по себе.

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

Умные Defaults

Слева дефолтный вью фильтра размер в разделе «Мужская обувь» (ни детская, юношеская и т.д., а мужская). Первыми в мужской обуви идут конечно же размеры 20–30. Окей. Ищем мой 42. Он почему то идет не по порядку. Ну как так?

Далее можно открыть фильтр с составом и увидеть там 100 разных свойств, в которых ни один человек не сориентируется. Да, просто так у них забито в базе и они это вываливают на вас, а вы сами разберетесь. (Расскажу по секрету, множество одинаковых для юзера свойств можно объединять в одно на фронте и упрощать жизнь людям)

Продуктовые фото

Угадайте где вайлдберес, а где ламода? Ну вы поняли. Фото важны. Фото ключевой фактор по которому выбирают одежду. (Подскажу: слева вайлдберес, справа ламода)

Обратная связь

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

Закон Фиттса

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

Черные паттерны

Видите эти три точки в мобильной корзине? Нажав на них, мы увидим выбор из единственного пункта «Удалить». Логично же показать его сразу в корзине? Совпадение? С одной стороны не думаю, а с другой видя все раздолбайство интерфейса сайта, вполне может быть. Отвечу Аланом Купером:

Don’t be a jerk, guys!

Теория близости

Лето 18 это к верху или к низу? А какая впрочем уже разница. А еще обратите внимание на переключение сетки каталога. Там отображается не следующий тип сетки, который включится, а текущий. Великий рандом.

Все подряд

Смотрим на иконку шаринга слева, потом на иконку шаринга по центру и на кнопку «показать все» там же, а далее обратите внимание на падниги у сердечка справа (левый и правый скриншоты с мобилки)

Корзина

Как вы думаете, что значит иконка «обновить» в корзине? Правильно, изменение размера товара, а не пересчет корзины, как вы могли подумать!

Страница доставки

Давайте проверим доставку по своему адресу. Слева прекрасный автосаджест адреса, в котором нет ховеров и отступов. Далее если мы выбрали Москву, то единственная улица — Без улицы. А выбрав улицу без улицы, получаем пустой список «Дом, строение» и следовательно ошибку валидации формы и не можем ничего найти. Это честно так работает. Это Москва!

Мобильное приложение

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

Да ты ничего не понимаешь

— Дизайнеры как понарисуют, а у нас воронка просаживается!

— У них там все на метриках и все четенько оттестированно, ты ничего не понимаешь!

— Это стиль такой, ближе к народу, обычным людям это нравится и выглядит дешевле, ты ничего не понимаешь, он продает!

— Они номер один в рунете, а ты кто такой? И вообще не грози южному централу, попивая сок у себя в квартале!

Почему все так плохо?

Думаю объяснение самое простое: сайт был создан сто лет назад, ребята удачно вложились в ассортимент, маркетинг, дистрибуцию, это выстрелило. Профит, в айти можно не вкладываться. В общем более высокоуровневые потребности побеждают дизайн(сорян дизайнеры). Люди будут страдать, но выбирать из n-раз большего каталога и бесплатной доставки в любую точку России. Ну и кажется дизайном рулит маркетинг, а не здравый смысл. Честно сказать мне жалко дизайнера кто там работает. Вроде бы работаешь в компании номер один на рынке, видишь тысячи косяков на сайте, а сделать ничего не можешь (БЕГN).

А где хорошо?

Два первых места в мировом топе вполне достойны по интерфейсам(и кстати оба на реакте):
1. http://www.zalando.com/

2. http://www.asos.com/

Ну и в рунете https://www.lamoda.ru/ которая занимает справедливое второе место в екомерсе одежды рунета с отлично проработанным интерфейсом и очень грамотным маркетингом (реально догоняют очень грамотным таргетингом меня по всему интернету и я даже ведусь!)