В боковом меню удалось уместить всё: проекты, задачи, документы, участников и настройки доступа. Прокрутки нет, строки ровные, макет выглядит собранно. Открываем его на телефоне, пытаемся выбрать документы и попадаем в соседний пункт. Названия поместились, а для уверенного нажатия места оказалось мало.
Хочется сразу увеличить все отступы, но тогда меню просто вытянется вниз. Попробуем разобраться точнее на учебном кабинете команды: где человеку не хватает места для выбора, а где расстояние должно показать границу между разными темами.
Два отступа с разной работой
Внутри строки отступ отделяет текст от краёв и помогает задать удобную область нажатия. Между группами расстояние показывает, что началась другая часть меню. Если менять их одинаково, можно получить длинный список, в котором все пункты по-прежнему выглядят одинаково связанными.
В нашем кабинете проекты, задачи и документы относятся к повседневной работе. Участники и права доступа нужны для управления командой. Оставим строкам одинаковые внутренние отступы, а перед настройками команды добавим более заметный промежуток. Теперь взгляд видит небольшую паузу между темами, а каждый отдельный пункт остаётся частью своего набора. Если одной паузы недостаточно, группы можно назвать; этот вопрос подробнее разобран в статье о группировке меню.
Название, которое не влезло в красивый пример
С короткими «Задачами» и «Архивом» трудно заметить проблему ширины. Подставим «История изменений доступа», добавим иконку и счётчик. Теперь название может занять две строки, и фиксированная маленькая высота начнёт мешать: текст прижмётся к соседям или выйдет за область своего пункта.
Поэтому длинное название стоит включать в макет заранее. Если оно переносится, строка должна вырасти вместе с ним. Если обрезается, человеку нужен способ узнать полный текст и на телефоне, где нет наведения мышью. Иногда название можно сократить, но несколько одинаковых «Управление…» проблему не решат. Меню станет аккуратнее за счёт информации, по которой человек выбирал раздел.
Открытый раздел и наведение не одно и то же
Допустим, сейчас открыты проекты, а указатель остался над документами. Если оба пункта получили одинаковую заливку, меню словно показывает два текущих раздела. Человеку приходится искать подтверждение в заголовке страницы, хотя навигация могла сразу подсказать, где он находится.
Разделим состояния: выбранный раздел получает устойчивое выделение, наведение мягко обозначает возможный переход, а клавиатурный фокус имеет заметный контур. Они могут появляться одновременно и не должны стирать смысл друг друга. В реализации текущую страницу также обозначают для вспомогательных технологий. Так информация о месте в меню остаётся доступной тем, кто не видит цветную заливку.
Дойти до последнего пункта
После правок меню хочется оценить по новому скриншоту, но остаётся ещё одна часть работы. Уменьши высоту окна, увеличь текст и пройди пункты клавишей Tab. Так станет видно, можно ли добраться до прав доступа внизу списка и не закрывает ли его закреплённый блок. На телефоне стоит отдельно попробовать соседние пункты, потому что точное попадание мышью мало говорит о выборе пальцем.
Если ошибка повторяется, её уже можно назвать конкретно: строка слишком тесная, длинный текст обрезан, последний раздел недостижим или наведение спорит с текущим состоянием. У каждого случая своё исправление. Поэтому удачный отступ не обязательно совпадёт с красивым числом из чужой библиотеки: он должен помочь прочитать и выбрать пункты именно этого меню.
