Топ 5 вкусных элементов в UX/UI дизайне

Введение

Когда речь заходит о веб-дизайне, немногие знают, что некоторые элементы интерфейса получили названия из-за своего сходства с популярными блюдами. Эти «вкусные» компоненты стали неотъемлемой частью современного пользовательского опыта.

Бургер-меню

Бургер-меню — это иконка, состоящая из трех параллельных горизонтальных линий, напоминающих булочку, котлету и еще одну булочку гамбургера. Именно это сходство и дало название элементу, который сегодня можно встретить на миллионах сайтов и в приложениях.

Немного истории

Иконка-бургер была придумана дизайнером Нормом Коксом еще в 1981 году для системы Xerox Star. По словам Кокса, он стремился создать простое, четкое и функционально запоминающееся изображение, которое было бы похоже на список.

Второе рождение элемент получил в конце 2000-х годов, когда начал активно использоваться в интерфейсах мобильных приложений. Особенную популярность он приобрел после интеграции в приложение Facebook¹ для iPhone в 2010 году.

Споры вокруг бургер-меню

В дизайнерском сообществе не утихают дебаты о целесообразности использования бургер-меню:

• Критики утверждают, что иконка интуитивно понятна не всем пользователям, особенно старшего возраста. Некоторые A/B-тесты показывают, что замена иконки на слово «Меню» повышает узнаваемость и эффективность.

• Сторонники указывают на то, что пользователи постепенно привыкают к элементу, а тестирование в Booking.com показало равную эффективность иконки и текстовой кнопки.

Кебаб-меню

Кебаб-меню (вертикальное меню-троеточие) представляет собой три вертикальные точки, напоминающие шашлык на шпажке. Этот элемент интерфейса содержит действия с объектом и используется для экономии пространства.

Когда использовать

• Для скрытия малоиспользуемых действий

• Когда нужно сэкономить место в интерфейсе

• Для второстепенных операций, которые не являются критически важными

Митболы

Митболы (meatballs) — это три горизонтально расположенных кружка равного размера, напоминающие фрикадельки. В отличие от кебаб-меню, митболы обычно используются для отображения нескольких опций, схожих по важности или функции.

Когда использовать

• В таблицах и других горизонтально ориентированных элементах

• Для отображения группы однородных действий

• Когда нужно показать несколько опций одинаковой важности

Бенто-меню

Bento — тренд в дизайне интерфейсов, вдохновленный японскими бенто-коробочками с их гармоничным и упорядоченным расположением пищи. Подобно тому, как в бенто-коробке каждая секция отделяет блюда, сохраняя их уникальные качества, в дизайне этот подход позволяет организовать контент в визуально упорядоченные блоки.

История появления

Традиция бенто-коробочек зародилась в Японии еще в XIII веке, а сам термин «бэнто» происходит от слова «бэнтури», означающего «удобный» или «нечто, что легко носить с собой».

В современном дизайне импульсом для популяризации стиля стало его использование компанией Apple в 2021 году при демонстрации новых устройств своей экосистемы. Некоторые дизайнеры также связывают истоки стиля с компанией Microsoft, которая в 2012 году представила Windows 8 с плиточной системой, известной как Metro-дизайн.

Ключевые принципы Bento

• Модульность — разбивка контента на логические группы

• Визуальная иерархия — важные элементы занимают больше пространства

• Сеточная система — четкое структурирование элементов

• Минимализм — отсутствие лишних деталей

• Закругленные углы — мягкие скругления как ключевая особенность эстетики

Хлебные крошки

Хлебные крошки (breadcrumbs) — это элемент навигации, который отображает маршрут от стартового элемента до места пребывания пользователя и позволяет легко вернуться к предыдущим разделам. Свое название они получили из сказки братьев Гримм «Гензель и Гретель», где герои использовали хлебные крошки, чтобы не забыть дорогу домой.

Зачем нужны хлебные крошки

• Увеличивают время и глубину просмотра — пользователи лучше понимают структуру сайта

• Повышают конверсию — упрощают навигацию по разделам

• Улучшают ранжирование — помогают поисковым роботам понимать структуру сайта

• Могут отображаться в сниппете поисковой выдачи, привлекая внимание пользователей

Типы хлебных крошек

• Динамические — создаются автоматически и отображают историю посещений

• С выпадающим списком — позволяют выбирать нужный уровень вложенности

• Обратные — отображают путь от текущей страницы к главной

Заключение

Хотите, чтобы ваш сайт стал настоящим цифровым рестораном с мишленовской звездой? Наша веб-студия специализируется на создании интерфейсов, которые не только красивы, но и функциональны. Мы приготовим для вашего бизнеса такой дизайн, от которого ваши клиенты не смогут отказаться! Оставляйте заявку на сайте, по почте или Telegram.