что такое навигация сайта
Навигация по сайту: задачи и инструменты
Важнейшей составляющей любого сайта является навигация. От того, насколько она продумана, удобна и понятна посетителю, сильно зависят вероятность отыскать нужное и желание вернуться. В статье будут перечислены основные навигационные задачи пользователя, и рассмотрены элементы, с помощью которых они решаются. На простых примерах попробую показать, каким из них стоит уделить больше внимания, а какие можно вовсе упразднить, в зависимости уже от ваших интересов и реализации.
1 Задача пользователя: Попасть на сайт
Когда речь заходит о проектировании сайта и его навигации, почему-то принято считать, что человек уже оказался на главной странице и отсюда начинается его путь. Но как-то он должен был на этот сайт попасть! Рассмотрим наиболее распространенные варианты.
Инструменты:
— переход из поисковой системы;
— имя сайта;
— ссылка на внутреннюю страницу;
— QR code.
Вы уверены, что имя вашего сайта подобрано хорошо? Попробуйте своему другу / коллеге / родственнику продиктовать его по телефону.
— Алло, сынок, а где я могу почитать твою статью про железки?
— Мама, на хабре, я же говорил!
— Где-где?
— Хабрахабрточкару.
— …
Это далеко не единственный пример выхода ссылок в оффлайн, их можно встретить на рекламных плакатах, в метро, в прессе, где угодно. Все эти случаи объединяет одно: если пользователь не сможет воспроизвести увиденное/услышанное – вы потеряли клиента.
Одноклассникам пришлось застолбить помимо основного, также имя с одной буквой «с», т.к. несмотря на то, что все их пользователи учились в школе, некоторые не преуспели даже в азах словесности.
Если ссылку присылает друг или коллега, и по ней хотя бы примерно можно понять, что ожидает пользователя на странице – это очень и очень хорошо. Потому что по ссылке
http://habrahabr.ru/events/coming/event345, полученной в Skype, я могу определить, что это какое-то описание предстоящего события, и решить, посмотреть мне ее сейчас или позже. А когда мне присылают нечто вида
http://lite-mobile.ru/index.php?page=shop.product_details&flypage=shop.flypage&product_id=748&category_id=11&manufacturer_id=0&option=com_virtuemart&Itemid=137 — даже страшно туда заглядывать.
QR Code – лучший способ дать пользователю возможность быстро и без труда открыть ваш сайт с мобильного устройства.
Помимо этого у QR code есть интересная особенность – по его виду непонятно, что за ним кроется. И многие, у кого установлен QR scanner, считывают код просто из любопытства. Чем не дополнительная реклама?
2 Задача пользователя: Понять «где я?», «Как сюда можно попасть еще раз»
Всегда приятно понимать где ты находишься, что перед тобой, особенно если в этом месте оказался впервые. И нет ничего зазорного в том, чтобы держать эту информацию всегда на виду.
Инструменты:
— логотип (по совместительству быстрый переход «домой»);
— заголовок страницы;
— выделение текущего пункта меню (каталога);
— хлебные крошки.
За то, как будет выглядеть ваш сайт среди соседей по вкладкам (или закладкам) браузера, ответственны Favicon вместе с Title.
3 Задача пользователя: Попасть в личное пространство
Под личным пространством я подразумеваю все то, что касается отдельно взятого пользователя и никого другого. Это может быть личный кабинет, может быть корзина с товарами в интернет магазине, даже тщательно отобранные песни Софии Ротару о болезнях, собранные в плейлист «Было-было, но прошло», могут быть «личным пространством». Все социальные сервисы это одно большое личное пространство. Итак, у пользователя есть задача попасть в личное пространство и подзадача понять что он уже там.
Инструменты:
— форма авторизации;
— изменение вида сайта (целиком, либо частично) в зависимости от того, авторизован пользователь или нет;
— ссылка на корзину/личный кабинет.
Если личное пространство пользователя это и есть суть сайта, то стоит форме авторизации уделить место в соответствии со значимостью, а именно — дофигища! После авторизации можно не сильно уделять внимание тому факту, что пользователь в своем пространстве, т.к. другого попросту не существует. Стоит только не забыть оставить возможность выйти с сайта, в противном случае кто-то может выйти из себя.
Если личное пространство не так ярко выражено, то достаточно поместить элемент для перехода к нему в неизменном месте. Обычно для этого используют правый верхний угол. Можно этим не ограничиваться – предоставляя пользователю переход к личному пространству (либо к его отдельным составляющим) в тех местах, где сочтете нужным.
4 Задача пользователя: Получить актуальную информацию
Практически все сайты, предлагающие товары или услуги, имеют ряд условий, например:
— регион обслуживания (либо зависимость чего-либо от региона);
— время работы;
— обслуживание физических/юридических лиц;
— товары для определенных групп.
Пользователю важно понимать, насколько информация, которая сейчас отображена на экране подходит для него.
— Можно ли эту вкуснейшую пиццу заказать в Ставрополе, да еще и в 2 часа ночи?
— Действительно ли цены на аренду «квартиры в центре» так сильно взлетели? Или это цены не моего города?
Ответы на все эти вопросы должны быть получены как можно раньше. В идеале таких вопросов возникать вовсе не должно, автоматическое определение места/времени должно учитываться по умолчанию.
Инструменты:
— выбор региона;
— уточнение деталей, подсказки;
— фильтры.
Не заставляйте пользователя сначала выбрать товар, а потом понять, что доставка для него невозможна, или что этот хлебушек доступен только для обладателей карты «золотой колос 2011». Небольшой пример, на что может повлиять смена региона:
5 Задача пользователя: Найти что-то конкретное
Это одна из самых важных навигационных задач. Казалось бы – нет ничего проще, чем спросить у пользователя, чего он хочет и дать то, что нужно. В идеале нужен вышколенный консультант:
— Чем я могу вам помочь?
— Мне бы семеновский ржаной с отрубями.
— Минуточку, милейший!
на практике чаще всего имеем следующие Инструменты:
— поиск;
— рубрикатор.
Пользователь может либо пройти по логично выстроенному каталогу, либо воспользоваться «телепортацией» в виде поиска.
Телепорт начинает изрядно барахлить если:
— поиск нужно искать через Ctrl+F;
— есть подобные подсказки: Для поиска словосочетания «заключите его в кавычки».
Не бойтесь использовать крупное поле поиска, снабдите его подсказками и списком популярных запросов. Если результаты поиска попадают в разные «категории» — не мешайте в кучу, делите выдачу по категориям.
При создании рубрикатора важно помнить о следующем:
— рубрики должны быть названы на понятном пользователю языке;
Если вы хотите торговать кухонной утварью, и при этом надеетесь, что покупать ее будут студенты мамам и девушкам в подарок, не стоит делать разделы «Чапельники», «Шумовки», «Сотейники» и им подобные, не снабженные хотя бы иллюстрацией. Молодежь просто не поймет, о чем вы!
— рубрики одного уровня должны быть равнозначными;
Не стоит в один уровень размещать «Сковороды» / «Кастрюли» / «Посуда из стекла». Избежать таких ошибок очень просто – попросите любого, не участвующего в проекте, найти лишние пункты в вашем ряду значений.
В создании рубрикатора поможет карточная сортировка. Ее суть заключается в том, что все предполагаемые к использованию параметры выписываются на карточки, а потенциальные пользователи системы формируют их в группы наиболее логичным, на их взгляд, образом. Названия группам могут быть заданы изначально или предложены самими респондентами.
6 Задача пользователя: Ознакомиться с содержанием, выбрать из предложенного, переключиться на что-то другое
Еще одна из важнейших навигационных задач – дать пользователю понять, что вообще есть на сайте. Это поможет как пришедшему за чем-то конкретным понять, что предлагают помимо заинтересовавшего его изначально, так и простому «сёрферу» ознакомится с содержанием сайта.
Инструменты:
— анонсы категорий (дашборды);
— меню (табы);
— галереи, списки, иные способы представления информации.
В идеале, основная часть главной страницы должны быть посвящена обзору содержимого сайта, в любом приемлемом виде. Например, в виде «анонсов» с кратким описанием каждой категории:
При этом стоит помнить, что не всегда путь начинается с главной, поэтому даже на странице отдельно взятой буханки пользователь должен знать, чем он еще может полакомиться:
Таким образом меню выполняет как функцию переключения между разделами, так и просто дает понять пользователю, что есть на сайте, куда еще можно пройти.
Не менее важно то, как представлена информация «списочного» характера. Пользователь должен понимать, как организован список, сколько элементов он содержит, как посмотреть «следующие 50 позиций». Следует заранее предусмотреть все возможные виды сортировок, фильтрации. При этом результат должен отражать не возможности разработчиков, а нужды пользователей. Сортировка хлебушка по цвету корки и количеству внутренних полостей диаметром больше 3мм безусловно может быть реализована, но будет ли она востребована? Стоит пользователю заподозрить, что он запутался, что он не может разобраться «почему так» и «да где же бородинский, воды три ведра вам в печь», как в тот же миг вы окажетесь вне его милости, а сайт в опале.
7 Задача пользователя: «Найти вас в реальном мире»
Если деятельность не ограничивается виртуальным пространством, у вас есть телефоны, адреса, явки и пароли, которые могут понадобиться пользователю – не прячьте их!
Инструменты:
— контакты, адреса;
— карты и ссылки на них.
Невозможно предусмотреть, когда пользователь захочет обратиться в раздел «контакты», по-этому лучше, чтобы доступ к нему был всегда. Даже если вам кажется, что информация на сайте избыточна, все равно дайте людям номер телефона, куда они смогут обратиться с любым вопросом. Пока еще далеки времена, когда верить «интернету» будут больше, чем живому человеку.
Если размещаете физические адреса:
— снабдите их картой;
— опишите путь для автомобилистов;
— опишите как добраться пешком, на общественном транспорте.
Помните, что «Барочная 4a» это не более чем юридический адрес, который может быть известен всем водителям маршрутки не иначе как «У столба с аистами остановите пожалуйста». Лучше всего дать описание человеку, который ни разу у вас не был – пусть он попробует по нему добраться, а потом расскажет, с какими трудностями столкнулся.
Попробуйте открыть свой сайт с мобильного телефона и найти там адреса/телефоны, возможно это вообще единственная по-настоящему важная информация, которую стоит показывать в мобильной версии.
Контакты стоит размещать даже на страницах «Сайт находится в стадии разработки», «Проводятся технические работы» и т.п. Ведь, столкнувшись с такого рода «стеной», пользователь может либо уйти к конкурентам, либо, если вы монополист, и вовсе остаться без хлебушка.
Пожалуйста, не оставляйте людей без присмотра!
Что такое навигация сайта: как её правильно сделать
Допустим, Ваш сайт посвящён рекламе и продвижению, но если навигация на нём будет непонятна и не удобна, то курсы SEO-продвижения у Вас попросту никто не найдёт и не закажет. Поэтому навигации нужно уделять достаточно внимания, от этого зависит, появятся у Вас клиенты или нет.
Что такое навигация сайта
Рассмотрим подробнее, что такое навигация сайта и для чего она нужна. Так вот, навигация – это система, с помощью которой появляется возможность переходить между страницами интернет-ресурса.
Существует несколько основных видов навигации, при проектировании сайта не обязательно использовать их все, можно выбрать несколько, наиболее подходящих именно для Вашего ресурса. Первый вид – это основная навигация, в ней самые важные ссылки располагаются в самом меню. Если сайт небольшой, то зачастую используется только эта навигация.
Второй вид – это языковая навигация, используемая в случаях многоязычной аудитории, с выбором наиболее удобного языка для прочтения информации. Третий – глобальная, включающая в себя те ссылки, которые будут видны с каждой страницы ресурса.
Четвёртая навигация – рекламная. Это ссылки, направляющие пользователей на другие страницы с какими-либо услугами. Вот, например: «цены на СЕО-продвижение», нажмите сюда, и Вы перейдёте на услугу СЕО-продвижения. Пятый вид – указательная навигация, с помощью неё Вы можете видеть в какой части сайта находитесь.
Так же существует разделение навигации по типу реализации на четыре вида. Первый – текстовый, ссылки оформляются в текстовом формате. Второй вид – графическая навигация. Переход осуществляется при нажатии на какие-либо прорисованные элементы меню или кнопки.
Третий вид – Java и Flash инструменты, с их помощью создаются различные эффекты при наведении курсора или нажатии на какую-либо ссылку. Реализовать качественную навигацию, при помощи таких технологий довольно сложно, но результат того стоит. Четвёртый вид – это навигация HTML, она служит для создания компактного меню.
Выбор вида навигации позволяет перейти к максимально удобному использованию ресурса, ещё он происходит в зависимости от самого проекта, который находится в разработке.
Как сделать навигацию по сайту
Для того чтобы знать, как сделать навигацию по сайту нужно придерживаться определённых критериев качества. Первый критерий заключается в том, чтобы навигация была простой и удобной. Вот, например, чтобы узнать стоимость создания сайта-визитки, Вам всего лишь требуется сделать одно нажатие мышкой. Вся совокупность элементов меню должна быть понятна и видна любому пользователю.
Во-вторых, качественные и проработанные навигационные элементы должны быть доступны на каждой странице Вашего ресурса, чтобы без затруднений переходить к нужному разделу. Третий критерий говорит о визуальном графическом оформлении, всё должно быть гармонично, контрастно и не раздражать глаза.
Для того чтобы Ваш ресурс не посещался клиентами в пустую, нужно знать, что такое конверсия сайта и как её увеличить, ведь разработка навигации по сайту является важнейшим условием высокой конверсии. Если продумать систему навигации и сделать её максимально удобной, то удержать пользователя на Вашем ресурсе и заинтересовать его будет намного проще.
Навигация на сайте: как ее правильно построить?
Из этой статьи вы узнаете:
На любом веб-сайте должна быть удобная навигация — это факт. Если запутанные переходы начнут дезориентировать посетителя и помешают ему найти нужную информацию, он просто предпочтет конкурентов. Поэтому именно продуманная навигация на сайте считается главным показателем удобства ресурса.
Что такое навигация по сайту
Система навигации сайта — это совокупность методов, приемов и специальных элементов, позволяющих переходить от одной страницы к другой.
Как уровень конверсии, так и успешное продвижение веб-ресурса зависят от качества навигации. Она сравнима с планировкой жилого помещения. Благодаря хорошей планировке можно без труда найти нужную комнату, не заблудиться и не перепутать вход в спальню со входом на кухню. Но если помещений, коридоров и дверей в доме очень много, человек легко может потеряться. Точно так же дела обстоят и с веб-сайтами. Запутанная навигация, бесконечные ссылки, по которым пользователь попадает не туда, куда надо, сбивает с толку. Человек не может найти то, что ему нужно.
Продуманная навигация важна и для поисковиков. Дело в том, что поисковым агрегаторам важно понимать, какую роль та или иная страница играет на вашем веб-ресурсе. Кроме того, логичная навигация улучшает поведенческие показатели, поскольку посетители быстрее находят то, что ищут.
Итак, какой должна быть хорошая навигация на сайте? Вот ее основные характеристики:
Стоит еще раз подчеркнуть: от соблюдения этих правил при разработке сайта во многом зависит его дальнейшее развитие. Дело в том, что ресурс с некачественной навигацией не будет посещаемым. Простая навигация на сайте — часть работы над юзабилити, удобством использования по совокупности ключевых параметров.
Виды навигации сайта и типы ее реализации
Из множества видов навигаций вы можете отдать предпочтение тем, что принесут наибольшую пользу именно вашему веб-ресурсу.
Подходящий вид навигации выбирают с учетом тематической направленности, позиционирования веб-ресурса, объема контента на нем. Иногда владельцы используют разные типы навигаций, если нужно. Но обычно отдают предпочтение 1-2 из вышеуказанных. При выборе навигации отталкиваются главным образом от того, будет ли пользователю удобно искать нужные данные.
Навигация на сайте может быть реализована в 4 формах:
С учетом того, какой тип веб-ресурса разрабатывается, специалист выбирает оптимальный вариант навигации, соответствующий его целям и задачам. Грамотно подобранная навигация позволяет сделать сайт максимально удобным для пользователя и подтолкнуть его к целевому действию.
Структура навигации сайта
Структура отдельных страниц и строение сайта в целом отличаются друг от друга. В первом случае структура устанавливает, откуда можно перейти на данную страницу и куда можно попасть с нее. Что касается общей структуры (карты) сайта, она позволяет увидеть, как связаны друг с другом все страницы веб-ресурса. Карту можно представить в виде ориентированного графа, верхушки которого — адреса веб-страниц, а дуги — гиперссылки.
Навигация — карта сайта может быть представлена в следующих формах:
Здесь все веб-страницы взаимосвязаны друг с другом так, что посещать их можно только в определенном порядке. И если вы оказались на какой-то странице в середине веб-ресурса, то дальше можете двигаться только в одну сторону. Вернуться нельзя.
Здесь вы можете передвигаться в обе стороны, переходя как на следующую, так и на предыдущую страницу.
Это линейная структура, где с последней страницы можно перейти на первую. За счет этого вы неоднократно проходите через любую страницу, не покидая веб-ресурс.
Есть два варианта иерархической структуры. Она может быть просто иерархической (где, к примеру, возможен переход со второй страницы на четвертую или с четвертой на вторую, то есть возврат разрешен) или иерархической тупиковой, где реверса нет. Такие веб-ресурсы, увы, тоже встречаются. При этом предполагается, что возврат возможен при помощи соответствующей кнопки браузера. Но многие пользователи могут просто не знать о том, что она есть.
Здесь обязательно наличие центральной страницы, с которой можно перейти к любой другой. При этом переход с нецентральной страницы на другую возможен только через основную. Чтобы перейти с одной крайней веб-страницы на другую крайнюю, необходимо всего два действия (в других структурах действий может потребоваться и больше).
Этот тип структуры схож со звездообразной, но здесь, чтобы перейти на смежные страницы, требуется меньше шагов.
В полносвязной структуре каждая веб-страница взаимосвязана с остальными страницами на сайте. Чтобы перейти с любой страницы на другую, нужно один раз щелкнуть мышкой. Такая форма навигации может выглядеть как меню, выполненное в виде отдельного фрейма, который все время присутствует на экране.
Основные элементы навигации сайта
В сознании большинства людей при мысли о навигации всплывает лишь модель, отображаемая в верхней или правой верхней части каждой страницы. По сути все верно, однако существуют и другие многочисленные элементы, связанные с навигацией. Их задача — поддержание прочной структуры веб-ресурса и его адаптация к поисковикам и простым пользователям. Каждый элемент должен помогать посетителю переходить на желаемую страницу и получать информацию. Какие составляющие можно и нужно применять, чтобы организовать качественную навигацию?
1. Меню
При разработке навигации основным элементом является меню. Это панель с размещенными на ней ссылками к главным разделам веб-ресурса. Существуют разные виды меню.
Рекомендуемые статьи по данной теме:
Чаще всего можно встретить горизонтальное. Находится обычно в шапке сайта. Включает в себя кнопки и ссылки, которые ведут к соответствующим веб-страницам. Если на панели не хватает места для всех разделов, создают выпадающее меню со всеми категориями.
Но встречается и вертикальное меню, когда слева или справа размещен перечень главных разделов сайта, каталог с товарами и т. д.
При разработке навигации также часто используют меню-гамбургер — еще один особый прием. Чтобы скрыть категории, применяют специальный значок в виде трех горизонтальных черт. Такой показ меню перешел из мобильной разработки. Как правило, его используют на тех веб-ресурсах, где важна экономия места на главном экране.
Меню также делят по видам. Оно бывает главным и второстепенным. Второстепенное добавляют на веб-ресурс при наличии многочисленных разделов или разбивки по категориям внутри одной страницы.
Меню должно быть оформлено в соответствии с общей стилистикой сайта. Необходимо выделять важные разделы и активную категорию. Чтобы было удобнее воспринимать меню, часто пользуются иконками.
2. Логотип и прочие пометки главной страницы
Очень часто на логотип фирмы добавляют ссылку к главной странице веб-ресурса. Так, пользователь, нажимая на логотип, сразу переходит на главную. Интернет-аудитория уже привыкла к такому приему. Кроме того, на веб-сайтах часто используют иконку дома для перехода на главную страницу. Реже применяют раздел «Главная» в меню.
3. Раздел «О нас»
Необходимо, чтобы посетители беспрепятственно получали сведения о вас и вашей организации. Если в панели навигации есть ссылка на вышеуказанный раздел, аудитория больше вам доверяет и ваш авторитет в ее глазах укрепляется.
4. Иконки
Чтобы пользователь мог легче воспринимать информацию, на странице размещают не текстовые ссылки, а иконки. Чаще всего можно встретить следующие значки: лупу (поиск), дом (главная страница), сердце (избранное) и корзину (страница оформления заказа). Их разрабатывают в единой стилистике и размещают в шапке сайта.
Кроме того, с помощью иконок обозначают категории товаров в интернет-магазинах. Нажимая на значок, пользователь оказывается в соответствующей категории или карточке товара. Бывает, что иконки размещают в меню веб-ресурса.
5. Текстовые ссылки
В навигации сайта присутствует еще один элемент — ссылки на страницы, которые встроены в текст.
Существуют некоторые правила оформления гиперссылок:
Благодаря ссылкам, встраиваемым в текст, можно не только выстроить навигацию, но и удержать клиента на сайте.
6. Футер
Футером, или подвалом, называют область в самом конце веб-страницы с размещенными на ней ссылками на разделы, контактами компании, а также ссылками на документацию и правила пользования сайтом. Футер помогает найти любой раздел на веб-ресурсе.
Оформляют данный элемент отдельно, и иногда его дизайн выбивается из общего стиля сайта.
7. «Хлебные крошки»
Так называют вспомогательную навигацию сайта для пользователей, представляющую собой путь от главной страницы до текущего раздела. Все элементы данной строки, за исключением текущей страницы, являются кликабельными и ведут на соответствующий раздел ресурса. Нередко текущую страницу опускают и остаются лишь предшествующие разделы. Такой прием дает пользователю возможность понять, где он сейчас и как вернуться назад.
8. Призывы к действию
Тоже полноценный элемент навигации. Нажав на кнопку или заполнив форму, пользователь перенаправляется на страницу для заказа или покупки. Завершив целевое действие, клиент должен беспрепятственно попадать на главную страницу, в каталог товаров или на другие соответствующие страницы.
9. Оформление заказа / Корзина
В интернет-магазинах благодаря этим разделам (заказы, покупки, корзина) посетители видят перечень интересующих товаров. То есть они почти готовы совершить целевое действие. Когда товар мелькает в браузере, они быстрее оформляют заказ.
10. Кнопка для возврата
При скроллинге появляется сложность: как клиенту скорее вернуться в начало страницы и не прокручивать ее по новой? Для устранения этой проблемы предусматривают кнопки возврата. Они выглядят как стрелки в положении «вверх».
Этот прием — идеальное решение для таких площадок, как информационные сайты, длинные лендинги, сайты с бесконечной лентой.
11. Страница 404
Если посетитель оказывается на несуществующей странице, его нужно плавно перенаправить на главную страницу или в другие разделы на сайте, чтобы он совершил целевое действие. Для этого оформляют страницы-ошибки со ссылками на данные разделы веб-ресурса.
Владельцам крупных площадок лучше применять несколько элементов навигации на странице одновременно. Чтобы клиенты не покинули сайт, разработайте четкую структуру и направляйте клиента до тех пор, пока он не совершит целевое действие.
Как сделать удобную навигацию по сайту
Удобная навигация должна помогать пользователю легко ориентироваться на сайте, понимать, в каком разделе или на какой странице он сейчас находится, откуда пришел и куда может перейти. Итак, какие элементы навигации нужно добавить, чтобы гость не растерялся?
Шапка
Ее необходимо зрительно отделить от других элементов страницы и включить туда:
Не советуем ссылаться в шапке на социальные сети, чтобы сразу не уводить клиентов с веб-ресурса. Лучше расскажите о своих аккаунтах в социальных сетях в главной части страницы и/или в футере.
Основное меню
Самое оптимальное решение — разместить эти ссылки горизонтально под шапкой. Выбирая названия для разделов, помните о семантическом проектировании. Главные разделы, которые должны присутствовать в основном меню:
Для каждого сайта перечень свой. Но чтобы информация легко воспринималась, не советуем размещать в меню больше 5–7 ссылок. Если этот показатель превышен, выделите над шапкой второе меню со ссылками на вспомогательные разделы — «сервисное меню». Кроме того, ссылки на дополнительные разделы, к примеру вакансии организации, можно показывать только в футере.
Активный раздел меню необходимо выделять визуально. Посетитель должен понимать, где он сейчас.
Форма поиска
Есть смысл сразу ответить на часто задаваемый вопрос: нужно отразить одну кнопку или показать форму целиком? Рекомендуем разместить поле ввода и кнопку запуска, чтобы избавить посетителя от необходимости выполнять лишние действия. Иногда такие кнопки трудно заметить.
Как визуально должна выглядеть форма поиска?
В каком месте следует расположить форму поиска? Прежде всего, она должна быть доступна со всех страниц. Чаще всего ее размещают в шапке. Интернет-аудитория привыкла, что, как правило, форма находится там.
Но можно разместить и в других областях веб-ресурса:
Снова отметим, что лучшим местом для размещения формы поиска является шапка, поскольку именно на нее посетитель обращает внимание в первую очередь.
Подвал сайта
Многие при разработке навигации сайта не используют этот элемент, а напрасно, так как пользователь, просмотрев страницы, быстрее перейдет в другой раздел или найдет дополнительные ссылки, отсутствующие в главном меню.
Подвал должен включать в себя:
Что касается логотипа и названия фирмы, их в футере размещать необязательно, особенно при большом количестве ссылок на разделы.
Дополнительные навигационные элементы на сайте
Также дают посетителю возможность понять структуру веб-сайта, но применимы они не ко всем ресурсам.
Если какой-то из разделов делится на подразделы, их необходимо вывести в боковое меню.
Самое оптимальное место для размещения меню — слева от основной части страницы. Не дублируйте это меню на всех страницах. Расположите его в разделе, к которому оно относится.
Они демонстрируют, какой путь прошел пользователь или на каком месте находится страница в иерархии веб-ресурса. Надо также сказать, что это применимо только к многоуровневым сайтам (с более чем двумя уровнями).
Вот по каким правилам их нужно оформлять:
Не добавляйте на сайт ссылки, такие как «Вперед», «Назад», «Обратно в раздел» и т. д., только запутывающие посетителей. Хлебных крошек будет достаточно.
Нужны по большей части сайтам электронной коммерции. Пользователи привыкли в основном к боковому меню, расположенному в левой части от списка товаров. Им удобнее воспринимать информацию слева направо, а потому они в первую очередь отбирают критерии, а уже потом изучают отфильтрованный перечень товаров. Не прячьте фильтры, поскольку аудитория может не заметить их. Трудно сформировать список фильтров, который подходил бы любому товару. Поэтому рассмотрим необходимые составляющие:
Ссылки в главной части веб-страницы
Важно, чтобы пользователь сразу понимал, где ссылки, а где простой текст. Поэтому советуем выделять их цветом и подчеркивать. Общая стилистика на всем сайте обязательна. Так пользователю удастся сразу их найти, без дополнительных действий. Лучше всего выделять ссылки синим или голубым. От очень ярких цветов стоит отказаться, так как они отвлекают от основного содержания страницы и в целом портят внешний вид текста. Выделяйте все ссылки, кроме ссылок меню: и так ясно, что они являются кликабельными.
Чтобы аудитория легче ориентировалась и могла быстро отличать уже посещенные страницы от тех, на которых еще не была, выделяйте посещенные ссылки. Отдавайте предпочтение менее яркому оттенку основного цвета ссылок или близкому по цвету, но тоже приглушенному. Отличные друг от друга, но одинаково яркие цвета только запутают посетителя.
Вот еще 6 дополнительных рекомендаций:
URL-адрес веб-страницы
Адреса ссылок должны быть простыми и понятными рядовому посетителю. Весь адрес веб-страницы пишите на латинице.
Все советы подтверждены практически, а потому вы можете, не боясь, дополнять свой веб-сайт данными элементами. Удобная навигация на сайте — это реальная задача, которую можно решить. Поэтому не упускайте ни минуты и дорабатывайте свой ресурс.
О навигации на сайте WordPress
Создание навигации сайта на WordPress, по сути, не так трудно. Ниже приведена небольшая пошаговая инструкция.
Настройте на панели администрирования сайта меню:
Введите все веб-страницы, которые хотите показать в меню. Расположите все элементы в необходимом для себя порядке и обязательно сохраните все отредактированное под именем, выбранным для вашего меню. К примеру, Меню 1.
Далее закрепите все это в настройках темы.
Внешний вид — Настроить — Навигация — Выбрать меню.
Выберите наше Меню 1 и сохраните настройки.
Количество текстового контента на сайте со временем будет расти, а потому нужно будет создать постраничную навигацию. Для этого воспользуйтесь удобным плагином WP-PageNavi.
Нужно ввести название плагина в окошке поиска на странице плагинов на панели администрирования и установить его, после чего активировать. Далее плагин необходимо настроить. Для этого следует войти в меню Параметры — Список страниц.
Далее настройте стиль показа страниц — стандартное или выпадающее меню, а также диапазон веб-страниц для демонстрации и коэффициент для данного диапазона. Это сделает навигацию по сайту гораздо более удобной для пользователей.
Можно установить еще один плагин — nRelate Related Content, который выводит после каждой публикации подобные статьи. Процесс установки плагина стандартный. После его активации необходимо провести еще несколько настроек. В меню панели администрирования появится отдельный блок — nRelate с двумя вкладками (Dashboard и Related Content). При первом обращении к плагину ему понадобится какое-то время для индексации всех страниц нашего веб-сайта.
На вкладке Dashboard можно выбрать, какие виды похожих записей будут выводиться. Наша задача — выведение подобных публикаций. Поэтому надо выбрать post.
Далее необходимо перейти на вкладку Related Content, где будет предложено ввести адрес изображения, используемого плагином для вывода статей, в которых отсутствуют свои картинки. Это изображение необходимо заранее загрузить в библиотеку медиафайлов. Кроме того, на вкладке Related Content нужно выбрать количество подобных публикаций, которые будут выводиться после каждого поста, уровень сходства и время размещения на сайте, чтобы плагин отбирал соответствующие материалы. Не стоит выводить больше трех подобных статей. Это скорее загромоздит сайт, чем улучшит навигацию.
Далее следует установить места размещения похожих публикаций — перед нашим постом или после, а также определить, будут ли показываться названия. Возможно выведение не только названий, но и некоторой части текста. Но, как правило, это уже не нужно. Затем, уже после сохранения всех настроек, под каждой статьей появятся картинки со ссылками на три подобные публикации.
Для реализации этого же функционала можно использовать и другие плагины, к примеру Contextual Related Posts.
Чтобы посетителям было удобно, можно выстроить карту сайта. Для этого необходимо использовать плагин Dagon Design Sitemap Generator. Если не удается найти его через админку WordPress, скачайте с официального сайта Dagon Design.
Установите и активируйте плагин, после чего выполните определенные настройки. Зайдите в меню Параметры — XML-Sitemap. Выберите все страницы, рубрики и статьи, которые вы хотели бы видеть на карте своего ресурса. И здесь же можете отказаться от всего, что не хотели бы показывать на карте сайта.
Еще одна неотъемлемая часть навигации сайта — кнопка «Наверх». Когда пользователь вынужден бесконечно крутить колесо на мышке, чтобы вернуться назад после прочтения длинного материала, вряд ли ему это нравится. Кнопка «Наверх» существенно упростит задачу.
Простая кнопка без наворотов устанавливается в два счета. Для этого нужно открыть для редактирования файл footer.php темы WordPress, который, как мы знаем, отвечает за отображение в браузере нижней части страницы — футера.
Перед закрывающим тегом body необходимо поставить такой код:
Редактировать файлы удобнее всего с помощью Notepad++. Так создается навигация сайта.
CSS-свойства для соответствующего идентификатора (id) gotop задаются, чтобы определить местоположение и вид значка «Наверх»:
border: 2px solid #BBB9C0;
Необходимо скопировать и занести эти свойства в файл style.css темы WordPress (устройство темы WordPress). В итоге внизу справа должно появиться стандартное изображение кнопки «Наверх». Вы легко можете адаптировать ее к своему дизайну, изменив значение тех или иных свойств.
Эту простую картинку можно менять: делать рамку толще, выбрать другой тип и цвет (border), а также размер (font-size) и цвет (color) шрифта надписи «Наверх». Чтобы максимально адаптировать изображение к своему дизайну, попробуйте применить разные стили.
По каким параметрам проводится анализ навигации сайта
Чтобы у посетителей не было проблем с быстрым и удобным перемещением с одной страницы веб-ресурса на другую, продумайте навигацию. Если вы ее уже разработали, проверьте, корректно ли она работает. Вы должны удостовериться, что она понятна и доступна аудитории.
Навигацию всегда анализируют по следующим параметрам:
Нельзя значительно удалять вложенные веб-страницы от главной. Лучше всего, если посетитель всего через 3 клика попадает на самые удаленные части ресурса. Если это условие не выполнено, значит, есть над чем работать.
Эти технологии в принципе не нужно использовать в навигации, так как роботы их не очень любят. Но если вы все же решили, что блоки должны быть динамичными, то обязательно оптимизируйте их под поисковые системы.
Пользователи не должны напрягаться, стараясь отыскать ссылки для перехода. Анализируя навигацию, удостоверьтесь, что ссылки для внутренних переходов выделены ярким шрифтом и хорошо заметны. То же самое относится к контекстным ссылкам, размещенным в контенте.
Анализируя навигацию, обязательно нужно убедиться в наличии карты сайта. Глядя на нее, посетитель всегда лучше всего ориентируется и находит для себя максимально полезную информацию.
При наличии большого объема материалов на сайте пользователь может забыть, какие именно страницы он посещал. Поэтому, чтобы гости не выполняли ненужные действия, выделяйте специальным цветом ссылки, уже использованные в этой сессии.
Смотря на навигацию сайта, пользователь должен уже приблизительно понимать общую структуру площади, а также представлять, куда ведет та или иная ссылка. Иными словами, необходимо использовать понятные и относительно короткие описания. Не нужно креативности, если вы знаете какие-либо стандартные значения. Например, прайс лучше обозначить ссылкой «Цены». К таким вариантам пользователи привыкли, следовательно, заметят их намного быстрее. И, конечно же, необходимо применять понятные шрифты средних размеров, чтобы люди воспринимали их положительно.
Основные ошибки в навигации сайта
У каждого сайта организации/бренда четыре задачи — сформировать у аудитории лояльное отношение к себе, повысить трафик, сократить количество отказов, повысить показатели конверсии в лиды или продажи. Здесь многое определяется тем, насколько комфортно гостям на вашем сайте. Зачастую удается прийти к желаемому результату, а бывает, что и нет.
Какие же основные ошибки пользователи допускают, разрабатывая навигацию?
Ошибка № 1. Оригинальный стиль
Традиционно навигация на сайте размещается сверху или слева страницы, и для пользователей это привычное явление. Не отходите от этой традиции и не заставляйте их долго искать нужную информацию. Долгие поиски никому не понравятся, следовательно, конверсия от этого снизится, а число отказов повысится.
Конечно, при создании веб-страниц и сайтов всегда уместна креативность. Но разработка навигации сайта — не та область, где стоит ее применять. Эти эксперименты отвлекают посетителей, и вместо того, чтобы изучать основное содержимое сайта, они вынуждены разбираться в новом формате навигации.
Ошибка № 2. Универсальные названия пунктов меню
Очень важно, чтобы названия меню навигации были информативны. Предположим, пункты меню «Товары» или «О нас» используют все компании, и такие надписи несут в себе мало информации для пользователя. Еще пример: «Кто мы». Эта фраза тоже ни о чем не говорит.
Как здесь улучшить навигацию? Выберите более точные названия для каждого значка пункта. Вот увидите, конверсия повысится. Гость пришел на ваш ресурс, чтобы найти важную для себя информацию. Не отмахивайтесь от него шаблонами.
Вы ведь согласны с тем, что пользователи не ищут общие для всех «Услуги» или раздел «О нас», а потому навигация с такими пунктами никак не поспособствует продвижению сайта в результатах поисковой выдачи? Меню и структуру веб-ресурса нужно оптимизировать для поисковиков, чтобы эти элементы говорили на понятном целевым пользователям языке.
Ошибка № 3. Выпадающее меню
Этот навигационный элемент сейчас очень распространен. Но использовать его нужно очень осторожно по двум причинам.
Во-первых, многие из вас, наверное, сталкивались с таким меню и вынуждены были буквально ловить его. Одно лишнее движение — и оно ускользает. После очередной попытки — снова разочарование. Появляется еще один перечень вариантов действий. Это не вызывает ничего, кроме раздражения. Подумайте, стоит ли провоцировать у своей аудитории такие эмоции.
Вторая причина, по которой не нужно использовать такое меню, заключается в низкой посещаемости страниц сайта или глубины просмотра. Если страницы верхнего уровня гости посещают слабо, не исключено, что дело в наличии данного элемента навигации. Но бывают исключения. Например, если у вас большой сайт со множеством разделов, выпадающее меню значительно улучшает юзабилити веб-ресурса.
Ошибка № 4. Чрезмерное количество пунктов меню
Иногда даже 7 пунктов — перебор. Пусть их будет меньше — не более 5. Чем меньше вторых по значимости пунктов, тем реже посетители станут обращать на них внимание и тем больше будут смотреть на важные.
Это правило также применимо не только к навигации, но и ко всему содержимому веб-ресурса. Благодаря каждому удаленному элементу остальные становятся более видимыми. Краткая навигация веб-сайта важна и для SEO. Так как пользователи обычно попадают по ссылке на домашнюю страницу, а не на внутренние, именно она наиболее значима для поисковых систем. Если в навигации по сайту слишком много ссылок, главная страница теряет свой авторитет, уступая другим.
Ошибка № 5. Нелогичное размещение пункта меню для оформления заказа
Результаты психологических исследований показали, что запомнить первые и последние пункты в любом списке проще — по сравнению с элементами, расположенными посередине. Это же относится и к пользователям Интернета. В начале списка (эффект первичности) и в конце (эффект новизны) внимание людей максимально сконцентрировано. Именно поэтому размещать важные элементы следует в начале навигации, а второстепенные — по центру.