- Статьи
- 9 мин на чтение
- 47
Сделайте категории товаров элементами главной навигации в мобильных интерфейсах (на 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 про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- Baymard
