Создаем навигацию. Не перемещайте элементы навигации от страницы к странице

Ни один интернет-сайт, даже самый информативный и интересный, не привлечет внимания людей и не станет популярным без удобной и интуитивно понятной навигации. Навигация на сайте – крайне важный этап его разработки. Продуманная система навигации позволяет посетителю легко и быстро находить на сайте любую информацию, не тратя лишнее время на переходы между страницами и поиски тех или иных ссылок. Также удобная навигация является немаловажным аспектом, увеличивающим рейтинг сайта в поисковых системах – поэтому от того, как поисковые системы (например, Google) оценивают контент и вложенность страниц сайта, зависит структура навигации.
Создать сайт самостоятельно с Wix.com

Инструкция

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


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

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

Какую навигацию делать на сайте?

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

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

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

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

Правила хорошей навигации

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

Чтобы не упустить важные моменты, учтите следующие рекомендации:

1. Интуитивность. Навигация не должна быть сложной, поэтому как бы вам не хотелось, лучше отказаться от сложных форм и меню, написанных, к примеру, на Flash. Лучше использовать стандартную навигацию с привычным интерфейсом.
2. Значимость. Нет смысла добавлять новые пункты меню, ссылки и блоки с представлением материалов, которые не важны вашим посетителям. Каждый элемент навигации должен быть полезным, перегружать ресурс не стоит.
3. Идентичность. Некоторые вебмастера намеренно пытаются проявить свою креативность и создают разную навигацию, для отдельных страниц сайта. Лучше этого не делать, так как посетители могут легко в этом запутаться.
4. Гармоничность. Все элементы навигации, которые вы устанавливаете на сайте, должны хорошо вписываться в общий дизайн ресурса. Это касается не только меню, но и таких элементов как хлебные крошки или блоки с ссылками.

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

Удобная навигация сайта начинается с главного меню

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

Только не спешите добавлять как можно больше пунктов, чтобы показать, насколько много разной информации на сайте. Многочисленные тестирования показали, посетители воспринимают только 5-7 пунктов меню. Что происходит с остальными? Они просто не попадают во внимание.

Например, если готовится меню для интернет-магазина, оптимальными пунктами главного меню станут: услуги, цены, контакты, каталог, о компании.

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

Постраничная навигация сайта – внутренняя перелинковка

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

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

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

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

Навигация по странице сайта

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

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

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

Как сделать навигацию на сайте: дополнительные меню

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

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

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

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

Вам также будет интересно:
—
—
—

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

Обладая удобной мобильной версией сайта, вы закладываете фундамент сильного онлайн присутствия. И наоборот, если у вас ещё нет удобной мобильной версии сайта, это ставит под угрозу ожидаемый рост бизнеса и возможную прибыль.

Что выберете вы? Расположить к себе новых активных клиентов и увеличить рост бизнеса? Если да, то самый верный путь - сделать ваш веб-сайт доступным не только для пользователей ПК и ноутбуков, а также и для пользователей смартфонов и планшетов.

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

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

• У 58% американских потребителей есть свой смартфон.
• Более 1,2 миллиарда заходят в Интернет со своих мобильных телефонов.
• Глобальный мобильный трафик в настоящее время составляет 15% от всего интернет-трафика.
• Ни один размер экрана мобильного устройства не занимает больше, чем 20% рынка.
• 61% людей лучше относятся к тем брендам, у которых есть адаптивный мобильный сайт.
• 60% покупателей используют свои смартфоны в магазине, и еще 50%, по пути в магазин.
• Пользователи планшетов тратят на 50% больше, чем пользователи ПК.
• Поиск в Интернете через мобильное устройство составляет четверть от всех поисков.

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

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

Владельцы сайтов и веб-дизайнеры должны обратить внимание на следующие моменты:

• Потребности посетителей
• Возможные вопросы, которые у них возникают
• Существующие ограничения мобильных устройств
• Непонятные элементы сайта

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

Поставьте себя на место пользователей сайта

95% пользователей ищут “местную” информацию через мобильный интернет. Поэтому мобильные сайты должны иметь местоположение, контактную информацию на видном месте. Просмотрите аналитику мобильного трафика, и найдите наиболее частые поисковые запросы пользователей мобильного интернета. Упомяните ссылку на ваш сайт в его мобильной версии, чтобы серьезные клиенты могли детально ознакомиться с вашей компанией, используя ноутбук или ПК.

Адаптивный веб-дизайн

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

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

Несколько лучших приемов, в частности, как проектировать меню для маленьких экранов рассмотрены ниже!

1. Вкладок меню должно быть минимум

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

2. Минимизируйте число кликов

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

3. Предложите плавную навигацию

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

4. Ограничение высоты заголовка

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

5. Учитывайте портретный режим просмотра веб-сайта

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

6. Выпадающая Навигация

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

7.Примите решения о самых важных вещах

Принимая решение о том, каким будет меню, подумайте о следующем:

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

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

8. Сделайте навигацию понятной

Меню должно быть написано ясным и понятным языком. Посетитель должен уяснить, в каком направлении ему идти. При использовании символов, сделайте их интуитивно понятными. Условные обозначения, такие как “+” или “>” могут быть использованы, для того, чтобы объяснить посетителям, что в меню есть больше опций для выбора.

9. Улучшите UX с помощью шрифтов и контраста

Избегайте использования мелкого текста, который пользователям необходимо увеличивать, чтобы увидеть. Поисковые системы, такие как Google и Bing, не считают мелкий текст user-friendly подходом. Шрифт Taller с дополнительным пространством между буквами станет лучшим выбором. Arial, Courier, Times New Roman являются типичными шрифтами, используемыми для мобильных веб-сайтов. Учитывайте стайл гайд вашего бренда при принятии решения о стиле и размере шрифта. Но что бы вы не использовали на вашем мобильном сайте, это должно помогать прочитывать текст без масштабирования.

10. Создавайте веб-сайты под сенсорные устройства

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

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

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

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

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

Как оптимизировать сайт под сенсорные экраны и крошечные кнопки?

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

• Узнайте основную цель пользователей сайта,и, в зависимости от этого, поместите строку меню в верхней части страницы или снизу. Для контентоориентированных веб-сайтов, она может быть размещена в футере.
• Вы можете скрыть строку меню, если есть необходимость в большем пространстве, которое нужно для просмотра контента. Пусть развернутое меню появляется только при нажатии.
• Меню можно размещать в верхней части экрана, а кнопку навигации в футере.
• Строка меню должна быть короткой и широкой. Это поможет разместить в ней более длинные названия разделов.
• Уменьшите размер изображения в хэдере или используйте вместо него логотип.
• Покажите существующую последовательность в стиле, типографике и в цвете кнопок навигации.
• Избегайте использования огромных изображений и графики.
• Используйте короткий текст в кнопках меню и в заголовках разделов. Хорошей альтернативой может стать использование сворачивающегося меню.
• Учитывайте популярные айтемы, которые большинство пользователей хотят видеть на главной странице.

Чего следует избегать при улучшении навигации мобильной версии сайта?

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

• Не предлагайте им много раз выбирать на что нажать.
• Огромное “нет” горизонтальной прокрутке сайта.
• Избегайте управления путем наведения.
• Избегайте меню-слайдеров.
• Упрощение сайта не должно сделать его скучным для посетителей.
• Создайте интуитивно понятную навигацию.
• Пусть пользователи могут быстро и легко просмотреть всю необходимую информацию на сайте

Заключение

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

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

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

Если вы веб-дизайнер, какую навигацию вы создаете для мобильных сайтов? Поделитесь в комментариях!

Дата публикации статьи: 20 марта 2016 г.
Задать любой вопрос авторам статей Вы можете по e-mail

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

2. Ссылка в навигационном меню на страницу текущего местонахождения пользователя не должна быть кликабельной (то есть при нажатии на неё не должен происходить переход на ту же самую страницу) и должна быть отмечена как текущее положение пользователя. К примеру, если пользователь на странице “Фотогалерея”, то ссылка “Фотогалерея” в меню не кликабельна и отмечена другим цветом, отличным от цвета всего остального меню. К сожалению, значимая часть современных систем управления сайтами не предусматривают соблюдение этого правила, поэтому эта рекомендация относится к некому идеалу, к которому нужно стремиться.

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

4. По названию пункта меню должно быть чётко понятно, что находится внутри. И как раз в этом вопросе надо максимально внимательно отнестись к сложившимся стереотипам. К примеру, мы все привыкли что у интернет-магазинов есть пункты меню “Доставка”, “Оплата” или “Оплата и доставка”. Но я встречал один интернет-магазин, чтобы не раскрывать реальных названий, назовём его “Бурундучок”. Так вот, у этого магазина информация о способах оплаты, доставки, а заодно и о преимуществах продукции перед конкурентами находилась в разделе “Секреты Бурундучка”. Понятно, что это была некая задумка с каким-то смыслом, но такое расположение даной информации нарушает сразу два правила юзабилити: во-первых ломает устоявшиеся шаблоны пользователя, а во-вторых делает содержимое раздела абсолютно непредсказуемым по его ссылке в меню навигации. Оригинально? Да. Удобно и позитивно влияет на конверсию? Нет.

5. Ссылки, открывающиеся в новом окне желательно как-то помечать, к примеру общепринятым значком . Дело в том, что в новом окне или вкладке у пользователя уже не будет работать привычная кнопка “Назад” браузера, и чтобы вернуться назад на страницу, с которой он нажал ссылку, ему надо будет переключить окно или вкладку. Для удобства восприятия сайта желательно посетителя заранее предупредить к открытию ссылки в новом окне или вкладке. Вообще открывать ссылки в новом окне стоит только если они ведут на другой сайт или на какую-то логически отделённую часть текущего сайта.

Последнее обновление: 27.04.2016

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

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

Для создания горизонтального меню есть два метода. Первый заключается в применении свойства float и создании из ссылок плавающих элементов, которые обтекают друг друга с слева. И второй способ состоит в создании строки ссылок с помощью установки свойства display: inline-block .

Использование float

Алгоритм создания панели навигации с помощью float разделяется на два этапа. На первом этапе у элемента li , в который заключена ссылка, устанавливается float: left; . Это позволяет расположить все элементы списка в ряд при достаточной ширине, когда правый элемент списка обтекает левый элемент списка.

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

• Главная
• Блог
• Контакты
• О сайте

inline и inline-block

Для создания горизонтальной панели навигации нам надо сделать каждый элемент li строчным, то есть установить для него display: inline . После этого для элемента ссылки, которая располагается в элементе li , мы можем установить display: inline-block:

• Главная
• Блог
• Контакты
• О сайте