Веб-дизайнерам всегда приходится искать баланс между удобством работы и внешней привлекательностью, когда они работают над дизайном вебсайта. Без такого баланса на вебсайт будет приятно смотреть, но тяжело по нему перемещаться. Или же, он будет не приятен для глаз, но с простой навигацией. Если держать это в уме, балансировка между привлекательной навигацией и удобством пользования не представится такой уж и сложной. Чтобы помочь вам сгенерировать новые идеи и придать вдохновения в процессе создания пользовательских меню, мы приведем 30 отличных примеров одновременно красивых и удобных навигационных меню.
Typographica
Этот сайт сочетает в себе простоту привлекательного меню, которое в то же время предоставляет пользователю, несомненно, очень простую навигацию. Если вы наведете указатель мыши на заголовок под логотипом, вы увидите, что слово "Type" остается выделенным, наводя указатель на остальные слова, вы сможете точно выбрать соответствующий раздел сайта, который вы хотите посетить.
Contrast.ie
Навигация на сайте Contrast.ie является примером уникального подхода к созданию креативных меню. Все кнопки помещены в нарисованные фигурки комментариев и выскакивают при наведении курсора.
Search Inside Video
Навигация на этом сайте четко руководит вами через стрелки, когда вы наводите на них вашим курсором. Эффективная навигация оставляет позади сложный дизайн. Такое ощущение, что данный сайт полностью соответствует этому выражению.
Этот сайт превозносит креативную навигацию. Если вы посмотрите налево и наведете указатель на парня вы увидите, как у него появится улыбка, если вы наведете курсор на иконки и картинки вы незамедлительно увидите описание рядом с указателем мыши.
Forty использует креативную навигацию, основанную на картинках. Стрелки привлекают внимание пользователя к кнопкам и побуждают его нажать на них.
Healogix
Healogix задает самые важные для себя вопросы огромными буквами, привлекающими внимание пользователей. Когда, что, почему и кто? На все вопросы есть ответы в одном клике от главной страницы.
Ideas on Ideas
На сайте есть только одна ссылка на главную страницу, однако она одновременно и удобна и креативна. Ссылка бросается в глаза и даже "говорит" с пользователем. А большинству пользователей нравятся страницы, с которыми они могут взаимодействовать.
Sarah Longnecker
Навигация на этом вебсайте проста и легка в использовании. Баннеры позади выбранной страницы делают элементы навигации легко отличимыми от остальной страницы.
Made By Elephant
Made by Elephant использует крупное и простое в использовании меню навигации. Синий текст также отлично контрастирует с более темными красным и черным цветами.
Work at Play
При переходах по элементам меню этого сайта, вы заметите, что позиция фона и цвет всей страницы быстро меняются.
Clear Left
Меню этого сайта напоминает клеящуюся бумажку post it, когда вы наводите указатель мыши на ссылки. Шаблон этого сайта целиком построен на этой концепции.
Pattern Tap
Как только вы заходите на сайт, вас приветствует зеленая стрелочка, которая предоставляет вам информацию по каждой секции, в которую вы заходите на сайте. Это позволяет пользователям с легкостью взаимодействовать с сайтом.
Unstoppable Robot Ninja
Навигация такая же крутая, как и название этого сайта. Более того, она также намного улучшает дизайн.
Red Nose Day
Polar Gold
Это навигационное меню, основанное на тексте, сочетает в себе яркий и привлекательный внешний вид с удобством без использования Javascript, но с использованием Flash вместо него.
Webpage FX Blog
Уникальный и интересный взгляд на навигацию. Ссылки на домашнюю страницу и блог вставлены в предложение вдоль шапки страницы. Это не нарушает принципов юзабилити, страница легко читаема и очень эффективна.
Opera Ma-g?
Пункты навигационного меню легко найти, зеленое подчеркивание создает эффект единства элементов навигации и остальной страницы.
Owltastic
Owltastic является примером отличного взаимодействия с пользователем. Каждый элемент навигации реагирует с анимацией на наведение на него курсора. Как и другие примеры этого списка, навигация красива и легка в обращении.
Guillaume Pacheco
Как и Owltastic, этот вебсайт взаимодействует с пользователем при наведении курсора мыши на различные элементы страницы. Шаблон сайта выполнен хорошо, и на нем легко ориентироваться.
Full Cream Milk
Full Cream Milk использует четкую навигация, основанную на тексте. При наведении мыши на ссылки верхняя часть страницы выделяется. Это отличный пример навигации, которая приятна как пользователям, так и поисковым машинам.
Arca Lui Noe Hotel
Навигация на этом сайте одновременно красива и проста в использовании. Она очень стильная и хорошо вписывается в общий дизайн страницы.
Sushi & Robots
Sushi and Robots использует элегантное оформление для создания красивого и привлекательного навигационного меню, которое выгодно отличается от других.
Sharify использует монохромное пользовательское меню навигации, которое приятно для глаз и удобно из-за контраста между белым текстом и небесно голубым фоном.
Stephen Caver
Здесь, навигация это первое, что вы замечаете, заходя на сайт. Она "чиста" и проста в использовании. Более того, использование свободного места при навигации выполнено замечательно.
Thought and Theory
Этот сайт избрал минималистский подход к навигации, и она просто работает. Нет ничего лишнего на страницах, что бы отвлекало пользователей.
Slightly More
И снова, высокий контраст черного и белого придает этому сайту больше юзабилити. При наведении мыши элементы навигации зажигаются ярко синим цветом, добавляя сайту интерактивности и эстетической ценности.
Ulster Grocer
Навигация использует яркие цвета, легкость использования и гармонию содержимого страницы с синим фоном.
Сайт Adaptd использует креативную, понятную и красивую навигацию. Самый выдающийся аспект такой навигации находится в секции, где собраны портфолио. Когда вы помещаете на кнопки курсор мыши, надписи становятся прозрачными и смешиваются с фоном сайта.
Sac Jazz Festival 2009
Этот сайт имеет навигационное меню, в котором пользователю даже не придется разбираться. Вдобавок, подходящие цвета меню придают еще больше красочности все странице. Элементы дизайна сочетаются друг с другом безупречно.
- Currently 1.00/5
В этой статье мы расскажем о том, какой должна быть хорошая навигация по сайту, и как ее сделать действительно эффективной. Материал пригодится в первую очередь тем, кто хочет создать свой сайт самостоятельно.
Навигация – это методы, приёмы и специальные элементы, которые позволяют перемещаться между его страницами. От того, насколько хорошо она продумана, зависит всё: и конверсия, и успех продвижения ресурса.
Это можно сравнить с планировкой в доме. Если планировка хороша – то вы без проблем найдёте нужную вам комнату, не перепутаете вход на кухню со входом в гостиную. Если же ходов, коридоров и дверей много, то можно заблудиться в таком доме.
Аналогично и с сайтами. Если навигация плохая, много ссылок, которые не ведут куда нужно, или непонятно, куда заведут – пользователи путаются, и не могут найти нужные страницы и необходимую им информацию.
Для поисковых систем хорошая, логичная навигация тоже важна. Поисковая машина должна понимать роль данной страницы на вашем сайте. Также грамотно продуманная навигация улучшает поведенческие факторы, так как пользователи быстрее находят нужную им информацию.
Основные элементы и приёмы навигации
Предлагаю сначала ознакомиться с основными элементами, которые помогают перемещаться по сайту.
Навигация в широком смысле включает в себя множество приёмов и элементов, основная задача которых – дать пользователю перейти на нужную страницу и ознакомиться с информацией.
Одним из таких элементов, который давно уже стал обязательным на сайте – это логотип компании, при нажатии на который попадаем на .
Например, вот здесь достаточно нажать на логотип, чтобы снова оказаться на стартовой странице.
Этот приём уже привычен для пользователей, и позволяет вернуться на домашнюю с любой страницы сайта.
Второй «классический» элемент – это верхнее меню .
Оно располагается под шапкой и состоит из кнопок или ссылок, которые ведут на основные разделы сайта. Такое меню может быть более сложным, с выпадающими списками, которые ведут на подразделы или отдельные страницы.
В последние несколько лет стал популярен ещё один прием – это меню-гамбургер , в котором все ссылки спрятаны на схематические три горизонтальные черточки. Этот элемент сначала жил только на мобильных устройствах, но сейчас всё чаще встречается и на десктопных версиях сайтов:
Также на некоторых сайтах вы можете увидеть вертикальное меню . Его используют чаще всего в том случае, если в верхнее меню не удалось уместить всё необходимое, или если нужно облегчить пользователям переход в некоторые рубрики.
А может оно жить и самостоятельно, без горизонтального меню вверху страницы. И таких меню может быть даже несколько, как здесь – слева и справа:
(микроразметка) — ещё один элемент навигации, который не только задает иерархию страниц, но и позволяет легко вернуться к нужному разделу, или на главную, с любой страницы:
Линки внутри статей на другие страницы сайта – это тоже навигационные элементы. Например вот такие:
Они не только помогают перейти дальше, но и хороши с точки зрения SEO – такой приём позволяет увеличить количество просмотренных страниц.
Ссылки в footer-е (нижнем колонтитуле, подвале) – это еще один навигационный элемент. Обычно в футер выносят ссылку на контакты, пользовательское соглашение, правила использования сайта и т.п. А иногда можно увидеть и много ссылок на разные страницы сайта, сгруппированные по категориям:
На длинных лендингах, а также некоторых сайтах вверху можно увидеть шкалу прогресса , которая показывает, как далеко вы пролистали данную страницу:
Шкалу прогресса также можно встретить в формах заявок и регистрации, если форма длинная и разбита на несколько шагов.
Это упрощает навигацию по самой странице — видно, сколько до конца. Также это небольшой психологический прием, который подталкивает посетителя довести начатое до завершения.
На длинных страницах и на лендингах можно встретить ещё один отличный навигационный элемент — кнопку для быстрого возврата наверх :
Такая кнопка позволяет быстро вернуться к началу страницы.
Чтобы верхнее меню, контакты или другая важная информация постоянно были перед глазами, используется так называемый “липкий хедер”, или “липкая навигационная панель”. Она постоянно остается вверху страницы, пока пользователь скроллит вниз.
Вот здесь у нас постоянно перед глазами поиск, лого с возможностью возврата на главную, и небольшое меню.
Как же использовать все эти элементы с толком и пользой?
Как сделать навигацию по сайту удобной
Прорабатывая навигацию на своем сайте, запомните и старайтесь использовать одно простое правило: с главной до любой страницы сайта пользователь должен добраться максимум за три клика . И наоборот.
1. Расположите логотип с возвратом на главную в правом верхнем углу .
Это общепринятый стандарт, и неспроста: именно в этом месте логотип сразу бросается в глаза. И пользователю не придется искать, на что нажать, чтобы вернуться.
2. Продумайте первичные и вторичные элементы .
Первичным может быть верхнее меню. Вторичным – боковое, дополнительные ссылки внутри текста, в футере. Также вторичными элементами навигации могут выступать хлебные крошки.
Вот здесь верхнее меню выступает основным элементом навигации, а хлебные крошки – вспомогательным.
Вынесите в основное меню самые главные разделы сайта.
3. Подумайте, какие страницы можно сгруппировать.
Если всё не помещается в верхнее (или боковое) меню. Например, часто можно встретить вариант, когда некоторые разделы сайта спрятаны под одну кнопку «Информация», «Больше», «Ещё» и т.п.
Почта Mail.ru таким образом «спрятала» проекты компании:
4. Найдите хорошее место для информационных ссылок .
Информационные ссылки – это такие как «Контакты», «Публичная оферта» и им подобные. Найти эти ссылки пользователь должен на всех страницах сайта. Потому самое подходящее место для них – это футер (нижний колонтитул).
Вот яркий пример подобного размещения информационных ссылок:
5. Не забывайте о дизайне .
Все навигационные элементы должны быть хорошо заметны, и должно быть понятно, что ссылка – это ссылка, а кнопка – это кнопка. Выделите ссылки цветом, сделайте полужирными или подчеркнутыми. Важно, чтобы пользователь понимал, что перед ним – кликабельный элемент, который отправит его на другую страницу сайта.
Вот здесь я не могу назвать меню удачным. Слишком мелкий шрифт. Но здесь есть другой подход – сразу с главной страницы можно перейти в каталог любимого бренда или просмотреть скидки:
6. Не открывайте страницы в новых окнах .
Это сбивает пользователей с толку.
7. Дополнительные элементы.
Продумайте дополнительные элементы типа «Похожие товары», «Рекомендованный контент» или «Статьи по теме», которые помогут пользователю быстрее найти нужное.
8. Подсказки.
Упростите навигацию с помощью всплывающих подсказок , которые помогут пользователю понять, для чего служит данная кнопка или иконка:
9. Оставьте меню на видном месте.
Постарайтесь сделать так, чтобы посетителю не приходилось на каждой странице по новому искать меню . Не меняйте и не убирайте меню на второстепенных страницах.
10. Не прячьте далеко свои контакты .
Оставьте номер телефона в шапке. Сделайте так, чтобы кнопки обратного звонка и чат с онлайн-помощником были видны сразу — привычнее всего в нижней части страницы слева или справа, но не сбоку.
Адрес можно оставить как в шапке, так и в футере. Не заставляйте посетителя искать всю эту информацию по всему сайту.
Все эти приёмы значительно упростят навигацию по сайту, сделают её проще и эффективнее.
Выберите хостинг для сайта:
Работая над навигацией, думайте в первую очередь о пользователе. Он точно сможет найти все, что искал, в кратчайшие сроки? Понятно ли все человеку, которые впервые столкнулся не только с вашим сайтом, но и с вашей сферой вообще? Не спрятаны ли далеко страницы, можно ли добраться до каждой максимум в три клика?
Подумайте сами, на каких сайтах вам проще всего перемещаться, и берите пример с лучших.
Удачи вам в разработке собственного интернет-ресурса!
Привет Байкпост!
Скоро сезон и многие задумываются о навигации на мотоцикле для дальних путешествий. Перепробовав много вариантов я остановился на одном не самом дешевом, но надежном варианте о котором расскажу Вам ниже.
Суть этой системы заключается в телефоне и его креплении, но так как за рубежом часто связи нет, поэтому я использую оффлайн навигацию. Но почему бы просто не использовать свой телефон? ! - спросите Вы, а я отвечу:
- Личный телефон вы можете менять достаточно часто (не будете же вы подбирать под каждый крепление, ведь универсальные крепление это очень неудобно)
- Что делать если поступил звонок или надо позвонить? Навигация сбивается + надо снимать крепление, затем ставить на место - это не удобно если нет гарнитуры или шлем снят
- Часто, личный телефон стоит явно выше б.у iPhone 5
- Потерять \ разбить телефон для навигации будет не так обидно, как ваш новенький и дорогой смартфон + на этот случай у вас останется резервный вариант навигации
- Иметь в путешествии дополнительный телефон-камеру всегда хорошо
- Ужасное качество экрана
- Огромные размера корпуса и массивность крепления
- Тормозящая, не стабильная система и не точный GPS
- Производительное устройство, которое не подведет вас и не зависнет в неподходящий момент
- Отличный экран который видно даже в самых сложных условиях
- Мультимедийный плеер
- Резервный телефон
- Резервную камеру
- Замену корпуса без замены устройства
На чем же можно сэкономить не сильно проиграв в качестве? Для начала это крепление, но не советую вам выбирать варианты дешевле 20$, потому что, как показывает практика, такие крепления часты очень неудобны. Вам нужно крепление, которое будет жестко фиксировать внутри себя телефон и легко сниматься, ведь часто на заправках нам придется брать телефон с собой. Вот несколько аналогов за меньший прайс: iBikeConcole - 39.99$; Tigra Sport BikeConsole Bike - 37.90; LifeProof - 29.95$; Givi S955B Smartphone and iPhone 5 Holder - 37 Фунтов. Помните, что от выбора крепления зависит удобства использования этой системе, поэтому не стоит слишком сильно экономить в этом пункте.
Второй момент для экономии это - Навигационное ПО. Тут есть два варианта: самый дешевый, но более сложный , бесплатный и менее надежный . Дешевый это поставить на iPhone Jailbreak и скачать взломанные версии ПО, но тут может возникнуть проблема с обновлением карт. Бесплатный вариант это использования бесплатного ПО для навигации, но тут тоже не все так просто, так как я никогда не полагаюсь только на одну навигационную программу и всегда имею в запасе еще парочку .
Надеюсь, что вам будет полезен мой опыт. С данной системой я проездил 3 сезона и объективных минусов кроме цены не выявил. Напомню, что суть этой системы заключается в хорошем железе, экране, креплении, поэтому если вы найдете действительно хорошее крепление для Android смартфонов - поделитесь в комментариях, так как Android смартфоны могут нести на себе еще функцию борт компьютера, но это совсем другая история:).
Немного фото из гугла для представления о том, как выглядит такая связка на мотоцикле.
Навигация сайта стала важным аспектом UX-дизайна - она может как помочь, так и навредить вашему сайту. Навигацию можно сравнить с опорой дома. Если план фундамента недостаточно разработан, вы подвергаете риску все здание.
Навигация может различаться на разных сайтах; нет определенных инструкций, как правильно ее делать.
Что такое навигация?
Термин “навигация” может быть интерпретирован по-разному. В общем, это ключевая часть сайта, которая позволяет пользователям находить то, что они ищут, без лишних кликов. Она приведет ваших посетителей к наиболее важной информации.
Какие вопросы помогут вам подготовить схему навигации?
Кто ваша целевая аудитория и какая цель у вашего сайта?
Какая информация и какие информационные модули должны быть на сайте?
Как должна быть сгруппирована информация с учетом важности для пользователя?
Как организовать функциональные и информационные модули в виде древовидной структуры?
Планирование навигации
Каким образом организовать контент? Как назвать и расположить элементы?
С самого начала основательно обсудите иерархию, в которой должна отображаться информация:
Поработайте с контентом. Можно использовать метод сортировки карточек, что поможет дизайнерам найти ответы на вопросы еще до начала создания дизайна.
Затем займитесь структурой. Создайте карту сайта или список с разными уровнями информации. Навигация должна быть максимально легкой. Перегруженные страницы с непонятными заголовками меню усложняют пользование сайтом. Создавая меню навигации, говорите с пользователями на их языке.
В конце определите элементы меню навигации, его тип и дизайн.
Помните, что нет стандарта, который определяет, как должна выглядеть навигация на вашем сайте. Скорее, важно понимать, какой сайт вы делаете, какой посыл хотите донести пользователям и какую цель нужно достичь с его помощью. Например, при создании сайта онлайн-магазина вы можете использовать алгоритмы, позволяющие посетителям найти нужный товар или услугу как можно скорее и купить их. Что касается промо-сайта, можно сделать акцент на быстром поиске информации, вовлечь пользователя в игровой процесс и упростить основные элементы для более легкой навигации.
Тренды в дизайне навигационной панели
Существует несколько популярных типов навигации сайта, который вы можете использовать для своего проекта. Какую из них выбрать - решать вам.
Горизонтальная или вертикальная?
Выбор между горизонтальной и вертикальной навигацией определяется несколькими факторами, которые основаны на особенностях дизайна, удобства использования и назначения контента. Небольшие сайты чаще всего предпочитают горизонтальную панель навигации в шапке страницы, тогда как крупные корпоративные сайты используют как горизонтальную, так и вертикальную панели.
Масштабные выпадающие списки
Масштабные выпадающие списки представляют собой панель меню, которая “выпадает” или “вылетает” из основной панели навигации. Такой тип навигации подойдет не каждому сайту. Основной плюс выпадающих списков в том, что они позволяют показать много ссылок сразу. Так в каких случаях они могут понадобиться? Масштабные выпадающие списки хорошо подходят онлайн-магазинам с объемным списком категорий, который вряд ли поместится в стандартное меню навигации. Соответственно, и другие сайты, предлагающие объемный комплекс услуг, могут успешно использовать такую навигацию.
Фиксированная (“прилипающая”)
Фиксированная, или “прилипающая”, навигационная панель не пропадает при прокручивании страницы. Как правильно, такая навигация используется на сайтах, где призывы к действию расположены на основной панели.
Объемный футер
Мы привыкли видеть в футере ссылки на юридическую информацию, виджеты с подпиской на рассылку или иконки соцсетей. На многих сайтах есть объемный футер, если они содержат много контента или если это онлайн-магазины, для которых важно указать иконки с методами оплаты.
Навигация адаптивного дизайна
Адаптивная навигация позволяет вашему сайту выглядеть хорошо на разных устройствах. На мобильных устройствах панель обычно сворачивается в меню “гамбургер”. Иконка меню представляет собой три горизонтальные полоски, и при открытии элементы располагаются друг под другом, образуя так называемый “гамбургер”. Это вид меню был создан, чтобы облегчить навигацию на мобильных устройствах, при этом не занимая много места.
Привязка логотипа к домашней странице
Звучит очевидно, однако всё ещё есть сайты, которые пренебрегают этим правилом. При нажатии на логотип пользователи ожидают перехода на домашнюю страницу - это распространенная практика.
Первичная / вторичная
Чаще всего первичная навигация состоит из основных элементов, которые
выглядят аналогично на всем сайте. Обычно главное меню расположены вверху страницы по центру, слева или справа. Вторичная навигация состоит из дополнительных элементов и, как правило, находится в середине страницы и не выделена соответствующим дизайном.
Рассмотрим 10 лучших идей дизайна навигации сайта
Тип: вертикальная, адаптивная.
Нажмите на иконку меню слева и главное меню сдвинется в центр страницы.
2. WE3
Тип: фиксированная, вертикальная; расположена вверху справа.
Дизайна сайта интерактивный. При скроллинге страницы появляется новая информация.
Тип: адаптивная, вертикальная; расположена слева.
Навигация в левой панели, которая раскрывается из иконки меню, похожа на то, что вы привыкли видеть на мобильных версиях сайта. Навигация расположена слева от посадочного раздела и легко заметна.
4. Kennedy Center
Тип: горизонтальная, выпадающий список.
Вы можете передвигаться по сайту JFK Center двумя способами: перетягивая картинки или используя горизонтальное меню.
5. B&O Play
Тип: фиксированная, адаптивная, горизонтальная.
Сайт привлекает внимание пользователя своим продуктом, поэтому панель навигации довольно простая.
Тип: фиксированная, горизонтальная, объемный футер, адаптивная, с выпадающим списком.
Длинный скроллинг по странице с основными функциями и объемный выпадающий список направит пользователей на нужную страницу.
7. Adriatic Luxury Hotels
Тип: фиксированная, горизонтальная, масштабный выпадающий список, объемный футер.
На этом сайте вы можете найти что вам нужно, просто прокручивая страницу вниз или используя фиксированное меню.
Тип: фиксированная, адаптивная, горизонтальная, объемный футер.
Навигация Kalios расположена слева сверху. Нажав на иконку меню, вы можете получить информацию о продуктах наведением мыши на необходимый товар.
Этим сайтом можно управлять, нажимая на стрелочки. Пользователь может пройтись по сайту, как по музею. Чтобы получить информацию, страницу каждой комнаты можно проскроллить.
10. Australian Ballet
Тип: фиксированная, адаптивная, объемный выпадающий список
Вывод
Существует много типов навигации, которые вы можете применить на своем сайте. В то же время нет универсального способа создания идеальной навигации; все зависит от ваших потребностей или пожеланий вашего клиента. Надеемся, что наши примеры вас вдохновили, а команда AGENTE, в свою очередь, поможет вам реализовать самые смелые идеи.