Меню у вигляді невеликої іконки «гамбургер» — можна любити, можна ненавидіти, можна використовувати на своїх сайтах чи додатках, а можна й відмовитися. Але з точки зору вебдизайну його дедалі рідше можна зустріти, і на це є кілька причин. Справа не лише в тому, що тенденції змінюються і, можливо, іконка вийшла з моди. Існують й інші чинники, через які вебдизайнери все частіше відмовляються від її повсюдного використання.
Ця крихітна іконка викликає суперечки і змушує замислитися: чи буде сайт зручним у використанні? чи виглядатиме він охайно, чи ж навпаки — спричинить плутанину? Такі роздуми виникали ще тоді, коли значок лише набирав популярності, і тривають дотепер.
Меню-гамбургер — зручне. Воно звільняє простір на полотні, де можна розміщувати важливий і не дуже контент, заклики до дії, елементи інтерфейсу тощо. Водночас є нюанси з юзабіліті, які здатні довести будь-якого вебдизайнера до розпачу. Тож давайте розглянемо моменти, за які це меню і люблять, і ненавидять.
Чисте полотно
Додатковий вільний простір, який з’являється завдяки використанню меню-гамбургера, дозволяє створити більш легкий, відкритий та, умовно кажучи, «світлий» (не у сенсі кольору), сучасний вигляд дизайну. Мінімалістичний підхід без зайвих шарів і накладень, які візуально захаращують сторінку.
Такий елемент дизайну мотивує команду переглянути структуру сайту, вдосконалити контент і зробити користування зручнішим. Іконка не займає багато місця, на відміну від мега-меню (які все ще використовуються й мають сенс). Але потрібно чесно відповісти: чи дійсно прихована навігація потрібна саме тут?
Коли простору мало — меню-гамбургер справді рятує, концентруючи увагу на контенті. А для користувача це зручно: він чітко бачить потрібну інформацію. Тож здавалося б, усі мають його любити, а популярність не повинна зникати.
Розгляньмо ascendlearning, mlgr, gyrotonic, natedentondesign. Всі ці сайти різні. І от у чому проблема: на деяких — міні-меню виправдане, воно з’являється збоку і не заважає. На інших — розгортається на весь екран і дублює ті самі пункти, які одразу видно після першого прокручування. Того самого коліщатка, яке користувач крутить автоматично. І виникає відчуття, що меню просто додали «для галочки» — «аби було, а навіщо — вже неважливо».
Відсутність асоціативного сенсу
Що таке іконка-гамбургер? Маленький значок із трьох горизонтальних ліній. І все. Тематика сайту часто визначає цільову аудиторію, включно з її віком. Якщо сайт створений для людей старшого віку або тих, хто не надто знайомий із мобільними інтерфейсами — така іконка може бути незрозумілою. Ми, вебдизайнери, думаємо: «Усі вже давно знають, що це». Ні. Не всі знають і не всі мають знати. Людина не може знати ВСЕ. Це нереально.
Такий користувач просто не здогадається, що на три лінії треба натиснути. Він піде з сайту. Так простіше.
Але якщо аудиторія більш «технологічна» (не гіки, але загалом орієнтуються), тоді меню буде сприйняте нормально. Якщо ж дизайн — винятково десктопний, тоді значок може бути недоречним узагалі.
Очевидний приклад — інтернет-магазини. Наприклад, Ozon, 1С-Интерес, Л’Этуаль (до речі, змінили дизайн). У мобільній версії — окей. Але на десктопі гамбургер не на своєму місці. Нам, як покупцям, зручніше одразу бачити категорії товарів. Ховати все — не найкраще рішення. Хіба що, як у Ozon: і значок є, і підпис, і повне меню розділів — усе логічно. Так само й у туристичних сайтах.
Мобільність — понад усе
Цікаво спостерігати, як усе змінюється на наших очах. Ще кілька років тому ніхто не думав, що іконка-гамбургер стане стандартом, особливо на мобільних.
Але сталося саме це.
У мобільних додатках і версіях сайтів іконка-гамбургер — скрізь. Користувачі смартфонів і планшетів до неї вже звикли.
Отже, це чудовий варіант мобільної навігації. Вона звільняє місце на екрані, дозволяє уникнути дрібного шрифту, дає змогу додати інші кнопки, розділи, посилання. Варіантів — безліч.
Порівняйте десктопні версії iconvillas, legalanchor, carleton, und з мобільними варіантами. У більшості випадків меню заховано за іконкою. Але іноді воно залишилось вертикальним, а дублюється у прихованому вигляді. Реалізація — різна, але мобільний стандарт, ймовірно, ще довго не зникне.
Швидкий доступ до важливого
Елементи меню-гамбургера дають прямий доступ до вмісту. І добре, коли це справді так. Nielsen Norman Group пояснює, що прямий доступ означає можливість натиснути на іконку й одразу перейти до потрібної інформації, не гортати сторінку і не шукати вручну. Це альтернатива мега-меню чи «каруселям», де ти «розгортаєш, і розгортаєш, і розгортаєш... о, нарешті знайшов!»
Прямий доступ важливий, бо дозволяє користувачу швидко знайти потрібне. Раніше для цього створювали «мапу сайту» — окрему сторінку з усіма посиланнями. Але постійно її відкривати — незручно. Меню-гамбургер частково вирішує цю проблему. Менше кліків — швидший доступ — це добре.
Але є нюанс. Доступ має вести до справді важливих розділів. Якщо сайт великий, варто додати пошук або підрівні меню. Так користувачу буде простіше зорієнтуватися.
Подивімося на приклади: solcocina, stickybandits, stphilips, allianceplus. Дизайнери використали різні підходи. Хтось додав пошук, хтось — контакти компанії, щоб не переходити на окрему сторінку. Інші додали перемикач мови тощо. Таким чином, іконка відкриває окремий простір, який спрощує навігацію. Навіщо гортати, якщо можна натиснути й одразу потрапити куди треба?
Концентрація уваги
І це логічне продовження всього вище сказаного. Користувач швидко втрачає фокус, якщо не може знайти потрібне. Не тому, що екран великий, а тому, що інтерфейс незрозумілий.
Уявімо: ви шукаєте розділ «про компанію» чи «доставка». Найпростіше — навмання клацати по посиланнях. Особливо якщо навігація винесена в кути або прокрутка горизонтальна.
І от що цікаво — значок меню іноді прихований або стилізований так, що знайти його складно. Деякі дизайнери свідомо ховають елементи керування заради «красоти», але тоді користувач не розуміє, куди клікати.
Це втомлює. Такі рішення рідкісні й частіше зустрічаються у творчих сайтах, але вони є. І все одно — це забирає увагу з контенту. Людина вже не читає, а шукає інтерфейс.
Подивімося на: mathieulevesque, essentiallookscollection, espn, bornikirken — меню є, але або важко знайти, або краще б його не було. Іноді постійна наявність навігації заважає.
Висновки
Отже, ми любимо і ненавидимо меню-гамбургер одночасно. Його користь для мобільного UX — беззаперечна. На десктопі — залежно від контексту. Але в будь-якому разі його потрібно ретельно продумувати. Поки що кращої альтернативи немає, хоча дизайнери знаходять цікаві рішення: додають пошук, ієрархію, соцмережі, контакти, форми підписки тощо. Це допомагає зменшити кількість елементів на сторінці та зробити навігацію простішою.
Здається, популярність іконки «гамбургер» спадає, але насправді вона просто менше використовується у десктопних версіях. Варто лише звузити вікно браузера — і ось вона, тут як тут. І погодьтеся, якщо її зробити з розумом — це зручно.
І знову — золота середина…
Тож любов до прихованого меню виникає тоді, коли воно доречне, зрозуміле й логічне. А ненавидимо ми його тоді, коли воно не потрібне, незрозуміле або дратує.