Чекаут | UX-лаборатория KISLOROD

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

А мы приложим в следующем году ещё больше усилий, чтобы сделать пользовательский опыт ещё лучше!

Спасибо, что были с нами в этом году — до встречи в новом!

С наступающими новогодними праздниками! 🎅🏻🎄

🧴32 лучших решения UX-дизайна и юзабилити для сферы «Косметики»

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

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

🖥 Читайте рекомендации в статье

🪄«Чекаут | UX-лаборатория»

#чекаут_инсайт

Кейс NAOS

NAOS — это французская косметическая компания, известная своими популярными брендами: Bioderma, Institut Esthederm и Etat Pur.

Мы начали сотрудничество еще в 2019 году, когда приступили к разработке современного интернет-магазина для российского представительства. В рамках этого проекта мы реализовали концепцию shop-in-shop, позволяющую продавать продукцию всех трех брендов на единой платформе. Для этого мы создали удобные интерфейсы, внедрили и настроили интеграционный слой с внешними системами.

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

С момента запуска выручка интернет-магазина выросла на 347%, а средний чек — на 77%.

🖥 Узнать подробнее

🪄«Чекаут | UX-лаборатория»

#чекаут_кейсы

😊 KISLOROD участвует в специализированных рейтингах RUWARD 2024!

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

Мы принимаем участие в 10 специализированных категориях:
— Highload-разработка сложных digital-проектов
— Техническая поддержка веб-проектов
— Разработка и интеграция интранет-систем, корпоративных порталов
— Интеграция CRM-систем
— QA (quality assurance) и тестирование digital-проектов
— Customer Development и UX (user experience) проектирование
— Usability и UI-дизайн
— Веб-аналитика
— Внедрение систем сквозной аналитики
— Аутстаффинг разработки

За прошедший год мы успешно завершили ряд новых проектов и продолжаем активно развивать и улучшать коммерческие показатели сервисов наших клиентов, среди которых NAOS, Aquanet, Orby, INCANTO, CHARUEL и многие другие.

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

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

🛒 20 лучших решений UX-дизайна и юзабилити для интернет-магазинов «Мебели»

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

🖥 Читайте рекомендации в статье

🪄«Чекаут | UX-лаборатория»

#чекаут_инсайт

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

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

🪄«Чекаут | UX-лаборатория»

#чекаут_бестпрактикс #главнаястраница

52% сайтов неэффективно стилизуют кликабельные элементы интерфейса

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

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

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

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

🪄«Чекаут | UX-лаборатория»

#чекаут_бестпрактикс #главнаястраница

ТОП-12 лучших UX-решений для сайтов салонов и магазинов оптики 👓

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

🖥 Читайте рекомендации в статье

🪄«Чекаут | UX-лаборатория»

#чекаут_инсайт

Мы участвуем в Tagline Awards 2024! 🏆

Представляем наших номинантов на крупнейшую digital-премию в Европе Tagline Awards 2024:

1. Увеличили конверсию на 97% в интернет-магазине одежды бренда Zolla

Проект представлен в двух номинациях:
— Сайты → Ритейл и e-commerce
— Совершенное исполнение (Craft) → Юзабилити

2. Разработка и развитие интернет-магазина для косметического концерна NAOS, в номинации — Сайты → Ритейл и e-commerce.

Поддержите нас в «Народном голосовании», переходите по ссылкам и оставляйте свой голос!

Ссылки на голосование:
https://tagline.ru/kislorod/cases/zolla/
https://tagline.ru/kislorod/cases/naos/

Всем участникам удачи!

#taglineawards

✔ Результаты

– Улучшенным вариантом поисковой строки на 61% стали чаще пользоваться (1,57% против 0,97%).

– Конверсия в заказы в новом поиске выше на 5,7% (результат А/В теста без статистической значимости).

🪄«Чекаут | UX-лаборатория»

#чекаут_лаборатория #поиск

💻 Как повысить взаимодействие пользователей с функционалом поиска по сайту?

«Поиск по сайту» — важный функционал для улучшения пользовательского опыта, который сокращает время на поиск товара и упрощает навигацию. К тому же, по нашему опыту, конверсия среди тех пользователей, кто взаимодействовал с поиском в среднем в 2-3 раза выше тех, кто им не пользовался.

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

Что было необходимо проработать:

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

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

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

🪄«Чекаут | UX-лаборатория»

#чекаут_лаборатория #поиск

🖥 Как ускорить работу сайта на платформе «1С-Битрикс» и подготовиться к увеличению нагрузок?

На бесплатном вебинаре 12 ноября в 11:00 (МСК) мы разберём основные причины низкой производительности сайта на платформе «1С-Битрикс» и предложим практические решения для их устранения.

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

Регистрируйтесь прямо сейчас!

😊 Остались вопросы? Пишите нам на [email protected]

🖥 Подготовили руководство по Yandex Varioqub

Varioqub — это инструмент от Яндекса, предназначенный для управления цифровыми продуктами и проведения A/B-тестов. Он упрощает задачу разработчикам и маркетологам, позволяя легко тестировать различные версии продуктов и изменения в интерфейсе, чтобы определить наиболее эффективные.

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

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

Читать статью

🪄«Чекаут | UX-лаборатория»

#чекаут_инсайт

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

К примеру, на сайте Macy's задержка наведения курсора позволяет пользователям спокойно перемещаться по главному меню без риска произвольного срабатывания раскрывающегося списка.

Обычно для этого достаточно задержки в 300–500 миллисекунд, чтобы не создавать проблем при навигации. Также можно использовать интеллектуальный алгоритм траектории движения мыши, чтобы верно определять намерения пользователя и предотвратить случайную загрузку страниц.

🪄«Чекаут | UX-лаборатория»

#чекаут_бестпрактикс #навигация

⚪ У 61% сайтов нет задержки при наведении курсора

Согласно исследованию Baymard Institute, слишком быстрое реагирование выпадающего меню на перемещение курсора повышает вероятность ухода пользователей с сайта.

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

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

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

🪄«Чекаут | UX-лаборатория»

#чекаут_бестпрактикс #навигация

💻 Как размещение разделов на сайте влияет на микроконверсию?

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

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

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

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

Группа А: Пользователи на десктоп-устройствах, которые видели ссылку на «Акции» в шапке сайта.

Группа В: Пользователи на десктоп-устройствах, для которых ссылка на «Акции» была расположена в меню.

✅ Результаты

Анализ результатов показал, что показатель кликабельности (CTR) у пользователей, увидевших ссылку на «Акции» в меню, оказался выше — 1,7% (+77%), чем у тех, кто заметил ее в шапке сайта — 0,96%.

Таким образом, размещение ссылки на «Акции» в меню сайта является более эффективным вариантом. Значительное увеличение кликабельности (+77%) в группе В свидетельствует о том, что пользователи легче находят эту ссылку в меню.

🪄«Чекаут | UX-лаборатория»

#чекаут_лаборатория #микроконверсии

✔ Решение здесь простое — поле для ввода имени всегда должно быть единственным, например, можно назвать поле «Полное имя».

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

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

🪄«Чекаут | UX-лаборатория»

#чекаут_бестпрактикс #оформлениезаказа

89% сайтов для ввода имени используют несколько полей

Согласно исследованию Baymard Institute, пользователи обычно воспринимают свое имя как единый объект. При наличии нескольких полей имени многие пользователи сразу вводят в поле «Имя» фамилию, имя и отчество.

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

Несколько участников тестирования на сайте Apple указали полное имя получателя в поле «Имя», из-за чего им пришлось заполнять форму заново.

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

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

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

🪄«Чекаут | UX-лаборатория»

#чекаут_бестпрактикс #оформлениезаказа

Вот, например, как это реализовано на сайте Allbirds — пользователь может просмотреть всю обувь из раздела Shoes, кликнув по заголовку в выпадающем меню.

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

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

🪄«Чекаут | UX-лаборатория»

#чекаут_бестпрактикс #навигация

⚪️ 32% сайтов не делают заголовки кликабельными в выпадающем меню

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

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

В рамках тестирования на сайте компании Argos участник хотел перейти в категорию Headphones & Audio сразу из выпадающего меню, но обнаружил, что заголовок категории — это всего лишь текст, а не ссылка.

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

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

🪄«Чекаут | UX-лаборатория»

#чекаут_бестпрактикс #навигация

📇 Совместно с AskUsers мы провели юзабилити-исследование сайтов известных fashion брендов: O'STIN, ZARINA, ЦУМ, СТОКМАНН, Boardriders на анализ удобства оформления заказа.

В ходе исследования 90% респондентов отметили проблему обязательной авторизации/регистрации на этапе оформления заказа.

Например, на сайтах O'STIN и Boardriders авторизация является обязательной, т.е. для оформления заказа необходимо Войти/Зарегистрироваться на сайте. На сайтах ZARINA, ЦУМ и СТОКМАНН этого нет, что наш взгляд является более эффективным решением.

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

🪄«Чекаут | UX-лаборатория»

#чекаут_лаборатория #авторизация

❗️ Принудительная авторизация в чекауте зависит от политики конкретного интернет-магазина. Рассмотрим плюсы и минусы.

Обязательная авторизация в чекауте может негативно сказаться на конверсии и удовлетворенности клиентов.

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

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

Из плюсов можно назвать, что обязательная авторизация:
— Упрощает процесс повторной покупки,
— Позволяет отслеживать заказы и истории покупок,
— Предоставляет способ выстраивания таргетированной рекламы,
— Защищает от спам-заявок. Например, на сайте Lamoda для этого реализовано подтверждение номера телефона по СМС на этапе оформления заказа.

🪄«Чекаут | UX-лаборатория»

#чекаут_лаборатория #авторизация

➡️ Страницы промежуточных категорий работают лучше, когда они уделяют приоритетное внимание навигации по подкатегориям.

Хороший пример компании B&H Photo, как это может быть реализовано на практике.

Эта промежуточная страница категории в B&H Photo включает только миниатюры подкатегорий. Избежав загромождения страницы ссылками разных типов, сайт прояснил назначение страницы и упростил навигацию по подкатегориям.

🪄«Чекаут | UX-лаборатория»

#чекаут_бестпрактикс #каталог

71% сайтов не используют подкатегории в качестве основного контента на страницах промежуточных категорий

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

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

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

Такая реализация отвлекает пользователей от первоначальной задачи перехода к нужной странице.

🪄«Чекаут | UX-лаборатория»

#чекаут_бестпрактикс #каталог

✔️ А вот хороший пример — LEGO избегает рекламы в основных зонах на главной странице, позволяя пользователям сосредоточиться на поиске товаров.

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

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

🪄«Чекаут | UX-лаборатория»

#чекаут_бестпрактикс #главнаястраница

🛍 52% сайтов используют слишком агрессивную и отвлекающую рекламу

Согласно исследованию Baymard Institute, навязчивая реклама на главной странице часто вызывает недовольство пользователей, а всплывающие баннеры — еще большее отторжение.

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

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

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

🪄«Чекаут | UX-лаборатория»

#чекаут_бестпрактикс #главнаястраница

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

Вот пример альтернативы карусели слайдов — как это сделано на сайте Williams Sonoma. При таком решении пользователи просто скроллят домашнюю страницу, что значительно проще и привычнее.

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

🪄«Чекаут | UX-лаборатория»

#чекаут_бестпрактикс #главнаястраница

🖥 16% сайтов используют карусели картинок неправильно

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

Если слайды сменяют друг друга слишком быстро, как, например, на сайте Fun London Tours, то карусели будут малоэффективны и, скорее всего, произведут плохое впечатление на пользователей.

Поэтому полезно соблюдать определенные правила:

— для десктопной версии норма смены изображений — 5–7 секунд для заголовка с текстом и порядка 10 секунд для слайда с изображением;

— в мобильных версиях слайды карусели вообще не должны автоматически вращаться из-за отсутствия наведения курсора;

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

🪄«Чекаут | UX-лаборатория»

#чекаут_бестпрактикс #главнаястраница

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

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

Альтернативный метод — это разместить ссылки на разделы с товарами или список прямых ссылок на товары.

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

🪄«Чекаут | UX-лаборатория»

#чекаут_бестпрактикс #каталог

🔗 63% сайтов не дают прямых ссылок на товары, которые изображены на мотивирующих картинках

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

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

В магазине Dick's на странице категории на видном месте были представлены товары в изображениях Lifestyle (первое изображение).

Однако при нажатии на изображение Lifestyle, пользователи переходили к общему списку каталога, а представленные товары не входили даже в первые 10 позиций (второе изображение).

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

🪄«Чекаут | UX-лаборатория»

#чекаут_бестпрактикс #каталог