Топ 5 вкусных элементов в UX/UI дизайне
Введение
Когда речь заходит о веб-дизайне, немногие знают, что некоторые элементы интерфейса получили названия из-за своего сходства с популярными блюдами. Эти «вкусные» компоненты стали неотъемлемой частью современного пользовательского опыта.
Бургер-меню
Бургер-меню — это иконка, состоящая из трех параллельных горизонтальных линий, напоминающих булочку, котлету и еще одну булочку гамбургера. Именно это сходство и дало название элементу, который сегодня можно встретить на миллионах сайтов и в приложениях.
Немного истории
Иконка-бургер была придумана дизайнером Нормом Коксом еще в 1981 году для системы Xerox Star. По словам Кокса, он стремился создать простое, четкое и функционально запоминающееся изображение, которое было бы похоже на список.
Второе рождение элемент получил в конце 2000-х годов, когда начал активно использоваться в интерфейсах мобильных приложений. Особенную популярность он приобрел после интеграции в приложение Facebook1 для iPhone в 2010 году.
Споры вокруг бургер-меню
В дизайнерском сообществе не утихают дебаты о целесообразности использования бургер-меню:
- Критики утверждают, что иконка интуитивно понятна не всем пользователям, особенно старшего возраста. Некоторые A/B-тесты показывают, что замена иконки на слово «Меню» повышает узнаваемость и эффективность.
- Сторонники указывают на то, что пользователи постепенно привыкают к элементу, а тестирование в Booking.com показало равную эффективность иконки и текстовой кнопки.
Кебаб-меню
Кебаб-меню (вертикальное меню-троеточие) представляет собой три вертикальные точки, напоминающие шашлык на шпажке. Этот элемент интерфейса содержит действия с объектом и используется для экономии пространства.
Когда использовать
- Для скрытия малоиспользуемых действий
- Когда нужно сэкономить место в интерфейсе
- Для второстепенных операций, которые не являются критически важными
Митболы
Митболы (meatballs) — это три горизонтально расположенных кружка равного размера, напоминающие фрикадельки. В отличие от кебаб-меню, митболы обычно используются для отображения нескольких опций, схожих по важности или функции.
Когда использовать
- В таблицах и других горизонтально ориентированных элементах
- Для отображения группы однородных действий
- Когда нужно показать несколько опций одинаковой важности
Бенто-меню
Bento — тренд в дизайне интерфейсов, вдохновленный японскими бенто-коробочками с их гармоничным и упорядоченным расположением пищи. Подобно тому, как в бенто-коробке каждая секция отделяет блюда, сохраняя их уникальные качества, в дизайне этот подход позволяет организовать контент в визуально упорядоченные блоки.
История появления
Традиция бенто-коробочек зародилась в Японии еще в XIII веке, а сам термин «бэнто» происходит от слова «бэнтури», означающего «удобный» или «нечто, что легко носить с собой».
В современном дизайне импульсом для популяризации стиля стало его использование компанией Apple в 2021 году при демонстрации новых устройств своей экосистемы. Некоторые дизайнеры также связывают истоки стиля с компанией Microsoft, которая в 2012 году представила Windows 8 с плиточной системой, известной как Metro-дизайн.
Ключевые принципы Bento
- Модульность — разбивка контента на логические группы
- Визуальная иерархия — важные элементы занимают больше пространства
- Сеточная система — четкое структурирование элементов
- Минимализм — отсутствие лишних деталей
- Закругленные углы — мягкие скругления как ключевая особенность эстетики
Хлебные крошки
Хлебные крошки (breadcrumbs) — это элемент навигации, который отображает маршрут от стартового элемента до места пребывания пользователя и позволяет легко вернуться к предыдущим разделам. Свое название они получили из сказки братьев Гримм «Гензель и Гретель», где герои использовали хлебные крошки, чтобы не забыть дорогу домой.
Зачем нужны хлебные крошки
- Увеличивают время и глубину просмотра — пользователи лучше понимают структуру сайта
- Повышают конверсию — упрощают навигацию по разделам
- Улучшают ранжирование — помогают поисковым роботам понимать структуру сайта
- Могут отображаться в сниппете поисковой выдачи, привлекая внимание пользователей
Типы хлебных крошек
- Динамические — создаются автоматически и отображают историю посещений
- С выпадающим списком — позволяют выбирать нужный уровень вложенности
- Обратные — отображают путь от текущей страницы к главной
Заключение
Хотите, чтобы ваш сайт стал настоящим цифровым рестораном с мишленовской звездой? Наша веб-студия специализируется на создании интерфейсов, которые не только красивы, но и функциональны. Мы приготовим для вашего бизнеса такой дизайн, от которого ваши клиенты не смогут отказаться!