Проблемы липких меню и альтернативные решения

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

Но этот причудливый паттерн гораздо больше вредит UX, чем улучшает его.

И вот почему:

Проблема №1: Липкие меню постоянно занимают место на экране

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

Меню на сайте Semplice прилипает к верхнему краю экрана.

Проблема №2: Липкие меню заслоняют контент

Например, плавающая кнопка в Material Design скрывает элементы, которые находятся под ней.

Проблема №3: Липкие меню «ломаются» при увеличении масштаба

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

Пример увеличения/уменьшения масштаба на сайте Medium.

Проблема № 4: Некоторые липкие меню труднодоступны

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

В меню можно добавить внутреннюю полосу прокрутки. Но множественные полосы прокрутки делают опыт более сложным и запутанным.

Проблема №5: Якорные ссылки не реагируют на повторные нажатия

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

Проблема №6: Липкие меню кажутся ближе, чем есть на самом деле

Липкие меню визуально доступны в любой момент времени, но на самом деле пользователям, которые взаимодействуют с интерфейсом при помощи клавиатуры, приходится многократно нажимать Tab, чтобы добраться до них.

Проблема №7: Липкие меню перекрывают ссылки и другие интерактивные элементы

Когда пользователи перемещаются к началу страницы с помощью клавиатуры, фокус в конечном итоге может оказаться на ссылке, которая скрыта за липким меню.

Альтернативные решения

• Делайте страницы короче. Липкие меню — это симптом длинных страниц, поэтому устраните первопричину.

• Просто позвольте пользователям прокручивать страницы. Есть устоявшееся мнение, что прокрутка является проблемой. Но это миф. Даже на мобильных устройствах прокрутка обычно требует всего пару движений.

• Поместите релевантные ссылки в контекст. Например, добавьте форму подписки в конец поста или CTA-кнопку в раздел с ценами.

• Используйте кнопку/ссылку «Вернуться наверх». Это относительно ненавязчивый способ упростить пользователям жизнь (но обращайтесь к нему только после того, как исчерпаете другие варианты).