UX-аналитика от Baymard Institute в дизайне интернет-магазинов: путеводитель по типичным ошибкам

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

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

1. Использовать те исследования, которые опубликованы на сайте baymard.com в открытом доступе (бесплатно).
2. Получить расширенный доступ к 734 научным руководствам и 60 углублённым тематическим исследованиям UX (стоимость подписки — 60–250 $ в месяц);
3. Заказать персональный аудит производительности UX вашего сайта и 15–50 предложений по улучшению от сотрудников Baymard Institute (стоимость — 1900–9700 $).

• «Статьи» (Articles)
• «Ориентиры» (Benchmarks)
• «Дизайн страниц» (Page Designs)
• «Исследования» (Research Catalog)
• «Аудит» (Audit Service)

Рассмотрим их подробнее.

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

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

Пример статьи: «Ссылки на подкатегории: жизненно важная функция в навигации электронной коммерции (52 % делают это неправильно)».

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

Пример статьи: «Миниатюры продукта должны динамически обновляться, чтобы соответствовать изменению, которое искали (у 54 % этого нет)».

Интернет-магазин L.L.Bean входит в те 54 % сайтов с неудачным решением — здесь, когда пользователь включает в поисковый запрос характеристику «Цвет», миниатюры продукта не переключаются динамически в соответствии с искомым изменением цвета. Это затрудняет понимание и использование пользователями результатов поиска по цвету.

Пример статьи: «UX со списком продуктов: выделение элементов в „Корзине" пользователя (96 % не делают так)».

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

Пример статьи: «Оптимизация оформления заказа: от 16 полей формы до 8 полей».Приложен видеообзор, как сделать более удобную для пользователя форму.

Пример статьи: «Опыт возврата заказов имеет решающее значение для удержания клиентов — однако 54 % сайтов электронной коммерции имеют интерфейс возврата с существенными проблемами юзабилити».

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

Пример статьи: «Mobile UX: масштабируйте изображения продуктов пропорционально в альбомном режиме (52 % сайтов этого не делают)».

Говорят, казалось бы, об очевидном — нужно следить за тем, адаптируются ли фотографии продукта к ориентации экрана. Но 52 % e-Commerce-проектов не делают этого, и значит, напоминание не лишнее.

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

Ориентиры дают понять, как лидеры в вашей нише проектируют свои страницы, какие ошибки они совершают, и какие их плюсы вы можете перенять. Это эталонная база данных, основанная на анализе юзабилити 60 ведущих сайтов e-Commerce. Для оценки проводится анализ 740 различных элементов UX сайта.

Даже в бесплатном доступе мы видим здесь большой список e-Commerce-брендов, далее можем переходить к каждому из них по конкретному названию — и получим краткое описание с оценкой юзабилити.

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

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

Допустим, нас интересует ниша спортивной одежды и обуви. Посмотрим на известный бренд этой ниши — компанию Adidas и её Benchmarks. Мы увидим скриншоты 18 страниц интернет-магазина adidas.com с 252 примерами лучших UX-решений.

Также мы увидим сравнительную аналитику в виде короткого текста:
«По результатам тестов Adidas занимает:— 14 место по UX среди 59 других крупных американских e-Commerce-сайтов;— 3 место — в индустрии одежды и аксессуаров».

• Homepage & Category — Homepage, Drop-Down Menu, Top-Level Navigation, Intermediary Category Page.
• On-Site Search — Search Field, Autocomplete Suggestions, Search Results Page, No Results Page.
• Cart & Checkout — Cart, Account Shipping Address, Delivery & Shipping Methods, Payment & Order Confirmation.
• Product List & Filtering — Category, Search, Sorting Tool.
• Product Page — Product Page, Video & 360 Views, User Reviews Section.

Есть ссылки на платное руководство (Guideline), которое могло бы объяснить более конкретно все плюсы и минусы, что мотивирует приобрести платный доступ.

Здесь собрано 3974 примера оформления страниц c UX-аналитикой; подходящие референсы найдутся практически для любого интернет-магазина. Группировка сделана по типам страниц.

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

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

Но, несмотря на всю полезность этого опорного материала, конечное решение, как оформить интернет-магазин, остаётся за ДИЗАЙНЕРОМ с его опытом, вкусом и аналитическим мышлением.

Иногда наши дизайнеры-аналитики замечают среди кейсов некоторые устаревшие для РФ решения, которые актуальны сейчас для рынков Америки и Европы. Да, у нас есть более передовые решения. К тому же часть американского UX не может быть применена в России из-за разницы в законодательстве (это касается страниц оплаты).

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

С любовью к UX и читателям, студия TSEKH.