Оригінал статті

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

https://www.nngroup.com/articles/mobile-subnavigation/

 

Автор – Ралука Будіу (Raluca Budiu)

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

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

Cisco.com: Для робочого столу застосовують горизонтальну навігаційну панель, що включає головні категорії. Якщо навести курсор мишки, з’являється мега-меню з підкатегоріями другого та третього рівня. Вони розкривають усі основні категорії. Мега меню ділиться на три стовпчики, а внизу містить список вкладок.

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

 

Дизайнерські цілі

Визначення: Піднавігація відноситься до інтерфейсу користувача навігації, який допомагає досягти категорій нижнього рівня в інформаційній структурі сайту.

Приступаючи до розробки піднавігацій, поставить перед собою такі дизайнерські цілі:

1. Найменша завантаженість взаємодій: необхідно, щоб користувачі могли дістатися елемента, який їх цікавить, докладаючи мінімум зусиль. Тобто трохи натиснути, прокрутити, і довго не чекати завантаження сторінок.
2. Підтримка стандартного шляху користувача: якщо за одне відвідування сайту користувачеві доводиться переміщатися з однієї сторінки певного розділу у протилежну частину, метою піднавігації буде полегшити це завдання. В іншому випадку, коли більшість відвідувачів буде “жити” в одному розділі сайту (наприклад, у спортивному розділі газети), піднавігацію потрібно фокусувати на підтримку цього шаблону.
3. Можливість знаходження: користувачі не повинні витрачати багато часу, щоб знайти елементи піднавігації. При цьому вони не повинні повторювати вигляд основного меню, щоб відвідувачі їх не плутали.

 

Види мобільної навігації

Виділяють чотири прості способи розробки дизайну піднавігації для мобільних пристроїв:

• Меню акордеон (або “підменю”) у рамках головного меню (Accordions)
• Меню секцій або розділів (Sequential menus)
• Послідовне меню (Section menus)
• Категоріальні посадкові чи цільові сторінки (Category landing pages)

 

Меню акордеон

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

Tide.com відображає піднавігацію за допомогою акордеонів

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

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

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

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

Seventhgeneration.com: Колір показує відмінність між головними та нижньорівневими категоріями

 

Послідовне меню

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

HIV.gov: Вибираючи основну категорію головного меню, ми бачимо не вихідну навігацію, а відповідні підкатегорії. Перейти від одного розділу сайту до іншого можна за допомогою кнопки “Назад”, яка знаходиться у меню.

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

Послідовне меню іноді викликає помилкові дії користувачів, особливо якщо йдеться про телефони на базі Android (або про браузер) – часто людям хочеться натиснути на значок “Назад” або на аналогічну кнопку браузера, через що закривається меню і здійснюється перехід на іншу сторінку , а не повернення в меню найвищого рівня.

Hiv.gov: Якщо на Android-пристрої натиснути на значок “Назад” для переходу вгору по меню, ви переміститеся на сторінку, що була раніше відкрита в браузері. Щоб перейти в меню вищого рівня, потрібно використовувати аналогічну кнопку, яка знаходиться всередині меню.

(Примітка: краще утриматися від відображення меню зверху завантаженого зображення, як показано на малюнку.)

Є сайти, які замість кнопки “Назад” навмисне використовують інший знак для переходів по меню верхнього рівня. Наприклад, у меню сайту Macy відображається спеціальний ланцюжок навігації (“стежка хлібних крихт” – trail of breadcrumbss), що дозволяє користувачам підніматися IA сайтом.

Macys.com: Дане послідовне меню використовує ланцюжок навігації, тому користувачі навряд чи будуть спантеличені або випадково натиснуть кнопку “Назад”, коли здійснять перехід вгору по основній ієрархії. (Але зважте на те, що подібний ланцюжок навігації виглядає досить нестандартно, через що може бути прийнятий відвідувачами як набор основних категорій, які є на сайті).

Показуючи місце розташування відвідувачів послідовні меню можуть викликати в останніх розгубленість. Їм може бути не зрозуміло, що є перехід на інші частини сайту. Візьмемо наприклад сайт Macy – там меню змінюється виходячи з поточної позиції на сторінці. Через це користувач, який зупинився на сторінці “Знайти магазин”, при відкритті меню не виявить чогось вартісного, і ймовірно вирішить, що воно марне або що сайт має збої в роботі.

Macys.com: через послідовне меню відображається поточне розташування користувача. Відвідувач, який відкрив сторінку “Знайти магазин”, не помітить цікавого змісту в меню і може подумати про його непотрібність або якесь пошкодження сайту.

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

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

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

 

Меню секцій чи розділів

Це окремий вид меню, який розміщують на домашніх сторінках розділів. Наприклад р, сайт BBC має домашню сторінку зі своїм меню для всіх основних розділів. Це як секція, що є міні-сайтом зі своєю окремою навігаційною системою.

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

Іноді трапляється, що меню розділів плутають з головним меню, і якщо це так, користувачі не користуватимуться ними для переходу по розділах, думаючи: “Я вже розгорнув це, і я знаю, що це мені не підходило, тому я більше не надаю цьому значення”. Тому важливо бути впевненим у тому, що:

• Меню розділів та головне меню виглядають досить по-різному, щоб люди могли легко відрізнити їх
• Ви не використовуєте один і той же елемент інтерфейсу для основної навігації та меню розділів

Наведений вище приклад Бі-Бі-Сі добре підходить до названих вище критеріїв.

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

Mayoclinic: Меню розділу та головне меню достатньо відрізняються за зовнішнім виглядом, так що у людей не буде проблем зі плутанням одного з іншим

 

Категоріальні цільові сторінки

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

 

Stanford.edu: Для здійснення піднавігації використовуються категоріальні цільові сторінки. Наприклад, у цільової сторінки Admission більше шести інформаційних екранів і посилань до різноманітних підкатегорій.

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

 

Висновок

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

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

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

 

 

Посилання:

Гаррі Хохейзер, Бен Шнейдерман (Harry Hochheiser, Ben Shneiderman). Переваги використання одночасних над послідовними меню як складність завдання. Міжнародний журнал взаємодії людини із комп’ютером, 2009.

Марі Кармен Пуерта Мелгізо, Уті Відья та Геррі ван Остендорп (Mari Carmen Puerta Melguizo, Uti Vidya, і Herre van Oostendorp). Пошук інформації в Інтернеті: вплив типу меню, складність шляху навігації та просторові можливості для збору інформації. Поведінка та інформаційні технології, 2012