Веб-дизайнерам всегда приходится искать баланс между удобством работы и внешней привлекательностью, когда они работают над дизайном вебсайта. Без такого баланса на вебсайт будет приятно смотреть, но тяжело по нему перемещаться. Или же, он будет не приятен для глаз, но с простой навигацией. Если держать это в уме, балансировка между привлекательной навигацией и удобством пользования не представится такой уж и сложной. Чтобы помочь вам сгенерировать новые идеи и придать вдохновения в процессе создания пользовательских меню, мы приведем 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
Не секрет, что каждый веб-сайт той или иной компании преследует четыре основные цели: воспитание лояльного отношения к бренду, увеличение трафика, снижение числа отказов, повышение показателей конверсии в лиды или продажи! Здесь многое зависит от того, насколько уютно чувствуют себя пользователи, попавшие на ваш сайт.
Поэтому в нашей сегодняшней статье речь пойдет о том, что такое навигация сайта, благодаря которой и создается «уютная обстановка». А точнее - о наиболее распространенных ошибках, совершаемых при ее разработке.
Ошибка №1: нестандартный стиль
Так сложилось, что пользователи привыкли видеть навигацию сайта в верхней или левой частях страницы, поэтому не стоит заставлять их блуждать по сайту в ее поисках, так как подобные игры в прятки могут им не понравиться, что отрицательно скажется на показателях конверсии и увеличит процент отказов.
Да, в разработке страниц/сайта всегда приветствуется креативный подход, но навигация сайта явно не тот случай, в котором стоит давать волю своей фантазии. Такими экспериментами вы отвлекаете внимание пользователей, которые будут вынуждены заниматься изучением нового стиля навигации, а не основного контента ресурса.
Ошибка №2: универсальные надписи пунктов меню
Еще одно золотое правило того, как сделать навигацию на сайте, - надписи меню навигации должны быть информативного характера. Так, например, использование пунктов меню «Товары» или «Услуги» - общие для всех компаний, и подобные названия мало о чем говорят пользователям. Вот еще пример: «Что мы делаем» - такая же безликая фраза.
В таком случае как улучшить навигацию сайта? Постарайтесь подобрать наиболее точные надписи для каждого значка пункта меню навигации, и вы увидите, как они заговорят с пользователями. Посетители сайта пришли к вам в поиске ответа на возникшие вопросы, поэтому не стоит отмахиваться от них шаблонными фразами и словами.
Согласитесь, что ваши клиенты не ищут абстрактные «Товары» или «Услуги», и навигация с такими значками не повлияет на продвижение сайта в результатах поисковой выдачи. Узнали себя? Значит, пора исправляться! Меню сайта и его структура в целом должны быть оптимизированы для поисковых систем и говорить на понятном для целевой аудитории языке. Дочитав нашу статью до конца, вы увидите, как подобную задачу решают многие компании.
Ошибка №3: выпадающее меню
Выпадающее меню как элемент навигации стал чрезвычайно популярным, однако существуют две весомые причины, по которым к его использованию нужно подходить с максимальной осторожностью.
Многим из вас наверняка приходилось буквально ловить выпадающее меню. Одно неловкое движение - и оно убегает от вас! И вот вы, собравшись с силами, вновь ищете, кликаете, а там - сюрприз! - еще один список вариантов действий. Подобные догонялки жутко раздражают! Задумайтесь, может быть не стоит лишний раз трепать нервы своим потенциальным клиентам?
Еще одна причина отказа от выпадающего меню: низкая посещаемость следующих страниц сайта или глубина просмотра. Если у вас существует проблема низкой посещаемости страниц верхнего уровня, вполне возможно, что причина кроется в использовании выпадающего меню. Но из правил всегда есть исключения. В этом случае исключения действуют для больших сайтов со множеством разделов, так как здесь с помощью такого меню значительно улучшается юзабилити сайта.
Ошибка №4: большое количество пунктов меню
Так было раньше, но не стоит придерживаться этой традиции сегодня без острой необходимости, ведь порой даже 8 пунктов бывает слишком много. Попытайтесь ограничиться их меньшим количеством, не превышающим 5: чем меньше второстепенных пунктов, тем реже взгляд пользователей будет запинаться на них, и тем громче заговорят наиболее важные.
Это правило также работает для всего контента сайта, а не только для его навигации. Каждый удаленный элемент делает оставшиеся более заметными. Краткость навигации также важна для SEO. Поскольку чаще всего пользователи по ссылке попадают на главную страницу, а не на внутренние страницы сайта, поэтому она является «авторитетной» для поисковиков. Когда ваша навигация переполнена ссылками, домашняя страница сайта становится менее авторитетной по сравнению с внутренними.
Ошибка №5: неуместное расположение пункта меню для оформления заказа
Исследования в области психологии показали, что легче всего запоминаются первые и последние элементы любого списка, нежели элементы из его середины. Аналогичное действие происходит и с пользователями. Это явление получило название «кривая серийных позиций» и наглядно выражается в виде графика:
Концентрация внимания значительно выше в начале списка (эффект первичности) и в конце (эффект новизны). Вот почему правильно расставлять самые важные пункты в начале навигации, второстепенные - в центре. Пункт меню «Контакт» следует разместить в конце TOP навигации в крайнем правом углу.
Бонусная подсказка: ссылки - forever, кнопки - никогда!
В случае, если вы отстали от тенденций веб-дизайна лет на 8 и до сих пор используете графические навигационные кнопки вместо текстовых ссылок, тогда для вас мы приводим 5 причин пересмотреть свои привычки:
- Текст кнопок не виден для поисковиков.
- Обновлять кнопки сложнее, чем текстовые ссылки.
- Кнопки загружаются медленнее, что делает их неприемлемыми для мобильных приложений.
- Кнопки не читаются речевыми и текстовыми браузерами.
- Кнопки не нужны, даже если вы хотите использовать нестандартные шрифты, например, с помощью таких инструментов, как TypeKit.
А теперь, как мы и обещали: 5 примеров навигации сайта без ошибок.
Перед вами завершающая часть «сериала» о популярных автомобильных навигационных приложениях для Android. В ней мы постарались просуммировать всю информацию из пяти ранее опубликованных обзоров отдельных приложений и дать заключительную оценку. Чтобы не утруждать читателя, мы постараемся сделать это в максимально краткой и наглядной форме с использованием таблиц, снабжая их относительно небольшими комментариями.
Чем обусловлен выбор именно этих приложений? Главными критериями были популярность и наличие большого числа положительных отзывов, а также простота использования. В первые два критерия немного не вписался обновленный Shturmann. По всем трем критериям не прошло приложение «Семь дорог». Карты Google в роли навигатора все еще в стадии бета-теста. Мегафон-навигация, по сути, тот же Прогород, но только в онлайновом варианте. Приложение iGOв версии для Android официально так пока и не появилось. Поэтому участников всего пятеро.
Цены и популярность
Поставив себя на место покупателя, начнем с разглядывания ценников и изучения информации о том, какую популярность завоевал тот или иной продукт среди пользователей.
| Навител | Прогород | Sygic | СитиГид | Яндекс | |
| кол-во закачек в Google Play, млн. | 5-10 | 0,1-0,5 | 10-50 | 1-5 | 5-10 |
| оценка в Google Play | 4,1 | 4,2 | 4,2 | 4,1 | 4,2 |
| цена карт России | 1350 р. | 1290 (950*) р. | €40 | 1800 р. | бесплатно |
| минимальная цена | $1** | - | €20 | 990 р. | бесплатно |
| плата за обновления, руб | бесплатно | бесплатно | бесплатно | бесплатно | бесплатно |
| плата за сервис пробок, руб | бесплатно | бесплатно | в России не работает*** | бесплатно | бесплатно |
| допустимое количество переустановок | 1 | 3 | н.д. | 3 | не ограничено |
| бесплатные сторонние карты | да | да | нет | да | нет |
| тестовый период, дней | 30 | 30 | 7 | 15 | - |
* если приобретать ключ на сайте разработчика. Цена указана за само приложение при неограниченном доступе к картам.
** аренда зарубежных карт.
*** для Европы сервис платный - от 12 евро в год.
Итак, самый дорогой продукт - Sygic. Он ориентирован на европейского потребителя, потому ценник вполне соответствующий. Вдобавок за пробки и расширенную информацию о камерах придется платить отдельно, но это все относится только к Европе. В России сетевые сервисы не работают.
Наиболее адекватными выглядят цены Навитела и Прогорода. Однако Навител обладает весьма жесткой политикой в отношении переустановки. Перенести приложение на другой смартфон, скорее всего, не получится вовсе.
На фоне всех этих ограничений Яндекс выглядит королем. Однако приложение имеет ряд существенных ограничений, тем самым оставляя хорошие шансы остальным.
Сравнение наборов функций
Разработчики большинства представленных приложений стараются привлечь пользователей различными дополнительными функциями, например, погодой, фотографиями на карте, статьями из энциклопедий, отметками в соцсетях, отображением местоположения друзей и даже дополненной реальностью.
Мы свели в одну таблицу весь основной набор функций всех пяти приложений:
| Навител | Прогород | Sygic | СитиГид | Яндекс | |
| Интерфейс | |||||
| Ручное масштабирование карты во время навигации | да | да | да | да | да |
| Индикаторы аккумулятора / спутников/ GSM | да / да / да | да / да / нет | в меню / в меню / нет | да / да / да | статус-бар ОС |
| Смена ориентации карты | да | да | да | да | да |
| Ручное вращение карты | да | да | нет | нет | да |
| Информация о пробеге | да | да | да | да | нет |
| Экран обзора спутников | да | да | нет | нет | нет |
| Режим 3D | да | да | да | да | да |
| Наклон карты | только в 3D | да | да | да | да |
| Панель быстрого доступа | только DPOI | да | да | да | только DPOI |
| «Маршрутный компьютер» | да | нет | да | да | нет |
| Ночной режим | да | да | да | да | да |
| Дополненная реальность | нет | да | нет | нет | нет |
| Поиск | |||||
| Универсальный | нет | нет | да | нет | да |
| Адресный | да | да | да | да | нет |
| По координатам | да | да | да | да | нет |
| POI вокруг / у точки / у финиша | да / да / да | да / да / да | да / да / да | да / да / да | да / да / да |
| Голосовой ввод | нет | нет | нет | нет | да |
| Работа с маршрутами | |||||
| Сохранить / загрузить | да | да | да | да | нет |
| Имитация езды по маршруту | да | да | да | да | нет |
| Отображение целиком | да | да | да | да | да |
| Работа с треками | да | да | нет | да | нет |
| Режимы работы: легковой авто / грузовой / пешеходный | да / да / да | да / нет / нет | да / нет / да | да / нет / да | да / нет / нет |
| Карты | |||||
| Обновление карт | да | да | да | да | да |
| Поставщик | н.д. | собственные | Navteq | много, разные | Navteq, Сканекс и др. |
| Установка сторонних и бесплатных карт | да | да , на базе OSM | нет | да , на базе OSM | нет |
| Online-сервисы | |||||
| Отображение пробок | да | да | нет * | да | да |
| Динамические POI | да | да | да | да | да |
| Друзья на карте | да | нет | да | да | нет |
| Тематические новостные ленты | нет | нет | нет | да | нет |
| Фото на карте | нет | нет | да (Panoramio) | нет | нет |
| Погода | да | нет | нет | нет | нет |
| Запрет выхода в Сеть | да | через отключение сервиса пробок | нет | да | нет |
* только для стран Европы за отдельную плату
Эта таблица предназначена для самостоятельного изучения. Тут каждый должен сам ответить на вопрос, обладает ли та или иная программа минимальным достаточным набором функций. Например, кому-то обязательно нужна работа с треками, а кому-то установка бесплатных карт OSM. Есть у некоторых приложений и неординарные способности. Например, отображение на карте фотографий мест, сделанных пользователями Panoramio (у Sygic), или режим дополненной реальности (Прогород), а также распознавание речи и голосовых команд (Яндекс.Навигатор).
Есть у приложений и крупные «проколы». Так, у Sygic отсутствует функция отображения трафика (пробок), а Яндекс.Навигатор не будет полноценно работать в отсутствии связи с Интернет.
Интерфейс
Поскольку у каждого из нас свои представления о красоте, мы не будем много говорить о том, интерфейс какой из программ краше. Нашему глазу оказалась милее «картинка» Навител Навигатора, Прогорода и Яндекса. Но это не значит, что у двух других программ какие-то проблемы с «внешним видом». Они все хороши. Просто эти немного выделяются на общем фоне.
Но если отстраниться от разглядывания «картинок», то на первый план выходят совершенно другие свойства интерфейсов - практичность и информативность. Первое из них, это когда вы всегда чувствуете себя в своей тарелке. Вам достаточно беглого взгляда на экран, чтобы получить максимум необходимой информации. Не очень удачным примером практичности может служить интерфейс того же Навитела - нагромождение тонких линий и мелких деталей затрудняет чтение информации во время движения. Также к практичности относится удобство работы с меню и поиском.
Под информативностью мы понимаем вывод на экран различной сопутствующей информации, такой как ограничение скорости движения на данном участке, информация о камерах и т.п. Наличие всевозможных подсказок и дополнительной информации в базе POI.
Итак, ниже мы приведем скриншоты интерфейсов всех программ с коротким перечислением основных преимуществ и недостатков. В этот раз мы будем использовать смартфон с небольшим разрешением экрана 480х800, которое регламентировано практически всеми разработчиками ПО в сегодняшнем тесте.
Начнем с вертикального варианта отображения карты, который наиболее естественен для смартфонов и более практичен для навигации. Рядом с обычным представлением карты поместим 3D-вариант.
Навител Навигатор 8.5
Прогород 2.0
Sygic 13.4
СитиГид 7.8
Яндекс.Навигатор 1.5
Это развязка Варшавского шоссе и МКАД. Увы, картинка статична, и ее восприятие во время движения, когда масштаб карты постоянно меняется в зависимости от скорости и грядущих событий (поворотов), радикально отличается о того, которое вы получите просто созерцая эти два набора скриншотов. Вдобавок в 3D-режиме очень многое зависит от угла наклона, который во всех программах регулируется. Разработчики сделали так, что по одним углом карта красива практична, а под другим ею пользоваться уже неудобно, потому как меняется детализация, перспектива и т.д. Аналогичное замечание можно сделать и к масштабам. Посему дадим словесный комментарий, но прежде выложим еще одну порцию скриншотов, сделанных в режиме навигации:
Навител Навигатор 8.5
Прогород 2.0
Sygic 13.4
СитиГид 7.8
Яндекс.Навигатор 1.5
Навител Навигатор
Картинка заслуживает всяческих похвал, но она крайне непрактична. Нагромождение массы мелких линий и контуров осложняет восприятие линии маршрута на экране, которая немного толще самой дороги, но с загруженными пробками никак не отличается от нее по цвету. Значки камер, знаков и прочие детали едва различимы на экране.
Прогород
«Картинка» немного похожа на Навител, но мелких деталей меньше, а линия маршрута читается намного легче, чем в предыдущем случае. Претензии две: панель статуса занимает много места на экране и на ней царит хаос, а также мелковата графика и все кнопки управления.
Sygic
На скриншотах интерфейс невзрачен, но с точки зрения удобства чтения информации во время движения, он заслуживает самой высокой оценки. Существенный минус один - номера домов в режиме навигации не отображаются. Они появляются только если попробовать прокрутить карту в одном из направлений, что переведет ее в режим просмотра.
СитиГид
Интерфейс карты весьма неплох в практическом плане. Может он не столь красив, но достаточно удобен.
Яндекс.Навигатор
Пытаться придраться к интерфейсу Яндекс.Навигатора аргументировано не получилось. Он очень практичен. Единственный момент - пользователи платформ с экранами с высокой плотностью пикселей на дюйм жалуются на мелкие кнопки и другие элементы в меню. По какой-то причине эти элементы интерфейса не полностью соответствуют рекомендациям Google для разработчиков, и программисты оперировали абсолютными единицами размеров элементов вместо относительных DP и SP.
Ну а тем, кто по какой-то причине предпочитает горизонтальное положение карты, выложим еще один комплект скриншотов.
Навител Навигатор 8.5
Прогород 2.0
Sygic 13.4
СитиГид 7.8
Яндекс.Навигатор 1.5
Карты
Увы, большинство разработчиков не указывают детальную информацию о своих картах, поскольку на фоне конкурентов они могут выглядеть не столь блестяще.
Мы постарались собрать максимум информации и свести ее в одну таблицу. Обратите внимание на строку «Карта онлайн» - это ваш шанс самостоятельно оценить качество покрытия. Правда, оно тоже не совсем точно отражает ситуацию. У Навитела и Прогорода в онлайне выложен не самый последний релиз, а у Яндекса карты в приложении и в онлайне местами разительно отличаются, что, порой, вызывает недоумение.
| Навител | Прогород | Sygic | Ситигид | Яндекс | |
| Россия: населенных пунктов | 149 047 | н.д. | н.д. | н.д. | ≈170 тыс. |
| Россия: городов с детализацией | 8762 | н.д. | н.д. | н.д. | н.д. |
| Дорожный граф, км | 3 809 652 | н.д. | н.д. | н.д. | н.д. |
| Объектов POI | 992 163 | н.д. | н.д.* | н.д. | н.д. |
| Объем карт, МБ | 1250 | 1131 | 623 | 1900 | 1910** (только Москва) |
| дата последнего обновления | 25.10.2013 | 22.10.2013 | 12.2013 | 22.01.2014 | н.д. |
| Частота обновлений в год, раз | 3-4 | 2 | 1-3 | 2-10*** | н.д. |
| Карта онлайн | - | - | |||
| Карты зарубежных стран, шт. | 52 | 28 (OSM) | ≈130 | 10 | 1**** |
| Информация о картах на сайте разработчика | - | - |
* в качестве объектов POI также используются данные из Foursquare
** указан объем полной карты Москвы
*** карта России обновляется практически каждый месяц, но изменения в ней каждый раз касаются пары-тройки каких-то отдельных областей. Если взять, например, карту Москвы, то она обновляется два раза в год.
**** упоминаются Украина, Беларусь и Турция. В фирменном видеоролике про Турцию уже нет ни слова, а в Google Play фигурирует только Украина. Тем не менее, в списке карт для загрузки можно встретить, например, карту Алма-Аты.
По итогам переписи 2010 года количество населенных пунктов в России составляло чуть боле 153 тыс. и около 20 тыс. из них не имеют постоянного населения. Откуда тогда у Яндекса взялось 170 тыс.? Во-первых - вложенность. Конкретный населенный пункт всегда принадлежит другим территориальным единицам. Во-вторых, перепись учитывает не все типы населенных пунктов. Из нее могут выпадать железнодорожные станции, зимовья и др.
Итак, в лидерах у нас, по всей видимости, Навител и Яндекс. Объем карт - это косвенный показатель. У Яндекс.Навигатора он имеет такие невообразимые значения потому, что эти карты содержат огромное количество растровых изображений.
Что касается детализации, то этот вопрос сложный, и на его изучение необходимо много времени. Для собственного понимания мы взяли несколько населенных пунктов и посмотрели, как обстоят дела с этим вопросом.
| Навител | Прогород | Sygic | Ситигид | Яндекс | |
| Оленегорск, Мурманская область | детальная, с домами (3D) | три основные улицы | только центральная улица, с ошибками | детальная, с домами | три основные улицы |
| Богородицк, Тульская область | детальная, с домами | детальная, с домами (3D) | только центральная улица | детальная, с домами | три основные улицы |
| Ангарск, Иркутская область | основная дорожная сеть | детальная дорожная сеть | только центральная улица | детальная, с домами | детальная, с домами |
| Петропавловск-Камчатский | детальная, с домами | детальная дорожная сеть | только центральная улица | точка на трассе | детальная, с домами |
| Астрахань | детальная, с домами | детальная, с домами (3D) | детальная, с домами | детальная, с домами | детальная, с домами |
| Сочи | детальная, с домами | детальная, с домами (3D) | детальная дорожная сеть | детальная, с домами | детальная, с домами |
| Чехов, МО | детальная, с домами | детальная, с домами (3D) | детальная, с домами | детальная, с домами | детальная, с домами |
| Тверь | детальная, с домами | детальная, с домами (3D) | детальная, с домами | детальная, с домами | детальная, с домами |
| Рыбинск | детальная, с домами | детальная, с домами (3D) | детальная, с домами | детальная, с домами | детальная, с домами |
| Печоры, Псковская обл. | детальная, с домами | основная дорожная сеть | три основные улицы, с ошибками | детальная, с контурами домов, без адресов | три основные улицы |
| д. Ланьшино, МО | часть дорожной сети | точка на карте | детальная дорожная сеть | детальная дорожная сеть | основная дорожная сеть |
В лидерах оказались Навител, Прогород и Ситигид. Причем карты Прогорода почти во всех населенных пунктах из таблицы имеют здания не только с соответствующими контурами, но и высотой. СитиГид хоть и хорош (используются карты OSM), но карты нужных вам регионов придется искать в большом списке и загружать отдельно, что не очень удобно. Почему-то загрузить разом всю карту России нельзя. Кроме того, в списке отсутствовал Камчатский край.
Немного удивил Яндекс.Навигатор, и это с учетом того, что онлайновая браузерная карта выше всяких похвал. При этом весьма забавно, что в том же Богородицке можно указать точный адрес, он будет обозначен маркером на карте и маршрут до него построится. Но «последняя миля» будет отображаться неверно.
Ну а больше всех не любит небольшие города Sygic. Он их знает только понаслышке.
Немаловажен и вопрос актуальности карт. Тут мы ориентировались на карту Москвы, отмечая присутствие новых известных дорог, эстакад и развязок, открытых в период лето-осень 2013 года. У Прогорода, Ситигида и Яндекса с этим проблем не возникло. У Навитела все искомые нами развязки и эстакады присутствовали, но на пересечении Ярославского шоссе и Малыгинского проезда почему-то отсутствовал разворот под эстакадой. А вот у Sygic карта, как минимум, годичной давности. Ни одного искомого дорожного объекта мы на ней не обнаружили.
Наш выбор по картам : Навител, Прогород и Ситигид.
Маршруты и навигация
Все приложения строят вполне адекватные маршруты. И это самое главное. Небольшие незначительные «глюки» бывают у Навитела. Один из них мы описали в его детальном , но повода для паники тут нет. А вот уменьшить в его настройках чувствительность к пробкам жителям мегаполисов определенно стоит.
Чтобы сэкономить время читателю, соберем информацию по маршрутам и навигации в одну таблицу.
| Навител | Прогород | Sygic | Ситигид | Яндекс | |
| адекватность построенных маршрутов | ок | ок | ок | ок | ок |
| количество альтернативных вариантов | нет | 2 | 1 | нет | 1-2 |
| исключение платных дорог / другие настройки | да / да | да / да | да / да | да / да | нет / нет |
| логика поведения при уходе с маршрута | настраиваемая | возврат на старый маршрут | перестроение в режиме «объезд» | перестроение в режиме «объезд» | |
| пробки на маршруте | да | да | нет | да, но на коротком расстоянии | да |
| предупреждения о превышении скорости | да | да | да | да | нет |
| предупреждения о камерах | да | да | да | да | да, с опозданием |
| DPOI | да | да | нет | да | да |
| работа без подключения к Интернет | да | да | только offline | да | функции сильно ограничены |
Удобнее всего будет ездить с Прогородом, Ситигидом и Навителом. Sygic, несмотря на весьма практичный интерфейс, работает только в режиме offline: никаких пробок и DPOI. Вдобавок его логика поведения при уходе водителя с маршрута далека от цивилизованной. Но с Яндексом проблем не меньше: он не предупредит о превышении скорости, скажет про камеру только когда вы будете проезжать мимо нее, а без подключения к Сети в приложении не будет работать поиск и прокладка маршрутов! Зато он перед началом навигации предложит пользователю альтернативные варианты маршрута, которые можно будет просмотреть на карте и выбрать наиболее подходящий. Прогород тоже так умеет, хотя пользуется несколько иной логикой. Обе эти функции нам очень понравились.
Наш выбор : Прогород и СитиГид. С некоторым натягом - Навител и Яндекс.
Тесты
Мы провели ряд тестов, чтобы показать, насколько быстро будут работать эти приложения на различных мобильных платформах. В отдельную таблицу мы свели результаты, полученные на двух системах, основные характеристики которых таковы:
Обе платформы бюджетные, но в планшете установлен 4-ядерный SoC, а в смартфоне - одноядерный, но с более современной архитектурой. Будет ли между ними какая-либо существенная разница? В таблице данные смартфона и планшета разделены двумя вертикальными чертами.
| Навител | Прогород | Sygic | Ситигид | Яндекс | |
| Время загрузки, с | 11 || 8 | 5-6 на обеих платформах | 6 || 3 | 12 || 9 | ≈2 во всех случаях |
| Время поиска спутников | в соответствии с технологиями GPS (1-2 мин.) | ≈20-30 сек.** на обеих платформах | |||
| Время прокладки маршрутов, с* | 2,5-5 || 1,5-5 | 1-4 на обеих платформах | 12-20 || 6-15 | ≈2 во всех случаях | -*** |
| Утилизация вычислительных ядер в движении, % | 60 || н.д. | 70 || н.д. | 40 || 15 | 65 || 19 | 20 || н.д. |
| Плавность прокрутки и масштабирования с отключенными «пробками» | с сильными рывками | с рывками | относительно плавно | относительно плавно | плавно |
| Объем сетевого трафика на трассе, МБ/ч | 2,5 | н.д. | - | н.д. | н.д. - 4**** |
| Объем сетевого трафика в мегаполисе, МБ/ч | 4,5 | 1 | - | 1 | 3,5-6,5**** |
* через тире указано время прокладки двух маршрутов: с юга Москвы и до г. Оленегорска в Мурманской области; второй маршрут - до Владивостока.
** уже через две секунды после загрузки вы видите свое примерное положение на карте, определенное по сигналам базовых станций и их координатам. А еще через 20-30 секунд аппарат «цепляется» за спутники.
*** маршруты рассчитываются на удаленном сервере, и время построения зависит от качества связи в конкретный момент времени. В зоне действия GPRS или EDGE может занять минуту и более, но при хорошей связи - 2-3 секунды.
**** первая цифра указывает на объем трафика в случае заранее загруженной полной карты региона. Вторая цифра - при пустом кэше карт.
Итак, главная проблема быстродействия приложений - неумение использовать все доступные вычислительные ядра SoC. И хотя многопоточность декларируется практически всеми разработчиками, на практике на 4-ядерной системе это выливается в то, что одно ядро грузится на 100%, второе процентов на 30, а два других прохлаждаются. Исключение составляет только Яндекс. Приложение не только имеет низкие требования к ресурсам системы, но и при активной работе на четырех ядрах может показывать суммарную загрузку в 60-70%, что говорит о том, что у кого-то все-таки получается создавать многопоточные приложения (разработчики бенчмарков не в счет).
Если говорить о плавности и комфорте работы с картой, то Яндекс, Ситигид и Sygic ведут себя вполне прилично, чего нельзя сказать о Навител и Прогород. Прокрутка карты и масштабирование у них проходят с заметными рывками, притормаживаниями и одергиваниями. Причем, если ваш смартфон имеет разрешение 1280 пикселей и более - ситуация будет усугубляться вне зависимости от типа установленного SoC в системе.
Наш выбор : Яндекс, СитиГид и, наверное, Sygic. Последний уж очень долго строит маршруты, но в остальном очень шустр.
Особенности приложений
Поскольку конкуренция велика, разработчики стараются добавить своему творению несколько изюминок, и грех не упомянуть о них.
Навител Навигатор
Прогород
Тут мы отметим только режим дополненной реальности, который будет вполне сносно работать на тех устройствах, где присутствует датчик ориентации.
Возможно, он пригодится при автопрогулках в путешествиях.
Sygic
Sygic старается привлечь пользователей всякими полезными и интересными мелочами: универсальным поиском, фотографиями на карте с Panoramio, POIс Foursquare, статьями с Wikipedia (если у тех есть привязка к координатам), боковой панелью и маршрутным компьютером. Все подробности в соответствующем .
СитиГид
Ничего необычного.
Яндекс.Навигатор
Главный козырь - универсальный поиск с системой распознавания речи и голосовых команд, который работает весьма неплохо.
Итоги
Итак, больше всего упоминаний с пометкой «наш выбор» досталось СитиГиду и Прогороду. Навител, Яндекс.Навигатор и Sygic отстают. Но если оценивать приложения по их основным функциям (качеству карт и процессу навигации), то перед нами вырисовывается вот такая тройка лидеров: Прогород, СитиГид и Навител. Самый дешевый из них - Прогород. Самый дорогой - СитиГид. А Навител получит звание самого недружелюбного из-за невозможности переноса приложения на другие смартфоны.
Если вы проживаете в одном из российских мегаполисов, в вашем регионе надежная и качественная сотовая связь, вы не боитесь камер контроля скорости и предпочитаете не тратить лишние деньги, то вполне можно воспользоваться Яндекс.Навигатором. Он бесплатный. А кроме того, шустро работает и обладает практичным интерфейсом.
Sygicможет быть полезен при заграничных поездках. Однако обойдется он совсем недешево. В этом плане Навител в разы более привлекателен, но информации о трафике в нем не будет. Равно как и у Sygic в России.
P.S. Лучше один раз увидеть, чем сто раз услышать. Потому мы призываем самостоятельно опробовать приглянувшиеся приложения и сделать свои собственные выводы. Но при этом важно не забыть, что все навигационные программы без исключения после их удаления через диспетчер приложений оставляют почти все свои файлы во внутренней памяти телефона на веки вечные, «замораживая» сотни полезных мегабайт. Не забудьте их потом удалить вручную, ориентируясь по названиям папок на накопителе. Ох, Android, Android…
В этой статье мы расскажем о том, какой должна быть хорошая навигация по сайту, и как ее сделать действительно эффективной. Материал пригодится в первую очередь тем, кто хочет создать свой сайт самостоятельно.
Навигация – это методы, приёмы и специальные элементы, которые позволяют перемещаться между его страницами. От того, насколько хорошо она продумана, зависит всё: и конверсия, и успех продвижения ресурса.
Это можно сравнить с планировкой в доме. Если планировка хороша – то вы без проблем найдёте нужную вам комнату, не перепутаете вход на кухню со входом в гостиную. Если же ходов, коридоров и дверей много, то можно заблудиться в таком доме.
Аналогично и с сайтами. Если навигация плохая, много ссылок, которые не ведут куда нужно, или непонятно, куда заведут – пользователи путаются, и не могут найти нужные страницы и необходимую им информацию.
Для поисковых систем хорошая, логичная навигация тоже важна. Поисковая машина должна понимать роль данной страницы на вашем сайте. Также грамотно продуманная навигация улучшает поведенческие факторы, так как пользователи быстрее находят нужную им информацию.
Основные элементы и приёмы навигации
Предлагаю сначала ознакомиться с основными элементами, которые помогают перемещаться по сайту.
Навигация в широком смысле включает в себя множество приёмов и элементов, основная задача которых – дать пользователю перейти на нужную страницу и ознакомиться с информацией.
Одним из таких элементов, который давно уже стал обязательным на сайте – это логотип компании, при нажатии на который попадаем на .
Например, вот здесь достаточно нажать на логотип, чтобы снова оказаться на стартовой странице.
Этот приём уже привычен для пользователей, и позволяет вернуться на домашнюю с любой страницы сайта.
Второй «классический» элемент – это верхнее меню .
Оно располагается под шапкой и состоит из кнопок или ссылок, которые ведут на основные разделы сайта. Такое меню может быть более сложным, с выпадающими списками, которые ведут на подразделы или отдельные страницы.
В последние несколько лет стал популярен ещё один прием – это меню-гамбургер , в котором все ссылки спрятаны на схематические три горизонтальные черточки. Этот элемент сначала жил только на мобильных устройствах, но сейчас всё чаще встречается и на десктопных версиях сайтов:
Также на некоторых сайтах вы можете увидеть вертикальное меню . Его используют чаще всего в том случае, если в верхнее меню не удалось уместить всё необходимое, или если нужно облегчить пользователям переход в некоторые рубрики.
А может оно жить и самостоятельно, без горизонтального меню вверху страницы. И таких меню может быть даже несколько, как здесь – слева и справа:
(микроразметка) — ещё один элемент навигации, который не только задает иерархию страниц, но и позволяет легко вернуться к нужному разделу, или на главную, с любой страницы:
Линки внутри статей на другие страницы сайта – это тоже навигационные элементы. Например вот такие:
Они не только помогают перейти дальше, но и хороши с точки зрения 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 смартфоны могут нести на себе еще функцию борт компьютера, но это совсем другая история:).
Немного фото из гугла для представления о том, как выглядит такая связка на мотоцикле.
Удаление вирусов
