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

Дизайнер Андрей Якушев написал решил купить себе кроссовки на сайте Wildberries. Не получилось. Тогда он заказал их в другом магазине, а по результатам своих мытарств написал забавную колонку, в котором разобрал многочисленные недостатки самого крупного интернет-магазина России. Читайте!  

Wildberries - номер 1 eCommerce-проект в России с почти ~110 000 заказов в день (Lamoda, следующий в рейтинге магазин одежды, имеет в 10 раз меньше). Сам работая в eCommerce не раз продавал дизайн решения, мол вон, у Wildberries так, можно делать, работает! И дальше особо не вглядывался. Номер один -  авторитет.

На днях решил купить себе кофту с замком и спортивные кроссовки. То что визуально сайт выглядит не ухоженно, списывал на доступность интерфейса для всех групп населения и сложность изменения в больших проектах, плюс радикальные изменения дизайна могут прибивать конверсию на какое то время. Но нет. После попытки воспользоваться их интерфейсом понял, что все гораздо хуже и глубже. Систематически плохо везде. И единственное простое объяснение которое я вижу, что интерфейсных дизайнеров к интерфейсу у них не подпускают. Итак, оценка интерфейса https://wildberries.ru/ методом здравого смысла.

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

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

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

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

Регистрация

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

• Каждый новый инпут в форме увеличивает процент отказов на странице. Чем меньше инпутов, тем лучше.
• Формы в одну колонку заполняются проще, чем в две (Но если форма умеренных размеров, то для экономии места норм)
• Спрашивать только обязательные поля. Звездочку обязательных полей можно не ставить и просто все не обязательные поля выпиливать.

Как можно увидеть, ничего из этого в Wildberries не используется, ко всему этому: 

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

Подтверждение номера телефона. Вводим номер, нажимаем кнопку отправить и ждем: 

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

Можно было просто написать что код отправлен и смс придет в течении 5 минут подождите. Таймер на худой конец поставить. Ну в общем можно придумать тысячу более лучших решений и текстов.

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

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

Умные Defaults

Слева - дефолтный вью фильтра размер в разделе «Мужская обувь» (не "детская", "юношеская" и т.д., а мужская). 

Первыми в мужской обуви идут, конечно же, размеры 20–30. Окей. Ищем мой 42. Он почему-то идет не по порядку. Ну как так?

Далее можно открыть фильтр с составом и увидеть там 100 разных свойств, в которых ни один человек не сориентируется.

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

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

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

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

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

Закон Фиттса

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

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

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

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

Don’t be a jerk, guys!

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

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

Все подряд

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

Корзина

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

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

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

Это честно так работает. Это Москва!

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

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

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

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

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

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

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

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

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

А где хорошо?

Два первых места в мировом топе вполне достойны по интерфейсам (и, кстати, оба на реакте):

1. http://www.zalando.com/

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