Всем привет, на связи главный редактор дизайн-студии UXART. Весной мы заметили потребность от многих заказчиков в аудитах уже существующих сайтов/страниц. К сожалению, многие аудиты находятся под всеми любимым NDA, поэтому решили показать, как вообще все это происходит на примере сайта Marc O’Polo.
Здесь основной упор ставили на мобильную версию, но и про десктоп есть что сказать, так что приятного чтения)
UX-патруль — описание личного пользовательского опыта. Без метрик, исследований, т.к. доступа к ним у нас нет. Просто обратная связь и гипотезы по интерфейсам)
Про Marc O`Polo
Небольшая историческая справка. Сам бренд был основан в 1967 году как небольшая компания в Стокгольме. На сегодняшний день Marc O'Polo насчитывает около 2300 сотрудников из более чем 40 стран. По этой причине решили взять один из зарубежных сайтов бренда и посмотреть насколько сильно он отличается от русской версии.
Карточка товара (mobile)
Сначала показываем, как было «до». Подсвечиваем выявленные проблемы, и сразу макеты от UXART, на которых визуализировали, как сделать удобнее.
Неэффективная шапка
- В шапке располагается только логотип, это неоправданное использование пространства
- Текст КАПСОМ и болдом в две строки — плохое решение
- Постоянно видимый баннер и шапка «перетягивают» внимание, это может отвлекать от просмотра товара
Шапку стоит сделать компактной и функциональной (с меню/поиском), убрать баннер о скидке и показывать можно при скролле вверх.
Что можно улучшить с фото
- Фото — это ключевой элемент для принятия решения, важно показать товар крупно, так как человек не может увидеть его вживую, потрогать.
- Для увеличения придётся нажимать на фото, приближать, что не очень удобно на мобильных устройствах.
Как мы это изменили:
Сделали акцент на «вау-эффекте», который подкрепляется видео в начале и большим количеством визуалов одежды в целом. Баннер со скидками оставили, сделав его «органичнее» под цветовую палитру сайта, а хлебные крошки сократили, переместив под видео/фотографии.
Старая навигация имела еще один минус — пользователь встречался с непривычным паттерном «перехода на прошлый раздел». На нашем концепте мы поставили «стрелку влево» в привычную позицию «верхний левый угол». На старой версии переход назад располагался под заголовком.
Описание товара в самом начале карточки
Текст неинформативный и находится сразу под фото, это важная зона внимания. Пользователю важно быстро понять, какие опции есть, подходит ли ему товар, вместо этого он получает текст, который не даёт никакой конкретики и не прибавляют ценности товару.
Лучше убрать описание и сделать акцент на фотографиях, а место, которое он занимает отвести под размерную сетку и выбор цвета
Одновременно показаны две размерные сетки
- Увеличивается когнитивная нагрузка, так как пользователю приходится сопоставлять размеры, может вызывать сомнение. Так какой размер верный? Это мешает быстрому выбору
- Загромождает интерфейс, особенно на мобильных устройствах
Видно, что описание товаров вдохновлялось описанием дуба у Льва Николаевича. Оно огромное и низка вероятность того, что пользователь готов читать эту стену текста. Лучше сократить его, а ключевые моменты вынести отдельно.
Параметры модели
Лучше поднять этот блок максимально близко к выбору размера и размерной сетки, т.к. это связанная информация. Сейчас, чтобы определиться с размером, пользователь вынужден листать далеко вниз и потом возвращаться наверх, чтобы выбрать размер.
Добавить блок наличия в магазине (его нет)
- Он удобен для тех, кто хочет примерить товар в оффлайн магазине, чтобы, например, сравнить размеры. Отсутствие этого раздела усложняет жизнь покупателям, тк они могут приехать в магазин, в котором нет нужно размера/цвета
Нет предложенных других товаров
- Упускается возможность удержать пользователя. Если ему не подходит данный товар, то увеличивается вероятность, что он уйдёт
- Упускается возможность допродажи других товаров
Стоит добавить блок «Похожие товары» или «С этим товаром покупают»
Как мы это изменили:
Структурировали основную информацию и перенесли её в привычное для пользователя место — в нижнюю часть под «добавить в корзину».
Тут же добавили возможность «проверки наличия в магазине». Осознанно сделали этот пункт не таким акцентным, так как наша ключевая задача не перевести пользователя на офлайн покупку, а лишь дать информацию о наличии.
Сильно сократили описание и вывели ключевые характеристики отдельно. Теперь потенциальный покупатель сможет сразу узнать о материале и прочей интересующей его информации.
Изменили блок с размерной сеткой, сделав его менее «громоздким». При этом оставили 2 размерные сетки, просто изменили сам подход.
И вынесли информацию о росте модели и размере одежды на изображении. В нынешней версии эта информация тоже есть, но находится в огромном описании, из-за чего пользователь может не обратить на это внимание.
Также мы подумали — как со стороны маркетинга и бизнеса удержать пользователя? И тут нашли достаточно простой, но рабочий вариант — предложить ему «дополнить образ». Условно, при просмотре тренча, вам предлагают взглянуть на брюки, которые идеально подойдут вам. На нынешней версии такого блока нет совсем, что для нас показалось странным.
При этом, в немецком приложении такой блок есть, что вызывает еще больше вопросов к дизайнерам Marc O'Polo)
Визуальный шум и перегруженность это в целом одна из ключевых проблем карточки товаров. И вот как мы предлагаем это изменить:
Перед тем, как менять главную страницу сайта мы изучили прямых и косвенных конкурентов.
Не буду перечислять всех, ведь главное здесь — конкуренты «берут»/«привлекают»/«оставляют» пользователей за счет крупного плана одежды и моделей. Эти бренды транслируют свои смыслы и миссию на первом экране, чего на данный момент не хватает Marc O'Polo.
Но для начала — проблемы существующей версии сайта:
Сверху мы видим три основные категории, ниже — точки входа в дополнительные срезы. Основные проблемы этого блока:
- Слишком маленькие стоковые фотографии, по которым ничего не понятно
- Мелкий нечитаемый текст
- Странное решение с показом сверху новинок в коллекции с разделением по полу, а после снова новинки (но уже другие) и снова разделение по полу)
Как мы это изменили:
Исходя из истории бренда, основное настроение ассоциируется с бежевым, солнечным, теплым тоном. Они транслируют заботу об экологии.
На главной вывели разделение на 2 категории — женщины и мужчины, придав этому большее значение, чем есть сейчас.
Далее вывели блок с новинками:
Новую коллекцию:
P.s. сама коллекция выдумана нами, поэтому вы не найдете её на сайте)
Ниже цифрами обозначили проблемные места нынешней версии сайта:
- Нарушен принцип близости. Между заголовком, подзаголовком и кнопками одинаковые визуальные отступы. Всё сливается (2).
- Отступ между кнопкой «Добавить свой образ» и «требования к фото» слишком маленький. Нарушено правило «Внутреннего и внешнего» (3).
- Сама ссылка слишком мала и логичнее для пользователя вначале посмотреть образы, чтобы понять о чем вообще речь, и лишь потом предложить ему добавить свой.
- Плохо считываются кнопки в карточке. Протокол WCAG. Нарушается принцип «Эстетика и минимализм» (4).
- Сам баннер странный — какой-то клубок шерсти, который не объясняет значимости этого блока. Да и точки, словно траур)
Как мы это изменили:
Видоизменили один из имеющихся блоков — «образы клиентов». Сейчас это простые некликабельные фотографии. Мы же решили и «замотивировать» пользователей делиться своими образами и добавить интерактива.
При наведении, пользователь может перейти на одежду, узнать про неё и, если ему все понравится, купить её в дальнейшем.
И то, о чем мы говорили чуть выше — блок с миссией:
***
Одна из целей этой статьи — показать, что у каждого бренда (даже самого крупного) есть проблемы на сайтах. И порой они не видны дизайнерам, ведь глаз замыливается, есть другие задачи и еще множество причин, из-за которых точечные проблемы просто игнорируются.
Плох ли сайт Marc O'Polo? Нет, но всегда есть куда расти.
Спасибо каждому за чтение этой статьи. Надеюсь, что вам понравился этот формат. И если это так, обязательно поставьте лайк и напишите комментарий. А мы в скором времени напишем новый материал, где разберем уже другие бренды.
P.s. а если вам хочется получить аудит своего сайта — пишите Артему Конакову в личку.Также предлагаю подписаться на наш телеграм-канал, в котором Артем рассказывает больше про студию, делится инсайтами и анализирует привычные нам вещи в разрезе UX-разборов)Ну а мы с вами увидимся совсем скоро на том же самом сайте <3
