(Анти)прожарка «Золотого Яблока»: можно ли дизайн магазина взять за пример?

Онлайн-продажи «Золотого Яблока» выросли на 196% за 2021 год. В статье исследователи Antro разбирают интерфейс магазина и выясняют, насколько он влияет на результаты компании.

Что имеем:

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

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

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

Контент на баннере легко считывается: минимум текста и максимум фото. Это важно для бьюти-сферы: здесь покупают глазами даже духи :)

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

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

Instagram входит в компанию Meta, которая признана экстремистской и запрещена на территории РФ.

Поиск полноэкранный. Сразу предлагает товары, популярные запросы и бренды. Плейсхолдер не банальный вроде: «Введите название товара…». Он подсказывает, что делать, и даже выполняет роль призыва к действию. Заодно компания так транслирует TOV: вместо скучных универсальных фраз пишет то, что больше соответствует бренду.

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

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

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

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

Недостатки:

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

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

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

Неудачно, что все категории скрыты за пунктом «каталог». Если пользователь попадает из поисковика на страницу товара, то придется наводить на пункт каталога — только так он поймёт, что продаёт магазин. Baymard Institute не рекомендует так делать.

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

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

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

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

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

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

Активный элемент никак не выделяется при наведении. Интерфейс не подсказывает пользователю, можно ли взаимодействовать с элементом сайта.

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

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

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

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

Ещё один минус — нет рейтинга и отзывов. Это было бы не так страшно, если бы не такая скудная сортировка. «Золотое Яблоко» предлагает нам полагаться только на свои собственные опыт и знания о бьюти-товарах. По популярности или рейтингу товары сортировать нельзя.

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

Описание товара свёрнуто горизонтально в табы. Это не лучшая практика — по данным отчёта Product Page Layout от Baymard Institute, горизонтальные вкладки пропускают в 3 раза чаще, чем вертикальные.

Есть два блока с кросс-продажами. Они повышают чек и позволяют задержать пользователя в магазине.

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

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

Хорошая практика — показывать дополнительные изображения с помощью миниатюр. Так получается нагляднее и навигация становится проще. Но лучше, конечно, показывать все миниатюры сразу: 50–80% пользователей не заметит иконку карусели и пропустит скрытые изображения.

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

Для товаров, где важна визуальная составляющая, нужно выделять под фото более 50% ширины экрана. Так пользователи смогут детальнее изучить товар, без использования зума. С этой задачей «Золотое Яблоко» также отлично справляется.

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

Если товара нет в наличии и кнопка «Добавить в корзину» неактивна, пользователи уйдут на другой сайт. Нужно оповещать пользователя, что товары скоро поступят в продажу и дать возможность заказать. «Золотое Яблоко» предлагает оповестить о поступлении по почте или проверить наличие в физическом магазине.

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

Цвета косметики скрыты в выпадающем списке, даже когда их немного. Как показывает отчёт Product Variations от Baymard Institute, 60% пользователей не находят дропдаун с вариациями. Скорее всего, покупатели растеряются или будут искать нужный товар другими способами.

На странице товара не отображаются стоимость и способы доставки, есть только возможные сроки. Что такое «быстрая доставка с регионального склада» тоже не объясняется. Это про 11 января? Или можно ещё быстрее?

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

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

«Золотое Яблоко» настойчиво ограждает нас от мнения других пользователей о товаре: на странице вообще нет отзывов. И зря. Социальное доказательство подтолкнёт клиентов к покупке, а магазин получит UGC-контент. К тому же, отзывы стимулируют продажи — это подтверждают исследования Yotpo.

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

Вместо отдельной страницы с заказом — мини-корзина. Nielsen Norman Group не советует так делать. Это усложняет и сравнение товаров, и редактирование заказа.

В «Золотом Яблоке» нельзя изменить цвет, только количество. И тут сразу обнаруживается еще одна проблема от желания втиснуть все в шторку: непонятно, к какому товару относятся кнопки изменения количества и удаления. Нарушено правило близости. Отступ до цены верхнего товара меньше, чем до нужного.

Грустно от карточки товара, которого нет в наличии. Нам не предлагают ни заменить его, ни подписаться на наличие. Только при каждом открытии корзины настойчиво показывают одно и то же уведомление. Как закрыть оповещение — непонятно.

Чтобы оформить заказ, нужно удалить товары, которых нет в наличии. Иначе никак. Если не обратить внимание на уведомление, будет непонятно, почему нам не дают оформить заказ. Кнопка просто неактивная: нет даже шанса увидеть ошибку, которая объяснит, в чем дело.

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

В корзине нельзя оплачивать товары по отдельности. Некоторые пользователи используют корзину вместо «избранного», а за один раз покупают лишь несколько товаров. Чтобы это сделать, покупателю «Золотого Яблока» придётся потратить время, чтобы удалить лишние продукты.

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

В остальном корзину «Золотого Яблока» почти не за что хвалить. Это самый непродуманный элемент магазина.

При оформлении заказа предлагают зарегистрироваться. Это сомнительная практика: по исследованиям Baymard Institute, из-за обязательной регистрации происходит 28% отказов. Хорошо, что «Золотое Яблоко» предлагает купить товар как гость, а ценность авторизации доходчиво доносит. Это компромиссный вариант.

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

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

Таббар в мобильной версии расположен сверху. Это спорное решение: тянуться пальцем до верхнего края неудобно.

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

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

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

В поиске на мобильной версии сильно меньше элементов по сравнению с десктопом, но он всё так же работает исправно и быстро.

Хлебные крошки выглядят аккуратно. В Nielsen Norman Group считают, что в мобильной версии достаточно ссылки на родительскую категорию. Хотя в то же время Ребята из Baymard Institute думают иначе: они сомневаются в эффективности одной «крошки» — пользователю не показывают полный путь, и он может потеряться в навигации. На наш взгляд, если путь до товара не слишком глубок, то одной крошки достаточно.

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

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

После выбора нам сразу закрывают окно с фильтрами. Чтобы выбрать несколько, нужно либо сделать это моментально, либо открывать окно заново. Разворачивать фильтры помногу раз раздражает.

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

В описании товара Baymard Institute как раз предлагает использовать аккордеоны. Так на пользователя не вываливается вся информация разом. Достаточно открыть первый раздел, чтобы показать, что заголовки кликабельные.

Кнопка добавления в корзину прилипает к нижнему краю экрана. Это удобно: её не нужно искать и лишний раз скроллить страницу.

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

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

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

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

В большинстве случаев «Золотое Яблоко» следует лучшим практикам. Дизайнеры позаботились о пользовательском опыте, и сделали интерфейс удобным для покупателей.

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

→ Предыдущая прожарка: Дизайн-прожарка 2.0: что не так с «‎Петровичем‎»?