67% мобильных сайтов имеют посредственную или низкую производительность

Современное состояние UX-дизайна главной страницы и навигации по категориям в электронной коммерции

Внедрение 11 передовых методов, описанных в этой статье, поможет значительно повысить производительность сайта до «приемлемого» (или даже «хорошего») уровня.

1. Обеспечьте полный охват ссылок на мобильных главных страницах (59 % этого не делают)
2. Разделите категории и подкатегории на удобные для восприятия блоки (60 % не делают этого)
3. Выделите текущую область интересов пользователя в основной навигации (95 % пользователей этого не делают)
4. Добавьте кликабельные заголовки в основную навигацию (33% этого не делают)
5. Добавьте задержку при наведении для выпадающего меню основной навигации (61 % этого не делают)
6. Избегайте слишком заметной рекламы на главной странице (55 % пользователей этого не делают)
7. Правильно разместите карусели (если они есть) на главной странице (32% не делают этого)
8. Четко оформляйте кликабельные элементы интерфейса (51% этого не делают)
9. Предоставьте чёткие и информативные миниатюры подкатегорий (55 % не делают этого)
10. Представляйте подкатегории как основной контент на страницах промежуточных категорий (76 % этого не делают)
11. Всегда обеспечивайте прямой доступ к товарам, изображённым на вдохновляющих картинках (70 % этого не делают)

Исследование UX-дизайна от Baymard за 2025 за год показало, что эффективность навигации по главной странице и категориям на большинстве ведущих сайтов находится на уровне «посредственном» или «низком» (58% сайтов для настольных компьютеров и 67 % сайтов для мобильных устройств).

Таким образом, среднестатистический сайт не обеспечивает «достойный» UX для главной страницы и навигации по категориям.

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

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

Внедрение этих рекомендаций поможет вам улучшить UX главной страницы и категорий.

1) 59% не предоставляют полный набор ссылок на мобильных главных страницах

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

«Хорошо. Ни одно из этих платьев мне не нравится. Думаю, я вернусь на главную страницу». Участница Banana Republic нажала на объявление «Скидка 50 %» на главной странице (первое изображение). Затем она неправильно поняла список товаров, решив, что представленные товары (среди которых были пальто и другие женские вещи) — это полный список женской одежды (второе изображение). Ограниченные пути на мобильных главных страницах могут легко ввести в заблуждение спешащих пользователей.

Тестирование показало, что у пользователей мобильных домашних страниц и приложений могут возникнуть проблемы с обзором при выборе рекомендуемой области — например, “Женское > Новые поступления” — если в ссылке на рекомендуемую область не указано, что нажатие на ссылку приведет к переходу к определенному списку товаров.

Последствия этого недоразумения могут быть серьезными.

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

«48-часовая распродажа на улице. Я бы сразу кликнула и посмотрела, что у них там в продаже». Участница из Колумбии нажала на кнопку «Распродажа в магазине» на главной странице (первое изображение). Затем она с радостью увидела раскрывающийся список, в котором можно было указать, какие именно товары она хочет видеть: «О, мне нравится раскрывающийся список. Мне нравится, что всё находится прямо здесь». (второе изображение). Правильно обозначенные пути на мобильных главных страницах помогают пользователям ориентироваться на сайте.

Поэтому, если вы решили предоставить доступ с главной страницы мобильного устройства к подкатегориям или спискам товаров с применёнными фильтрами, то укажите полный охват в тексте ссылки.

Это означает, что для многих ссылок необходимо указать названия категории и подкатегории/фильтра — например, используйте «Новинки для женщин» в качестве микротекста кнопки, а не «Новинки» в качестве заголовка и только «Новинки для женщин» в качестве микротекста кнопки.

2) 60%. Не разделяйте категории и подкатегории на удобные для управления части

«Сначала я бы, наверное, начал с — ого, здесь так много вариантов!» Этот участник Ashley Furniture был ошеломлён количеством подкатегорий в меню «Мебель».

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

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

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

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

«Итак, если мы вернёмся к разделу „Волосы, кожа и ногти“…они довольно хорошо всё расставили по полочкам». Благодаря тому, что в каждой категории на The Vitamin Shoppe было представлено разумное количество подкатегорий, участнику тестирования было легко выбрать наиболее подходящую.

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

3) На 95% сайтов текущая область интересов пользователя не отображается в основной навигации

«Кажется, я не понял, что этот OneDrive — «Личный» (первое изображение), а этот — «Рабочий» (второе изображение). Кажется, это немного сбило меня с толку. Очевидно, что мне нужен «Рабочий»». Этот участник тестирования в Microsoft Teams не сразу понял, что просматриваемая им информация не имеет отношения к его поиску «облачных хранилищ и сервисов для обмена файлами в рабочих целях», потому что его текущее местоположение не было выделено в основной навигации.

В Anine Bing сложно определить место этой страницы в иерархии, потому что текущий контекст пользователя неясен (также обратите внимание на нестандартное расположение иерархических хлебных крошек «Классическая одежда» прямо над названием товара). Таким образом, пользователям, которые попадают на эту страницу в надежде увидеть похожие товары, придётся гадать, на какую основную категорию навигации нужно нажать, чтобы расширить контекст.

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

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

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

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

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

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

В Marks & Spencer категория «Дом» верхнего уровня выделена ярко-зелёным цветом в основной навигации, что даёт пользователям понять, что этот товар относится к категории «Дом», а не «Мебель». Выделение текущей категории в основной навигации может быть таким же простым, как изменение цвета шрифта: главное, чтобы стиль «текущей категории» в основной навигации достаточно отличался от других вариантов основной навигации.

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

Несмотря на важность ориентиров для совершения покупок в интернете, поразительные 95% сайтов не указывают текущую область интересов пользователя в основной навигации (это даже хуже, чем 91% в 2024 году).

4) На 33% сайтов заголовки не кликабельны

«А ещё эти элементы не связаны между собой, поэтому я не могу перейти по ссылке на категорию». Участник Argos в Великобритании хотел просмотреть категорию «Наушники и аудио», но обнаружил, что заголовок представляет собой статичный текст. Для пользователей, которые хотят просматривать широкий ассортимент товаров, ссылки, ведущие только к отдельным подкатегориям (например, «Hi-Fi системы» в этом примере), гораздо менее полезны.

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

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

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

«Сначала я бы посмотрел раздел “Обувь”». Вместо того чтобы выбрать одну из доступных подкатегорий обуви, этот участник Allbirds решил просмотреть весь ассортимент, нажав на категорию «Обувь» в раскрывающемся меню.

Наличие родительских категорий в реальной иерархии каталога товаров (а не только в виде поверхностных текстовых меток) крайне важно для поддержки исследовательского просмотра товаров.

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

5) На 61% сайтов нет задержки при наведении курсора

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

«Это меня очень раздражает. Я бы, наверное, просто ушёл с сайта. Просто потому, что... когда я туда захожу [выпадает выпадающее меню]. И я думаю, что, возможно, нужно немного подождать, прежде чем что-то появится. Если я просто перехожу по ссылке, оно сразу же появляется... так что, наверное, это главная причина, по которой я не хочу ничего здесь покупать». Из-за «мерцания» меню на британском сайте Appliances Online этот участник решил уйти с сайта. Он хотел изменить поисковый запрос, но меню появлялось каждый раз, когда он наводил курсор на строку поиска.

«Если навести курсор на это место, откроется всё [раскрывающееся меню], и его будет сложно закрыть. Это минус». Участнику было сложно работать с большим раскрывающимся меню в H&M, которое открывалось сразу же, как только курсор наводился на него.

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

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

Задержка при наведении курсора в Macy’s означала, что курсор мог пройти над основным меню навигации, не вызвав случайного раскрытия меню. Таким образом, пользователи могли, например, корректировать условия поиска, перемещая курсор над основным меню навигации, не вызывая его случайного раскрытия.

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

Как правило, задержки в 300–500 миллисекунд достаточно, чтобы устранить самые серьёзные проблемы с «мерцанием», не создавая при этом ненужных препятствий для намеренного наведения курсора.

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

6) 55% сайтов используют чрезмерно агрессивную и отвлекающую рекламу на главной странице

«Это меня убивает. Понимаете, здесь столько всего происходит… а потом я прокручиваю страницу вниз, и появляется это. „Мои предложения“, занимающие весь экран, — это отвлекает». Реклама и предложения в верхней и нижней частях главной страницы GAP раздражали этого участника. Подобные отвлекающие факторы влияют на способность пользователей оценивать каталог товаров на сайте и создают негативный настрой.

Мне кажется, что моя первая реакция на эту главную страницу — это то, что она немного перегружена. Здесь происходит много всего разного. Они рекламируют различные распродажи… так что, опять же, это сбивает с толку. Главные страницы мобильных приложений, на которых преобладает реклама, также могут сбивать с толку пользователей, как, например, этого участника, который впервые пользуется приложением Home Depot.

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

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

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

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

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

На главных страницах мобильных сайтов реклама не должна быть слишком заметной или визуально отвлекающей.

7) 32% сайтов, использующих карусели, реализуют их неправильно

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

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

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

«У этих ребят есть несколько пешеходных экскурсий, которые показывают Лондон с разных сторон» — О! Это изменилось очень быстро, это странно. Я ещё не закончил — всё происходит слишком быстро. Я даже не могу прочитать, что написано в этих блоках с TripAdvisor». Если слайды сменяются слишком быстро, чтобы пользователи успели ознакомиться со всем контентом, как в случае с этими слайдами на сайте Fun London Tours во время масштабного тестирования туристических туров и впечатлений, от каруселей будет мало толку, и они, скорее всего, произведут плохое впечатление на пользователей.

В частности, слайды карусели не должны вращаться слишком быстро на настольных компьютерах. Например, слайды, на которых есть только заголовок (и несколько тегов и подписей), должны вращаться через 5–7 секунд, а слайды с большим количеством текста могут оставаться неподвижными до 10 секунд.

На мобильных сайтах слайды карусели вообще не должны автоматически поворачиваться (из-за отсутствия наведения).

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

Более эффективная альтернатива каруселям — просто отображение слайдов в виде отдельных разделов на главной странице, как показано здесь, на Williams Sonoma.

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

Вместо этого пользователи прокручивают главную страницу — намного более простой и привычный способ взаимодействия с веб-сайтом.

8) На 51% сайтов не указано, куда ведут области попадания в визуальных элементах

Когда пользователи нажимали на элемент в Hayneedle, появлялась граница, из-за которой казалось, что вся область — это одна ссылка. На самом деле ссылка Добавить в корзину добавляла товар в корзину, а нажатие в любом другом месте границы вело на страницу товара.

Было замечено, что участники тестирования сомневались, когда несколько элементов были объединены в один визуальный элемент.

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

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

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

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

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

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

9) На 55% сайтов отсутствуют миниатюры подкатегорий или они трудночитаемы

На Amazon подкатегории электроники представлены в виде текста. Это не позволяет пользователям визуально определить подкатегорию.

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

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

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

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

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

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

Миниатюры на странице промежуточной категории Wayfair явно обозначают подкатегории, а не конкретные товары. Миниатюрный размер изображений подкатегорий подчеркивает их назначение как «визуальных ярлыков», которые усиливают информационный посыл, поскольку они достаточно крупные, чтобы их можно было распознать, но при этом не содержат деталей, необходимых для описания товаров.

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

10) На 76% сайтов подкатегории не являются основным контентом на страницах промежуточных категорий

«У меня много предложений, но я больше не вижу категорий. Я ожидал, что если открою страницу, то увижу больше товаров». Когда подкатегории сложно найти на страницах промежуточных категорий, как, например, на этой странице Argos (Великобритания), пользователям приходится прилагать больше усилий, чтобы найти нужную подкатегорию.

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

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

Такие реализации отвлекают пользователей от первоначальной задачи — перехода в соответствующую подкатегорию — и затрудняют поиск и выбор последующих путей навигации.

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

«Итак, для начала я хочу приобрести «обеденный гарнитур». Думаю, это сэкономит мне деньги». Этот участник распродажи мебели от Bob’s Discount Furniture, использующий iOS, просматривал страницу промежуточной категории «Обеденная зона» и был рад сразу же увидеть ссылку на «обеденные гарнитуры», так как он предпочитал покупать стол и стулья в комплекте, чтобы сэкономить.

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

11) 70% сайтов не предоставляют прямого доступа к товарам, представленным на вдохновляющих изображениях

На странице промежуточной категории Дика на видном месте были представлены товары в категории «Стиль жизни» (первое изображение). Однако при нажатии на изображение в категории «Стиль жизни» пользователи попадали на страницу с общим списком товаров, и представленные товары не входили в первые 10 позиций в списке (второе изображение). Пользователей может заинтересовать просмотр представленных товаров на страницах промежуточных категорий, но их способность найти (и приобрести) эти товары снижается, если они не доступны сразу.

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

Как сказал один из участников: «Я хочу это — что мне делать? Я хочу вот это», — пока он пытался найти товар, представленный на странице промежуточной категории.

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

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

Тот факт, что рекомендуемые товары на странице промежуточной категории (первое изображение) отображаются в верхней части списка связанных товаров (второе изображение) на мобильном сайте Argos, означает, что пользователям не нужно долго прокручивать страницу, чтобы найти нужные товары.

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

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

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

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

Очевидно, что предстоит проделать большую работу, чтобы улучшить UX главной страницы и навигации по категориям на среднестатистическом сайте.

Это перевод переосмысленной нами статьи об исследовании Baymard.