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

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

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

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

• Главная
• Поиск
• Навигация
• Каталог
• Страница товара
• Корзина и оформление заказа
• Мобильная версия
• Итог
  

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

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

Первый экран

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

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

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

Истории

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Фильтры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

→ Лучшие интерфейсные практики в фэшн-eCommerce: 10 UX-советов

→ Лучшие интерфейсные практики в фэшн-eCommerce: ЕЩЁ 10 UX-советов