Сделайте категории товаров элементами главной навигации в мобильных интерфейсах (на 33% сайтов этого нет)
• Чтобы разобраться в каталоге товаров и найти нужный товар, пользователи мобильных интерфейсов полагаются на главную навигацию
• В нашем UX-исследовании интернет-магазинов использование главной навигации для поиска товаров вызывало трудности в случае 33% мобильных сайтов
• Если сделать категории товаров элементами навигации верхнего уровня, большинству покупателей будет легче найти нужный товарКак правило, пользователи мобильных интерфейсов могут получить доступ к основным категориям товаров через меню навигации двумя способами:
• Непосредственно в главном меню, где каждая категория раскрыта по умолчанию
• В главном меню, где все категории вложены в один пункт навигации, например, «Товары» («Products») или «Разделы» («Departments»)Во время тестирования второго способа, реализованного в мобильных интерфейсах, некоторые участники сталкивались с трудностями, когда начинали просматривать товары.Действительно, несмотря на кажущееся незначительное увеличение трения, тестирование выявило, что вложенность основных категорий товаров в главную навигацию мобильного сайта может привести к тому, что покупатели откажутся от навигации по сайту через главное меню, например, в пользу поиска. Это может привести к серьёзным последствиям — например, если люди будут составлять неэффективные поисковые запросы, или если сама поисковая система сайта будет плохо работать, возрастает вероятность того, что пользователи не смогут найти нужный товар.Несмотря на последствия, UX-исследование сайтов электронной коммерции выявило, что в 33% случаев дизайнеры не делали категории товаров элементами верхнего уровня в главном меню навигации мобильных интерфейсов.В этой статье мы обсудим результаты масштабного тестирования и результаты Premium-исследования в отношении организации пунктов меню главной навигации мобильного интерфейса:
• Почему размещение категорий товаров под ссылкой «Магазин» («Shop») или аналогичной ссылкой приведёт к росту проблем при попытке пользователями открыть главную навигацию для доступа к списку товаров
• Как список категорий товаров в формате элементов верхнего уровня в главной навигации мобильного интерфейса устраняет эту проблемуПочему размещение категорий товаров под ссылкой «Магазин» («Shop») снижает эффективность навигации в мобильных интерфейсах
❌ «Всё очень запутанно». Участник тестирования открыл главную навигацию в мобильной версии сайта Target (первое изображение), просмотрел разделы и решил воспользоваться поиском (второе изображение). У пользователей, которые хотят посмотреть товары, не было точки входа, поскольку все категории товаров были сведены к одному разделу — «Категории» («Categories»). Кроме того, обратите внимание на свободное пространство в навигации — там можно было бы с лёгкостью разместить основные категории товаров, чтобы помочь пользователям начать их просмотр.
❌ «Я хотела узнать, есть ли здесь раздел с товарами по уходу за кожей, как на сайте Macy's». Участница тестирования открыла главную навигацию в мобильной версии сайта Walgreens (первое изображение), посмотрела варианты, затем закрыла главную навигацию и нажала на раздел «Выбрать товары» («Shop Products») на главной странице (второе изображение). Обратите внимание, что тот же путь был в главной навигации, но там она его не выбрала. Когда главная навигация перегружена множеством других второстепенных путей, пользователям мобильных интерфейсов сложно начать поиск товаров.
❌ «Что бы это ни было здесь [категории на главной странице], это должно быть там же [в меню]». Участник тестирования хотел, чтобы категории товаров на мобильном сайте Kohl's, которые были доступны на главной странице (первое изображение), сразу же отображались в главном меню (второе изображение).
❌ «Как пользоваться этим сайтом?... Я не понимаю, как пользоваться их сайтом. Вы видели, как быстро я ориентируюсь на сайте Walmart, но этим сайтом я пользоваться не могу». Участница тестирования ломала голову над пунктами верхнего уровня главной навигации мобильного сайта Sephora, прежде чем в конце концов выбрала пункт «Магазин» («Shop»). Когда категории товаров находятся под одной ссылкой, такой как «Магазин» («Shop»), для многих пользователей неочевидно, что можно начать просмотр товаров с неё.
❌ Многие покупатели будут тормозить в начале просмотра сайтов Best Buy (первое изображение) и Musician's Friend (второе изображение), поскольку в главном меню этих сайтов по умолчанию нет категорий товаров.
Когда дело доходит до навигации по сайту, пользователи мобильных интерфейсов, как правило, оказываются в невыгодном положении по сравнению с покупателями, которые заходят на сайт с компьютера. В мобильных версиях людям не хватает обзора, который может предоставить навигация, выпадающая при наведении курсора и доступная пользователям десктопной версии.
Действительно, вместо того, чтобы быстро навести курсор на пункты главного меню и увидеть, как разворачиваются категории и подкатегории товаров, пользователям мобильных интерфейсов приходится принимать решение и совершать более трудоёмкое действие — касаться пункта меню при просмотре главной навигации.
Если сразу непонятно, с чего начать просмотр категорий товаров, некоторые покупатели решат отказаться от использования главной навигации в пользу поиска или попытаются перейти к нужным категориям через главную страницу.
Тестирование показало, что многие пользователи мобильных интерфейсов проявляют нетерпение и закрывают главную навигацию, если сталкиваются со вторичными навигационными пунктами, такими как вход в аккаунт, помощь, гайды по продуктам и другими, которые находятся на одном уровне с категориями товаров.
Как следствие, эти люди вынуждены использовать стратегию вторичной навигации, которая может быть менее подходящей для них. В итоге они не могут найти интересующий их товар.
Перечень категорий товаров в виде элементов верхнего уровня в главной навигации мобильного интерфейса
✅ В интернет-магазинах L.L. Bean (первое изображение) и Williams Sonoma (второе изображение) пользователи сразу видят категории товаров при открытии главного меню. Таким образом, они могут сразу же приступить к поиску подходящих товаров.
Решение проблемы, которую мы рассмотрели выше, простое: сделайте такие категории товаров, как «Мужское» («Men’s»), «Женское» («Women’s»), «Детское» («Kid’s») или «Ноутбуки» («Laptops»), «Наушники» («Headphones»), «ПК» («PCs») элементами верхнего уровня в главной навигации мобильного сайта.
Перечень категорий товаров в виде элементов верхнего уровня позволит пользователям начать поиск товаров сразу после того, как они откроют главное меню.
Более того, покупатели, которые впервые попали на сайт, смогут быстро понять, какие типы товаров там есть, и таким образом получить представление об ассортименте товаров.
✅ На сайте Adidas категории «Мужчины» («Men»), «Женщины» («Women») и «Дети» («Kids») доступны в виде основных элементов навигации верхнего уровня, а другие пункты, такие как «Мой аккаунт» («My account») и другие находятся ниже.
Обратите внимание: это не означает, что следует делать категории товаров единственными элементами главной навигации.
Напротив, многие сайты считают важным включить и другие навигационные опции, например, «Местоположение магазина» («Store Locator»), «Контакты» («Contact»), «Войти» («Sign In»), «Отследить заказ» («Track Order») и другие.
Тестирование показало, что можно (и зачастую полезно) включать эти пункты в главную навигацию. При условии, что дизайнеры оформили их отдельно от категорий товаров. Таким образом с помощью визуальной иерархии пользователи будут чётко понимать, что на большинстве сайтов это второстепенные опции.
Например, можно разместить дополнительные варианты под основными категориями товаров, использовать для них уменьшенный размер шрифта и разделитель.
✅ На сайтах с большим количеством категорий, таких как REI, может возникнуть проблема с их размещением в главном меню. Одно из решений — отобразить наиболее популярные категории в меню по умолчанию и предоставить ссылку «Ещё» («More») (первое изображение). Она позволит пользователям получить доступ к остальным категориям (второе изображение).
Кроме того, на сайтах с большим количеством категорий верхнего уровня в меню можно отобразить самые важные из них по умолчанию, а остальные сделать доступными по ссылке «Ещё» («More»).
Таким образом, большинство пользователей попадут туда, куда им нужно, одним нажатием. Другие же смогут попасть в менее важные категории, если сделают ещё одно дополнительное нажатие.
Такое решение снижает вероятность того, что покупатели не будут знать, с чего начать просмотр товаров, независимо от количества категорий товаров на сайте.
Также подумайте о том, чтобы сделать категории товаров элементами верхнего уровня главной навигации в десктопной версии
❌ Пользователям, которые попали на страницу этого товара, придётся навести курсор на пункт меню «Магазин» («Shop»), чтобы узнать о широком ассортименте товаров, которые продаёт Argos (Великобритания). Поэтому, если этот товар им не подойдёт, у них не будет возможности сразу купить что-то другое из другой категории или подкатегории.
✅ На сайте Musician's Friend такие категории верхнего уровня, как «Гитары» («Guitars»), «Бас-гитары» («Basses») и «Усилители и эффекты» («Amps & Effects»), представлены на первом уровне главной навигации. Это позволяет пользователям немедленно нажать на каждую категорию, чтобы увидеть соответствующие подкатегории.
Обратите внимание, что, хотя отображение категорий товаров в главной навигации полезно для пользователей мобильных интерфейсов, покупателям, которые заходят на сайт с компьютеров, также будет удобно, если они увидят категории по умолчанию.
Тестирование показало, что пользователям десктопных версий сайта гораздо легче ориентироваться в условиях повышенного трения, даже если в меню есть только один пункт верхнего уровня — «Магазин» («Shop») или аналогичный с похожим названием. Тем не менее, демонстрация категорий товаров поможет подгруппе покупателей, которые заходят на сайт с компьютера, быстро увидеть каталог сайта и эффективно пользоваться навигацией.
Кроме того, наличие категорий товаров в виде элементов верхнего уровня в десктопных версиях сайта соответствует идеальной реализации мобильных интерфейсов. Этот аспект обеспечивает более плавный переход от мобильных устройств к десктопным (например, для тех пользователей, которые совершают покупки с мобильных устройств, а затем завершают их с компьютера).
✅ «Я хотела бы начать с выбора средства для умывания или скраба для лица». Участница сайта Maya Chia использовала пункт меню «Магазин» («Shop»), чтобы перейти к нужной подкатегории. Хорошо организованное меню «Магазин» («Shop») может быть жизнеспособным дизайн-решением для сайтов с небольшим и однородным каталогом товаров.
✅ «Итак, у нас есть "Голландская печь" ("Dutch Oven"), "Мини" ("Mini"), "Сковорода" ("Skillet"), "Наборы" ("Sets"), "Кладовая" ("Pantry")». Конечно, использование категорий товаров, или даже отдельных продуктов, в качестве элементов первого уровня основной навигации на небольших сайтах даёт такие же преимущества, как и на сайтах крупных розничных сетей. Об этом свидетельствует высказывание участника тестирования во время просмотра им сайта Milo.
Наконец, отметим: тестирование показало, что на десктопных версиях сайта с небольшими каталогами категория «Магазин» («Shop») в главной навигации верхнего уровня не мешала участникам. Вероятно, это связано с гораздо менее сложной системой категорий, которую дизайнеры используют на таких сайтах. Поэтому в данном случае не так важно размещать категории товаров в главной навигации.
Помогите пользователям мобильных интерфейсов быстро найти то, что они ищут
❌ Перегруженная главная навигация на сайте Office Depot, в которой «Товары» («Products») находятся на одном уровне с «Идеями» («Ideas») и другими второстепенными категориями будет мешать пользователям, которые хотят найти необходимые товары.
Чтобы некоторые покупатели не останавливались, начав поиск товаров, важно уменьшить трение при навигации. В мобильных интерфейсах сделайте категории товаров основными пунктами навигации верхнего уровня.
В противном случае, как было замечено в ходе тестирования, некоторые покупатели будут открывать главную навигацию, чтобы затем быстро закрыть её, потому что будут ошеломлены и сбиты с толку вариантами, которые вы им предоставите.
Для десктопных версий сайтов рассмотрите возможность отображения категорий товаров в главной навигации. Хотя тестирование показало, что в отличие от пользователей мобильных интерфейсов, покупатели, которые заходят на сайт с компьютеров, скорее всего, лишь немного замнутся, но не собьются при использовании навигации.
Если вы уберёте этот подводный камень, на котором споткнулись 33% сайтов в нашем UX-исследовании интернет-магазинов, то пользователи мобильных интерфейсов смогут быстро разобраться в каталоге товаров и начать поиск того, что им нужно.
Перевод статьи Make Product Categories the Top-Level Navigation Items on Mobile Sites (33% Don’t) из блога Baymard
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!