Бенто‑меню (Bento menu)

Бенто‑меню (Bento menu) — это иконка в виде сетки из маленьких квадратов (3×3 или 2×2), которая открывает список приложений, сервисов или разделов. Название отсылает к японской коробочке‑бенто, её отделения напоминают ячейки сетки.

Что это и для чего нужен

Бенто‑меню ставят, когда надо дать доступ ко многим сервисам или разделам, но при этом не загромождать интерфейс. Его используют, чтобы:

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

По сути, это «каталог в одной кнопке»: снаружи минимализм, внутри — сразу вся линейка продуктов.

Где и когда использовать

Чаще всего бенто‑меню встречается в:

Экосистемах сервисов. Google, Microsoft, Яндекс и другие: иконка открывает список всех продуктов компании.
Корпоративных порталах. Когда у компании много внутренних инструментов (задачи, отчёты, HR‑сервисы), их удобно собрать в одном меню.
Платформенных приложениях. Если продукт — это целая платформа с десятком модулей, бенто помогает показать их все сразу.
Админ‑панелях с большим числом разделов. Чтобы не растягивать верхнее меню на три строки, второстепенные разделы убирают в такую иконку.
Приложениях с мультиаккаунтами. Иногда через бенто‑меню переключают между профилями или наборами проектов.

Из каких элементов состоит

Иконка‑триггер. Сетка из маленьких квадратов: обычно 3×3 (9 ячеек) или 2×2 (4 ячейки). Может быть цветной, монохромной, с фоном или без — зависит от стиля системы.
Выпадающее окно или панель. После клика появляется блок со списком сервисов/разделов.
Карточки или плитки сервисов. Внутри — названия и иконки продуктов: «Почта», «Диск», «Календарь» и т. п.
Группировка и поиск. В больших меню добавляют категории («Работа», «Личное») или строку поиска, чтобы быстрее находить нужный сервис.
Визуальные подсказки. Иконки сервисов, краткие подписи, иногда — мини‑превью или бейджи (например, «Новое»).

Описание работы

Всё довольно просто:

Пользователь видит иконку в виде сетки квадратиков.
Нажимает на неё (или делает тап на мобильном).
Появляется панель со списком сервисов или разделов — обычно рядом с иконкой, чтобы не перекрывать основной контент.
Пользователь кликает по нужному сервису — происходит переход.
Меню автоматически закрывается (или остаётся открытым, если дизайн предусматривает быстрый выбор нескольких пунктов).

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

Практические советы для дизайнеров

Не прячьте самое важное. Если пользователь чаще всего ходит в «Задачи» или «Отчёты», не заставляйте его каждый раз открывать бенто‑меню — пусть эти пункты будут на видном месте.
Делайте иконку заметной, но не навязчивой. Сетка должна быть читаемой: контрастные квадраты, достаточный размер.
Внутри меню делайте понятные карточки. Название + иконка + короткий поясняющий текст (если нужен). Избегайте абстрактных подписей вроде «Инструменты» или «Сервисы».
Добавляйте поиск при большом числе пунктов. Если сервисов больше 10–12, поиск сильно ускоряет навигацию.
Учитывайте размер области нажатия. На мобильных иконка и сами карточки должны быть удобными для пальца — не меньше 44×44 px.
Показывайте состояние. Если сервис временно недоступен, лучше сделать карточку неактивной или добавить бейдж «Скоро», чем просто скрывать её.
Тестируйте логику группировки. Категории должны быть очевидными: «Работа», «Личные», «Администрирование» — а не «Разное» или «Другое».

Примеры из реальных интерфейсов

Google Apps (Google Workspace). Иконка из 9 точек в правом верхнем углу: открывает список сервисов — Gmail, Drive, Calendar, Docs и т. д. Это самый узнаваемый пример бенто‑меню.

Microsoft 365. Похожая иконка даёт доступ к Outlook, Word, Excel, Teams и другим приложениям.
Яндекс Сервисы. В некоторых интерфейсах есть аналогичная сетка для быстрого перехода между продуктами.

Корпоративные порталы и интранеты. Часто используют такой паттерн, чтобы собрать десятки внутренних инструментов в одном месте.

Крупные платформы и маркетплейсы. Внутри админ‑панелей бенто‑меню используют для переключения между модулями (каталог, заказы, аналитика, настройки).

Частые ошибки

Прячут всё подряд. Если в бенто‑меню улетает вообще всё, пользователь теряет ориентиры, непонятно, где главное, а где второстепенное.
Слишком много пунктов без структуры. Длинный список без категорий и поиска превращается в «стену иконок», по которой сложно ориентироваться.
Мелкая иконка и крошечные карточки. На мобильном по таким элементам трудно попасть пальцем, растёт число ошибочных нажатий.
Непонятные названия. «Сервис 1», «Модуль А» ничего не говорят пользователю. Лучше: «Календарь», «Склад», «Отчёты по продажам».
Нет обратной связи. Пользователь нажал на иконку, а меню не открывается или открывается с задержкой. Всегда нужна понятная реакция интерфейса.
Игнорирование доступности. Отсутствие фокуса с клавиатуры, низкий контраст, слишком мелкие элементы — всё это мешает пользователям с разными потребностями.