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

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

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

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

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

Варианты:

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

Основные пункты в главном меню baymard.com:

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

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

«Статьи» (Articles) — типовые ошибки юзабилити в интерфейсе

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

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

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

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

On-Site Search (поиск).

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

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

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

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

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

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

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

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

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

В статьях есть много скриншотов, информация подаётся наглядно, например:

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

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

«Ориентиры» (Benchmarks) — аудит юзабилити лучших сайтов

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

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

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

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

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

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

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

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

Аналитика выглядит так:

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

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

«Дизайн страниц» (Page Designs) — яркие примеры data-driven design

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

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

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

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

Пункты меню Research Catalog, Audit Service доступны только при платной подписке. Research Catalog даёт возможность познакомиться более чем с 42 000 часов исследований и глубокими аналитическими выводами по ним. А с помощью Audit Service можно заказать аудит вашего собственного сайта от экспертов Baymard. Ведь интересно сравнить, как ваша производительность UX соотносится с ведущими мировыми сайтами e-Commerce?

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

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

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

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

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

1212
2 комментария

Ого, класс, спасибо за обзор. Ничего не найти у нас про эти вещи полезные.

Ответить

Как же неудобно у вас на сайте курсор нестандартный. Ых

Ответить