fbpx
Sticky-Header

5 способов улучшения липкой шапки (sticky header) от Nielsen Norman Group

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

Определение

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

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

Профессия «UX-дизайнер»
7 дней дизайн-перезагрузки
Мощнейние спикеры, самое дружелюбное дизайн-комьнити и желание делать клевый дизайн.
Скидка 10% по промокоду UXPUB
Присоединиться

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

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

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

1. Соблюдайте адекватное соотношение контента и функциональных элементов

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

На устройствах с сенсорным экраном убедитесь, что все цели касания имеют размер не менее 1 см × 1 см, весь текст имеет размер примерно 16pt (в зависимости от высоты по оси x и общей различимости букв в гарнитуре, соответствующий минимум может быть немного меньше или больше), а затем минимизируйте любую дополнительную высоту по вертикали сверх этих размеров (при сохранении, конечно, соответствующих эстетических соображений).

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

5 способов улучшения липкой шапки (sticky header) от Nielsen Norman Group

Слева: липкий хедер сайта New Yorker имеет соотношение контента и функциональных элементов 13:1 на iPhone 11 Pro, что является разумным компромиссом. (Примечание: этот расчет не включает строку URL-адреса браузера или строку состояния iOS, каждая из которых съедает пиксели, но находится вне контроля дизайнера сайта. Справа: соотношение контента и функциональных элементов на сайте Lollar Pickups мизерное 2:1. на том же устройстве, с чрезмерно большим полупрозрачным заголовком логотипа, который не обеспечивает достаточного контраста с содержимым, и ненужной дублирующейся панелью вкладок внизу страницы, которая также липкая.

2. Важен контраст с контентом

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

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

5 способов улучшения липкой шапки (sticky header) от Nielsen Norman Group

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

3. Сделайте анимации минимальными, естественными и отзывчивыми

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

Хотя обычно не рекомендуется выделять очень большую область под хедер, иногда по соображениям, не связанным с UX (и часто коренящимся во внутренней политике организации), требуется большой логотип в верхней части страницы. Логотип сжимается по мере того, как пользователь скроллит, как на сайте Michigan.gov в примере ниже. Эта анимация должна быть быстрой, плавной и мгновенной – хедер должен сжиматься с обычной скоростью скролла и не должен исчезать, прыгать или иным образом пугать пользователя.

Липкий хедер на сайте Michigan.gov сжимается по мере того, как пользователь прокручивает страницу, но делает это резко: на мгновение исчезает и внезапно появляется снова.

Липкие хедеры также должны оставаться фиксированными в верхней или боковой части окна браузера, а не перемещаться в нужное положение после задержки (шаблон, известный как «сталкер-меню»).

В старом дизайне First Place for Youth было отвлекающее сталкер-меню, которое следовало за положением скролла пользователя с преувеличенной анимацией после задержки.

4. Частично постоянные хедеры

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

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

Поэтому такие анимации должны быть ненавязчивыми и появляться не слишком быстро и не слишком медленно. Мы рекомендуем создавать ощущение, будто пользователь прокручивает хедер вручную, но на самом деле анимация запускается при прокрутке пользователем вверх на несколько пикселей (т. е. если пользователь прекращает скроллить вверх, хедер должен продолжать анимироваться в поле зрения). A slide-in animation длительностью примерно 300–400 мс сохранит это естественное ощущение, не отвлекая внимание.

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

5. Подумайте, нужен ли вообще липкий хедер

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

  • Какие типы элементов будет содержать ваш хедер? Основная навигация? Логотип?
  • Какова вероятность, что эти элементы будут нужны во время сеанса?

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

Ответы на такие вопросы будут зависеть от типа сайта, а также от задач и контента, который он поддерживает.

Вывод

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

1 Комментарий
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи

Лучшие статьи, раз в неделю, с доставкой на почту

Total
13
Share