Что должно быть на главной странице интернет-магазина в мобильной версии - исследование Baymard
Исследовательская компания Baymard Institute зимой 2016 года провела юзабилити-исследование главных страниц ecommerce-сайтов, среди которых были крупнейшие бренды США вроде Amazon и Walmart. Результаты тестирования сооснователь Baymard Institute Кристиан Холст изложил в статье, в которой показал примеры эффективных и неэффективных главных страниц и дал советы дизайнерам.
В ходе юзабилити-исследования Baymard демонстрировали респондентам главные страницы мобильных eсommerce-cайтов. Они заметили, что 70% пользователей при входе на главную страницу сайта активно скроллят ее и быстро просматривают контент. Специалисты Baymard сделали вывод, что пользователи пытаются оценить ассортимент сайта по контенту главной страницы. Такое поведение наблюдалось как у тех, кто впервые пришел на сайт, так и у тех, кто уже был с ним немного знаком.
Проблема в том, что на 42% мобильных ecommerce-сайтов невозможно определить ассортимент по контенту главной страницы, потому что там не представлены все основные товарные категории. Если респондент изначально неверно определил ассортимент, то в дальнейшем практически всегда наблюдаются проблемы: он не может найти нужный товар, уходит с сайта и в целом неправильно воспринимает бренд магазина.
Пользователи пытаются определить содержание сайта по контенту главной страницы
Попадая на главную страницу нового сайта, пользователи пытаются определить по ней содержание всего сайта. Это неудивительно, если пользователь ничего не знает о бренде. Но даже на сайтах известных брендов (Best Buy, Amazon и Macy's) в 70% случаев респонденты активно скроллили главную страницу, чтобы понять, «что здесь есть».
Очевидно, что Best Buy продают электронику, но непосвященный пользователь может подумать, что этим ассортимент Best Buy и ограничивается, потому что на главной странице не упоминаются другие типы товаров (кухонная техника, товары для здоровья, мебель).
Сразу понятно, что REI продают туристическое снаряжение, но неочевидно, что у них также есть велосипеды, коврики для йоги и лыжи.
Если пользователи раньше не слышали о бренде или имеют о нем смутное представление, они оценивают ассортимент товаров по контенту главной страницы и набору категорий в основном меню. Если на главной выводится очень узкая выборка товарных категорий, многие думают, что каталог сайта этим и ограничивается.
Вот что говорили респонденты после беглого просмотра главной страницы: «Так, в этом магазине я не смогу купить чехол для ноутбука» или «Возможно, это не лучшее место для поиска камеры».
Кто будет искать товар на сайте, если создается полное впечатление, что его нет' Пользователь просто закроет сайт и, что еще хуже, вряд ли на него вернется, если захочет купить такой товар снова.
Основные категории нужно показывать на главной странице
По итогам тестовых сессий был определен формат главных страниц, по которым пользователи легко могут определить ассортимент сайта, - это страницы, где присутствуют различные товарные категории.
В большинстве случаев на главной странице нужно представить как минимум 30'40% категорий верхнего уровня.
На сайте Williams-Sonoma сочетаются баннеры для ключевых категорий товаров и список категорий для всей структуры сайта.
На сайте Amazon товары и категории товаров представлены графически, а ниже расположен список ключевых категорий, которых достаточно, чтобы точно определить ассортимент сайта.
На главной странице Build.com размещена вся структура верхнего уровня, что позволяет пользователям увидеть все разнообразие товаров.
Как показало исследование, на десктопных версиях сайтов лучше всего представлять ассортимент товаров в виде изображений - с анонсами товарных категорий или с конкретными продуктами как представителями этих категорий. Оба варианта работают одинаково хорошо.
Для мобильных был получен немного другой результат. Baymard обнаружили, что текстовые ссылки на категории верхнего уровня на главной странице также решают проблему. На мобильных текстовые ссылки привлекают к себе больше внимания, чем на десктопе, - скорее всего, потому, что на смартфоне в видимой области экрана остается небольшое количество элементов.
На некоторых главных страницах, участвовавших в тестировании, выводится вся структура верхнего уровня длинным списком (как, например, на Build). На других - баннеры категорий и полная структура ссылками (Williams-Sonoma). На третьих - баннеры продуктов и только часть категорий верхнего уровня ссылками (Amazon). Все три подхода работают, только если соблюдается условие разнообразия представленных категорий.
Полная или хотя бы частичная структура каталога на главной помогает новым пользователям представить себе ассортимент сайта, а повторным - быстро перейти в интересующие категории.
Узкие места при реализации
По результатам тестирования, для представления многообразия продукции сайта нужно разместить на главной хотя бы 30'40% структуры верхнего уровня (картинками или текстом). Чем ближе вы подходите к этому лимиту, тем важнее, чтобы эти 30'40% категорий были максимально разнообразными.
Например, на сайте REI вместо размещения двух категорий, связанных с туризмом, было бы лучше показать один туристический товар и какой-нибудь другой тип товара (скажем, велосипед или коврик для йоги) - чтобы продемонстрировать, что на этом сайте торгуют не только туристическим снаряжением.
При отображении списка категорий верхнего уровня не сворачивайте его в ссылку «Отделы» или «Категории», как сделано на сайте Northern Tool. Это не поможет определить ассортимент сайта при беглом просмотре главной страницы. Такой элемент будет полезен только повторным посетителям для быстрого перехода к нужному разделу.
Многие респонденты использовали категории на главной странице только для того, чтобы понять ассортимент сайта, и уже на основании этих данных решали, как лучше искать нужный товар. Многие сперва целиком просматривали главную, а затем возвращались обратно наверх страницы, чтобы воспользоваться поиском.
Хотя ссылки категорий используются для перехода вглубь сайта, важно понимать, что истинная ценность этих ссылок - показать пользователям охват каталога товаров. Если вы прячете основные категории под заголовками «Отделы» или «Категории», то ценность этих ссылок теряется.
Переход по одному из блоков на главной странице Walmart приведет вас не на страницу категории, а на распродажу товаров из этой категории. Заголовок «Большая экономия в каждом отделе» (Save big in every department) намекает нам на это - но, как показало тестирование, пользователи игнорируют заголовок и ожидают, что после клика по изображению они попадут именно к полному списку товаров.
Пример Walmart показывает, что нужно быть осторожнее с заголовками к списку категорий, урезающими выборки товаров, особенно если категории при этом размещаются картинками. Многие респонденты кликали по картинке категории (например, телевизоры), не понимая, что на самом деле выбрали распродажу. Респонденты не заметили заголовок и ожидали увидеть список всех телевизоров, а увидели только усеченную выборку.
На первый взгляд проблема может показаться несерьезной, но пользователь может в этот момент уйти с сайта: он не нашел нужной информации, и вы обманули его ожидания.
Если вы хотите представить на главной странице товары из распродажи или сезонные предложения - после клика по картинке лучше отправить пользователя на страницу категории (например, «Телевизоры») с примененным фильтром «Распродажа». Так пользователи поймут, что выборка была сужена фильтром, и смогут легко посмотреть все товары категории.
На мобильных все серьезнее
Исследование Baymard показало, что на мобильных устройствах пользователи гораздо чаще, чем на десктопе, пытаются определить ассортимент сайта по главной странице. При входе на главную мобильного сайта 70% пользователей первым делом скроллят страницу туда-сюда, а на декстопах - только 25%.
Сравните десктопную и мобильную версии главной страницы Sears. В мобильной версии вся основная навигация скрыта в «гамбургер», поэтому контент главной страницы становится определяющим для понимания ассортимента сайта.
На мобильных тенденция к скроллингу связана с двумя факторами:
- Маленький размер экрана. Меньше видимая область сайта - меньше разнообразие отображаемых категорий товаров.
- Скрытая навигация. На большинстве мобильных сайтов основная навигация скрыта. Чтобы ее развернуть, пользователь должен предпринять активные действия. На декстопных же версиях в 84% случаев верхний уровень навигации виден изначально.
На мобильных сайтах навигация неизбежно сворачивается, потому что иначе из-за меню весь основной контент на внутренних страницах сильно сдвигался бы вниз. Меню с горизонтальным скроллингом - тоже не вариант, это изначально плохо, особенно на мобильных.
Из-за скрытой навигации пользователи мобильных устройств больше нуждаются в списке категорий на главной странице. Однако большинство мобильных главных страниц сильно упрощены по сравнению с десктопными версиями. Что касается десктопа, то «всего лишь» 28% из топ-50 американских ecommerce-сайтов не дают пользователям точно определить ассортимент сайта, тогда как для мобильных этот показатель составляет 42%.
***
Как обстоят дела у российских ecommerce-сайтов
Представительница «Гильдии вольных проектировщиков» применила принципы оценки главной страницы, описанные в статье Baymard, к российскому рынку. Она рассмотрела 10 главных страниц из топа российских ecommerce-сайтов по версии Ruward.
Exist.ru
Главная страница мобильной версии Exist.ru представляет собой длинный текстовый список всех категорий товаров, покрывающий практически весь каталог сайта.
Пользователь может оценить ассортимент по главной.
Ulmart.ru
Список категорий выводится только в самом низу страницы, и то в слайдере. Блоки с конкретными товарами («Хиты продаж», «Специальные предложения» и так далее), хоть и дают представления об ассортименте, но покрывают его не полностью.
Пользователь не может полностью оценить ассортимент по главной.
Wildberries.ru
Список категорий на главной странице достаточно исчерпывающий. С удивлением для себя узнала, что Wildberries.ru продают даже книги и электронику.
Пользователь может оценить ассортимент по главной.
Citilink.ru
Мобильная главная страница Citilink.ru очень усеченная и не содержит ничего, кроме акций.
Пользователь не может оценить ассортимент по главной.
Lamoda.ru
Главная страница Lamoda.ru - просто образец для подражания. Информация об акциях, о доставке, список всех товарных категорий - все, что нужно клиентам, когда они впервые попадают на сайт.
Пользователь может оценить ассортимент по главной.
Mvideo.ru
Здесь представлены пусть не все категории, но хотя бы популярные (покрывающие почти все множество категорий сайта), причем в верхней части страницы.
Пользователь может оценить ассортимент по главной.
Ozon.ru
Интернет-магазинам широкого профиля сложно обозначить весь свой ассортимент на главной странице. Вывод трех иконок («Книги», «Электроника» и «Бытовая техника») в верхней части страницы дают пользователю только частичное понимание того, что можно купить на сайте. Ниже выводятся ссылки на страницы с одеждой и детскими товарами, но это не вся продукция Ozon.
Пользователь не может оценить ассортимент по главной.
Eldorado.ru
На главной странице список категорий свернут под ссылкой «Каталог товаров», что, по мнению Baymard, ошибка.
Пользователь может оценить ассортимент по главной.
Bonprix.ru
Все сайты из нашей выборки, продающие одежду, отлично справляются с задачей сформировать у пользователя представления о своем каталоге, и Bonprix не исключение.
Пользователь может оценить ассортимент по главной.
Sportmaster.ru
Создатели сайта Sportmaster.ru также совершили ошибку, свернув категории под ссылкой «Каталог». Пользователь не может оценить ассортимент по главной.
Из рассмотренных десяти сайтов только на пяти реализован полноценный вывод категорий на главной. Однако размещение всего каталога товаров на главной странице помогает посетителю определить ассортимент сайта, но не гарантирует покупку. Поэтому пробуйте, тестируйте и делитесь результатами.
