Привет Байкпост!
Скоро сезон и многие задумываются о навигации на мотоцикле для дальних путешествий. Перепробовав много вариантов я остановился на одном не самом дешевом, но надежном варианте о котором расскажу Вам ниже.
Суть этой системы заключается в телефоне и его креплении, но так как за рубежом часто связи нет, поэтому я использую оффлайн навигацию. Но почему бы просто не использовать свой телефон? ! - спросите Вы, а я отвечу:
Надеюсь, что вам будет полезен мой опыт. С данной системой я проездил 3 сезона и объективных минусов кроме цены не выявил. Напомню, что суть этой системы заключается в хорошем железе, экране, креплении, поэтому если вы найдете действительно хорошее крепление для Android смартфонов - поделитесь в комментариях, так как Android смартфоны могут нести на себе еще функцию борт компьютера, но это совсем другая история:).
Немного фото из гугла для представления о том, как выглядит такая связка на мотоцикле.
Чем легче работать с сайтом, тем больше вероятность повторного использования, заказа товара, заполнения формы и совершения пользователем других полезных действий.
Так повелось, что большинство сайтов имеют уникальное оформление и структуру. Это приводит к тому, что новым пользователям приходится каждый раз изучать принцип устройства навигации, чтобы добраться до нужной информации или совершить задуманное.
Задача дизайнера и проектировщика — максимально сократить время, которое тратит новый посетитель на подобное обучение и сделать так, чтобы информация стала максимально доступной. Ключ к успеху в решении этой задачи — построение правильной навигационной системы.
Хорошая навигация соответствует следующему набору принципов.
В основе удобного интерфейса лежит правильная организация данных. Прежде чем браться за оформление, имеет смысл детально продумать информационную архитектуру проекта.
Данные должны быть распределены по страницам или экранам таким образом, чтобы новый посетитель, не зная полной картины, мог быстро оценить, как добраться до искомой информации. Для этого в первую очередь необходимо построить логичную иерархическую структуру из того набора данных, который был предусмотрен на проекте.
| Неправильно | Правильно |
В этой статье мы расскажем о том, какой должна быть хорошая навигация по сайту, и как ее сделать действительно эффективной. Материал пригодится в первую очередь тем, кто хочет создать свой сайт самостоятельно.
Навигация – это методы, приёмы и специальные элементы, которые позволяют перемещаться между его страницами. От того, насколько хорошо она продумана, зависит всё: и конверсия, и успех продвижения ресурса.
Это можно сравнить с планировкой в доме. Если планировка хороша – то вы без проблем найдёте нужную вам комнату, не перепутаете вход на кухню со входом в гостиную. Если же ходов, коридоров и дверей много, то можно заблудиться в таком доме.
Аналогично и с сайтами. Если навигация плохая, много ссылок, которые не ведут куда нужно, или непонятно, куда заведут – пользователи путаются, и не могут найти нужные страницы и необходимую им информацию.
Для поисковых систем хорошая, логичная навигация тоже важна. Поисковая машина должна понимать роль данной страницы на вашем сайте. Также грамотно продуманная навигация улучшает поведенческие факторы, так как пользователи быстрее находят нужную им информацию.
Предлагаю сначала ознакомиться с основными элементами, которые помогают перемещаться по сайту.
Навигация в широком смысле включает в себя множество приёмов и элементов, основная задача которых – дать пользователю перейти на нужную страницу и ознакомиться с информацией.
Одним из таких элементов, который давно уже стал обязательным на сайте – это логотип компании, при нажатии на который попадаем на .
Например, вот здесь достаточно нажать на логотип, чтобы снова оказаться на стартовой странице.
Этот приём уже привычен для пользователей, и позволяет вернуться на домашнюю с любой страницы сайта.
Второй «классический» элемент – это верхнее меню .
Оно располагается под шапкой и состоит из кнопок или ссылок, которые ведут на основные разделы сайта. Такое меню может быть более сложным, с выпадающими списками, которые ведут на подразделы или отдельные страницы.
В последние несколько лет стал популярен ещё один прием – это меню-гамбургер , в котором все ссылки спрятаны на схематические три горизонтальные черточки. Этот элемент сначала жил только на мобильных устройствах, но сейчас всё чаще встречается и на десктопных версиях сайтов:
Также на некоторых сайтах вы можете увидеть вертикальное меню . Его используют чаще всего в том случае, если в верхнее меню не удалось уместить всё необходимое, или если нужно облегчить пользователям переход в некоторые рубрики.
А может оно жить и самостоятельно, без горизонтального меню вверху страницы. И таких меню может быть даже несколько, как здесь – слева и справа:
(микроразметка) — ещё один элемент навигации, который не только задает иерархию страниц, но и позволяет легко вернуться к нужному разделу, или на главную, с любой страницы:
Линки внутри статей на другие страницы сайта – это тоже навигационные элементы. Например вот такие:
Они не только помогают перейти дальше, но и хороши с точки зрения SEO – такой приём позволяет увеличить количество просмотренных страниц.
Ссылки в footer-е (нижнем колонтитуле, подвале) – это еще один навигационный элемент. Обычно в футер выносят ссылку на контакты, пользовательское соглашение, правила использования сайта и т.п. А иногда можно увидеть и много ссылок на разные страницы сайта, сгруппированные по категориям:
На длинных лендингах, а также некоторых сайтах вверху можно увидеть шкалу прогресса , которая показывает, как далеко вы пролистали данную страницу:
Шкалу прогресса также можно встретить в формах заявок и регистрации, если форма длинная и разбита на несколько шагов.
Это упрощает навигацию по самой странице — видно, сколько до конца. Также это небольшой психологический прием, который подталкивает посетителя довести начатое до завершения.
На длинных страницах и на лендингах можно встретить ещё один отличный навигационный элемент — кнопку для быстрого возврата наверх :
Такая кнопка позволяет быстро вернуться к началу страницы.
Чтобы верхнее меню, контакты или другая важная информация постоянно были перед глазами, используется так называемый “липкий хедер”, или “липкая навигационная панель”. Она постоянно остается вверху страницы, пока пользователь скроллит вниз.
Вот здесь у нас постоянно перед глазами поиск, лого с возможностью возврата на главную, и небольшое меню.
Как же использовать все эти элементы с толком и пользой?
Прорабатывая навигацию на своем сайте, запомните и старайтесь использовать одно простое правило: с главной до любой страницы сайта пользователь должен добраться максимум за три клика . И наоборот.
Это общепринятый стандарт, и неспроста: именно в этом месте логотип сразу бросается в глаза. И пользователю не придется искать, на что нажать, чтобы вернуться.
Первичным может быть верхнее меню. Вторичным – боковое, дополнительные ссылки внутри текста, в футере. Также вторичными элементами навигации могут выступать хлебные крошки.
Вот здесь верхнее меню выступает основным элементом навигации, а хлебные крошки – вспомогательным.
Вынесите в основное меню самые главные разделы сайта.
Если всё не помещается в верхнее (или боковое) меню. Например, часто можно встретить вариант, когда некоторые разделы сайта спрятаны под одну кнопку «Информация», «Больше», «Ещё» и т.п.
Почта Mail.ru таким образом «спрятала» проекты компании:
Информационные ссылки – это такие как «Контакты», «Публичная оферта» и им подобные. Найти эти ссылки пользователь должен на всех страницах сайта. Потому самое подходящее место для них – это футер (нижний колонтитул).
Вот яркий пример подобного размещения информационных ссылок:
Все навигационные элементы должны быть хорошо заметны, и должно быть понятно, что ссылка – это ссылка, а кнопка – это кнопка. Выделите ссылки цветом, сделайте полужирными или подчеркнутыми. Важно, чтобы пользователь понимал, что перед ним – кликабельный элемент, который отправит его на другую страницу сайта.
Вот здесь я не могу назвать меню удачным. Слишком мелкий шрифт. Но здесь есть другой подход – сразу с главной страницы можно перейти в каталог любимого бренда или просмотреть скидки:
Это сбивает пользователей с толку.
Продумайте дополнительные элементы типа «Похожие товары», «Рекомендованный контент» или «Статьи по теме», которые помогут пользователю быстрее найти нужное.
Упростите навигацию с помощью всплывающих подсказок , которые помогут пользователю понять, для чего служит данная кнопка или иконка:
Постарайтесь сделать так, чтобы посетителю не приходилось на каждой странице по новому искать меню . Не меняйте и не убирайте меню на второстепенных страницах.
Оставьте номер телефона в шапке. Сделайте так, чтобы кнопки обратного звонка и чат с онлайн-помощником были видны сразу — привычнее всего в нижней части страницы слева или справа, но не сбоку.
Адрес можно оставить как в шапке, так и в футере. Не заставляйте посетителя искать всю эту информацию по всему сайту.
Все эти приёмы значительно упростят навигацию по сайту, сделают её проще и эффективнее.
Выберите хостинг для сайта:
Работая над навигацией, думайте в первую очередь о пользователе. Он точно сможет найти все, что искал, в кратчайшие сроки? Понятно ли все человеку, которые впервые столкнулся не только с вашим сайтом, но и с вашей сферой вообще? Не спрятаны ли далеко страницы, можно ли добраться до каждой максимум в три клика?
Подумайте сами, на каких сайтах вам проще всего перемещаться, и берите пример с лучших.
Удачи вам в разработке собственного интернет-ресурса!
Можно сколько угодно рассуждать о повышении эффективности онлайн-бизнеса, но не приблизиться к практическому решению. А ведь интернет-маркетинг - это и есть чистая практика. И сегодня мы начинаем серию материалов, посвященных сайтам с высокой конверсией. На конкретных примерах.
Первый на очереди — сервис бронирования номеров в отелях всего мира Booking.com. Если вы увлекаетесь путешествиями, то наверняка с ним знакомы. На сайт компании ежедневно заходят 11 000 000 уникальных посетителей. Из них 700 000 человек совершают целевое действие.
Ни один сайт в этой нише не может и близко похвастаться такой эффективностью. При том, что ресурс буквально «нашпигован» продающими фишками, разработчики продолжают его развивать.
Смотрите, изучайте, а, главное, применяйте лучшие приемы известного бренда.
Стратегия Booking.com строится на социальных доказательствах. Авторы не расписывают, какие они клевые, а буквально каждый элемент подкрепляют цифрами. У посетителя создается ощущение, что он попал в огромную тусовку единомышленников. Если сотни тысяч путешественников доверяют сервису, какие уж тут сомнения?
Как только вы заходите на главную страницу, ваше внимание привлекает следующий виджет:
«Что это за предложения для участников? Надо зарегистрироваться и посмотреть!» Примерно так мыслит новичок, а сервис легко и непринужденно собирает клиентскую базу.
«Плюшки» за регистрацию:
На следующем слайде пресловутая широта выбора. Без апартаментов на отпуск вы точно не останетесь. :
Востребованность услуг видна по ленте
«Только что забронировано ». Она обновляется каждые 3 секунды:
Интуитивно понятный интерфейс поискового фильтра абсолютно не тормозит пользователя, а, наоборот, делает процесс выбора легким. Первый этап воронки конверсии проходит «как по маслу».
Ненавязчиво и убедительно, прямо под поисковой формой. Большинство пользователей задает 2 вопроса:
В любом бизнесе у целевой аудитории есть 2-3 «горячих» вопроса-сомнения. Ответить на них четко и ясно — означает повысить отклик.
Традиционный список буллетов с преимуществами также убедительно говорит о главных фишках Booking.com:
Резюме: выгодно, удобно, надежно. Именно по этим 3 факторам мы принимаем решение в пользу того или иного ресурса.
Посмотрите как элегантно сервис использует социальные доказательства, чтобы подтолкнуть вас к принятию решения при выборе отеля:
Во-первых, высокий рейтинг гостиницы (4 из 5 звезд). И не по решению администрации, а на основании отзывов. Далее вы видите еще один «крючок»: оценка «Потрясающе» по 66 отзывам. Кстати, внутри карточки отеля они представлены более развернуто. Наконец, информация о том, что остался последний номер и кто-то одновременно с вами его просматривает, невольно вызывает «хватательный» рефлекс.
Вместо заключения
Что можно и нужно использовать из опыта Booking.com:
Высоких вам продаж!
Навигация сайта стала важным аспектом UX-дизайна - она может как помочь, так и навредить вашему сайту. Навигацию можно сравнить с опорой дома. Если план фундамента недостаточно разработан, вы подвергаете риску все здание.
Навигация может различаться на разных сайтах; нет определенных инструкций, как правильно ее делать.
Термин “навигация” может быть интерпретирован по-разному. В общем, это ключевая часть сайта, которая позволяет пользователям находить то, что они ищут, без лишних кликов. Она приведет ваших посетителей к наиболее важной информации.
Кто ваша целевая аудитория и какая цель у вашего сайта?
Какая информация и какие информационные модули должны быть на сайте?
Как должна быть сгруппирована информация с учетом важности для пользователя?
Как организовать функциональные и информационные модули в виде древовидной структуры?
Каким образом организовать контент? Как назвать и расположить элементы?
С самого начала основательно обсудите иерархию, в которой должна отображаться информация:
Поработайте с контентом. Можно использовать метод сортировки карточек, что поможет дизайнерам найти ответы на вопросы еще до начала создания дизайна.
Затем займитесь структурой. Создайте карту сайта или список с разными уровнями информации. Навигация должна быть максимально легкой. Перегруженные страницы с непонятными заголовками меню усложняют пользование сайтом. Создавая меню навигации, говорите с пользователями на их языке.
В конце определите элементы меню навигации, его тип и дизайн.
Помните, что нет стандарта, который определяет, как должна выглядеть навигация на вашем сайте. Скорее, важно понимать, какой сайт вы делаете, какой посыл хотите донести пользователям и какую цель нужно достичь с его помощью. Например, при создании сайта онлайн-магазина вы можете использовать алгоритмы, позволяющие посетителям найти нужный товар или услугу как можно скорее и купить их. Что касается промо-сайта, можно сделать акцент на быстром поиске информации, вовлечь пользователя в игровой процесс и упростить основные элементы для более легкой навигации.
Существует несколько популярных типов навигации сайта, который вы можете использовать для своего проекта. Какую из них выбрать - решать вам.
Выбор между горизонтальной и вертикальной навигацией определяется несколькими факторами, которые основаны на особенностях дизайна, удобства использования и назначения контента. Небольшие сайты чаще всего предпочитают горизонтальную панель навигации в шапке страницы, тогда как крупные корпоративные сайты используют как горизонтальную, так и вертикальную панели.
Масштабные выпадающие списки представляют собой панель меню, которая “выпадает” или “вылетает” из основной панели навигации. Такой тип навигации подойдет не каждому сайту. Основной плюс выпадающих списков в том, что они позволяют показать много ссылок сразу. Так в каких случаях они могут понадобиться? Масштабные выпадающие списки хорошо подходят онлайн-магазинам с объемным списком категорий, который вряд ли поместится в стандартное меню навигации. Соответственно, и другие сайты, предлагающие объемный комплекс услуг, могут успешно использовать такую навигацию.
Фиксированная, или “прилипающая”, навигационная панель не пропадает при прокручивании страницы. Как правильно, такая навигация используется на сайтах, где призывы к действию расположены на основной панели.
Мы привыкли видеть в футере ссылки на юридическую информацию, виджеты с подпиской на рассылку или иконки соцсетей. На многих сайтах есть объемный футер, если они содержат много контента или если это онлайн-магазины, для которых важно указать иконки с методами оплаты.
Адаптивная навигация позволяет вашему сайту выглядеть хорошо на разных устройствах. На мобильных устройствах панель обычно сворачивается в меню “гамбургер”. Иконка меню представляет собой три горизонтальные полоски, и при открытии элементы располагаются друг под другом, образуя так называемый “гамбургер”. Это вид меню был создан, чтобы облегчить навигацию на мобильных устройствах, при этом не занимая много места.
Звучит очевидно, однако всё ещё есть сайты, которые пренебрегают этим правилом. При нажатии на логотип пользователи ожидают перехода на домашнюю страницу - это распространенная практика.
Чаще всего первичная навигация состоит из основных элементов, которые
выглядят аналогично на всем сайте. Обычно главное меню расположены вверху страницы по центру, слева или справа. Вторичная навигация состоит из дополнительных элементов и, как правило, находится в середине страницы и не выделена соответствующим дизайном.
Тип: вертикальная, адаптивная.
Нажмите на иконку меню слева и главное меню сдвинется в центр страницы.
Тип: фиксированная, вертикальная; расположена вверху справа.
Дизайна сайта интерактивный. При скроллинге страницы появляется новая информация.
Тип: адаптивная, вертикальная; расположена слева.
Навигация в левой панели, которая раскрывается из иконки меню, похожа на то, что вы привыкли видеть на мобильных версиях сайта. Навигация расположена слева от посадочного раздела и легко заметна.
Тип: горизонтальная, выпадающий список.
Вы можете передвигаться по сайту JFK Center двумя способами: перетягивая картинки или используя горизонтальное меню.
Тип: фиксированная, адаптивная, горизонтальная.
Сайт привлекает внимание пользователя своим продуктом, поэтому панель навигации довольно простая.
Тип: фиксированная, горизонтальная, объемный футер, адаптивная, с выпадающим списком.
Длинный скроллинг по странице с основными функциями и объемный выпадающий список направит пользователей на нужную страницу.
Тип: фиксированная, горизонтальная, масштабный выпадающий список, объемный футер.
На этом сайте вы можете найти что вам нужно, просто прокручивая страницу вниз или используя фиксированное меню.
Тип: фиксированная, адаптивная, горизонтальная, объемный футер.
Навигация Kalios расположена слева сверху. Нажав на иконку меню, вы можете получить информацию о продуктах наведением мыши на необходимый товар.
Этим сайтом можно управлять, нажимая на стрелочки. Пользователь может пройтись по сайту, как по музею. Чтобы получить информацию, страницу каждой комнаты можно проскроллить.
Тип: фиксированная, адаптивная, объемный выпадающий список
Существует много типов навигации, которые вы можете применить на своем сайте. В то же время нет универсального способа создания идеальной навигации; все зависит от ваших потребностей или пожеланий вашего клиента. Надеемся, что наши примеры вас вдохновили, а команда AGENTE, в свою очередь, поможет вам реализовать самые смелые идеи.
