Як бургер і кебаб

стали частиною UI-дизайну

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

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

Hamburger Menu

Hamburger Menu — три горизонтальні лінії, класичний символ для відкриття основного меню.

Цю позначку ви, мабуть, зустрічали найчастіше, адже її вважають універсальним рішенням, зрозумілим для більшості користувачів. Наприклад, вона використовується у мобільному додатку Facebook або у веб-версії Spotify для переходу до бібліотеки чи плейлистів.

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

Можна сказати, що Hamburger Menu стало основним прототипом, від якого пішли альтернативні "їстівні" менюшки. Вони почали формуватись у 2010-х роках, коли дизайнери почали шукати нові способи представлення навігації та зробити кнопку меню більш помітною у порівнянні зі стандартною. Такими є Alt-Burger Menu та Döner Menu.

Alt-Burger Menu

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

Döner Menu

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

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

Kebab Menu

Ще одним класичним виглядом іконки меню є Kebab Menu (три вертикальні точки) — ідеальний варіант для контекстних опцій. Його часто використовують для дій, пов’язаних із конкретним елементом. Ви точно бачили цю позначку у своїх застосунках, наприклад, у Spotify чи YouTube Music біля треків або альбомів улюблених виконавців.

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

Таким чином, «кебаб» виступає позначкою для контекстного меню, яке дозволяє виконувати дії над конкретними елементами.

Meatball Menu

Іншим варіантом контекстного меню, подібним до «кебабу», є Meatball Menu — три горизонтально вирівняні точки. Воно також надає доступ до вторинних опцій. Це оптимальний вибір для компактних інтерфейсів, де потрібно сховати додаткові налаштування чи дії. Наприклад, у чатах для опцій “видалити” чи “переслати” у Telegram.

Bento Menu

І остання «смачна» менюшка в нашій добірці — Bento Menu. Це значок із дев’яти крапок, який часто використовується для навігації або відкриття меню з розширеними функціями. Bento, як і «гамбургер», можна назвати варіацією глобального меню, яке відкриває доступ до всіх основних функцій чи категорій.

У контексті дизайну інтерфейсів Bento Menu запозичує ідею компактності й організованості традиційних японських обідів («bento» — японська традиція упаковування їжі).

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

Принцип організації простору в бенто відповідає японській естетиці мінімалізму та функціональності. Тож вибір Bento Menu доречний для сайтів та застосунків із багатьма категоріями або опціями, які не потребують постійного доступу. Наприклад, у Google Apps Bento Menu відкриває перелік сервісів.

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