Небагато іконок викликали стільки ж суперечок за останнє десятиліття, як іконка меню, що візуально нагадує гамбургер, точніше його абстрактне, спрощене зображення (дві булки та начинка). Спочатку це рішення було сприйнято як грамотний спосіб заощадити місце на маленьких екранах, сховавши основну навігацію за однією кнопкою. Хоча такий підхід спростив інтерфейс, він також сприяв погіршенню юзабіліті: багато хто не помічав нової іконки, через що витрачав більше часу на виконання завдань як на мобільних пристроях, так і на комп’ютерах. Тоді патерн справді був малознайомим, але сьогодні більшість користувачів дізнаються про значок гамбургер-меню і розуміють, що він означає. Проте окремі ризики, як і раніше, зберігаються. У статті ми проаналізуємо результати досліджень (тоді й зараз) та розглянемо найкращі практики, які дозволять нам застосовувати іконку гамбургера максимально ефективно.
Тоді: Гамбургер знижує юзабіліті
У 2015–2016 роках була проведена серія якісних та кількісних досліджень, порівнюючи видиму та приховану навігацію. Результати виявилися чіткими та послідовними:
- Користувачі менше взаємодіяли із контентом, прихованим за іконкою гамбургер-меню.
- Показники успішного виконання завдань знизилися.
- Час виконання завдань збільшився.
- Загальна радість знизилася.
Ці проблеми були характерні як для мобільних, так і для десктопних інтерфейсів (в останньому випадку вони погіршувалися).
Тому основна порада на той час була робити навігацію видимою, якщо це можливо, і використовувати гамбургер-меню лише у тих випадках, коли це дійсно необхідно через просторові обмеження (і ніколи на комп’ютерах). А якщо вибір все ж таки припав на гамбургер-меню, слідувати низці кращих практик, які досі актуальні (ми розберемо їх наприкінці статті).
Зараз: Гамбургер — звичний шаблон
За роки гамбургер-меню стало класикою. З поширенням мобільних пристроїв чисте, компактне рішення було взято на озброєння такими лідерами галузі, як Apple й Amazon, а за ними пішли й інші. Це допомогло стандартизувати значення іконки: завдяки багаторазовому повторенню користувачі навчилися впізнавати та інтерпретувати її швидко та впевнено.
У нещодавньому дослідженні учасникам показували десятки іконок гамбургер-меню у тому чи іншому контексті та просили визначити їхнє призначення.
Час та успішність виконання завдання не фіксувалися (як у попередніх дослідженнях), оцінювалася лише впізнаваність: чи ідентифікують люди іконку як іконку меню?
Відповідь: так. У більшості випадків учасники правильно розпізнали значок як кнопку відкриття головного меню, особливо коли він з’являвся там, де вони очікували побачити його, і мав стандартне оформлення (3 лінії однакової довжини в стовпчик).
Наприклад, у мобільній версії сайту Dick’s Sporting Goods навігація верхнього рівня була позначена стандартною іконкою гамбургера, яка розташовувалась у звичному місці (у лівому верхньому кутку екрана). У користувачів не виникло проблем з інтерпретацією цього значка, навіть коли прибрали підпис Menu.
Dickssportinggoods.com (мобільна версія): Учасники інтерпретували іконку гамбургера у лівому верхньому кутку як кнопку відкриття меню, навіть коли підпис Menu був видалений зі скріншота.
Навіть версію іконки з двох ліній в інтернет-магазині Vivaia було інтерпретовано правильно, коли її локація відповідала очікуванням.
Vivaia.com (мобільна версія): Користувачі були впевнені, що іконка з двох ліній у верхньому лівому куті позначає головне меню сайту.
Розташування іконки гамбургера дуже впливає на її інтерпретацію. Користувачі розуміють, що іконка дозволяє отримати доступ до категорій контенту, якщо вона з’являється в очікуваному місці: у верхньому лівому куті екрана.
У дослідженні навіть невеликі варіації у її дизайні не викликали серйозних проблем, якщо розміщення залишалося стандартним.
Наприклад, іконка гамбургера у мобільній версії сайту Toms була схожа на іконку документа — три лінії, які укладені у прямокутну рамку.
Попри це, більшість користувачів, як і раніше, правильно інтерпретували її як кнопку відкриття головного меню, хоча рамка вносила невелику плутанину. Один учасник, що сумнівається, зазначив:
«Це має бути іконка меню, але той факт, що вона знаходиться у квадраті, змушує мене думати, що це щось інше. Але я не бачу меню де-небудь ще, тому я все ж таки припускаю, що це меню».
Toms.com (мобільная версія): Один з учасників інтерпретував три лінії в рамці як іконку документа, попри розташування у лівому верхньому кутку.
У мобільній версії сайту Newsweek іконка гамбургера включала стрілку (ймовірно спроба позначити висувну панель).
Однак, користувачі не звернули уваги на цю деталь і все одно правильно визначили, що натиснувши на іконку, вони побачать основні розділи сайту. Знову ж таки, звичне розташування значка в лівому верхньому кутку сприяло вірній інтерпретації.
Newsweek.com (мобільна версія): Користувачі інтерпретували іконку гамбургера з накладеною стрілкою у лівому верхньому кутку як іконку меню.
Проте такі декоративні деталі зайві. Зміна звичної форми може викликати сумніви, навіть якщо вона не блокує впізнавання повністю.
Стійке впізнання «гамбургера», попри невеликі зміни в дизайні, відображає те, що ми спостерігаємо повсюдно: колись незнайомі патерни при багаторазовому повторенні стають другою натурою. Однак це не говорить про повну універсальність і 100% надійність — особливо коли ми маємо справу з менш технічно підкованою аудиторією або нестандартними лейаутами.
Крім того, оскільки в описаному дослідженні оцінювалася лише впізнаваність, ми не можемо сказати, чи з роками змінилися час і відсоток успішного виконання завдань з використанням гамбургер-меню. (У минулому проблеми юзабіліті полягали не тільки в розпізнаванні іконки; вони також стосувалися простоти виявлення, запам’ятовування та загального знання патерна).
Коли впізнаваність стає на заваді
Гамбургер-меню стало таким всюдисущим, що його візуальна форма — три лінії у стовпчик — глибоко вкоренилася у ментальних моделях користувачів. Так, що іконки зі схожою структурою можуть бути помилково витлумачені як іконки меню, навіть якщо вони виконують зовсім інші функції.
Подібні промахи виникають особливо часто, коли значки з ліній, наприклад, іконки списку або фільтрів, розміщуються у лівому верхньому куті екрана – розташування, яке асоціюється з основною навігацією.
Наприклад, у десктопному додатку Apple Notes іконка «Переглянути як список» розташована у лівому верхньому кутку поруч з іконкою «Переглянути як галерею». Попри наявність точок, що символізують буліти, що відрізняють її від стандартного «гамбургера», користувачі часто інтерпретували цю іконку як кнопку відкриття меню.
Один з учасників припустив:
«Гамбургер у крайньому лівому кутку — це іконка розкриття навігації. Вона відкриє список додаткових пунктів меню або опцій».
Apple Notes (десктоп): Багато користувачів інтерпретували іконку списку у лівому верхньому кутку як іконку гамбургера, що позначає приховане меню.
Інший приклад плутанини – іконка фільтра в мобільному додатку YouTube. Багато користувачів інтерпретували її як іконку категорій або списку обраного (терміни, більш тісно пов’язані з навігацією, ніж фільтрацією).
Youtube.com (мобільний додаток): Багато користувачів інтерпретували іконку пошукових фільтрів у контекстному меню в нижній частині екрана як список категорій або вибраного. (Зверніть увагу, що на скріншоті, показаному учасникам, текстова мітка була видалена).
Цей приклад демонструє, наскільки користувачі асоціюють згруповані лінії з навігацією, навіть якщо значок не розміщений у лівому верхньому кутку.
Будьте обережні, маючи іконки, що складаються з ліній, наприклад, іконки списків або фільтрів, у місцях, які зазвичай асоціюються у користувачів з навігацією. Додайте підписи, щоб забезпечити їхню впізнаваність та правильну інтерпретацію.
Рекомендації щодо дизайну
Останні дослідження підтверджують, що більшість користувачів інтерпретують іконку гамбургера як іконку меню або списку категорій. При продуманій реалізації може стати ефективним інструментом навігації.
Найкращі практики для створення зручних гамбургер-меню залишаються такими:
- Використовуйте стандартну іконку із трьох ліній: Звична іконка гамбургера зрозуміла користувачам. Не потрібно виявляти креативність: дотримуйтесь звичного шаблону, який відповідає очікуванням.
- Розмістіть іконку у лівому верхньому куті: Користувачі завжди кидають погляд саме у лівий верхній кут екрана у пошуках прихованої навігації. Інше розташування підвищує ризик того, що гамбургер не помітять чи неправильно інтерпретують.
- Уникайте додаткових елементів оформлення або обведення: Декоративні елементи, такі як контури або рамки, можуть збити користувачів з пантелику (приклад з іконкою документа).
- Додайте текстову мітку: Підпис буде особливо корисним для недосвідчених користувачів, а також при застосуванні патерну в незнайомому контексті.
- Використовуйте ненав’язливі анімації або переходи: Якщо при натисканні на іконку відкривається навігаційна панель, делікатні моушн-підказки можуть направити користувача і спонукати його до взаємодії.
- Уникайте плутанини з іншими лінійними значками: Будьте особливо обережні з іншими іконками ліній (наприклад, іконками списків або фільтром). і не розміщуйте їх у верхньому лівому кутку.
- Масштабуйте: Іконка гамбургера для смартфонів може стати майже невидимою на великому екрані.
- Зробіть іконку клікабельною: Відсутність ефектів наведення та інших візуальних підказок може перешкодити виявленню та обмежити взаємодію.
- Додайте відступи навколо іконки: Іконка не повинна «склеюватися» із заголовком та іншими UI-елементами – відсутність «повітря» знижує видимість.
- Забезпечте достатній контраст: Малоконтрастні іконки зливаються з фоном, що особливо критично для користувачів із вадами зору.
- Надайте додаткові методи навігації: Підкріпіть гамбургер-меню вбудованими посиланнями, списками зв’язаних посилань, добре помітною функцією пошуку та навігацією у футері.
Хоча ці базові принципи дизайну не змінилися, змінилися очікування та поведінка користувачів.
Пам’ятайте, що незважаючи ні на що головне правило залишається чинним: якщо необхідності приховувати навігацію немає, не приховуйте її. Хоча більшість сучасних користувачів безпомилково розпізнають іконку гамбургера, прихована навігація все одно збільшує витрати на взаємодію, оскільки їм доводиться робити додатковий крок, щоб отримати доступ до пунктів меню.
Автор: Мусієнко Тимофій