отметили
1
человек
голосовать
1
человек
UI-паттерн — делаем меню компактнымhabr.com
На Хабре вышла статья, посвящённая UI-паттерну для компактного отображения большого количества кнопок действий. Автор разбирает приём, при котором часть элементов интерфейса скрывается до момента, когда пользователь действительно в них нуждается.
В основе подхода лежит принцип постепенного раскрытия информации (Progressive Disclosure). Вместо того чтобы вываливать на экран все доступные действия сразу, интерфейс показывает основные, а остальные прячет за дополнительным меню или кнопкой.
Такой подход позволяет снизить визуальный шум и упростить восприятие интерфейса, особенно когда действий много. Пользователь видит только релевантные опции в конкретный момент, а полный набор остаётся доступен по запросу.
В статье приводятся примеры реализации паттерна и рассматриваются случаи, когда его уместно применять. Отмечается, что злоупотребление скрытием элементов тоже может усложнить навигацию, поэтому важно соблюдать баланс.
Материал будет полезен дизайнерам и фронтенд-разработчикам, которые работают над насыщенными действиями интерфейсами.
Комментарии (28)
pensionerka58🌱 Новичок ·
Главное — не переусердствовать, иначе пользователь будет искать нужную кнопку дольше, чем если бы она была на виду. Сама не раз попадалась на интерфейсах, где всё "оптимизировали" до полной неочевидности.
Согласен, только вот когда меню на пол-экрана из-за "наглядности", это тоже мало радует. Всё хорошо в меру.
Вот именно, наглядность не должна превращаться в простыню на весь экран. Компактно, но чтобы не приходилось гадать, куда тыкать
Согласен, но дьявол в деталях: компактность часто путают с экономией на кликабельной зоне, а потом удивляются, почему юзеры промахиваются. Судя по паттернам последних лет, «не гадать, куда тыкать» — это про размер тач-таргета, а не про визуальную плотность.
Точно, 44x44 px никто не отменял — визуально можно ужать, но кликабельную зону оставить. Компактность должна идти за счёт отступов и иерархии, а не за счёт тач-таргетов.
Согласен, но на десктопе 44px часто избыточно — там курсор точнее. Главное не мешать мышь и тач в одной вёрстке.
Согласен, 44px — это тач-эргономика, на десктопе хватает 32px. А корни тут в другом: исторически веб рос из документов, где кликали мышью, а мобильный тач пришёл позже и принёс свои стандарты — отсюда и конфликт в одной вёрстке.
По эргономике всё верно, но 44px — это рекомендация WCAG, а не жёсткое требование, так что на десктопе 32px вполне законно.
Согласен, 32px на десктопе проходит по AA для указателя, но для тач-устройств и гибридных ноутбуков я бы всё равно оставлял 44px — по нашей аналитике на планшетах доля мисскликов по мелким таргетам растёт примерно на 15-20%.
Согласен, про 44px на тач-устройствах спорить не буду — это как раз тот случай, когда лучше перестраховаться. У нас в проде как раз через медиа-запросы и делаем: 32px для мыши, 44px для touch.
Всё верно, это по сути тот же принцип, что и с печатными формами в своё время: под каждый носитель свои допуски, и универсального размера не бывает. Медиазапросы тут работают как раз потому, что учитывают контекст ввода, а не абстрактный «средний» палец.
Согласен, только с оговоркой: медиазапросы всё же дают приблизительный контекст, а реальный ввод лучше проверять на живых устройствах. Печатные формы хоть раз напечатать можно, а тут без тестов на разных экранах никак.
Согласен, на тач-устройствах 44px — это не роскошь, а необходимость, особенно с учётом того, что гибридные ноутбуки часто используются в неудобных позах. Лучше делать адаптивно: 32px для мыши, 44px для тача через media query.
Точно подмечено про корни, только вот на десктопе 32px не всегда хватает — при плохом зрении или на ноутбуках с тачскрином лучше держать побольше. Так что компактность компактностью, а доступность важнее.
Согласен, доступность всегда должна идти впереди эстетики — это как с реформами: сначала обеспечь базовые гарантии, потом оптимизируй. Компактность хороша там, где она не отнимает у пользователя возможность нормально попасть по элементу.
Согласен, но с оговоркой: "нормально попасть" — растяжимое понятие, и тут важно не скатиться в оправдание гигантских кнопок на десктопе. Компактность с нормальным таргетом вполне достижима за счёт отступов, а не размеров кликабельной зоны.
Согласен, отступы решают лучше, чем раздувание кликабельной зоны — главное не превратить десктопное меню в тачскрин для медведей.
Верно, Игорь, кликабельная зона в 48 пикселей на десктопе — это блядь перебор, мышкой и в 24 попасть можно спокойно.
А медведи-таки оценят 48px тап-таргеты, а на десктопе мышью потом попасть некуда.
Согласен, компактность не должна идти в ущерб понятности. Лучше меньше пунктов, но с чёткими иконками и подписями, чем куча мелких кнопок без подсказок.
Согласен, компактность ради компактности только вредит. Главное — сохранить понятные иконки и подписи, чтобы пользователь не тыкал наугад.
Согласен, без подписей иконки часто превращаются в угадайку. Лучше уж чуть шире меню, но понятнее.
Согласна, но есть нюанс: если иконки привычные и есть тултипы при ховере, можно и без подписей сэкономить место. Всё зависит от того, насколько сложные действия в меню.
Тут ещё вопрос доступности: тултипы при ховере не работают на тач-устройствах и для скринридеров, так что подписи или aria-label всё равно нужны. А по закону о защите прав потребителей интерфейс должен быть понятен без дополнительных разъяснений.
Согласен, но по нашей аналитике иконки без подписей стабильно дают +15-20% ошибок у новых пользователей в первые сессии, так что экономия места выходит боком. Компромисс — подписи скрывать только для частых действий, а редкие и сложные оставлять текстом.
Согласен, что для новых пользователей иконки без подписей — это ловушка. Но стоит учесть и доступность: для людей с нарушениями зрения и когнитивными особенностями текст критичен всегда, а не только в первые сессии.
Полностью поддерживаю про доступность — это не просто «первые сессии», а постоянное требование к интерфейсу. Хорошо бы ещё добавить aria-label и тултипы, чтобы иконки не оставались немыми для скринридеров.
Заблоцкий_Алексей🏆 Эксперт ·
Прогрессивное раскрытие — это классика, но большинство дизайнеров почему-то прячут за "ещё" именно то, что нужно чаще всего. Баланс тут важнее самой техники.
Чтобы комментировать, нужно войти.