Как упростить большие меню с помощью сеток в стиле бенто-бокса

Улучшите восприятие и распределение элементов

Сегодня многие сайты и приложения имеют обширные навигационные меню, которые сложно просматривать и в которых трудно ориентироваться. Всего за один клик пользователи получают лавину пунктов, подпунктов и категорий. В итоге они, возможно, и находят то, что искали, но процесс редко бывает

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

Сетка в стиле бенто-бокса помогает преобразовать большие мега меню в более удобный для восприятия формат. Такое меню не только меньше перегружает и легче сканируется, но и позволяет быстрее переходить к обзорным страницам и подпунктам.

Меню «Products» (Продукты) у Oracle огромное. Чтобы превратить его в сетку в стиле бенто-бокса, сначала нужно определить размер каждого списка, перечислив все элементы, исключив их подэлементы. При таком подходе получается три списка: два маленьких и один большой.

Размеры этих списков указывают на то, что вам нужна сетка бенто с двумя маленькими блоками и одним большим. Сетка должна иметь фоновую область, в которой расположены блоки с равными отступами между ними. Маленькие блоки должны быть одинакового размера и располагаться вертикально, чтобы их суммарная высота совпадала с высотой большого блока.

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

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

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

Когда пользователь нажимает на элемент, у которого есть подэлементы, внутри этой ячейки будет отображён новый список. Метка элемента станет названием категории, а иконка стрелки будет служить кнопкой «Назад» для возврата к основному списку. Такой способ показа подэлементов снижает перегрузку информацией и позволяет эффективно использовать пространство.

Меню Oracle состоит всего из трёх списков. Однако ваше меню может быть сложнее. Например, элементов может быть больше, чем поместится в большой ячейке. Или длина текста меток элементов может требовать больше места по ширине. Или вы можете захотеть разместить элементы в нескольких колонках. В любом случае можно создать новые варианты ячеек, которые будут вписываться в сетку бенто-бокса, так как она имеет фрактальную структуру.

Другими словами, это все коробки внутри коробок с пропорциональными размерами. Чтобы сохранить эти пропорции, убедитесь, что ваши исходные маленькие и большие блоки имеют одинаковую ширину. Они будут служить основой для всех остальных блоков. Также следите, чтобы размеры отступов были одинаковыми.

Вот пример сверхбольшого блока, созданного из базовых блоков и отступа.

Вот пример длинного блока, созданного из двух маленьких блоков и отступа.

Как видите, сетки в стиле бенто могут адаптироваться под меню разного размера. Они обеспечивают эффективное распределение пространства и пропорциональные размеры. Более того, они снижают когнитивную нагрузку и улучшают визуальное сканирование. Все эти преимущества с точки зрения UX — причина, по которой большие меню должны выглядеть как бенто-бокс.