Baymard Institute — это независимая web-исследовательская организация, которая за последние 10 лет провела UX-аналитику более сотни интернет-магазинов в разных нишах. Мы за маркетинговый подход к web-дизайну — на основании статистики и исследований, и в этом нам помогают данные от Baymard.
На этой базе сделать экспресс-аудит юзабилити интернет-магазина сможет даже восьмиклассник. Нужно просто смотреть на примеры и брать лучшие из них за образец, а плохих избегать.
Рассмотрим их подробнее.
Раз в две недели здесь публикуются статьи о UX, база для изучения — интернет-магазины в самых разных нишах. В основном это американские e-Commerce-проекты. Сейчас в открытом доступе есть 243 научно-исследовательские статьи на английском языке. Они содержат не только исследования о типичных ошибках и проблемах, но и конкретные рекомендации по улучшению юзабилити, которые вы можете быстро применить к своему интернет-магазину.
Рассмотрим темы, на которые здесь можно найти исследования, с примерами статей и фрагментами интересных наблюдений.
Пример статьи: «Ссылки на подкатегории: жизненно важная функция в навигации электронной коммерции (52 % делают это неправильно)».
Во время тестирования IKEA было замечено, что диванные подушки не были отнесены к категории «Диваны», как предполагало большинство пользователей.
Пример статьи: «Миниатюры продукта должны динамически обновляться, чтобы соответствовать изменению, которое искали (у 54 % этого нет)».
Интернет-магазин L.L.Bean входит в те 54 % сайтов с неудачным решением — здесь, когда пользователь включает в поисковый запрос характеристику «Цвет», миниатюры продукта не переключаются динамически в соответствии с искомым изменением цвета. Это затрудняет понимание и использование пользователями результатов поиска по цвету.
Пример статьи: «UX со списком продуктов: выделение элементов в „Корзине" пользователя (96 % не делают так)».
В интернет-магазине amazon.com все элементы в списке товаров имеют одинаковый стиль, и из-за этого пользователь не может сразу определить товары, которые он уже добавил в свою «Корзину».
Пример статьи: «UX на странице продукта: данные должны быть синхронизированы по различным вариантам продукта (28 % — нет)».
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 место — в индустрии одежды и аксессуаров».
Доступен краткий анализ по следующим типам страниц:
Аналитика выглядит так:
Здесь собрано 3 974 примера оформления страниц c UX-аналитикой; подходящие референсы найдутся практически для любого интернет-магазина. Группировка сделана по типам страниц.
Зайдя на любую страницу из этой подборки, мы снова увидим красные и зелёные метки (для удачных и неудачных решений) и отсылки к платным исследованиям. Без оплаты полного доступа вы можете только предположить, почему каждый элемент получил положительную или отрицательную оценку: видно название темы, к которой он относится.
«Пункты меню Research Catalog, Audit Service доступны только при платной подписке. Research Catalog даёт возможность познакомиться более чем с 42 000 часов исследований и глубокими аналитическими выводами по ним. А с помощью Audit Service можно заказать аудит вашего собственного сайта от экспертов Baymard. Ведь интересно сравнить, как ваша производительность UX соотносится с ведущими мировыми сайтами e-Commerce?».
Как уже стало очевидно, платная подписка открывает доступ к значительно большему количеству данных. Мы пользуемся платным доступом уже давно.
Но, несмотря на всю полезность этого опорного материала, конечное решение, как оформить интернет-магазин, остаётся за ДИЗАЙНЕРОМ с его опытом, вкусом и аналитическим мышлением.
Иногда наши дизайнеры-аналитики замечают среди кейсов некоторые устаревшие для РФ решения, которые актуальны сейчас для рынков Америки и Европы. Да, у нас есть более передовые решения. К тому же часть американского UX не может быть применена в России из-за разницы в законодательстве (это касается страниц оплаты).
О выгодах использования разработчиками аналитики Baymard Institute мы писали в предыдущей статье.