Практическое руководство для дизайнеров, владельцев бизнеса и маркетологов.
Baymard Institute — это независимая web-исследовательская организация, которая за последние 10 лет провела UX-аналитику более сотни интернет-магазинов в разных нишах. Мы за маркетинговый подход к web-дизайну — на основании статистики и исследований, и в этом нам помогают данные от Baymard.
UX-аналитику от Baymard Institute легко использовать — всё наглядно и понятно, с картинками. На этой базе сделать экспресс-аудит юзабилити интернет-магазина сможет даже восьмиклассник. Нужно просто смотреть на примеры и брать лучшие из них за образец, а плохих избегать.
Варианты:
- использовать те исследования, которые опубликованы на сайте baymard.com в открытом доступе (бесплатно);
- получить расширенный доступ к 734 научным руководствам и 60 углублённым тематическим исследованиям UX (стоимость подписки — 60–250 $ в месяц);
- заказать персональный аудит производительности UX вашего сайта и 15–50 предложений по улучшению от сотрудников Baymard Institute (стоимость — 1900–9700 $).
Для начального аудита (чтобы просто понять, есть ли у интернет-магазина серьёзные недостатки) может хватить и бесплатной версии. А вот для проработки изменений стоит обратиться к профессионалам, которые уже будут использовать платную аналитику Baymard.
Основные пункты в главном меню baymard.com:
- «Статьи» (Articles);
- «Ориентиры» (Benchmarks);
- «Дизайн страниц» (Page Designs);
- «Исследования» (Research Catalog);
- «Аудит» (Audit Service).
Рассмотрим их подробнее.
«Статьи» (Articles) — типовые ошибки юзабилити в интерфейсе
Раз в две недели здесь публикуются статьи о 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 (расчёты и самообслуживание).
При тестировании сайта shopbop.com обнаружили, что после того как пользователь указал, что он хочет сделать возврат товара, он перенаправляется на страницу с политикой возврата. Но ему хотелось бы просто и быстро закончить процедуру возврата, а не читать юридическую информацию.
Mobile e-Commerce (мобильные версии).
Пример статьи: «Mobile UX: масштабируйте изображения продуктов пропорционально в альбомном режиме (52 % сайтов этого не делают)».
Говорят, казалось бы, об очевидном — нужно следить за тем, адаптируются ли фотографии продукта к ориентации экрана. Но 52 % e-Commerce-проектов не делают этого, и значит, напоминание не лишнее.
В статьях есть много скриншотов, информация подаётся наглядно, например:
Это сугубо практическая информация, без воды, с полезными выводами. Большой плюс их статей в том, что для понимания не нужны особые технические знания. То есть при обсуждении выводов и владелец бизнеса, и руководитель IT-отдела, и маркетолог будут говорить на одном языке.
«Ориентиры» (Benchmarks) — аудит юзабилити лучших сайтов
Ориентиры дают понять, как лидеры в вашей нише проектируют свои страницы, какие ошибки они совершают, и какие их плюсы вы можете перенять. Это эталонная база данных, основанная на анализе юзабилити 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;
- Product List & Filtering — Category, Search, Sorting Tool;
- Product Page — Product Page, Video & 360 Views, User Reviews Section;
- Cart & Checkout — Cart, Account Shipping Address, Delivery & Shipping Methods, Payment & Order Confirmation.
Аналитика выглядит так:
Есть ссылки на платное руководство (Guideline), которое могло бы объяснить более конкретно все плюсы и минусы, что мотивирует приобрести платный доступ.
«Дизайн страниц» (Page Designs) — яркие примеры data-driven design
Здесь собрано 3 974 примера оформления страниц c UX-аналитикой; подходящие референсы найдутся практически для любого интернет-магазина. Группировка сделана по типам страниц.
Зайдя на любую страницу из этой подборки, мы снова увидим красные и зелёные метки (для удачных и неудачных решений) и отсылки к платным исследованиям. Без оплаты полного доступа вы можете только предположить, почему каждый элемент получил положительную или отрицательную оценку: видно название темы, к которой он относится.
Пункты меню Research Catalog, Audit Service доступны только при платной подписке. Research Catalog даёт возможность познакомиться более чем с 42 000 часов исследований и глубокими аналитическими выводами по ним. А с помощью Audit Service можно заказать аудит вашего собственного сайта от экспертов Baymard. Ведь интересно сравнить, как ваша производительность UX соотносится с ведущими мировыми сайтами e-Commerce?
Как уже стало очевидно, платная подписка открывает доступ к значительно большему количеству данных. Мы пользуемся платным доступом уже давно.
Но, несмотря на всю полезность этого опорного материала, конечное решение, как оформить интернет-магазин, остаётся за ДИЗАЙНЕРОМ с его опытом, вкусом и аналитическим мышлением.
Иногда наши дизайнеры-аналитики замечают среди кейсов некоторые устаревшие для РФ решения, которые актуальны сейчас для рынков Америки и Европы. Да, у нас есть более передовые решения. К тому же часть американского UX не может быть применена в России из-за разницы в законодательстве (это касается страниц оплаты).
О выгодах использования разработчиками аналитики Baymard Institute мы писали в предыдущей статье.
Надеемся, этот обзор был вам полезен. Готовы ответить на вопросы в комментариях :)