Java, UX, HTML, CSS, WEB-design

Липкое меню позволяет быстрее ориентироваться

[ad_1]

  • Хайрам Денни

  • 0 Комментарии

Липкое меню позволяет быстрее ориентироваться

  • 8 минут чтения

  • UX-дизайн, юзабилити, дизайн взаимодействия

Краткое резюме ↬

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

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

липкое меню

Что такое липкое меню?

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

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

Еще после прыжка! Продолжить чтение ниже ↓

Дальнейшее чтение на SmashingMag:

  • Планирование и реализация навигации по сайту
  • Элементы навигации + 6 рекомендаций по дизайну
  • Реализация навигации вне холста для адаптивного веб-сайта
  • Хлебные крошки в веб-дизайне: примеры и рекомендации

Исследование юзабилити

Условия исследования

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

Стандартная и липкая навигация

1. Навигация по липким меню на 22% быстрее

Данные исследования показали, что участники смогли найти то, что искали, быстрее, когда им не нужно было прокручивать страницу назад. 22% может показаться небольшим числом, но оно может оказать большое влияние на посетителей. Согласно этим данным, липкая навигация может сократить пятиминутное посещение веб-сайта на 36 секунд. Конечно, удержание посетителей на странице дольше является преимуществом только в том случае, если вы одновременно улучшаете пользовательский опыт. Заставлять людей копаться на веб-сайте, чтобы найти что-то, не квалифицируется как таковое.

2. 100% предпочитают липкие меню, не зная почему

В конце каждого сеанса пользователей спрашивали, заметили ли они разницу между двумя пользовательскими интерфейсами. Никто не смог его идентифицировать. Изменения были незначительными, и никто из пользователей их не заметил, потому что они были сосредоточены на выполнении своих задач. Затем участников спросили, легче ли пользоваться одним из веб-сайтов. У шести из 40 участников не было предпочтений, но из 34, у которых были предпочтения, 100% указали, что веб-сайт с липкой навигацией был проще или быстрее в использовании. Было сделано много комментариев по этому поводу, например: «Я не знаю, чем отличаются веб-сайты, но я чувствовал, что трачу намного меньше времени на клики на первом». Такие комментарии указывали на подавляющую поддержку «липкой» навигации.

Навигационные меню настольного программного обеспечения

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

Несколько хороших примеров

Facebook и Google+ недавно внедрили липкую навигацию, но их меньшинство. Из 25 самых посещаемых веб-сайтов в США только 16% в настоящее время имеют липкую навигацию. Ниже приведены несколько примеров других веб-сайтов, которые отлично справляются с этой задачей.

Fizzy Software Это прекрасный пример горизонтальной липкой навигации в самом верху. Все чувствует себя комфортно, пока вы используете веб-сайт.

Навигация по программному обеспечению Fizzy

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

Навигация по веб-приложениям

MakeBetterApps Вот еще один отличный пример. Сделать навигацию слегка прозрачной, давая намек на содержимое под ней, — приятный штрих.

Улучшите навигацию по приложениям

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

Родольф Селестен Навигация

Райан Шерф Навигация на этом сайте вертикальная и состоит только из иконок. Креативность здесь впечатляет.

Райан Шерф Навигация

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

Навигация по стене веб-дизайнера

Хотя липкие меню не являются самой популярной формой навигации, постоянно появляется все больше и больше примеров.

Начиная

Избегайте iFrame

Это может показаться простым способом реализовать липкую навигацию, но избегайте этого метода. iFrames создают больше проблем, чем решают, особенно с кроссбраузерной совместимостью, безопасностью и поисковой оптимизацией. У iFrames есть свое место, но они не должны быть основной частью вашего макета HTML.

CSS

CSS — отличный способ реализовать липкую навигацию. Он также кажется самым простым, легким и быстрым для написания кода. Три вещи, на которые стоит обратить внимание: position, margin-top и z-index. Настройка меню position к fixed отключает прокрутку элемента вместе с остальной частью страницы. Это, скорее всего, снизит ваши поля, если ваша навигация будет горизонтальной, поэтому вам нужно настроить это. Наконец, используйте z-index с горизонтальным меню, чтобы навигация располагалась поверх всего; это заставит другой контент скользить под навигацией при прокрутке. Вот общая идея:

#navigation {
   position: fixed;
   z-index: 10;
}

#header {
   margin-top: 50px;
}

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

jQuery и JavaScript

Умная липкая панель навигации
Simple Smart Sticky Navigation Bar — одна из многих хороших реализаций JavaScript.

Если вы предпочитаете решение на основе jQuery или JavaScript, а не решение на основе CSS, вы можете попробовать один из следующих вариантов:

  • jScroll
  • Простая смарт-липкая панель навигации
  • jQuery путевые точки
  • Sticky MenuBar

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

Что за плохие новости?

Дай мне плохие новости

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

Ограничения дизайна

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

Отвлекающий и навязчивый

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

Мобильная совместимость

CSS с фиксированным положением и некоторые реализации JavaScript не поддерживаются в некоторых мобильных браузерах, что вызывает беспокойство у некоторых разработчиков. В статье «Организация мобильных устройств» Люка Вроблевски есть несколько замечательных принципов, которые следует учитывать при создании навигации для мобильных устройств. Методы адаптивного дизайна также предлагают некоторые решения для настройки навигации в зависимости от размера экрана.

Помните об уровне поддержки, предлагаемой каждым устройством. Заранее зная о проблемах совместимости, вы сэкономите время. Когда я могу использовать? содержит интересную информацию о поддержке position: fixed. Брэд Фрост также провел собственное тестирование и анализ, предоставив некоторые интересные сведения в сопроводительном видео.

Почему мы, веб-дизайнеры и разработчики, постоянно заставляем наших пользователей прокручивать страницу вверх и вниз в поисках навигации? Это не проблема в программном обеспечении для настольных компьютеров, и теперь у нас есть статистика, показывающая преимущества липких меню. Навигацию по 84% из 25 самых посещаемых веб-сайтов США можно было бы ускорить, внедрив липкую навигацию.

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

Сокрушительная редакция
(аль)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Липкое меню позволяет быстрее ориентироваться

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье Липкое меню позволяет быстрее ориентироваться

Название: Липкое меню позволяет быстрее ориентироваться . Краткое описание: [ad_1] ⭐ Хайрам . Дата публикации: 16.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»