Как Сделать Эффективной Навигацию по Сайту

 

 

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

 

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

 

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

 

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

 

 

 

Эффективная навигация по сайту

 

 

 

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

 

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

 

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

 

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

 

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

 

 

 

Начинайте со структуры сайта

 

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

 

 

 

Первичная навигация

 

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

 

 

 

Информационные ссылки

 

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

 

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

 

На этом сайте все информационные ссылки размещены в линию, сразу же после лого с названием сайта.

 

 

 

Расположение основных навигационных ссылок

 

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

 

 

 

Вторичные навигационные ссылки

 

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

 

 

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

 

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

 

 

 

Навигационные ссылки в контексте страницы

 

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

 

 

 

Советы по разработке эффективной навигации по сайту

 

 

 

Не открывайте страницы в новых окнах

 

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

 

 

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

 

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

 

 

Не пытайтесь поставить все ссылки на каждой странице

 

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

 

 

Используйте "крутые" современные технологии с умом

 

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

 

 

Используйте цвет, чтобы выделить ссылки

 

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

 

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

 

 

Используйте описательный текст в атрибуте "аlt"  для изображений - ссылок

 

Хотя вы можете использовать навигацию и с помощью изображений, но я очень не рекомендую это делать, если вы пытаетесь получить высокую рейтинговую позицию в поисковых системах. Если вы никак не можете отказаться от использования навигации по сайту с помощью изображений, то не забудьте использовать атрибуты "аlt" и "title" в теге изображений “IMG”. Детали смотрите в нашей статье "Изображения и ссылки - атрибуты alt и title ".

 

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

 

 

Последовательность, последовательность и еще раз - последовательность  

 

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

 

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

 

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

 

Рекомендации от Google по структуре навигации по сайту

 

СТРУКТУРА НАВИГАЦИИ САЙТА

 

Навигация важна для поисковых систем

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

Создавайте навигацию по сайту основываясь на стартовой странице

На любом сайте есть стартовая или “главная” страница, на которую чаще всего заходят пользователи, и которая является исходной для навигации по сайту. Если ваш сайт содержит более чем пару страниц, то следует задуматься о том, как пользователь сможет перейти с главной страницы на страницы с более специфическим содержанием. Если у вас достаточное количество узкотематических страниц, то стоит создать отдельную страницу навигации по этой теме (то есть стартовая страница -> список тематических страниц -> специфическая тема). У вас на сайте сотни продуктов, которые необходимо рассортировать по директориям и каталогам?

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

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

Предусмотрите возможность удаления части URL

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

Например, он будет на странице

http://www.moyastranaotkrytok.ru/otkrytki/vintage/prazdniki/novy_god.html,

a затем введет в адресную строку браузера

http://www.moyastranaotkrytok.ru/otkrytki/vintage/

в надежде получить список всех старинных открыток.

Ваш сайт подготовлен к подобным запросам, или выдаст ошибку 404 (“страница не найдена”)? А что случится, когда пользователь введет в строку поиска такой адрес http://www.moyastranaotkrytok.ru/otkrytki/?

Приготовьте карту сайта для пользователей и XML-файл Sitemap для поисковых систем.

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

Файл Sitemap в формате XML, который вы можете добавить через Инструменты для Веб-мастеров Google, облегчает поисковику Google сканирование вашего сайта. Файл Sitemap также является способом сообщить Google о том, какой вид URL вы предпочитаете для своего сайта: например, http://moyastranaotkrytok.ru/ или http://www.moyastranaotkrytok.ru/.

 

ПРАКТИЧЕСКИЕ СОВЕТЫ

 

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

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

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

  • строить навигацию исключительно на JavaScript (меню, графикa и анимация), так как не все поисковые системы могут обрабатывать подобные ссылки. Наличие простых текстовых ссылок на все страницы существенно улучшит доступность вашего сайта для пользователей.  

Разместите на сайте html-карту сайта и файл Sitemap в формате XML. Наличие простой карты сайта со ссылками на все или самые важные страницы (если страниц сотни и тысячи) может быть очень полезным. Файл Sitemap в формате XML упростит сканирование сайта поисковыми пауками. Не советуем:

  • позволять html-карте сайта устаревать и обрастать битыми ссылками;
  • перечислять страницы в html-карте, не организовывая их по темам или категориям.

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

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

  • позволять поисковым системам индексировать вашу страницу 404 (убедитесь, что ваш веб-сервер настроен на ответ статусом 404 при запросе несуществующей страницы);
  • не предоставлять страницу 404 вообще, или помещать на нее только короткое сообщение “Не найдено”, “404”;
  • использовать для страницы 404 дизайн, отличающийся от дизайна вашего сайта.

 

 

 

 

Новости сайта на ваш имейл-адресХотите первыми знакомиться с новыми материалами, опубликованными на сайте?

 

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

 

Это просто, удобно и бесплатно!

 

Подписаться на новости

 

 

Это важно!Нашли информацию полезной ?

 

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

 

 

 

Наверх      Предыдущая страница