Меню гамбургерів і прихована навігація Пошкоджують показники UX

1. Навіщо вивчати приховані та видимі навігації
2. Заходи: використання навігації, відкритість вмісту, час, складність завдання
3. Використання навігації: прихована навігація використовується менше та пізніше в завданні
4. Прихована навігація призводить до погіршення досвіду користувача
5. Відмінності між робочим столом і мобільним користувачем
6. Чому прихована навігація є менш ефективною
7. Рекомендації з навігації

Наше кількісне тестування зручності прихованих меню (наприклад, значків гамбургерів) та видимих ​​меню (наприклад, посилання у верхній частині сторінок) показує, що:

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

• Прихована навігація забезпечує гірший досвід користувача, ніж видима або частково видима навігація, як в мобільних телефонах, так і в інтерфейсах користувача настільних ПК. Цей висновок стосується кількох показників UX, включаючи оцінку користувачами складності завдань, часу, витраченого на виконання завдань, та успіху завдань.
• На настільних комп'ютерах приховування навігації погіршує досвід і відкритість навігації більше, ніж на телефонах.
• Приховування навігації в основному впливає на вміст, який не доступний безпосередньо через посилання на сторінці.

Навіщо вивчати приховані та видимі навігації

Чуйний дизайн має багато заслуг ; однак, одна з його менш удачливих ефектів була надмірна популярність мобільних перших конструкцій, які погано переводяться на великі екрани робочого столу. Зрозуміло, що «мобільний перший» сам по собі не є проблемою. Скоріше, проблема полягає в тому, щоб брати досить хороші мобільні конструкції і переносити їх на настільні комп'ютери, де вони також не працюють. Mobile-first не має бути рівним лише мобільному.

(Очевидно, тут існує загальний принцип: якщо методика проектування призначена для розміщення платформ X і Y, то безкомпромісний підхід X-first зробить Y думкою і завдасть шкоди користувачам Y. Як пояснюється в нашому курсі Масштабування інтерфейсів користувача , щоб розробити для X та Y, потрібно враховувати сильні сторони та потреби обох і відповідно адаптувати дві версії веб-сайту.)

Прихована навігація, наприклад меню гамбургерів, є однією з багатьох моделей, натхненних мобільними конструкціями. Екранний простір - це дорогоцінний товар на мобільному телефоні. Для вирішення завдання визначення пріоритетів вмісту в той же час здійснюючи навігацію (та інше хром ) доступні, дизайнери зазвичай покладаються на приховування навігації по меню - часто позначається знаменним значком гамбургера. Як і дешевий ланцюг швидкого харчування, він привернув увагу дизайнерів до його зручності, і тепер щодня обслуговує мільйони, як на мобільних пристроях, так і на настільних комп'ютерах.

Хоча наше якісне тестування користувачів неодноразово демонструвало це навігація, схована в спадному меню, менш відкрита на робочому столі , ми хотіли виміряти розмір цього ефекту в кількісному дослідженні та оцінити відносний вплив прихованої навігації на робочий стіл у порівнянні з мобільним. Для цього ми співпрацювали Щодо користувачів (компанія, що спеціалізується на тестуванні віддалених зручностей) для проведення дослідження з 179 учасниками, які виконали завдання на 6 різних сайтах, як на смартфонах, так і на робочих столах. Результати цього великого дослідження наведені в цій статті. Додаткова стаття включає нашу Детальна методологія дослідження та зображення меню випробування.

Заходи: використання навігації, відкритість вмісту, час, складність завдання

Щоб визначити ефективність і зручність використання різних меню, ми провели тести юзабіліті на робочому столі та мобільних версіях 6 різних веб-сайтів з різними типами навігаційних проектів. Нижче наведено типи навігації:

1. Прихована навігація : основні навігаційні посилання розміщувалися під піктограмою (наприклад, гамбургер) або кнопкою і вимагали відображення явної дії користувача.
2. Видима навігація : головні навігаційні посилання були показані у видимій навігаційній панелі і таким чином можна було побачити простим поглядом без необхідності будь-яких попередніх дій.
3. Комбінована навігація : деякі головні навігаційні посилання були видимі, а деякі були приховані під меню.

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

Ми написали 2 простих завдання для кожного сайту. Деякі завдання можуть бути завершені без використання загальної навігації сайту, тоді як інші завдання вимагають використання навігації (або пошуку). Ось приклад завдання: "Перейдіть на http://www.bbc.com і перевірте, чи є якась інформація про природу чи дику природу, яку вас цікавить. Коли ви знайдете цікаву статтю, будь ласка, скажіть, яка вона є.

Щоб виміряти ефективність цих конструкцій, ми зібрали 5 показників:

1. Використання навігації: чи використовували учасники навігаційні посилання взагалі
2. Час навігації: час від початку завдання до першого використання навігації в цьому завданні
3. Складність завдання: оцінка учасникам складності завдання
4. Відкритість вмісту: чи змогли учасники виявити вміст на сайті
5. Час виконання завдання: час, необхідний людям для виконання завдань

Перші 2 метрики пов'язані з використанням навігації, а останні 3 стосуються якості користувацького досвіду.

(Докладніше про різні типи показників UX, а також про те, як зібрати та проаналізувати їх у нашому повний день Вимірювання досвіду користувача .)

Використання навігації: прихована навігація використовується менше та пізніше в завданні

Для кількісної оцінки використання навігації ми розглянули (1) використання навігації: чи було використано навігацію під час виконання завдання; (2) час навігації: час від початку завдання до моменту використання навігації. (Ми враховували час для навігації, якщо було використано навігацію.)

Ці показники показують, чи корисна навігація, а також чи її легко знайти. Якщо навігація є важливою, ви очікуєте, що вона буде використовуватися все частіше і швидше, ніж це було б важко виявити.

Наші завдання не примушували учасників використовувати навігацію, пошук, посилання на сторінки або будь-які інші функції інтерфейсу. Скоріше, люди могли використовувати все, що вони хотіли в інтерфейсі, щоб виконати завдання. Ми припустили, що якщо навігація буде видимою і здасться корисною для користувачів, вони будуть натискати її; якщо ні, то вони спробують інші речі. Таким чином, ми розуміємо, що не натискання на меню може просто відображати те, що користувачі сприймали щось інше, щоб бути кращим вибором, а не те, що вони не помітили або розпізнали меню.

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

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

1. Як на мобільному, так і на настільному комп'ютері, люди мали значно більшу ймовірність використання навігації, коли всі або деякі параметри навігації були видимі (тобто у видимих ​​і комбінованих умовах).

• На робочому столі люди використовували приховані меню лише в 27% випадків, у той час як вони використовували видиму або комбо-навігацію майже вдвічі: у 48% і 50% випадків відповідно.
• На мобільні люди використовували приховану навігацію в 57% випадків, а комбо-навігація в 86% випадків - в 1,5 рази більше.

Ми провели логістичну регресію змішаних ефектів і виявили, що ці відмінності були статистично значущими. Цей результат не є дивовижним: коли (всі або деякі) навігаційні опції є видимими, вони більш помітні для користувачів. Якщо ніщо інше, розмір екрану навігації з видимим або комбінованим показником більший, ніж у меню, представленому лише значком або міткою, тому люди більше помітять його.

2. Люди мали значно більше шансів використовувати навігацію (прихована або частково видима) на мобільному, ніж на робочому столі.

Є багато можливих пояснень цього висновку:

• Навігація по мобільному пристрою (прихована в меню або частково видима) займає більшу частку простору екрана, ніж на робочому столі, просто тому, що екран менший. Таким чином, люди з більшою ймовірністю помічають це і використовують його. Дійсно, на робочому столі ми бачили багато сесій, де люди навіть не бачили іконку меню. Деякі учасники тесту навіть сказали, що сайти з прихованою навігацією не мали меню.
• Оскільки прихована навігація частіше зустрічається на мобільних пристроях, ніж на стільниці, люди можуть бути більш знайомі з нею і, швидше за все, подумати про її використання.
• Сторінки для мобільних пристроїв, як правило, вимагають більшої прокрутки, мають менше вмісту видно над згином , а іноді й повільніше завантажувати, тому люди можуть вдаватися до використання меню замість того, щоб дивитися на сторінку і вивчати, чи є якийсь вміст, який відповідає їхнім інтересам. На робочому столі швидкість завантаження сторінок висока, а більший екран забезпечує кращий перегляд вмісту сторінки. (Іншими словами, вартість взаємодії доступу до потрібної інформації вище на мобільному, ніж на робочому столі.)

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

1. Як на стільниці, так і на мобільних пристроях, коли навігація була прихована, учасникам було потрібно довше, ніж коли вона була видимою або частково видимою. Наша узагальнена модель змішаних ефектів показала, що цей результат був незначним (p <0,1).

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

Ще кілька секунд, що витрачаються, можуть здатися дріб'язковими, і ми погоджуємося, що це не буде різницею між прекрасним і жахливим досвідом користувачів. Але в ці кілька моментів користувач може почати відчувати розчарування і сумніви в собі. Додайте ще кілька секунд, і користувач може відмовитися від завдання або, принаймні, меню.

Прихована навігація призводить до погіршення досвіду користувача

Інші 3 показники, які ми зібрали, зосереджені на якості користувацького досвіду:

• Виявлення вмісту . Наші завдання були досить простими і давали користувачам достатню кількість свободи (наприклад, «Знайти технологічну статтю, яка вас цікавить»), тому люди були здатні виконувати їх більшу частину часу. Однак, враховуючи фокус нашого дослідження, ми використовували більш нюансивний показник успіху (відкритості змісту), який враховував не тільки те, що люди виконали завдання, але й як вони його завершили. Таким чином, виявлення вмісту визначало, чи можна було знайти вміст, який вони шукали, використовуючи навігацію (а не пошук) у тих випадках, коли вміст не був безпосередньо пов'язаний з домашньої сторінки.
• Рейтинг складності завдання . Наприкінці кожного завдання ми попросили учасників оцінити, наскільки легким або складним було завдання на шкалі від 1 до 7, при цьому 1 було легким, а 7 було складним. Трудність завдання - суб'єктивна метрика; воно вимірює самооцінювану користувачами завдання. Зазвичай це відображає їхній загальний досвід використання сайту, тому високий оцінюваний рівень складності опосередковано вказує на фактичні труднощі у пошуку навігації та навігації по сайту.
• Час на завдання . Цей показник відображав час, необхідний учасникам для виконання завдання, успішно чи ні. Меню може додавати або зменшувати час виконання завдань, якщо його легко або важко знайти, відкрити або використовувати, тому більш довгі часи завдань також відображають додаткову вартість взаємодії через менш корисну навігацію.

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

1. Як на мобільній, так і на настільній роботі, вміст відкритості було значно нижчим, коли навігація була прихована . Цей показник показав більш ніж на 20% падіння відкриттів на сайтах із прихованою навігацією порівняно з сайтами з видимою або комбо-навігацією. Іншими словами, видима або комбінована навігація зробила людей більш схильними до успішного виконання завдання, не покладаючись на пошук.

1. Прихована навігація привела до значно вищих рівнів складності, ніж видима або комбінована навігація : рейтинг складності показав 21% збільшення прихованих умов навігації порівняно з видимим, а 11% - порівняно з комбо-навігацією. Цей результат узгоджується з нашими іншими висновками і зміцнює висновок, що приховування навігації ускладнює виконання користувачами своїх завдань . Видима навігація була визнана найменш складною, швидше за все, тому що її було легко виявити, і користувачі могли негайно сканувати параметри навігації та вибрати одну з них. Інші типи навігації приховують параметри навігації та збільшують вартість взаємодії.

1. Користувачам було потрібно набагато більше часу для виконання завдань на сайтах із прихованою навігацією, ніж на сайтах із видимою або комбінованою навігацією на робочому столі та мобільному пристрої .

• На робочому столі люди були принаймні на 39% повільніше, коли навігація була прихована (у порівнянні з видимими або комбінованими умовами).
• На мобільних людях було 15% повільніше, коли навігація була прихована (у порівнянні з комбінованим станом).

Відмінності між робочим столом і мобільним користувачем

У першому розділі цієї статті ми повідомили, що користувачі мобільних пристроїв значно частіше використовують навігацію, ніж користувачі настільних ПК (див. Малюнок 1). Тут ми обговорюємо відмінності, пов'язані з робочим столом - мобільними, пов'язаними з показниками досвіду користувачів.

1. Прихована навігація, швидше за все, зменшить вміст вмісту на робочому столі, ніж на мобільному . Іншими словами, коли користувачам доводилося виявляти вміст, який вимагав використання навігації, вони, швидше за все, зазнали невдачі на робочому столі, ніж на мобільному. Більше того, падіння успіху було більше, коли навігація була прихована. Цей результат також можна пояснити підвищеною схильністю користувачів до використання пошуку: пошук є більш помітним (у більшості випадків) на робочому столі, і користувачі можуть бути більш схильними до його використання, коли шлях до вмісту не з'являється відразу.
2. Користувачі настільних комп'ютерів були швидшими, ніж користувачі мобільних пристроїв (при поєднанні всіх типів навігації) У середньому користувачі мобільних пристроїв мали більше 12% часу для виконання завдань. Цей результат не дивно: через невеликий екран і вузький канал зв'язку між користувачем і пристроєм, отримання такого ж вмісту на мобільному телефоні зазвичай вимагає більше взаємодії.

Чому прихована навігація є менш ефективною

Чому приховані навігації мають ці ефекти? У всій статті ми натякали на кілька відповідей:

1. Низький характер : невеликий значок важче помітити на великому екрані (і навіть на меншому мобільному).
2. Низький інформаційний аромат : піктограма меню або ярлик зазвичай не повідомляють людям, що всередині неї, тому вони не знають, чи знайдуть вони те, що потрібно, натиснувши на нього.
3. Додаткова робота : Щоб з'ясувати, що всередині меню, люди повинні розширити його. Це збільшує витрати на взаємодію для користувачів і робить їх менш імовірними, або, якщо вони це роблять, вони можуть тривати довше.
4. Відсутність стандартів : Прихована навігація здійснюється різними способами різними сайтами. Деякі сайти використовують його, деякі - ні. На мобільні моделі починають формуватися, але на робочому столі є багато мінливості і невідповідності в розміщенні і маркуванні прихованої навігації.
5. Низька обізнаність : особливо на настільних комп'ютерах приховування навігації не є звичайною схемою, і люди можуть не очікувати, що вони зможуть знайти глобальну навігацію в розширеному меню. Деякі люди також можуть бути незнайомі з значком гамбургера, який часто використовується для таких меню. Це низьке знайомство посилюється відсутністю стандартів, які зменшують довгострокову здатність до навчання (як далі обговорюється в нашому курсі Людський розум і юзабіліті , навчання полегшується повторним впливом на одну і ту ж схему.)

З цих 5 пунктів проти прихованої навігації, тільки останній може знизитися в наступні роки. Гіпотетично, також може статися підвищена стандартизація дизайну (що також підвищить рівень знайомства), але наш досвід спостереження за веб-дизайном розвивається протягом десятиліть не робить нас оптимістичними, що сильні стандарти дизайну з'являться найближчим часом. 3 найбільших пункти низького значення, низький інформаційний запах і додаткові роботи завжди будуть прокляттям на прихованій навігації, що зменшить її зручність використання.

Рекомендації з навігації

Які запити цього дослідження для вашого наступного дизайнерського проекту?

Робочий стіл : для відображення навігаційних опцій існує безліч об'єктів на екрані. Ми рекомендуємо:

• Не використовуйте приховану навігацію (наприклад, іконки гамбургер) у настільних інтерфейсах користувача.
• Замість цього виведіть параметри навігації верхнього рівня, як правило, у верхній частині сторінки або вниз ліворуч.

Мобільний : Для телефонів не існує жорсткого правила. Але наші загальні рекомендації:

• Якщо на вашому сайті є 4 або менше навігаційних посилань верхнього рівня, відображати їх як видимі посилання.
• Якщо ваш сайт має більше 4 навігаційних посилань верхнього рівня, єдиним розумним рішенням є приховування деяких з них. Ми виявили, що покарання юзабіліті, спричинене прихованою навігацією, дуже присутня на мобільному телефоні, але воно менше, ніж на робочому столі. Таким чином, ми рекомендуємо зробити цю компромісну конструкцію, оскільки зручність використання розширюваного навігаційного меню набагато краще, ніж у альтернативних конструкцій.
• Надайте на сторінці посилання на важливу інформацію на своєму сайті або скористайтеся іншими методами підтримуючи гамбургер (або іншого прихованого).

Пам'ятайте: Mobile-first не збігається з мобільним . Плюс, звичайно, слідують інші давно встановлені Керівництво UX для дизайну меню .

Інші статті, пов'язані з дослідженням Ця стаття була заснована на