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

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

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

Практическое руководство
для дизайнеров, владельцев бизнеса и маркетологов.
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).
Рассмотрим их подробнее.
1

«Статьи» (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 (расчёты и самообслуживание).

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

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

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

Говорят, казалось бы, об очевидном — нужно следить за тем, адаптируются ли фотографии продукта к ориентации экрана. Но 52 % e-Commerce-проектов не делают этого, и значит, напоминание не лишнее.
В статьях есть много скриншотов, информация подаётся наглядно, например:
Это сугубо практическая информация, без воды, с полезными выводами. Большой плюс их статей в том, что для понимания не нужны особые технические знания. То есть при обсуждении выводов и владелец бизнеса, и руководитель IT-отдела, и маркетолог будут говорить на одном языке.
2

«Ориентиры» (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), которое могло бы объяснить более конкретно все плюсы и минусы, что мотивирует приобрести платный доступ.
3

«Дизайн страниц» (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 мы писали в предыдущей статье.


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

Поделиться

Понравилась статья?

Подпишись на нашу рассылку — стань первым, кто узнает о наборе
на обучающие курсы, о митапах и новых открытых вакансиях!

Заполните бриф
Оставьте заявку, либо звоните, мы пообщаемся и сами все за вас заполним: +7 495 369-2029
Тип проектов
Услуги
Планируемый бюджет первого этапа работ
Контактные данные
Откуда вы узнали о нас?
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности.
Познакомимся?
Приходи в офис или пиши!
+7 (495) 369-2029
hr@kt-team.de
kt.team

Москва, Ильинка 4, п. 5 (Гостиный двор)
Тольятти, ул. Офицерская, 12А, к1 (ТЦ «Рим»)
Краснодар, ул. Северная, д. 490 (БЦ «Кутузовский»)