«Основой почти всех хороших информационных архитектур является хорошо продуманная иерархия».
Anger. Путаница. Разочарование.
Это эмоции веб-серфера, потерянного в киберпространстве. В мрачном, неизведанном мраке плохо созданного сайта. Надеюсь, не один из ваших!
Хотя это может быть правдой, что Контент является Королем в Сети, вашему Веб-сайту нужна упорядоченная структура — и множество указателей — чтобы помочь посетителям обойти это. Чтобы найти то, что они ищут на нем. Чтобы добраться до того раздела, который они хотят посетить. Быстро. Эффективно. Безболезненно.
Ваш сайт нуждается в хорошей системе навигации
Термин «навигация» используется в Интернете для описания того, как посетитель вашего сайта руководствуется, когда он / она перемещается по его различным разделам. В этой статье я расскажу об элементах хорошей системы навигации для вашего сайта.
Какова цель вашего сайта?
В большинстве случаев это будет для удовлетворения потребностей определенной группы людей. Информационный ресурс будет ожидать, чтобы позволить пользователям найти соответствующий контент. Развлекательный сайт стремится дать посетителю приятные впечатления. Сайт розничной торговли надеется продавать товары, которые нужны покупателю или которые он желает.
Одним из наиболее важных аспектов вашего веб-сайта — помимо содержания, конечно, — является то, как вы направляете посетителя к тому, что он / она ищет. И лучший способ сделать это -…
Поставить себя на место вашего клиента
Единственный способ спланировать и спроектировать оптимальную систему навигации для вашего сайта — это думать так же, как это делает типичный посетитель вашего сайта.
Попытайтесь проникнуть в сознание посетителя.
Как он / она найдет ваш сайт? Как он / она войдет в него? Какие шаги он / она предпримет, чтобы найти полезный контент? Что будет после того, как он / она найдет это?
Попытка определить ответы на эти вопросы поможет вам спланировать план для системы навигации вашего сайта.
Ценность приятного пользовательского опыта
В темпе, в котором Интернет развивается с новым контентом, уже не так легко привлекать и удивлять веб-пользователя. Ваш сайт должен предложить посетителю исключительно хороший опыт, если он / она запомнит это, добавит в закладки, вернется к нему позже, расскажет об этом другу (или многим друзьям).
И один верный способ оттолкнуть нового посетителя — сделать ваш сайт трудным для передвижения.
Если вы заставляете людей нажимать на несколько ссылок и бродить по вашему сайту в бесполезных кругах, пытаясь найти полезный контент, вы можете быть уверены, что они больше не вернутся. В Интернете просто слишком много лучших альтернатив.
Создав Веб-сайт с интуитивно понятной, элегантной и простой навигационной системой, которая показывает посетителям, где они находятся, и объясняет, как добраться до других разделов сайта, вы можете улучшить их работу на своем сайте. Тогда и только тогда они вернутся. И привести с собой своих друзей!
Обеспечение плавного потока
Большинство поисков информации или веселья следуют логической последовательности. Этот порядок может отличаться для каждого сайта. И если вы понимаете шаблон, которому могут следовать ваши посетители, и внедряете его в вашу навигационную систему, они плавно переходят через ваш сайт. Почти без усилий они направлены на контент, который ищут.
Как вы можете разработать отличную схему навигации для вашего сайта?
Это не сложно, если вы поставите себя на место своего клиента и подумаете о том, что вам больше всего нравится на таком сайте. Вот несколько важных вопросов, на которые нужно ответить:
- Где я? — помощь в текущем местонахождении на сайте
- Куда мне идти дальше? — дорожная карта или каталог всего сайта
- Как туда попасть? — интуитивно понятная или описательная система навигации
- Я все еще на этом сайте? — согласованный внешний вид в разных разделах сайта
Где я?
Помните свою последнюю праздничную поездку в Национальный парк или шоппинг, который вы совершили в новом торговом центре соседства? Что было первым, что ты сделал там?
Могу поспорить, что вы искали карту местоположения для знакомого знака « Вы здесь» .
И как только вы нашли его и сориентировались в космосе, весь опыт стал радостным и захватывающим. Вы больше не боялись потеряться.
Точно так же на большом или сложном веб-сайте с несколькими страницами и большим количеством контента, для серфера легко почувствовать себя потерянным. Это особенно верно, если он / она входит по маршруту, отличному от домашней страницы сайта. Ошеломленный, он / она задает вопрос: «Где я?»
Отличная навигационная система ответит на этот вопрос — на каждой странице.
Упоминая заголовок страницы, выделяя тему или используя кнопки другого цвета или дизайна, вы можете позволить своему посетителю выяснить, на какой странице он находится.
Советы и приемы
В теге HTML TITLE используйте описательный текст, чтобы объяснить содержание страницы.
- Убедитесь, что название и URL вашего сайта (и, возможно, даже название компании и другие соответствующие данные) есть на каждой странице вашего сайта. Это будет полезно даже людям, которые распечатывают вашу веб-страницу и читают ее в автономном режиме.
- Где-нибудь в содержании вашего сайта, попробуйте встроить навигационное средство на основе TEXT, которое сообщает посетителям, где они находятся и, возможно, откуда они пришли и куда они могут рассчитывать. Например, вы могли бы иметь строку, которая говорит:
Home > Articles > Diamonds > THE KOH-I-NOORПоследний (KOH-I-NOOR) описывает страницу, на которой читатель в настоящее время находится. Он выделяется, потому что он находится во ВСЕХ CAPS, а не гиперссылкой. Другие слова говорят посетителю путь, который ведет к этой странице. Делая их гиперссылками, посетитель может легко нажимать на них, чтобы перейти к другим частям вашего сайта.
Такая легкость боковой и вертикальной навигации является уникальным преимуществом Интернета, а превосходная система навигации использует его с максимальной пользой.
- С другой стороны, вы можете использовать более графическое выражение этого с помощью набора крошечных изображений. Тот, который мне нравится больше всего, — это набор белых СТРЕЛ в КРАСНОМ круге, чтобы указать, что есть страницы впереди и позади настоящего, и белый КВАДРАТ внутри ЧЕРНОГО круга, чтобы обозначить страницу, на которой читатель в настоящее время находится.
- Еще один способ, позволяющий посетителю найти его / ее ориентиры, — это использование техники кнопок — другой цвет или оттенок для фона или текста в навигационной панели сайта, чтобы указать часть сайта, на которой он / она находится.
Куда мне идти дальше?
Если вы потратили время на то, чтобы детально подумать о макете своего веб-сайта, по всему сайту будет проходить плавный переход к вашему контенту. Для достижения этой цели связанные или похожие типы контента на вашем сайте должны быть сгруппированы интуитивно и рационально. Затем посетитель может перейти от более широкой категории к более конкретному контенту.
Например, если ваш веб-сайт связан с электронной публикацией, у вас может быть категория верхнего уровня под названием «Электронная публикация» и несколько подкатегорий для «Электронной рассылки», «Программы электронной почты», «Электронные книги» и так далее. В разделе «Электронные книги» у вас может быть дополнительный набор категорий, таких как «Программное обеспечение для электронных книг», «Учебники для электронных книг», «Розничные продавцы электронных книг» и тому подобное.
Существует два основных уровня организации сайта — глобальный и локальный. Каждый заслуживает особого метода навигации. Глобальная навигация связана с тем, чтобы помочь посетителю вашего сайта идентифицировать и перемещаться в широких общих категориях. Локальная навигация, с другой стороны, детализирует один из основных разделов сайта и помогает посетителю найти более конкретное место в широкой категории.
Советы и приемы
- На каждой странице вашего сайта попробуйте добавить ссылку на следующий логический раздел вашего сайта. Это может быть сделано:
- Используя текст, который говорит — «СЛЕДУЮЩИЙ» или «ЧИТАТЬ БОЛЬШЕ» или «НАЖМИТЕ ЗДЕСЬ, ЧТОБЫ ПРОДОЛЖАТЬ», или даже что-то более захватывающее и убедительное, что побуждает вашего читателя продолжать
- Используя крошечные картинки или символы — например, «>>>» для перемотки вперед и «<<<» для возврата.
- Гиперссылка части содержимого самой страницы ближе к концу. Например, в этом предложении:
«Таким образом, Ко-и-Нур — очень интригующий бриллиант с загадочным прошлым».
Вы могли бы сделать слова «таинственное прошлое» кликабельной гиперссылкой на следующую часть статьи.
- Чтобы помочь читателю получить представление о макете всего сайта, попробуйте предоставить список по крайней мере основных областей или разделов на каждой странице. Таким образом, если читатель хочет исследовать совершенно другую часть вашего сайта, ему / ей не нужно многократно нажимать, чтобы найти путь, по которому он / она пошел ранее.
- На сложном или большом сайте с несколькими областями интересов может потребоваться создать несколько инструментов навигации для каждого раздела, чтобы оптимизировать работу конечного пользователя.
Как туда попасть?
Итак, теперь посетитель вашего Веб-сайта нашел ее / его ориентиры и решил, какие части вашего сайта он / она хочет исследовать дальше. Следующий вопрос, на который нужно ответить: «Что я должен сделать, чтобы попасть туда?» Очевидный ответ: «Нажмите на ссылку».
Но не всегда очевидно, где находится ссылка и к чему она приведет!
Хорошая навигационная система гарантирует, что ссылка будет легко идентифицироваться как одна. Цветовая кодировка по умолчанию большинства веб-браузеров отображает текстовую ссылку синим цветом, часто подчеркиваемым. Если по какой-либо причине вам нужно изменить этот цвет ссылки, убедитесь, что есть другие способы идентифицировать его как ссылку.
Ваша навигационная система также может улучшить взаимодействие с пользователем, ясно указав, куда ведет ссылка. Это можно сделать, сделав текстовую ссылку как можно более описательной и избегая двусмысленности и жаргона, или используя такие инструменты, как всплывающий заголовок Javascript, который отображается, когда на ссылку помещается курсор мыши.
Если вам нужно использовать различные навигационные средства на вашем сайте или если у многих пользователей возникнут проблемы с пониманием вашего процесса навигации, стоит создать страницу «HELP», в которой подробно описан процесс обхода вашего сайта.
Советы и приемы
- Желательно оставить выбор цвета по умолчанию веб-браузера вашего пользователя в одиночку. Эти цвета — синий для не посещаемых ссылок, фиолетовый — для посещенных ссылок — были выбраны после обширных исследований и тестирования удобства использования крупными компаниями-обозревателями. Вмешательство в них показывает определенное отсутствие заботы о посетителях вашего сайта. Если вы чувствуете необходимость изменить их, убедитесь, что вы изменили их по всему сайту.
- Использование изображений для гиперссылок мешает пользователям идентифицировать их как ссылки. Попробуйте сделать это проще, добавив текстовые указатели, такие как: «Нажмите на иконку ниже»
- Опрос новых веб-серферов показал, что они иногда не замечают гиперссылки, если они НЕ ЧТО-ТО. Используя простые методы Javascript или CSS, вы можете * анимировать * ссылки, чтобы они изменялись, когда пользователь наводит на них курсор мыши. Изменение цвета, шрифта или размера или строки под гиперссылкой облегчает посетителю узнать, на что нажимать.
- Javascript — это удобный способ, чтобы всплывающее описание ссылки появлялось при наведении на него курсора мыши. Но вот еще один простой трюк, который работает с браузерами Microsoft Internet Explorer (MSIE) 5.0 и выше (это не влияет на ссылку в Netscape).
В HTML-коде для ссылки используйте тег
"title"Формат такой:<a href="link.htm" title="This is the link descriptor"> LINK </a>Когда страница просматривается в браузерах MSIE 5.0 и выше, описание ссылки появляется, когда курсор мыши находится над текстом ссылки! Попробуйте сами.
- Если ваш веб-сайт привлекает много новичков, которые все еще учатся ходить по Интернету, или если вы используете сложную навигационную систему, которую сложно понять интуитивно (в идеале, вы не должны этого делать!), Возможно, стоит создать страницу HELP. объяснить вашу навигационную систему. На этой странице подробно опишите все элементы навигации, которые вы используете, и объясните пользователю, как они могут воспользоваться системой, чтобы обойти различные разделы вашего сайта. Тогда — самое главное — ссылка на эту страницу справки со всех страниц вашего сайта!
Я все еще здесь?
Веб-серферов, как согласованность на веб-сайте. Если посетитель нажимает на ссылку и переносится на страницу, которая выглядит совершенно иначе, чем предыдущая, он / она смущается и спрашивает: «Я все еще на том же сайте? Или меня перевели на другой?»
Отличная навигационная система подразумевает сохранение единообразного внешнего вида на веб-сайте. Постоянство подтверждает тот факт, что связанная страница является частью того же сайта.
Создание ваших навигационных средств
Одной из задач дизайна веб-сайта является интеграция вашей навигационной системы в общую схему имиджа и бренда вашего сайта. Есть много способов создать навигационные средства.
Только текст: слова используются для описания ссылки
Только изображения: небольшая графика объясняет ссылку
Текст с изображениями: и слова, и графика используются в качестве ссылки
Раскрывающееся меню: при нажатии на него появляется список вариантов для выбора
Динамически генерируемые страницы: используются скрипты для загрузки страниц из базы данных.
Разумное использование одного или нескольких из этих элементов позволяет разработать эффективную и интегрированную систему навигации для любого веб-сайта.
Некоторые общие принципы построения навигационных средств
Текстовые ссылки
- используйте однозначные заголовки ссылок
- постарайтесь иметь ссылки одинаковой длины
- избегайте использования жаргона или сленга в заголовках ссылок
- убедитесь, что текст ссылки четко различим как ссылка
Ссылки на изображения
- обеспечить небольшие размеры изображений, чтобы минимизировать время загрузки страницы
- графика должна быть интуитивно понятной или четко описывающей ссылки
- объединение текста со ссылками на изображения улучшает четкость
- всегда используйте ALT теги, чтобы помочь посетителям, которые работают с изображениями
Выпадающие меню
- полезны для экономии места на веб-странице
- нужно немного опыта программирования, чтобы настроить
- может быть недоступно для пользователей, которые используют старые браузеры
Элементы дизайна веб-страницы для инструментов навигации
По мере роста и развития вашего сайта со временем будут добавляться новые разделы. Включение их в панели навигации будет означать замену данных в нескольких файлах.
Два способа минимизировать эту проблему:
- используя «Кадры» на вашем Веб-сайте, с одним кадром, содержащим только навигационные панели
- используя «Включения на стороне сервера» для элементов навигации
С помощью любого из этих методов вы можете вносить изменения только в один файл и отражать эти изменения во всех разделах вашего сайта.
Не просто доставить: перегрузить
Таким образом, на вашем сайте есть все эти вопросы. У вас отличная навигационная система. Поздравляю.
Но еще не время расслабляться. По ряду причин пользователи могут не испытывать радости от ваших инструментов навигации. Поэтому сосредоточьтесь на предоставлении дополнительных преимуществ вашим пользователям. Создать SNS — сокращение от Дополнительной навигационной системы.
Как видно из названия, SNS включает в себя другие инструменты навигации, такие как:
- Поисковые системы
- Содержание
- Карта сайта Индексы
Поисковые системы
Все слышали о гигантских поисковых системах, таких как HotBot и AltaVista, которые перечисляют сайты со всей сети. Также возможно иметь поисковик только для контента на вашем сайте. Посетитель может использовать эту поисковую систему, чтобы попытаться найти материал, к которому он / она не может легко получить доступ, используя инструменты навигации.
Содержание
Перечисляя все основные сегменты вашего сайта, оглавление значительно упрощает посетителю быстрый переход к конкретной теме или категории.
Карта сайта Индексы
Вариант списка оглавления, индекс карты сайта создается путем углубления в различные формы контента на сайте. Затем перечисляются лучшие 30–60 областей интересов со ссылками на соответствующий контент.
Проверьте свою навигационную систему
Никогда не думайте, что ваша навигационная система идеальна. Хотя он может показаться вам интуитивно понятным и понятным, он все же может оставить посетителя сайта полностью запутанным.
Проверь это.
Степень тестирования зависит от размера и размера вашего сайта. Если у вас небольшой веб-сайт, посвященный хобби, достаточно пригласить нескольких друзей и членов семьи, чтобы помочь проверить его. Для крупных профессиональных сайтов тестирование пилотных проектов является серьезным мероприятием.
Лучше всего наблюдать за вашими пробными пользователями, пока они перемещаются по вашему сайту. Посмотрите, как они реагируют на макет вашего сайта. Легко ли они идентифицируют навигационные средства? Они знают, что делать, чтобы обойти сайт? Дайте им цель — скажем, попасть на определенную страницу или статью. Тогда посмотрите, как быстро и легко они могут туда добраться.
Делать заметки. Попросите обратную связь. Действуйте на предложениях по улучшению ваших навигационных средств. Твик, тестирование, повторная настройка и повторное тестирование.
Пока, наконец, ваш сайт не радость!