Поначалу дизайн навигации вашего сайта может быть довольно сложной задачей. Вам необходимо изучить количество категорий, которые вы будете учитывать, где ваши посетители, скорее всего, будут нажимать, цветовые схемы, которые лучше всего удовлетворят пользователей, и многие другие аспекты. При таком количестве переменных дизайн навигации может показаться ситуацией, в которой нет правильного ответа. Сегодня мы обсудим задачу проектирования навигации и, надеюсь, дадим вам преимущество в создании навигационной системы, которая лучше всего работает для ваших пользователей.
Разрабатывая свой собственный сайт, я сел вечером и нарисовал несколько возможных дизайнов на бумаге. На мой взгляд, это лучший способ спланировать сайт — даже не включайте компьютер, пока не пройдете этот этап! Процесс, которым я следовал, состоял в том, чтобы сначала спроектировать мою навигацию и разработать сайт вокруг нее, используя навигацию в качестве основной цели.
Конечно, существует множество способов создания системы навигации для вашего сайта, от простых текстовых панелей инструментов до современных Flash-анимированных интерфейсов. Самое важное решение, с которым вы столкнетесь, — это выбрать схему, которая подходит для характера вашего сайта и его пользователей.
Помните, что это не может быть легкой задачей. Обсудите идеи, составьте несколько пробных навигационных систем, и пусть ваши друзья, семья, коллеги или кто-либо из ваших знакомых расскажет вам, что им нравится больше всего, и какой из ваших дизайнов они находят наиболее эффективным. Юзабилити-тестирование с целевой аудиторией, конечно, идеально — и это не невозможно достичь с бюджетом! См. Раздел удобства использования SitePoint для получения дополнительной информации.
Десять советов по навигации
Используйте эту схему в качестве своего рода контрольного списка, чтобы убедиться, что ваша навигационная система удовлетворяет этим основным требованиям. Если это произойдет, вы на пути к успеху!
1. Не заставляйте пользователей угадывать!
Иногда бывает необходимо кормить своих посетителей ложкой информации. Принимайте осторожные решения относительно того, где находится ваша навигация, и выделяйте ее. Тогда ваши пользователи не будут бесцельно щелкать мышью, поскольку они напрасно ищут какое-то направление.
2. Держите это высоко
Редакторы газетных журналов размещают свою самую важную информацию — последние заголовки, значительный контент и т. Д. — «выше сгиба», то есть в верхней части самой газеты. Рассматривайте свои страницы с той же точки зрения и держите важную информацию, включая навигацию, как можно выше. Это не только означает, что навигация будет сначала загружаться в браузере пользователя, но и быстрее «ударит» пользователя. Тем не менее, прочитайте совет 3 для слова предупреждения по этому вопросу!
3. Под баннерами
Слышал о снежной слепоте? Что ж, есть «условие», известное среди веб-пользователей как «слепота баннера». Часто пользователи естественным образом игнорируют контент, размещенный над рекламными баннерами на вашем сайте, — они просто рассматривают это пространство для дальнейшей рекламы. Хотя это может показаться заманчивым, не размещайте никаких элементов навигации над рекламными баннерами.
4. Согласованность является ключевым
Я не могу подчеркнуть это достаточно. На каждой странице вашего сайта, будь то ваши форумы, страница ссылок или где-либо еще, найдите свою навигацию в том же месте, с теми же стилями, и ничего не меняйте! Таким образом, ваши пользователи точно знают, где его искать.
5. Не будь авантюрным
Всегда приятно видеть, как ваш сайт выделяется из толпы, но, пожалуйста, когда дело доходит до навигации, попробуйте смешаться с остальной частью стада. Таким образом, обычные пользователи Интернета будут в некоторой степени привыкать к вашему методу навигации — как они будут испытывать и изучать в аналогичных системах на других сайтах — и им не нужно будет учить чему-то новому. Пользоваться вашей навигационной системой будет легко!
6. Добавьте кнопку «Домой»
Ваша домашняя страница является самой важной страницей на вашем сайте, поэтому убедитесь, что ваши пользователи всегда знают, как к ней вернуться. Кнопка «Домой» не только позволяет людям, щелкнувшим ссылки на вашем сайте, вернуться туда, откуда они начали, но также позволяет людям, которые попадают на подстраницы вашего веб-сайта, найти вашу домашнюю страницу, что может привести к повторному посещению. для вашего сайта.
7. Держите это быстро
Не обманывайте себя, думая, что ваши пользователи имеют сверхбыстрое подключение к Интернету. Они не Несмотря на то, что у значительной части интернет-сообщества есть широкополосное (или подобное) соединение, все еще есть много пользователей, привязанных к модемам 56k, которым нравится видеть страницы с быстрой загрузкой везде, где это возможно. Оптимизируйте свои изображения, HTML и таблицы стилей, чтобы все загружалось как можно быстрее.
8. Качество, а не количество
Создайте свою навигацию так, чтобы она «перетекла» пользователей на все более и более конкретную информацию. Интернет-пользователи гораздо счастливее, имея на каждом уровне несколько вариантов (и кнопок навигации), чем сотни. Используйте подразделы и подкатегории с соответствующей навигацией, чтобы пользователи могли быстро найти нужный контент.
9. Netscape не умер!
Помните, что люди используют другие веб-браузеры и разрешения, которые вы используете. Перед запуском проверьте навигацию вашего сайта во всех возможных браузерах и разрешениях. Таким образом, вы можете обнаружить несоответствия и ошибки в вашем причудливом коде JavaScript раньше, чем кто-либо другой, избавляя вас от большого смущения в будущем.
10. Оставьте неважные вещи
Такие ссылки, как «Связаться с нами» и «Политика конфиденциальности», лучше всего оставлять вне основной навигации вашего сайта. Наиболее распространенное место для них — внизу страницы.
Самые популярные методы навигации
Ниже приведены наиболее популярные методы, используемые для создания схемы навигации по сайту. Убедитесь, что вы учли все аспекты каждого, прежде чем решить, какой из них вы будете использовать.
1. Текстовые панели инструментов
Это, я бы сказал, наименее эффективный способ привлечь внимание пользователей. Вы не можете ничего сделать со статическим HTML, чтобы он выделялся больше, чем другие элементы вашей страницы, за исключением больших букв и ярких цветов. Хотя эти виды навигационных систем чрезвычайно быстро загружаются и могут быть очень быстро изменены, они часто выглядят скучно и в некоторых случаях фактически отвлекают ваших пользователей от просмотра сайта.
Один эффект, который очень популярен и может быть достигнут с минимальными усилиями — все, что требуется, это прикосновение к JavaScript — это эффект прокручивания ячейки таблицы. В некоторых случаях они намного превосходят графику с опрокидыванием, и, опять же, для их загрузки требуется мало времени.
Преимущества: быстрая загрузка
Недостатки: может быть скучно
2. Панели инструментов изображений
Несмотря на то, что изображения имеют большой потенциал, и в 99,9% случаев они часто используются неправильно. Плохой дизайн, большие изображения и яркие цвета могут сразу отпугнуть пользователя. Стоит рассмотреть возможность использования одной карты изображений, которая значительно уменьшит размер изображения — сервер должен выполнить только одну HTTP-транзакцию вместо нескольких (если у вас есть несколько маленьких изображений кнопок).
Убедитесь, что вы указали атрибут ALT для своих изображений, в противном случае люди, использующие только текстовые браузеры, у которых отключены изображения или которые просто не могут дождаться окончания загрузки страницы, могут по-прежнему перемещаться по сайту без проблем.
Преимущества: может выглядеть отлично
Недостатки: может быть медленная загрузка
3. Флэш-меню
Флеш-меню становятся все более популярными, в основном из-за растущего числа людей, имеющих доступ к быстрому интернет-соединению. Но примите во внимание тот факт, что многие ваши пользователи все еще будут использовать модемы 56k, поэтому не злоупотребляйте Flash.
Действительно, иногда Flash может быть большим нет-нет. Если загрузка занимает более 10 секунд, откажитесь от нее. Ни при каких обстоятельствах не включайте предварительный загрузчик. Люди не хотят, чтобы их приветствовали сообщением «Сейчас идет загрузка» еще до того, как они начали изучать сайт.
Также рассмотрите пользователей, у которых на компьютере не установлен плагин Flash. Хотя немногие, они не хотят загружать совершенно новое программное обеспечение, чтобы иметь возможность использовать ваш сайт.
Преимущества: может выглядеть потрясающе и очень профессионально
Недостатки: не у всех есть плагин Flash, может быть медленная загрузка
Конечно, есть и другие возможности, которые следует учитывать при разработке вашего сайта; методы, описанные здесь, являются только самыми популярными.
Другие соображения
Сделайте вашу навигацию подходящей для темы вашего сайта
Например, если вы запускаете веб-сайт рецептов, подумайте над созданием для каждого раздела маленьких значков, которые относятся к еде и / или приготовлению пищи. Возможно, вы можете добавить небольшой мультипликационный торт с надписью, которая связана с разделом «Выпечка торта».
Сделайте вашу навигацию подходящей для целевой аудитории вашего сайта
Если большая часть ваших пользователей — дети, почему бы не сделать так, чтобы ваша навигация отображалась на сайте для детей? Например, если у вас есть секция шуток, вы можете использовать маленькое смешное лицо из мультфильма, чтобы символизировать анекдот.
3 балла, которые вы должны помнить любой ценой!
Если вы решили игнорировать все, что я сказал до сих пор, прочитайте эти три пункта — я думаю, что они наиболее важны при разработке навигации вашего сайта.
1. Тест, тест, тест!
Убедитесь, что вы тщательно протестировали навигацию своего сайта на максимально возможном количестве браузеров. Они должны включать в себя:
- Internet Explorer 5+
- Netscape 6.x
- Netscape 4.x
- опера
Кроме того, убедитесь, что вы протестировали его на нескольких разрешениях экрана, которые должны быть:
- 800 × 600
- 1024 × 768
Проверьте это до конца. Убедитесь, что любой JavaScript работает на всех платформах. Если нет, убедитесь, что в JavaScript нет ошибок. И помните, невозможно «перепроверить» вашу навигацию!
2. Будьте добры к своим пользователям
Сначала поместите вашу самую важную кнопку на панели навигации. Вероятно, это должна быть ссылка «Домашняя страница». Кроме того, изложите каждую ссылку для ваших пользователей. Симпатичных маленьких иконок без текстового описания просто недостаточно. Ваши посетители должны быть в состоянии точно определить, что находится в каждом разделе, прежде чем они нажмут на ссылку на него.
3. Поместите это хорошо
Убедитесь, что ваши пользователи могут видеть вашу навигацию четко. Не окружайте его другим контентом — выделите его среди всего остального, и вы не ошибетесь. Кроме того, имейте в виду рассмотренные ранее соображения «выше сгиба» и «слепота баннера».
Удачи!
Я надеюсь, что эта статья помогла вам улучшить ваш дизайн навигации. Надеемся, что, прочитав это, вы получите все необходимые знания, необходимые для создания навигационной системы, которая будет работать для ваших посетителей.
Помните, навигация является частью каждого сайта, и Интернет просто не выжил бы без него. Учитывая все это, я желаю вам удачи в создании вашего нового шедевра в Интернете!