Прожарка 12 STOREEZ: Pinterest с ценами или интернет-магазин?

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

Прожарка 12 STOREEZ: Pinterest с ценами или интернет-магазин?

Дисклеймер: в прожарке руководствуемся своим опытом, лучшими практиками на рынке, гайдами Baymard Institute, Nielsen Norman Group и других годных источников.

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

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

Иван Хохлов, Основатель бренда 12 STOREEZ

Но всё ли так же хорошо с дизайном? Разбираемся, насколько удобен сайт, всё ли на нём работает правильно, и как его можно улучшить. Как всегда с аргументами и ссылками на исследования.

Главная

Критическая проблема всей главной страницы — нехватка полезной информации. В фэшн-индустрии действительно важна визуальная часть, но 12 STOREEZ с этим переборщили и не добавили к одежде даже ценников. Вероятно, пользователь так должен впечатлиться фотографиями, чтобы купить вещи за любые деньги ;)

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

Первый экран

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

Видите стрелку карусели слева? А она есть…
Видите стрелку карусели слева? А она есть…

Заголовки баннеров не всегда достаточно информативны. Из-за этого пользователю сложно понять, куда приведет клик по ним, поэтому нажимать приходится наугад. Такие заголовки попадают в ToV, но путают пользователя. Для большей понятности можно добавлять подзаголовок, например, «Летняя коллекция одежды».

В случае с баннером пользователю не очевидно, зачем кликать на заголовок — чтобы случилось лето?
В случае с баннером пользователю не очевидно, зачем кликать на заголовок — чтобы случилось лето?

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

Истории

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

Но 12 STOREEZ рушит ожидания: истории ведут на страницы с подборками товара. Мы посмотрели интервью с руководителями компании и только тогда узнали значение блока: 12 историй — это 12 коллекций магазина.

Раздел историй также повторяет ошибку баннера: кнопки слайдера всё ещё малозаметны
Раздел историй также повторяет ошибку баннера: кнопки слайдера всё ещё малозаметны

Слайдеры с контентом

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

Видите кнопку «Все >» справа? А она есть…
Видите кнопку «Все >» справа? А она есть…

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

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

Пример похожих карточек от O’STIN: на них есть название, стоимость и цветовые вариации — пользователю проще получить представление о товаре
Пример похожих карточек от O’STIN: на них есть название, стоимость и цветовые вариации — пользователю проще получить представление о товаре

Блок с коллекцией

По всей странице распределены фотографии моделей с заголовками. Никакой информации, кнопок или призывов к действию больше нет. Словно компания просто сделала красивые кадры и организовала на сайте филиал Pinterest ¯\_(ツ)_/¯

Внешний вид блоков с коллекцией. К нему хочется задать типичный вопрос из школы: «Что хотел сказать автор?»
Внешний вид блоков с коллекцией. К нему хочется задать типичный вопрос из школы: «Что хотел сказать автор?»

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

Поиск

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

<p>Поиск содержит подсказки и кнопки для перехода в категории — это упрощает навигацию</p>

Поиск содержит подсказки и кнопки для перехода в категории — это упрощает навигацию

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

Поиск распознал запрос несмотря на пропущенную в слове букву и вывел релевантные предложения
Поиск распознал запрос несмотря на пропущенную в слове букву и вывел релевантные предложения

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

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

Яна Пономарева, руководитель отдела маркетинга FASHION OZON

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

Навигация

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

Также около категорий в навигации отсутствует индикация выпадающих списков. Это частично нивелируется быстрым откликом сайта, но все еще является UX-ошибкой.

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

Каталог

В левой части каталога можно встретить всё ту же мешанину из категорий, что и в навигации — проблема целиком перекочевала на эту страницу. Быстро найти нужный товар в таком списке всё так же невозможно.

Список занимает два экрана в высоту, поэтому об удобстве речь идти не может
Список занимает два экрана в высоту, поэтому об удобстве речь идти не может

Карточки товара в каталоге отличаются:

  • на карточках товара появилось название. Теперь пользователю стало понятнее, какой товар демонстрируется на фото;
  • миниатюры товара переключаются при наведении на карточку. Так пользователю не придётся открывать страницу товара, чтобы посмотреть больше фото. Хорошее решение;
  • появились иконки с цветовыми вариациями. Они не интерактивные: придётся покинуть каталог, чтобы посмотреть одежду в другом цвете. NNG рекомендует делать наоборот: так пользователю не придётся перемещаться между страницей товара и каталогом;
  • иконки с цветами слишком мелкие. Из-за этого не всегда можно понять, какие цветовые вариации есть — они просто сливаются друг с другом.
На примере из карточки видно, что темно-коричневый очень схож с черным. Людям с плохим зрением придётся всматриваться в иконки
На примере из карточки видно, что темно-коричневый очень схож с черным. Людям с плохим зрением придётся всматриваться в иконки

Фильтры

12 STOREEZ используют горизонтальные фильтры. С одной стороны, они могут быть удобнее пользователям, и именно такую фильтрацию рекомендуют Nielsen Norman Group и Baymard Institute. С другой — они могут быть непривычны, ведь в магазинах часто встречаются вертикальные фильтры.

Прожарка 12 STOREEZ: Pinterest с ценами или интернет-магазин?

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

Так выглядит фильтрация в 12 STOREEZ: цвет, размер и цена — универсальные характеристики для любой одежды
Так выглядит фильтрация в 12 STOREEZ: цвет, размер и цена — универсальные характеристики для любой одежды
Хорошие примеры фильтрации от ASOS и H&amp;M: можно выбрать платье под нужную длину, тип или сценарий
Хорошие примеры фильтрации от ASOS и H&M: можно выбрать платье под нужную длину, тип или сценарий

Стоит информировать пользователя о том, сколько товаров содержит категория, подкатегория или фильтр. Так пользователь может оценить широту ассортимента и понять, в какой момент ему остановиться и перестать сужать поиск.

Пример отображения количества товаров на lamoda. Это хорошая практика, но она пока неприменима к 12 STOREEZ из-за отсутствия разделения на категории
Пример отображения количества товаров на lamoda. Это хорошая практика, но она пока неприменима к 12 STOREEZ из-за отсутствия разделения на категории

Хорошая практика — отображение активных фильтров. Так пользователь не забудет, что применил дополнительные параметры поиска, и поэтому товаров так мало. Доработать отображение можно, если выставить все фильтры на виду, а не прятать в выпадающем списке.

В 12 STOREEZ показывается количество применённых фильтров, но чтобы вспомнить, какие именно применены, нужно нажать на кнопку
В 12 STOREEZ показывается количество применённых фильтров, но чтобы вспомнить, какие именно применены, нужно нажать на кнопку

Хорошая практика — отображение активных фильтров. Так пользователь не забудет, что применил дополнительные параметры поиска, и поэтому товаров так мало. Доработать отображение можно, если выставить все фильтры на виду, а не прятать в выпадающем списке.

Страница товара

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

В случае 12 STOREEZ стоит добавить на страницу товара способы доставки и их стоимость. Также нужно вывести блок отзывов — на них полагается 95% пользователей при оценке ассортимента интернет-магазина. В интерфейсе сайта стоит отобразить среднюю оценку и количество отзывов о товаре.

Чтобы посмотреть отзывы, пользователю потребуется целенаправленный клик — это может чуть снизить конверсию в покупку
Чтобы посмотреть отзывы, пользователю потребуется целенаправленный клик — это может чуть снизить конверсию в покупку

Хорошее решение — два блока с кросс-продажами. Такие элементы повышают средний чек и позволяют задержать пользователя в магазине. На нашем вебинаре руководитель группы проектов eCommerce в ДжамильКо Александр Соколов, уточнял, что крупным брендам такое решение помогает нарастить средний чек, а небольшим компаниям — познакомить клиента с ассортиментом.

12 STOREEZ предлагает удачные сочетания одежды: так пользователь сможет заинтересоваться дополнением к образу и купить больше вещей
12 STOREEZ предлагает удачные сочетания одежды: так пользователь сможет заинтересоваться дополнением к образу и купить больше вещей

На страницах товаров много изображений с разных ракурсов. Это очень важно для интернет-магазина — пользователь не может потрогать товар перед покупкой, поэтому полагается только на фотографии. В 12 STOREEZ изображения с отличным качеством: можно тщательно рассмотреть материал изделий.

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

О том, как правильно фотографировать товар для магазина одежды, мы уже писали в одной из прошлых статей: «Лучшие интерфейсные практики в фэшн-eCommerce: 10 UX-советов».

По фотографиям сумки из 12 STOREEZ пользователь может только представить, как будет выглядеть аксессуар, но не поймёт, насколько удобно им пользоваться
По фотографиям сумки из 12 STOREEZ пользователь может только представить, как будет выглядеть аксессуар, но не поймёт, насколько удобно им пользоваться

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

Хороший пример показывает CTOKMAHH: при аналогичной архитектуры страницы, магазин разместил всю необходимую информацию и оставил блок для связи
Хороший пример показывает CTOKMAHH: при аналогичной архитектуры страницы, магазин разместил всю необходимую информацию и оставил блок для связи

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

  • пользователь забудет, что сформировал ещё одну корзину и сделает заказ. А когда вспомнит про остальные товары, передумает их покупать, чтобы не переплачивать за доставку;
  • пользователь подумает, что товары в корзине сбросились, и теперь их придётся собирать заново. Расстроится и уйдёт с сайта.

Проблема усугубляется тем, что кнопка для заказа из магазина никак не отличается от кнопки «Добавить в корзину». Скорее всего, пользователь не заметит разницы и запутается в корзинах.

Помните мем с двумя Человеками-Пауками? Это его вариация от 12 STOREEZ
Помните мем с двумя Человеками-Пауками? Это его вариация от 12 STOREEZ

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

Корзина и оформление заказа

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

«Ваша корзина пока пуста, но наполнить её мы не поможем»
«Ваша корзина пока пуста, но наполнить её мы не поможем»

В корзине 12 STOREEZ не упростили футер и хэдер. Это неправильно: корзину стоит проектировать так, чтобы ничего не отвлекало пользователя от покупки — иначе он может уйти с сайта в последний момент.

Подробнее этот принцип мы разбирали в старой статье: «Дизайн интернет-магазина: что учесть, чтобы не облажаться, часть пятая»

Детализации заказа в корзине тоже не хватает, поэтому ценообразование непрозрачно. Чтобы не смущать пользователя, стоит отобразить количество товаров в корзине и сумму скидок и бонусов.

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

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

Решение проблемы от OZON: внутри одной корзины товары разделены по разным способам доставки
Решение проблемы от OZON: внутри одной корзины товары разделены по разным способам доставки

Пользователю не объясняют, из чего сложилась цена в карточке — подсчёты приходится вести самому. Это неудобно и тратит время потенциального покупателя.

Рядом с карточкой нет пояснений, какая цена отображается: за штуку или сразу за два товара
Рядом с карточкой нет пояснений, какая цена отображается: за штуку или сразу за два товара
Хороший пример снова показывает OZON: в корзине есть пояснения, из чего складывается цена за товар
Хороший пример снова показывает OZON: в корзине есть пояснения, из чего складывается цена за товар

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

Мы тоже не понимаем, зачем необходимо такое решение ¯\_(ツ)_/¯
Мы тоже не понимаем, зачем необходимо такое решение ¯\_(ツ)_/¯

Корзину стоит отделять от страницы оформления заказа. У такого решения есть несколько преимуществ:

  • оформления заказа становится проще. Пользователь переходит на новую страницу и видит только необходимые поля для заполнения, а не все сразу. Так легче сосредоточиться на задаче и сделать ее поэтапной.
  • аналитика становится точнее. Из-за разделения страниц данные сегментируются, и проще делать выводы о поведении пользователей на сайте. Например, можно узнать, на каком этапе пользователи чаще всего прерывают процесс оформления заказа и оптимизировать этот этап для увеличения конверсии.
Хороший пример от lamoda: корзина отделена от оформления заказа. Авторизоваться не вынуждают, а подбадривают с помощью скидки
Хороший пример от lamoda: корзина отделена от оформления заказа. Авторизоваться не вынуждают, а подбадривают с помощью скидки

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

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

Чтобы не пугать пользователя полотном текста, можно разделять поля для воода информации на небольшие блоки. Например, так делает Gloria Jeans
Чтобы не пугать пользователя полотном текста, можно разделять поля для воода информации на небольшие блоки. Например, так делает Gloria Jeans

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

Baymard Institute также рекомендует делать поля той длины, что и длина вводимой информации. Иначе пользователь может усомниться, всю ли, нужную информацию он ввёл в поле.

Прожарка 12 STOREEZ: Pinterest с ценами или интернет-магазин?

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

Пользователю также не подскажут, как исправить ошибку. Сайт выдаёт только формальное «Введите корректный email» или «Введите корректный номер телефона»
Пользователю также не подскажут, как исправить ошибку. Сайт выдаёт только формальное «Введите корректный email» или «Введите корректный номер телефона»

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

Идеально — обозначить примерные сроки доставки, чтобы пользователь сразу понимал, на что стоит ориентироваться
Идеально — обозначить примерные сроки доставки, чтобы пользователь сразу понимал, на что стоит ориентироваться

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

Пользователю просто предлагают ввести свои данные без объяснения причин
Пользователю просто предлагают ввести свои данные без объяснения причин
Хороший пример — наш проект IDDIS: в форме мы указали, зачем запрашиваем данные у пользователя
Хороший пример — наш проект IDDIS: в форме мы указали, зачем запрашиваем данные у пользователя

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

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

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

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

Иллюстрация «правила большого пальца» — навигация должна располагаться в зелёной зоне
Иллюстрация «правила большого пальца» — навигация должна располагаться в зелёной зоне

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

Apple в своих гайдлайнах рекомендует использовать зону касания не менее 44х44 px. А гайдлайн для Android не менее 48x48. По нашему опыту, можно использовать 40х40 px, но точно не меньше. При этом, если два кликабельных элемента стоят рядом, стоит делать отступы для удобства.

Размер кликабельного элемента в мобильной версии 12 STOREEZ почти в два раза меньше рекомендуемого — палец слишком большой, чтобы нажать по нему
Размер кликабельного элемента в мобильной версии 12 STOREEZ почти в два раза меньше рекомендуемого — палец слишком большой, чтобы нажать по нему

Навигация в мобильной версии скрыта. Это решение противоречит рекомендациям Nielsen Norman Group:

  • когда навигация скрыта, пользователи реже её используют;
  • люди начинают пользоваться навигацией позже, чем если бы она была видимой.
Максимально простое и эффективное исправление — таббар. При этом в приложении магазина уже есть готовое решение
Максимально простое и эффективное исправление — таббар. При этом в приложении магазина уже есть готовое решение

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

Чтобы найти кнопку входа, придётся вглядываться и читать весь список: долго и неудобно
Чтобы найти кнопку входа, придётся вглядываться и читать весь список: долго и неудобно

Пользователю нужно тянуться через весь экран, чтобы открыть поиск. А потом ещё раз тянуться через весь экран, чтобы активировать поле ввода. Выглядит как мини-пытка.

После активации поля ввода клавиатура появится снизу — и пользователю снова придётся тянуться, но уже в другую часть экрана
После активации поля ввода клавиатура появится снизу — и пользователю снова придётся тянуться, но уже в другую часть экрана

Фильтры и сортировку лучше разделять, так как это разные инструменты для работы с товарами. К тому же, открыв их, пользователя может смутить заголовок «Фильтры». А сортировка?

Ко всему прочему, фильтров ещё и мало: в мобильной версии любую одежду предлагают выбирать по трём параметрам
Ко всему прочему, фильтров ещё и мало: в мобильной версии любую одежду предлагают выбирать по трём параметрам

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

На одном экране в мобильной версии помещается 12 товаров — символично, но из-за этого на каждую фотографию приходится крошечная область
На одном экране в мобильной версии помещается 12 товаров — символично, но из-за этого на каждую фотографию приходится крошечная область

Кнопка для возвращения на прошлую страницу и индикация слайдера часто теряются на фоне фото.

Видите стрелку в левом верхнем углу? А она есть…
Видите стрелку в левом верхнем углу? А она есть…

На странице товара отсутствуют хлебные крошки. Без них навигация усложняется, и пользователю труднее переключаться между категориями. Исследование Baymard Institute показывает, что от проблем с хлебными крошками страдает 68% интернет-магазинов. Из них 45% — это сайты, где хлебные крошки отображают только предыдущий этап, и не учитывают путь пользователя целиком. Остальные 23% — интернет-магазины, где хлебных крошек вовсе нет. Это случай 12 STOREEZ.

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

Характеристики товара сливаются с его описанием, а кнопка «ЕЩЁ» теряется на фоне остального текста
Характеристики товара сливаются с его описанием, а кнопка «ЕЩЁ» теряется на фоне остального текста

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

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

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

Корзина в мобильной версии самостоятельная, форма для ввода данных появляется только после нажатия на кнопку «Оформить заказ»
Корзина в мобильной версии самостоятельная, форма для ввода данных появляется только после нажатия на кнопку «Оформить заказ»

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

Итог

Во всём сайте прослеживается свойственные фэшн-отрасли минималистичность и упор на визуал. Но как видно по статье, иногда с этим можно заиграться и превратить сайт в Pinterest.

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

Полноценно пользоваться сайтом можно только при авторизации — без неё покупатель не может оформить самовывоз, и вынужден оформлять платную доставку. А может, есть и ещё какие-то функции, которые мы не заметили без авторизации.

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

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

→ Статья-выжимка из большого обзора: eCommerce в фэшн: большой обзор рынка и анализ трендов 2023

→ Обзор целиком на нашем сайте: отчёт на 150+ слайдов

Мы также пишем другие полезные статьи о фэшн-eCommerce, прочитайте самые свежие:

12 июля мы провели вебинар о трендах eCommerce с OZON и ДжамильКо. Обсудили, как компаниям продавать больше одежды и какие фишки внедрять в интернет-магазины. Запись вебинара можно посмотреть на нашем Youtube-канале

3535
66 комментариев

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

Мелкие недочеты типа пояснений в форме, не в счет.

5
Ответить

а ты рили осилил эту простыню?

1
Ответить

Обратил внимание, что вы про все сайты с header на мобильных устройствах пишите что это не оптимизировано под мобилку и нужен tab bar. В этой статье вы обращаете внимание, что в приложении tab bar реализован и здесь встаёт вопрос: есть реально проведённые исследования лично вами, что tab bar НА САЙТАХ работает лучше чем Header? (Кроме тех, что людям лень тянуться пальцем вверх)

Лично мое мнение что юзеру привычнее видеть Header на САЙТЕ наверху, а вот tab bar в ПРИЛОЖЕНИИ внизу и это устоявшееся явление.

Лично сам сталкивался с тем, что на САЙТАХ с tab bar не мог найти навигацию, потому что искал Header вверху экрана, хотя в ПРИЛОЖЕНИЯХ проблем с поиском tab bar не испытывал никогда 🙌

4
Ответить

Давайте прикинем навскидку, кто использует навигацию внизу даже просто из практиков, без историй про UX и исследования.

DNS, М.Видео, OZON, Wildberries (кстати, тоже держали раньше навигацию сверху, но переместили вниз), Вкуссвилл... Продолжать можно ещё. И это компании, которые серьёзно вкладываются в свои сайты. Наверное, что-то не понимают в этой жизни, как и мы :)

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

В плане конкретной привычки я вас хорошо понимаю, у меня тоже такое было :)

1
Ответить

"Но 12 STOREEZ рушит ожидания: истории ведут на страницы с подборками товара. Мы посмотрели интервью с руководителями компании и только тогда узнали значение блока: 12 историй — это 12 коллекций магазина"-вот и сейчас впервые узнал расшифровку названия

3
Ответить

Очередной аудит от «экспертов». Вы сначала создайте что-то подобное (с точки зрения бизнеса), а потом устраивайте прожарки.

2
Ответить

Мы работаем с не менее крупными клиентами, свой интернет-магазин не планируем пока что :)

Ответить