Несмачний гамбургер та чим його замінити в UX раціоні навігації

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

Історія

Гамбургер-меню з’явилося в цифровому світі у 1981 році завдяки дизайнеру Норму Коксу (Norm Cox), який вигадав іконку з трьома горизонтальними лініями для першого у світі комп’ютера з графічним інтерфейсом Xerox Star. Кокс прагнув створити просте, чітке зображення, яке б легко запам’ятовувалося і нагадувало список.

Але велику популярність іконка отримала аж через 30 років. У 2010 році вона з’явилась у додатку Facebook для iPhone. Після цього вона стала загально впізнавана, її почали інтенсивно залучати в мобільні інтерфейси. Сьогодні гамбургер дуже часто зустрічається в додатках, програмах та сайтах як іконка, що відображає кнопку навігації.

Прихована навігація погіршує взаємодію

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

Джерело: https://www.nngroup.com

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

UX євангеліст Apple Майк Штерн (Mike Stern) колись сказав: ”Гамбургер-меню погані тим, що самого меню не видно на екрані… Є два основних моменти в інтуїтивно зрозумілій навігації - ви повинні чітко розуміти, де ви зараз перебуваєте, і вам повинно бути ясно, куди ви можете перейти”. До речі, в Apple є своя політика щодо цього елемента. Але про це трохи згодом. По-друге, експерти з NNg зазначають, що прихована навігація вимагає від юзерів додаткових зусиль при взаємодії. Щоб з’ясувати, що знаходиться в меню, люди повинні його відкрити. Це збільшує час на взаємодію для користувачів і робить її менш ймовірною.

Джерело: https://www.nngroup.com

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

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

Джерело: https://www.nngroup.com

На ПК учасники дослідження використовували схований варіант навігації у 27% всіх випадків, а комбіновану або відкриту в 50% та 48% відповідно. У кейсах на смартфонах користувачі також надавали перевагу видимому контенту.

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

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

Чим замінити гамбургер-меню?

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

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

Старий дизайн

Новий дизайн

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

В Apple також надають перевагу відкритій навігації. Додатки, для iOS, побудовані за принципами дизайну компанії, взагалі не мають гамбургер-меню, бо такої іконки немає в iOS Human Interface Guidelines. Основним навігаційним елементом в iOS є Tab Bar. Щось на кшталт панелі знизу в Android, яку ми розглянули вище.

Бар завжди залишається видимим і допомагає швидко переміщатися між різними екранами. В Guidelines Apple зазначають дизайнерів, що панель повинна мати від 3 до 5 навігаційних елементів. Більша кількість ускладнює розташування інформації та її сприйняття. Якщо ж ваш інтерфейс все ж таки передбачає велику кількість навігаційних елементів, то в Tab Bar треба залучити іконку More зі списку Apple's System Icons і сховати туди більшість навігаційних опцій.

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

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

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

Що ж стосується десктопних інтерфейсів, то тут все однозначно. За словами фахівців з NNg, сайти взагалі не повинні містити гамбургер-меню, оскільки на великих інтерфейсах прихована навігація зовсім недоречна. Маленькі іконки губляться на екрані, а ховати навігаційний контент від користувача немає ніякого сенсу, бо для нього, як правило, є достатньо місця. Потрібно сміливо використовувати відкриті списки меню ліворуч або ж, як рекомендують в NNg, відображати основну навігацію панеллю зверху. Ось як це зробило “Новое Время”. Панель дещо перенасичена інформацією, але вона містить всю навігацію. Всі опції перед користувачем і доступні без додаткових дій в інтерфейсі.

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

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

Висновок

Створюючи мобільний інтерфейс, згадайте досвід Facebook та Youtube. Вони відмовилися від закритої навігації та перейшли на меню із вкладками. UX додатків значно покращився, навігація стала зручнішою. А в Apple залучення елементів з прихованою навігацією взагалі не передбачено правилами дизайну компанії, вони можуть бути ефективними тільки як додаткові елементи поруч з іншою навігацією на панелі знизу. Це говорить про те, що гамбургер-меню та різні варіації іконки погіршують UX. Якщо в мобільних додатках їх використання ще може бути виправдане, а в деяких випадках - це найкраще оформлення навігації, то у великих інтерфейсах прихована навігація тільки бентежить користувача і забирає його час на додаткові дії.