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

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

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

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

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

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

Homepage & Category (главная страница и каталог)

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

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

On-Site Search (поиск)

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

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

Product List (списки товаров)

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

В интернет-магазине amazon.com все элементы в списке товаров имеют одинаковый стиль, и из-за этого пользователь не может сразу определить товары, которые он уже добавил в свою «Корзину».

Product Page (страницы товаров)

Пример статьи: «UX на странице продукта: данные должны быть синхронизированы по различным вариантам продукта (28 % — нет)».

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

Cart & Checkout («Корзина» и оформление заказа)

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

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

Accounts & Self-Service (расчёты и самообслуживание)

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

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

Mobile e-Commerce (мобильные версии)

Пример статьи: «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 место — в индустрии одежды и аксессуаров».

Доступен краткий анализ по следующим типам страниц:

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

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

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

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

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

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

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


Надеемся, этот обзор был вам полезен. Готовы ответить на вопросы в комментариях :)