“Липкие” хедеры могут быть полезным дополнением к сайту, но только в том случае, если они действительно служат целям ваших пользователей.
Определение
“Липкие” (или фиксированные) хедеры — закрепленная шапка (хедер) веб сайта или приложения в одном месте экрана, пока пользователь прокручивает страницу вниз. Его разновидность — частично “липкий” хедер — появляется вверху страницы, как только пользователь начинает прокручивать ее вверх.
Если все сделано правильно, “липкий” хедер позволяет пользователям быстро получить доступ к элементам навигации, поиска и служебной навигации (второстепенные действия), не прокручивая страницу до самого верха. Такой подход облегчает обнаружение элементов хедера и вероятность того, что пользователи воспользуются ими.
Компьютерная (десктопная) версия сайта Accenture использует “липкий” хедер, содержащий навигацию по сайту, поиск и служебную навигацию. Хедер остается на месте, пока пользователь прокручивает страницу.
Однако при плохой реализации “липкие” хедеры раздражают, отвлекают и блокируют контент на странице.
Вот 5 советов, следование которым гарантирует, что дизайн вашего “липкого” хедера помогает, а не мешает пользователям.
1. Максимизируйте пространство контента и элементов управления, оставив хедер маленьким
“Липкие” хедеры занимают на экране пространство, которое могло бы быть использовано для размещения контента, поэтому важно обращаться с этим пространством ответственно. Указанный фактор еще более важен на мобильных устройствах, учитывая небольшой размер экрана.
Вам необходимо убедиться, что соотношение пространства контента и элементов управления (content-to-chrome ratio) максимизировано, то есть “липкий” хедер занимает минимальное пространство, что обеспечивает приемлемо читаемый текст и достаточные для нажатия размеры элементов.
На устройствах с сенсорным экраном убедитесь, что элементы взаимодействия размером не менее 1см на 1см, а текст размером примерно 16pt (в зависимости от высоты строчных букв и общей различимости букв в гарнитуре допустимый минимум может быть меньше или больше), а затем минимизируйте дополнительную высоту по-вертикали сверх этих размеров (сохраняя эстетичность).
В компьютерной (десктопной) версии, несмотря на то, что пространства для работы значительно больше, все же не рекомендуется использовать слишком много пустых пикселей для хедера, просто чтобы сделать логотип как можно больше. Опять же, начните с комфортных для чтения размеров текста для элементов хедера и минимизируйте высоту по-вертикали, отталкиваясь от этого.
2. Важен контраст с контентом
Поскольку хедер будет появляться поверх каждой точки страницы, при выборе цвета важно учесть следующее:
- достаточный визуальный контраст с фоном, чтобы хедер был заметным, читаемым, четко различимым относительно контента, который он покрывает;
- раскрывающиеся подменю или списки четко отделены от фона;
- полупрозрачные “липкие” хедеры затрудняет чтение частично видимого контента и часто раздражает и отвлекает пользователей.
3. Делайте анимацию минимальной и естественной
Анимация зачастую мешает, отвлекает и раздражает пользователей, поэтому для “липких” хедеров старайтесь использовать ее минимально, а лучше вообще не использовать. Анимация допустима в двух случаях: сжатие хедера большого размера, либо частично фиксированные хедеры (подробнее о них в пункте 4 ниже).
Хотя делать хедер большим не рекомендуется, иногда требуется большой логотип в верхней части страницы. Логотип сжимается, когда пользователь прокручивает страницу, как в примере Michigan.gov ниже. Хедер с такой анимацией должен сжиматься примерно с обычной скоростью прокрутки и не должен исчезать, прыгать или иным образом пугать пользователя.
“Липкий” хедер на сайте Michigan.gov сжимается, когда пользователь прокручивает страницу, но делает это резко: на мгновение исчезает и внезапно появляется снова.
“Липкие” хедеры также должны фиксироваться в определенном месте в верхней или боковой части окна браузера, а не перемещаться в нужное положение после задержки (шаблон, известный как “преследующее меню”).
В старом дизайне First Place for Youth было отвлекающее меню, которое следовало за положением прокрутки пользователя с чрезмерной анимацией после задержки.
4. Рассмотрите частично фиксированные хедеры
Частично фиксированные хедеры наиболее часто можно увидеть на мобильных версиях сайтов, и они в некоторых случаях предлагают лучшее из обоих миров: хедер, который легко доступен с любого места страницы, но остается незаметным пока вы читаете или прокручиваете страницу вниз.
Этот стиль работает в меру хорошо. Частично фиксированные хедеры предполагают, что любая прокрутка страницы вверх является индикатором того, что пользователь хочет получить доступ к хедеру. Во многих ситуациях это будет так, но иногда нет — например, пользователь просто хочет перечитать предыдущий абзац. В таких случаях анимации частично фиксированного хедера, могут отвлекать пользователя.
Чтобы такие анимации были ненавязчивыми, рекомендуем создать ощущение, будто пользователь вручную прокручивает хедер в зону видимости. То есть, если пользователь перестал прокручивать страницу вверх, анимация продолжается до полного попадания хедера в зону видимости. Анимация появления (slide-in) продолжительностью 300-400 мс сохранит ощущение естественности, не отвлекая внимания.
На сайте CB2 прокрутка страницы вниз запускает анимацию исчезновения хедера из зоны видимости, а прокрутка вверх — анимацию появления. Скорость анимации аналогична естественной скорости прокрутки пользователем, поэтому она не слишком навязчива и не отвлекает. Пользователю необходимо прокрутить больше, чем несколько пикселей в любом направлении, чтобы анимация не могла быть запущена случайным движением руки.
5. Подумайте, нужен ли вам вообще “липкий” хедер
Последний аспект, который надо рассмотреть, — действительно ли нужен “липкий” хедер. В конце концов, используя его, вы теряете площадь определенной части экрана на каждой странице вашего сайта. И если “липкий” хедер не приносит пользы вашим пользователям, любые другие оптимизации его дизайна, которые вы проводите, являются спорными. Проведите анализ издержек и выгод в отношении вашего “липкого” хедера, отвечая на следующие вопросы:
- Какие типы элементов содержит ваш хедер? Основную навигацию? Служебную навигацию? Логотип?
- Вероятно ли, что эти элементы будут часто или всегда необходимы при использовании сайта?
Например, если кнопка логина находится в хедере, вероятно ли что ваши пользователи будут входить в систему на любой странице вашего сайта? Ответы на эти вопросы будут различными, но однозначно помогут определить целесообразность использования “липкого” хедера.
Заключение
“Липкие” хедеры могут быть полезным дополнением к сайту, но только в том случае, если они действительно служат целям ваших пользователей. Если такой хедер полезен для пользователей, убедитесь, что он как можно меньше по размеру, имеет высокий контраст относительно фона, не использует ненужную анимацию, не заслоняет контент, а также не отвлекает ваших пользователей.
.webp)
.svg)
