Лого vc.ru

Что должно быть на главной странице интернет-магазина в мобильной версии — исследование Baymard

Что должно быть на главной странице интернет-магазина в мобильной версии — исследование Baymard

Исследовательская компания Baymard Institute зимой 2016 года провела юзабилити-исследование главных страниц ecommerce-сайтов, среди которых были крупнейшие бренды США вроде Amazon и Walmart. Результаты тестирования сооснователь Baymard Institute Кристиан Холст изложил в статье, в которой показал примеры эффективных и неэффективных главных страниц и дал советы дизайнерам.

Дизайнер «Гильдии вольных проектировщиков» Дарья Сушкова перевела материал для vc.ru, дополнила его своими комментариями и изучила мобильные версии десяти российских интернет-магазинов.

Поделиться

В ходе юзабилити-исследования Baymard демонстрировали респондентам главные страницы мобильных eсommerce-cайтов. Они заметили, что 70% пользователей при входе на главную страницу сайта активно скроллят ее и быстро просматривают контент. Специалисты Baymard сделали вывод, что пользователи пытаются оценить ассортимент сайта по контенту главной страницы. Такое поведение наблюдалось как у тех, кто впервые пришел на сайт, так и у тех, кто уже был с ним немного знаком.

По опыту членов «Гильдии», большинство пользователей крупных интернет-магазинов, начинающих свой путь по сайту с главной страницы, — уже лояльные клиенты бренда. Они заходят на сайт напрямую или по брендовым ключевым словам и, скорее всего, хорошо знакомы с его ассортиментом.

Исследование 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 вместо размещения двух категорий, связанных с туризмом, было бы лучше показать один туристический товар и какой-нибудь другой тип товара (скажем, велосипед или коврик для йоги) — чтобы продемонстрировать, что на этом сайте торгуют не только туристическим снаряжением.

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

— Примечание от «Гильдии вольных проектировщиков»

При отображении списка категорий верхнего уровня не сворачивайте его в ссылку «Отделы» или «Категории», как сделано на сайте 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 также совершили ошибку, свернув категории под ссылкой «Каталог». Пользователь не может оценить ассортимент по главной.

Из рассмотренных десяти сайтов только на пяти реализован полноценный вывод категорий на главной. Однако размещение всего каталога товаров на главной странице помогает посетителю определить ассортимент сайта, но не гарантирует покупку. Поэтому пробуйте, тестируйте и делитесь результатами.

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

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

0

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

«не считаю сворачивание каталога ошибкой, пользователю важно найти каталог вообще и если кнопка каталога прям перед ним это нормально, он спокойно нажмет на нее и увидит категории.»

0

Лишнее действие убивает конверсию

0

об этом надо говорить на конкретных примерах
1. раскрытое меню
2. свернутое
при прочих равных параметрах

0

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

Он уже пришёл в магазин! И не пойдёт в другой в офлайне. Большая же разница

нет, то есть физически да, но по сути одно и тоже, тут надо снова идти в поиск писать запрос искать там другой магазин, это по своей сути для пользователей тоже самое что и - выйти на улицу идти по ней искать другой магазин

0

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

все то же самое, суть и поведение такие же

0

Вы проберетесь, а kpi конверсии нет

0

Возможно в Baymard не учли такой показатель как уровень узнаваемости бренда и осведомленности о продукции. Конечно, когда у тебя небольшой инет-шоп борохла, а таких шопов тысячи, то разумно для юзера преподнести товарную рубрику, чтобы юзера осведомить. Но к Бестбай и Эльдорадо это не относится. Это гораздо выше уровень, охватывающий миллионную аудиторию в онлайне/оффлайне. 80%+ аудитории осведомлены о продукции.

А вот акции как раз и рулят у них, особенно при контексте.

Юлмарт вообще странный. Сайт на столько тяжелый, и долго грузится, что удивительно.

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

И акции и скидки закрывают повторных клиентов на допчеки, тем более, подозреваю, в акции они суют то, что данному профилю интересно, чем он интересовался ранее. Как минимум это глупо не использовать.

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

У нас (1,5 млн посетителей в мес, бытовая техника, ванные, кухни) на главную приземляются всего чуть более 20%. При этом примерно половина активно юзает список категорий / навигацию чтобы найти нужный товар (тот типаж, который конкретно ищет нужное), а вторая половина предпочитает более контекстно-специфичные штуки, типа "я ремонтирую / обставляю новый дом, покажите мне скорее ваши охуенные кухни целиком, я хочу инспирейшена" или "я не совсем понимаю чего мне надо, дайте почитать руководства или свяжите со мной эксперта".

Исследование конечно хорошее, но тут как в анекдоте, снова получилось про среднюю температуру по больницу и one size fits all.

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Roman Sentyuryov

Пока нет

Правительство предложило сажать за киберпреступления на срок до десяти лет
0
Rokotova
Нерудас

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

«Омоймот» — сайт для подбора мотоциклов с блогами пользователей
0
Leo Silaev
Zillion Whales

Ну так может оно к лучшему :)

Mushroom Wars 2: рассказ российских разработчиков о том, какой путь прошла игра от концепта до релиза
0
Дмитрий Астапкович

Прикольно, что первый 2d прототип MW, который мы сделали на двоих с программистом за 2 недели, отверги. Типа нужно крутое 3d, которое начали делать. Примерно год попыток спустя игру выпустили все же в 2d. А я тогда уже был в Nival.

Mushroom Wars 2: рассказ российских разработчиков о том, какой путь прошла игра от концепта до релиза
0
Personne Connat
Newflora

Абсурдность, на мой взгляд, в позиционировании. Дикси - это бомжачка, по большому счету, а реклама сделана "стильно модно молодежно" - я вижу тут совершенно четкий расфокус. На мой взгляд, целенаправленно в Дикси ходит только старшее поколение, чтобы сэкономить. Соответственно РК должна быть под стать своей ЦА. Кроме того, когда я зашел в Дикси глянуть ножи - я не нашел их без помощи продавца. Стоял маленький стеллажик возле пива. Вопрос - нахера вливать столько бабок в оффлайн РК и при этом так убого демонстрировать рекламируемый товар? По-идее, во время этой акции первое, что я должен видеть, заходя в магазин Дикси - эти ножи, а не случайно натыкаться на них или спрашивать, как их найти. А я же так и зашел целенаправленно посмотреть акцию, обошел магазин, ничего не нашел) На кассе спросил "а что за акция с ножами?" - меня проводили до стеллажа ))

«Товарооборот на 44% превысил ожидания маркетологов»: история акции с «Прилипалами» в «Дикси»
0
Показать еще