Разработка идей и идей вдохновляющего меню навигации
Навигационное меню на сайте похоже на дорожный знак на улице или справочник уровней в торговом центре.. Вы не можете добраться до пункта назначения, не зная, где вы находитесь. Как и в реальной жизни, навигация в веб-дизайне очень важна и играет важную роль в удобстве использования веб-сайта, а также в его удобстве для пользователя..
В настоящее время вы можете увидеть множество различных типов навигационных меню с интересным, креативным и необычным дизайном. Но как насчет эффективной навигации на сайте, как бы это выглядело; как это должно выглядеть?
Сегодня я хотел бы поделиться своими наблюдениями и знаниями о важности навигации в веб-дизайне. Я расскажу несколько простых советов, которые вы можете использовать для улучшения навигации и удобства использования вашего сайта. Также будет несколько примеров эффективных навигационных меню, чтобы дать вам представление о том, как спланировать свой следующий дизайн..
Информационная архитектура
Планирование навигации должно начинаться с информационной архитектуры. Жизненно важно сесть и мозговой штурм об информационной архитектуре сайта. Вы должны выяснить, какие функции предлагает веб-сайт, что является наиболее важным и что можно разместить на более низких уровнях в информационной иерархии.
Информационная архитектура включает в себя функции, потребности пользователей, карта сайта, тестирование и каркасы. Вы можете прочитать больше об информационной архитектуре в статье Кэмерона Чепмена в Информационной архитектуре 101: Методы и лучшие практики.
Использование пользовательских технологий
Избегайте использования Flash, JavaScript, jQuery или чего-либо еще, что может помешать доступу к навигации по вашему веб-сайту при создании панели навигации, или, по крайней мере, убедитесь, что они способны изящно ухудшаться..
Для большего количества ссылок на изящная деградация JavaScript, проверить этот пост на 10 полезных методов отступления для CSS и Javascript.
Используйте простые, удобные условия
Лучше использовать простые, очевидные и понятные термины чем придерживаться только отраслевых терминов для вашего меню навигации. Любая ссылка, для определения которой пользователям требуется больше секунды или двух, вероятно, не подходит для использования..
Если пользователю необходимо щелкнуть ссылку, чтобы выяснить, к чему ведет эта ссылка, это приведет к ухудшению качества работы ваших посетителей..
Примеры
Термины в меню навигации на сайте Ларисы Несс понятны и достаточно распространены. Пользователи не смущаются, потому что у них уже есть опыт работы с такими меню.
Вот еще один хороший пример понятного и понятного меню навигации по сайту с общими терминами, в csupport.
Креативное агентство Eighty8Four использует термин «выставочный зал», который может сбивать посетителей с толку. Этот термин может означать портфолио или работу, но он не ясен, и у посетителей нет другого выбора, кроме как щелкнуть, чтобы проверить его.
Стандартизировать дизайн навигации
Используйте ту же модель навигации на всех ваших страницах. Это очень важно, потому что без единого дизайна пользователь может подумать, что он находится на другом сайте. Убедитесь, что вы используете одну и ту же модель навигации, чтобы пользователи могли легко переходить на ваш сайт, не теряясь.
Bluegg, показано ниже, использует простой и понятный дизайн навигации, который остается одинаковым на всех страницах. Единственное отличие заключается в цветовом индикаторе, который показывает страницу, на которой сейчас находится посетитель..
Укажите, где вы находитесь
Очень важно, чтобы пользователь всегда знал, где он находится. Вы можете сделать это изменение фона ссылки, цвета имени страницы или же сделать текст жирным в меню навигации, чтобы отличать его от других.
Остин Eastciders использует другой цвет и фон для обозначения страницы, на которой находится пользователь. Этот индикатор также может работать как тонкое изменение дизайна, например, с помощью другой фон навигации что создает ощущение, что другие пункты меню находятся в глубине.
Медиа Хирургия использует более темный цвет в качестве индикатора для открытой подстраницы. Простой, но эффективный.
Используйте веб-соглашения
Это все о простой в использовании и интуитивно понятной навигации по сайту. Соглашения о веб-технологиях значительно облегчают работу дизайнеров. Большинство пользователей нажимают на логотип веб-сайта, чтобы вернуться на главную страницу, поэтому разработайте свой логотип, чтобы сделать это.
Если вы этого не сделаете, вы заставляете их тратить время на изучение чего-то нового или в некоторых случаях причинять им неудобства из-за того, что они не предоставляют общепринятых навигационных норм..
Вы можете узнать больше о веб-соглашениях здесь:
- 10 Условий Веб-дизайна
- Не изобретайте колесо веб-дизайна
- Дизайн с веб-конвенциями
Инжект Дизайн размещает логотип в верхнем левом углу, который соответствует одному из наиболее часто используемых сегодня веб-соглашений.
Adams Creation использует одно из самых распространенных веб-соглашений - логотип размещается в левом верхнем углу сайта и содержит ссылки на домашнюю страницу..
Протестируйте это: привлеките третье лицо
Всегда проверяйте свой дизайн навигации с любым человеком, который использовал Интернет раньше. Вы можете привлечь людей, которые не были связаны с процессом проектирования, чтобы проверить его. Соблюдайте их предпочтения при навигации через ваш сайт и проанализируйте, сколько времени им понадобилось, чтобы найти страницы, на которые они смотрели.
Для лучшей точности, привлекать больше людей, собирать данные, анализировать и обобщать их для лучшей подгонки. Проведите обследование после тестирования, если это необходимо. Вы можете получить некоторые неожиданные идеи и информацию, которая в противном случае осталась бы незамеченной без этого теста.
Предоставить контекст
Чтобы быть совместимым с вашим контентом и навигацией, предоставьте пользователям некоторый контекст для быстрого поиска нужных им вещей. Вы можете разместить маленькие значки, связанные с контентом, на который вы ссылаетесь, или короткие описания, чтобы дать представление о том, о чем эта страница.
Мой собственный велосипед использует простые значки, чтобы дать пользователям больше информации о том, что они могут найти на определенной подстранице.
Сара Парментер использует короткие и удобные заголовки в основной навигации, чтобы предоставить некоторую информацию о подстраницах, на которые ссылается основная навигация.
Цели SEO
Google любит последовательную навигацию. Полезно иметь последовательную навигацию не только для пользователей, чтобы понять и получить представление о том, как перемещаться по вашему сайту, но и для поисковых систем, чтобы проиндексировать ваш сайт.
Роботы поисковых систем просматривают ваш сайт, чтобы проиндексировать ваш сайт и разместить ссылки на странице результатов поиска. Если вы хотите быть заметным, обратите внимание на хороший дизайн навигации и получите больше трафика.
Бесплатные навигационные скрипты (CSS и jQuery)
Вот краткий список последних навигационных меню, которые могут оказаться полезными для ваших проектов. Эти сценарии сделают пользовательский опыт вашего продукта еще лучше, добавив некоторые приятные функции и сделав его приятным в использовании.
XML-скрипт вертикальной прокрутки новостей с использованием HTML и jQuery: vScroller
Filtrify
Page Scroller
Сроки портфолио
HorizontalNav
Минималистичное меню навигации CSS3
Эффект круговой навигации с помощью CSS3
Эффекты навигации по сетке с помощью jQuery
Ascensor
Создать элегантное меню навигации CSS3
Витрина красивой горизонтальной навигации
И наконец, что не менее важно, некоторые вдохновляющие горизонтальные навигационные меню. Проверьте эти удивительные веб-сайты и их решения для меню навигации, чтобы найти новые идеи для ваших проектов.
Ch3mical
Bloom Search Marketing Inc.
Алекс Перес
Либор Зезулька
Hauska!
Золотые острова
Нил Карпентер
Марк Томас
3D Полистирол
Liechtenecker
Мир приключений
Arbutus Фотография
OMDRL
4 сосны пиво
Вина охотников
Надеюсь, вы найдете эту статью полезной и информативной. Если у вас есть какие-либо мысли или вы не согласны, пожалуйста, поделитесь своим мнением в разделе комментариев.
