Аналитика развития дизайна маркетплейсов в России

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

Это поможет посмотреть и проанализировать, как крупные компании растут и развивают сервис для своих партнеров и покупателей: что прижилось, а что наоборот стало лишним и изжило себя, какие элементы улучшились и улучшились ли вообще.

Для сравнения страниц маркетплейсов мы выбрали книгу «Интерфейс. Основы проектирования взаимодействия» Алана Купера и Роберта М. Рейманна в качестве примера.

Мы обратили внимание и сделали скриншоты следующих элементов:

• Главной страницы;
• Меню каталога;
• Поисковой строки;
• Поисковой выдачи;
• Карточки товара.

Мы начинаем...

Один из самых старых интернет-магазинов России, который с недавнего времени стал еще и маркетплейсом. В категориях продаваемой продукции можно и потеряться, но основными являются: электроника, книги, одежда и обувь, детские товары, товары для дома и сада, ж/д и авиабилеты. Несомненно это хорошо для покупателей, ведь в одном месте можно приобрести практически всё.

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

Меню каталога не умещается в один экран прокрутки, что неудивительно при таком обилии товаров. Очень удачно реализован поиск с уточнением категории и предварительной выдачей.

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

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

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

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

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

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

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

Интерфейс сохранил стиль и легкость своего предшественника. Узнаваемый стиль, но уже с атрибутами и блоками интернет-магазина. Паттерн меню схож с предыдущим маркетплейсом. А вот поиск товара не кажется настолько же удобным и простым. Возможно, сказывается «заточенность» сервиса под технику. Озадачивает выбор между «Везде» и «Покупки в Маркете» и вызывает чувство, что нас чего-то лишили. Также не сразу становится понятно, где конкретно найден товар: на Яндекс.Маркет или в другом магазине.

Напоминаем, что для сравнения страниц маркетплейсов мы выбрали книгу «Интерфейс. Основы проектирования взаимодействия». Нам удалось найти нужный товар, указав его полное название. Такого же мощного представления товара здесь, как на OZON нам встретить не удалось, но назвать страницу неполной мы всё же не можем. Страница товара выглядит лаконично, но не сразу ясно — книгу можно купить здесь же или нужно перейти в другой магазин?

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

Карточка товара в мобильной версии дает больше понимания, где конкретно товар можно приобрести, благодаря плавающему блоку с кнопкой «В корзину».

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

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

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

Поиск по сервису кажется немного проще, но фишка с поиском по картинке определенно достойна внимания. И самое главное, она отлично работает.

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

Тут всё отлично. Информативно, кратко и легко. Функция поиска по текстовому запросу и поиску по изображению работает ожидаемо хорошо.

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

Следующий маркетплейс, входящий в группу компаний «М.Видео-Эльдорадо» — это Сбер мегамаркет (ex. Goods). Также 85% маркетплейса теперь владеет Сбербанк.

Основной целью площадки является идея популяризации непопулярных брендов, на примере опыта зарубежных аналогов: eBay, AliExpress, Alibaba.

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

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

Карточка товара скромна, но информативна, с большой подборкой рекомендованных или похожих товаров.

Просторно, свежо и легко. Поиск хоть и без «фишек», но работает ожидаемо и хорошо. Карточка товара расскажет обо всем.

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

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

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

Меню каталога – самое компактное из всех, что мы встречали в этой подборке. Это и не плохо и не хорошо, но почему-то захотелось немного «воздуха» между элементами. Нам кажется это бы добавило немного удобства в навигации.

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

В этом маркетплейсе не продается книга «Интерфейс. Основы проектирования взаимодействия», поэтому мы решили заменить ее и выбрали книгу «Информационные системы: протоколы, интерфейсы и сети. Практикум».

Карточка товара сохранила все атрибуты интернет-магазина — не пусто, но и не густо, а также «аккордеоны» и пустое пространство вызванное ими.

Некоторые элементы управления показались немного несоразмерными и не на своём месте, а некоторые и вовсе урезаны. «Припрятанные» элементы управления также не очевидны.

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

Оформление карточки товара располагает нужной информации и её дизайн не машет покупке.

Все выбранные нами маркетплейсы - сильные проекты с хорошо продуманными структурой и UX/UI дизайном. Нам будет интересно наблюдать за их дальнейшим развитием.

Вот и все. Первая часть статьи написана, скриншоты готовы, мнения высказаны, напоминание поставлено. Продолжение следует…