Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Фиксированное меню быстрее в использовании Категория: Веб-дизайн
Название: Фиксированное меню быстрее в использовании
Дата добавления: 13-09-2012
Раз просмотрено: 2098
Комментарии: 1
Рейтинг: * * * * * * * * · · (4 голоса)

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

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

Определение фиксированной навигации

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

Примеры меню

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

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

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

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

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

2. 100% пользователей предпочли фиксированное меню

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

Навигационное меню в программах

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

Некоторые хорошие примеры

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

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

Фиксированное меню на сайте Fizzy Software

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

Фиксированное меню на сайте Web Appers

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

Фиксированное меню на сайте MakeBetterApps

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

Фиксированное меню на сайте Rodolphe Celestin

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

Фиксированное меню на сайте Ryan Scherf

Web Designer Wall. Закрепленное вертикальное меню хорошо функционирует на этом сайте, потому что меню имеет только четыре пункта. Эта техника идеальна для блогов и очень удивительно, что другие не перенимают этот современный подход.

Фиксированное меню на сайте Web Designer Wall

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

Приступая к работе

Избегайте фреймов

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

CSS

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

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

#header {
	margin-top: 50px;
}

Javascript и jQuery

The Simple Smart Sticky Navigation Bar является одним из многих хороших реализаций на JavaScript. Если вы предпочитаете CSS решению jQuery или JavaScript, то вы можете попробовать один из следующих вариантов:

Какие существуют проблемы?

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

Дизайнерские ограничения

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

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

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

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

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

Будьте в курсе уровня поддержки технологий, предлагаемого в каждого устройстве. Знание проблем совместимости заранее поможет вам сэкономить время в конце.

Заключение

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

Это интересно: «Основные техники фона веб-страницы».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:
Анчоус  •  2013-01-17 20:01:58
Спасибо. Отличнейшая статья!