Как сделать правильную навигацию на ресурсе. Создание панели навигации

Ни один интернет-сайт, даже самый информативный и интересный, не привлечет внимания людей и не станет популярным без удобной и интуитивно понятной навигации. Навигация на сайте – крайне важный этап его разработки. Продуманная система навигации позволяет посетителю легко и быстро находить на сайте любую информацию, не тратя лишнее время на переходы между страницами и поиски тех или иных ссылок. Также удобная навигация является немаловажным аспектом, увеличивающим рейтинг сайта в поисковых системах – поэтому от того, как поисковые системы (например, Google) оценивают контент и вложенность страниц сайта, зависит структура навигации.
Создать сайт самостоятельно с Wix.com

Инструкция

Представьте, что вам необходимо навестить товарища в госпитале. Большинство региональных медицинских учреждений в наши дни - это огромные комплексы, состоящие из множества отдельных зданий, соединенных коридорами, лестничными пролетами, лифтами и др.

Лифты, к примеру, доставят вас прямо в приемный покой, другие - к кабинетам специалистов, третьи - предназначены для служебного пользования. Это очень сложно и запутано, тем не менее, люди должны быть в состоянии найти свой путь внутри корпусов интуитивно и быстро. Как же решается эта проблема?

С помощью указателей. Независимо от того, куда вы направляетесь, на каждом углу и на видных местах размещены указатели основных сервисов. Легко найти свой путь вокруг, сверяясь с указателями, по мере продвижения к цели. Кафе, аптечный киоск, регистратура, приемный покой, скорая помощь, главный вход и другие ключевые указатели - ориентиры появляются на вашем пути с соответствующими стрелками, чтобы направить вас в нужное место, независимо от того, где вы находитесь в комплексе.

Как только вы попадаете в какую-то определенную зону, например, поликлинику, то появляются более конкретные указатели – лаборатория, рентген, терапевт, хирург и т.д. Несмотря на то, что вам придется пройти через три коридора, пересечь холлы и бесчисленные повороты, вы можете легко найти кафе, а затем вернуться в исходное положение. Вам не нужно запоминать весь путь или иметь при себе карту здания. Вам просто нужно следовать указателям, чтобы попасть по назначению.

Эффективная навигация по сайту

С точки зрения создания эффективной навигации , вебсайты очень похожи на медицинские комплексы, о которых мы говорили выше - независимо от того, какую цель вы преследуете, посетителям вашего сайта нужно быстро и легко найти нужную информацию или продукт. Как множество указателей в большом здании, ваши помогут посетителям найти материал, в котором они заинтересованы.

В качестве примера, предлагаю посмотреть на меню данного сайта, расположеное слева от вас. Здесь вы найдете названия и соответствующие навигационные ссылки на основные разделы сайта, кликнув по которым, попадете в нужное место.

Подобно уточненным указателям отделов в больших комплексах, вторичные навигационные ссылки указывают путь к определенным страницам. Примером таких ссылок на этой странице служит меню "Посты по теме" , расположенное в верху страницы, справа от вас, а также перечень ссылок на все статьи данного раздела, размещенных в конце этой статьи.

Слишком часто, общая система навигации сайта исчезает или изменяется на внутренних страницах. Это очень похоже на движение по коридору в указанном направлении, но вдруг указатели на главный вход, кафе и другие знаки исчезли. Вы, естественно, задумаетесь о том, сможете ли вы найти дорогу к вашей цели!

Ваша система навигации должна быть устроена таким образом, чтобы посетитель имел возможность добраться до любой из страниц сайта максимум за три клика мышью.

Начинайте со структуры сайта

При планировании нового сайта или редизайне старого, подумайте о его структуре в первую очередь. Например, иногда помогает визуально представить будущие страницы сайта: используйте карточки, напишите тему каждой страницы на отдельной карте и сгруппируйте их вместе, положив на стол или закрепив их на листе бумаги. Если вы предпочитаете линейный подход, просто перечислите темы каждой страницы и сгруппируйте их вместе. Это - структура вашего будущего сайта. В качестве примера можете посмотреть на карту любого качественного сайта.

Первичная навигация

Выделенные цветом и шрифтом заголовки - это основные навигационные ссылки , которые должны находиться на каждой странице. При разработке сайта, встройте эти ссылки в дизайн страницы таким образом, чтобы они повторялись последовательно на каждой странице в том же месте. Предусмотрите место для расширения в будущем, если понадобится!

Информационные ссылки

Желательно отделить основные навигационные ссылки вашего сайта от информационных ссылок. Посетители должны быть в состоянии найти информационные ссылки на любой странице, но такие ссылки не должны занимать главенствующую позицию в дизайне.

Зачастую ссылки, такие как, например, «контакты», «карта сайта», «логин», «часто задаваемые вопросы» и т.д. выполняются в более мелком шрифте в верхней части, под названием сайта, или в футере страницы, в то время, как основные навигационные ссылки , обычно располагают в т.н. «меню» на левой или правой стороне страницы.

Расположение основных навигационных ссылок

Разместите ваши навигационные ссылки в порядке их важности - подумайте о том, как пользователи будут перемещаться по вашему сайту. Они будут сканировать ссылки слева направо или сверху вниз, пока не найдут то, что они ищут. Разместите основные навигационные ссылки , которые вы считаете наиболее важными, в начале списка. Храните их в том же порядке, на каждой странице.

Вторичные навигационные ссылки

• отдельная колонка ссылок непосредственно под основным меню;
• отдельная колонка ссылок на новый элемент страницы, выполненная в цвете рядом с основным меню;
• внутри основного содержания (контента) страницы с кратким описанием или изображением, сопровождающим каждую ссылку.

Чем больше ваш сайт, тем больше вероятность того, что вы будете иметь несколько слоев вторичных навигационных ссылок . Пока пользователи уверены, что движутся в правильном направлении, они будут продолжать прогрессировать через сайт, но постарайтесь свести к минимуму количество ссылок, по которым необходимо кликнуть, чтобы добраться до необходимой информации.

Навигационные ссылки в контексте страницы

Советы по разработке эффективной навигации по сайту

Не открывайте страницы в новых окнах

Это сбивает с толку пользователей и отключает их кнопки "наверх ". Они окажутся, в конечном итоге, с множеством открытых окон и могут закрыть их все в отчаянии.

Не перемещайте элементы навигации от страницы к странице

После того, как пользователь узнал, где расположено меню с основными навигационными ссылками на странице, не изменяйте их место расположения и порядок, перемещая их в футер на некоторых страницах или полностью исключив их на других. Хотя это может показаться скучным или препятствием творчеству, помните, сайт должен быть функциональным, прежде всего, иначе никто не оценит ваше творчество.

Не пытайтесь поставить все ссылки на каждой странице

Если ваш сайт не является относительно небольшим, не пытайтесь расположить ссылки на каждой странице на все другие страницы ресурса. Футер, переполненный перечнем ссылок или боковое меню навигации , которое имеет длину более двух страниц, сбивают с толку и просто несут больше информации, чем посетителю необходимо. Создавайте логически организованные страницы с помощью вторичной навигации и добавьте карту сайта , чтобы помочь пользователям быстро найти страницу, которую они ищут.

Используйте "крутые" современные технологии с умом

Созданные на базе Flash, DHTML или JavaScript выпадающие меню, кажется, решили проблему глубокой навигации путем отображения дополнительных ссылок при наведении указателя мыши, но, обычно, применение данных технологий не требуется. Если вы любите или должны разместить их, не забудьте также расположить простые текстовые ссылки навигации в футере страницы для поисковых роботов и пользователей, у которых могут быть не установлены JavaScript или Flash.

Используйте цвет, чтобы выделить ссылки

Используйте CSS стили, чтобы изменить цвет ссылки при наведении курсора мыши на нее. Ваши ссылки могут и не быть подчеркнуты, но обязательно сделайте их другого цвета, чтобы они выделялись на фоне окружающего текста. Не ожидайте, что посетители будут наводить курсор мыши на каждое слово на странице, чтобы узнать это ссылка или нет!

Точно так же, не делайте цвет обычного текста того же цвета, что и ваши ссылки. Ваши бедные посетители будут вынуждены тщетно кликать и кликать по этому тексту. Если, к примеру, ваши ссылки окрашены в красный цвет, то не выделяйте важные слова или предложения в тексте красным цветом тоже!

Используйте описательный текст в атрибуте "аlt" для изображений - ссылок

Обязательно следует добавить описательный текст в атрибут "аlt " - как правило, это те же слова, которые вы бы использовали, если бы составляли текстовые ссылки. Это позволит посетителям, которые не могут видеть изображения на своем браузере, продолжать использовать ваш сайт и поможет поисковым роботам определить, о чем повествует данная страница.

Последовательность, последовательность и еще раз - последовательность

Прежде всего, будьте последовательны! Какую структуру навигации вы бы ни выбрали, не заставляйте посетителей изучать ее опять при переходе из одного раздела сайта на другой. Как только они находят свой путь вокруг, дайте посетителям возможность перемещаться по сайту не задумываясь.

Желательно устанавливать в конце каждой страницы кнопки «наверх» и возврата на предыдущую страницу. Если вы осуществляете онлайн продажу товаров или услуг, то обязательно установите в соответствующих местах такие кнопки как, например, "заказать", "купить", "забронировать", "оплатить" и.т.п. Конечно, все эти кнопки не являются заменой навигационного меню , а только дополняют его, для повышения удобства при использовании сайта.

Эффективная структура навигации является базой вашего сайта - потратьте некоторое время, чтобы как следует обдумать и протестировать ее с реальными пользователями, чтобы убедиться, что ваш фундамент является стабильным и прочным.

Рекомендации от Google по структуре навигации по сайту

Конркурентность в интернете очень большая. По одному запросу пользователю предлагается миллиарды сайтов. И большая часть из них с весьма качественным содержанием. Чтобы выиграть в этой гонке, нужно предусмотреть абсолютно всё, и сделать идеально.

В этой статье мы рассмотрим такую важную сторону, как навигация. Вы узнаете о том, как сделать удобную навигацию сайта, улучшить юзабилити и поведенческие факторы. Это всё положительно отразится на симпатии посетителей и поисковых систем.

Главное меню - это основной элемент навигации сайта. Оно появляется на первом экране, то есть его видно без прокрутки страницы. Традиционное место для него над или под шапкой, и лучше придерживаться традиций. Главное меню делают горизонтальным.

• Каталог продуктов или страница с портфолио.
• Способы доставки и оплаты.
• Страница о компании или об авторе.
• Сведения о возврате средств и гарантии.
• Страница с отзывами.
• Скидки и акции.
• Обратная связь.
• Блог.
• Карта сайта.

Для каждого сайта может быть свой список страниц в навигационное меню. Рекомендуется делать 5-7 страниц. Если же их получается больше, то лучше добавить второй ряд для меню. У пунктов меню могут быть подпункты. Их тоже лучше не делать слишком много – список подпунктов должен помешаться на один экран, без прокрутки.

Иногда бывает полезным выделить какой-то из пунктов меню. Например, можно отметить цветом или шрифтом. Это помогает привлечь внимание.

О том, как работать с меню в WordPress можно узнать .

Форма поиска

Она необходима, особенно если проект большой, особенно на интернет-магазине. Форму поиска лучше расположить где-то рядом с главным меню. Иногда бывает практично встроить форму в само меню.

В WordPress поиск присутствует в стандартной комплектации. Но его функции далеки от идеала. Поэтому лучше использовать какие-либо дополнительные плагины, чтобы улучшить его, например, .

Использование подвала

Многие вебмастера игнорируют это пространство, думая, что раз оно внизу, то никто туда не заглянет. Однако, подвал помогает посетителям, которые уже прокрутили страницу до конца. Познакомившись с материалом, можно легко перейти в нужное место сайта.

Чтобы сделать удобную навигацию сайта, нужно задействовать пространство подвала. Вот какие полезные элементы можно там установить:

• Ссылки на все рубрики и страницы. Если в главном меню вы были ограниченны 5-7 страницами, то в подвале можно не ограничиваться.
• Все контактные данные – электронные почты, адреса мессенджеров, номера телефонов, ссылки на обратную связь и другое.
• Ссылки на аккаунты в социальных сетях.
• Можно также добавить логотип и название сайта, бренда.

Хлебные крошки

Хлебные крошки - это дополнительный навигационный элемент, который помогает пользователям ориентироваться. Он представляет собой цепочку ссылок, которая ведёт от текущей страницы к главной. То есть, где бы ни находился посетитель сайта, он всегда сможет вернуться на главную.

Такое название элемент получил от сказки “Генезель и Греттель”. Похищенный Гензель бросал хлебные крошки, чтобы помочь Греттель найти его.

• Их традиционное и привычное место – вверху слева.
• Шрифт должен быть невыразительным, и быть на втором плане, относительно всего остального текста.
• Каждый раздел в крошках должен быть кликабельной ссылкой, но не последний. Последний раздел должен наименоваться так же, как и текущая страница.
• Хлебные крошки должны быть на всех страницах сайта, кроме главной.

Для создания хлебных крошек в WordPress можно использовать специальные плагины. Например, .

Боковое меню

Чтобы сделать удобную навигацию на сайте, обладающем обширной структурой, нужно создать дополнительное боковое меню. В нём нужно показать подразделы разделов. При этом лучше сделать так, чтобы это меню не отображалось на всех страницах, а было лишь на разделах, подразделы которого в нём демонстрируются.

Кнопка для возврата наверх

Чтобы посетителю не пришлось долго прокручивать страницу, находясь в её середине, нужно организовать кнопку, клик по которой быстро переведёт в шапку сайта. Этот простой элемент можно также реализовать с помощью плагинов, о которых было рассказано .

Карта сайта

Карта - это страница, на которой находятся ссылки на все остальные страницы. Что-то вроде оглавления в книге, но намного удобнее, так как клик по тому или иному пункту карты переводит в нужную часть сайта. Этот элемент навигации также помогает сориентироваться и представить структуру.

В WordPress сделать карту сайта можно .

Наступила эпоха смартфонов, а число людей, пользующихся мобильным интернетом чрезвычайно возросло. Поэтому для любого бизнеса, будь он онлайн или в офлайн, просто необходима хорошая мобильная версия сайта.

Обладая удобной мобильной версией сайта, вы закладываете фундамент сильного онлайн присутствия. И наоборот, если у вас ещё нет удобной мобильной версии сайта, это ставит под угрозу ожидаемый рост бизнеса и возможную прибыль.

Что выберете вы? Расположить к себе новых активных клиентов и увеличить рост бизнеса? Если да, то самый верный путь - сделать ваш веб-сайт доступным не только для пользователей ПК и ноутбуков, а также и для пользователей смартфонов и планшетов.

Если вы решились создать сайт, адаптированный под мобильные устройства, либо же он у вас уже есть, то вам просто необходимо знать важные составляющие мобильного сайта, которые требуют повышенного внимания.

Навигация - это ключевое. Смартфоны больше не выпускаются с маленьким расширением экрана, наоборт размеры экрана становятся все больше и больше. Сенсорной системе смартфонов нужна удобная навигация по сайту, для удобного просмотра. Одно неверное нажатие может вывести из себя пользователя и он закроет ваш сайт.

• У 58% американских потребителей есть свой смартфон.
• Более 1,2 миллиарда заходят в Интернет со своих мобильных телефонов.
• Глобальный мобильный трафик в настоящее время составляет 15% от всего интернет-трафика.
• Ни один размер экрана мобильного устройства не занимает больше, чем 20% рынка.
• 61% людей лучше относятся к тем брендам, у которых есть адаптивный мобильный сайт.
• 60% покупателей используют свои смартфоны в магазине, и еще 50%, по пути в магазин.
• Пользователи планшетов тратят на 50% больше, чем пользователи ПК.
• Поиск в Интернете через мобильное устройство составляет четверть от всех поисков.

Вышеуказанная статистика показывает достаточно ясно, куда движется всемирная паутина. Революция смартфонов расставляет все по местам. Переход от ПК и ноутбуков на мобильные устройства вынуждает владельцев сайтов и веб-дизайнеров, ориентироваться на клиентов, особенно это касается представления своего делового имиджа. Меняется не только режим доступа в сеть, меняются нужды пользователей сайтов. Люди начинают пользоваться мобильным интернетом более целенаправленно. Конкретными задачами, выполняемыми на мобильных устройствах могут быть поиск местонахождения, получение выписки по банковскому счету, обновления социальных сетей, а также расписание общественного транспорта. Использование смартфона для выхода в интернет становится типичным не только во в длинных очередях, но и у себя дома.

Смартфоны, обладая ограниченным пространством экрана, ставят перед пользователями и владельцами сайтов проблему навигационной области действия. Эффективная и плавная навигация необходима для поиска нужной информации с помощью пальца.

Владельцы сайтов и веб-дизайнеры должны обратить внимание на следующие моменты:

• Потребности посетителей
• Возможные вопросы, которые у них возникают
• Существующие ограничения мобильных устройств
• Непонятные элементы сайта

Все эти аспекты важно учитывать при проектировании сайта для мобильных устройств, в частности его навигации. В следующих абзацах, вы узнаете о необходимости плавной навигации для мобильных сайтов и лучшие способы ее создания для мобильной версии сайта. Читайте и и примите это во внимание, если, конечно, вы хотите получить положительный отклик от ваших пользователей.

Поставьте себя на место пользователей сайта

95% пользователей ищут “местную” информацию через мобильный интернет. Поэтому мобильные сайты должны иметь местоположение, контактную информацию на видном месте. Просмотрите аналитику мобильного трафика, и найдите наиболее частые поисковые запросы пользователей мобильного интернета. Упомяните ссылку на ваш сайт в его мобильной версии, чтобы серьезные клиенты могли детально ознакомиться с вашей компанией, используя ноутбук или ПК.

Адаптивный веб-дизайн

Веб-дизайнеры при проектировании интерфейсов для мобильных устройств не знают, какое устройство будет в распоряжении конечного пользователя. Это, в свою очередь, ставит задачу создавать удобные мобильные сайты. Для ее решения нужно использовать концепцию адаптивного веб-дизайна. Его инструменты, например, CSS медиазапросы, помогают в решении таких проблем, как расположение, размер и контент.

Создавая адаптивный сайт для мобильных устройств, или, улучшая уже существующий, необходимо использовать передовые приемы создания проектирования плавной навигации.

Несколько лучших приемов, в частности, как проектировать меню для маленьких экранов рассмотрены ниже!

1. Вкладок меню должно быть минимум

Максимальное количество вкладок меню - 5. Если это работает, могут быть добавлены выпадающие списки. Тем не менее, этот прием может оказаться достаточно сложным, если вы перепроектируете уже существующий веб-сайт, с длинным навигационным меню, в мобильный сайт.
Для сайтов электронной коммерции, требуется многоуровневая навигация, но при этом, никогда не используйте больше двух уровней навигации.

2. Минимизируйте число кликов

Предоставьте возможность пользователям мобильных устройств добраться до желаемого раздела сайта в минимум кликов. При этом, разместите кнопку “Назад” на видном месте, иначе они могут запутаться. Чем меньше нужно кликов, чтобы достичь искомой области сайта, тем больше шансов привлечь пользователей.

3. Предложите плавную навигацию

С осторожностью размещайте разделы в навигационном меню и проанализируйте важность каждого из них. Наиболее важные элементы должны быть помещены в верхней части навигации, а список других внизу. Для подробных меню, может потребоваться прокрутка, если экран смартфона маленький.

4. Ограничение высоты заголовка

Используйте плавные, не отвлекающие заголовки и ограничьте их высоту. В конце концов, контент под заголовком имеет большее значение и привлекает внимание целевой аудитории. Пользователи сайта должны иметь четкое представление о его навигации ни на что не отвлекаясь.

5. Учитывайте портретный режим просмотра веб-сайта

Пользователи мобильного интернета открывают веб-сайт в портретном режиме вместо альбомного. Навигация должна быть адаптирована соответствующим образом. Предложите возможность “просмотра сверху вниз” вместо просмотра всей страницы целиком. Для этого необходимо минимальное количество навигационных разделов.

6. Выпадающая Навигация

Вложенные или выпадающие меню хороши для веб-сайтов, если они содержат там какой-либо контент. Это также неплохо работает, если на сайт планируется добавить еще несколько разделов.

7.Примите решения о самых важных вещах

Принимая решение о том, каким будет меню, подумайте о следующем:

• Топ лучших и важных страниц вашего сайта
• Топ лучших разделов вашего сайта
• Возможные действия пользователей на сайте
• Страницы, которые удовлетворяют потребностям пользователей

Чем быстрее пользователь достигает нужного места, тем лучше. Направляйте их на прямой путь, с помощью четкого призыва к действиям.

8. Сделайте навигацию понятной

Меню должно быть написано ясным и понятным языком. Посетитель должен уяснить, в каком направлении ему идти. При использовании символов, сделайте их интуитивно понятными. Условные обозначения, такие как “+” или “>” могут быть использованы, для того, чтобы объяснить посетителям, что в меню есть больше опций для выбора.

9. Улучшите UX с помощью шрифтов и контраста

Избегайте использования мелкого текста, который пользователям необходимо увеличивать, чтобы увидеть. Поисковые системы, такие как Google и Bing, не считают мелкий текст user-friendly подходом. Шрифт Taller с дополнительным пространством между буквами станет лучшим выбором. Arial, Courier, Times New Roman являются типичными шрифтами, используемыми для мобильных веб-сайтов. Учитывайте стайл гайд вашего бренда при принятии решения о стиле и размере шрифта. Но что бы вы не использовали на вашем мобильном сайте, это должно помогать прочитывать текст без масштабирования.

10. Создавайте веб-сайты под сенсорные устройства

Обычному пальцу требуется 44 пикселей для точного нажатия кнопки. Точность, которая необходима для управления сенсорным экранам зависит от размера пальца. Если размер объектов на сайте менее 40 пикселей, это обернется для вас плохой навигацией. Так как для пользователей в большинстве случаев нелегко попасть в нужный значок, следовательно, необходима обратная связь навигации. Она может заключаться в изменении цвета, шрифта, или в любом другом визуальном сигнале. Такая обратная связь может помочь пользователям быть уверенными в том, что они выбрали правильный объект.

Если у вас на сайте многоуровневая навигация, то выпадающее меню должно появляться не при наведении на него курсора, а при нажатии на него. Для ПК это работает отлично, но для мобильных пользователей - просто катастрофа.

Обычным делом для навигации является использование изображений и графических кнопок. Они ведут посетителей в правильном направлении и, следовательно, хороши в использовании на домашней странице мобильного сайта. Но при этом, избегайте их применение в качестве первичной навигации в футтере страницы.

Пусть ваш сайт будет выглядеть одинаково на всех девайсах. Визуальная тема и шрифт должны быть одинаковыми как для самого сайта, так и для его мобильной версии. Тем не менее, их навигация должна различаться

Добейтесь того, чтобы навигация вашего мобильного сайта помогала пользователям совершать действия, необходимые на сайте. Используйте контент согласно потребностям пользователей.

Как оптимизировать сайт под сенсорные экраны и крошечные кнопки?

Задача, которая стоит перед веб-дизайнерами заключается в том, что нужно создавать веб-сайты для сенсорных экранов и маленьких кнопок. Недостаточная точность нажатия нужной клавиши увеличивает шансы того, что пользователь не попадет по ней пальцем. Эту проблему можно решить с помощью использования кнопок вместо ссылок, либо же, предоставлять больше пространства между объектами на сайте. Большая навигационная кнопка помогает пользователям с сенсорными экранами. Ниже приведены несколько советов по оптимизации сенсорных экранов и вкладок:

• Узнайте основную цель пользователей сайта,и, в зависимости от этого, поместите строку меню в верхней части страницы или снизу. Для контентоориентированных веб-сайтов, она может быть размещена в футере.
• Вы можете скрыть строку меню, если есть необходимость в большем пространстве, которое нужно для просмотра контента. Пусть развернутое меню появляется только при нажатии.
• Меню можно размещать в верхней части экрана, а кнопку навигации в футере.
• Строка меню должна быть короткой и широкой. Это поможет разместить в ней более длинные названия разделов.
• Уменьшите размер изображения в хэдере или используйте вместо него логотип.
• Покажите существующую последовательность в стиле, типографике и в цвете кнопок навигации.
• Избегайте использования огромных изображений и графики.
• Используйте короткий текст в кнопках меню и в заголовках разделов. Хорошей альтернативой может стать использование сворачивающегося меню.
• Учитывайте популярные айтемы, которые большинство пользователей хотят видеть на главной странице.

Чего следует избегать при улучшении навигации мобильной версии сайта?

Пользователи мобильных сайтов не любят большое количество кнопок на сайте, из которых нужно выбирать. Чтобы их не разочаровывать, просто не делайте следующие вещи:

• Не предлагайте им много раз выбирать на что нажать.
• Огромное “нет” горизонтальной прокрутке сайта.
• Избегайте управления путем наведения.
• Избегайте меню-слайдеров.
• Упрощение сайта не должно сделать его скучным для посетителей.
• Создайте интуитивно понятную навигацию.
• Пусть пользователи могут быстро и легко просмотреть всю необходимую информацию на сайте

Заключение

Для создания мобильной навигации, веб-дизайнеры используют несколько подходов,кроме того постоянно поялвяются новые. Так как сайты различаются, значит потребности пользователей тоже различаются, и, следовательно, навигация должна быть спроектирована соответствующим образом. Люди, посещающие новостной сайт хотят увидеть заголовки новостей, а те, кто посещает сайты компаний, ищут сведения о продукте или в контактную информацию. Специализированная навигация, построенная в соответствии с нуждами пользователей - верный способ сделать любой сайт успешным.

Хотя навигационные элементы различны для мобильных и веб-сайтов, все равно, самое важное - удовлетворительно отвечать на вопросы пользователей сайта, когда они его просматривают. Плавная навигация обеспечивает быстрые и правильные ответы. Удовлетворение потребностей пользователей означает, что они вновь будут его посещать. Потому как счастливые и довольные клиенты возвращаются.

Продолжайте постоянно оптимизировать мобильную версию сайта и ее навигацию, чтобы отвечать потребностям ваших пользователей.

Если вы веб-дизайнер, какую навигацию вы создаете для мобильных сайтов? Поделитесь в комментариях!

Идея написания этой статьи родилась ещё в новогодние каникулы, когда я объяснял, как сделать навигационные карты на основе спутниковых снимков. Тогда была снята основная часть скриншотов, но заготовка статьи осталась пылиться на задворках винчестера. И вот уже на улице вовсю светит солнце и тает снег, приближается новый походный сезон, а я, наконец, поборол лень и дописал текст.

Сейчас у многих имеются устройства, так или иначе оснащённые спутниковой GPS-навигацией. Это может быть смартфон, карманный компьютер, коммуникатор или же просто навигатор. Во многих случаях качество предустановленных карт оставляет желать лучшего, особенно для пеших походов. Тут могут помочь online-источники спутниковых снимков и карт. Достаточно сравнить два изображения одного участка:

Слева — спутниковый снимок Google maps, справа — тот же участок на карте. Который из них выглядит подробней?

Для создания полноценной растровой карты нам понадобится набор из двух программ, некоторое количество времени и интернет-трафика. Полученными в результате картами можно будет пользоваться на любом устройстве, для которого имеется программа OziExplorer или её аналоги.

Инструкция пошаговая, подробно иллюстрированная и должна быть понятна любому новичку.

Получение спутникового снимка или карты местности

На этом этапе нам понадобится программа SAS.Планета, скачать которую можно на официальном сайте sasgis.ru

Первым делом требуется указать в качестве источника данных Интернет и кэш:

А также выбрать нужный тип карты. Что это будет — спутник или карта Google, карты Яндекса или спутниковые снимки с геопортала Роскосмоса, а то и генштабовские карты — зависит только от Ваших личных предпочтений и качества источника на требуемом участке.

Итак, находим визуально, по координатам или встроенному поиску нужный участок. Определяем требуемую детализацию, увеличивая масштаб изображения. Текущий масштаб указывается слева, под линейкой масштабирования, в относительных уровнях (z14, z16 и так далее). Он пригодится нам на следующем этапе. Ориентируйтесь на то, чтобы нужные объекты были хорошо различимы и не «замылены». Но и не забывайте, что каждый уровень детализации увеличивает размер результирующей карты.

Уменьшаем масштаб до тех пор, чтобы весь нужный участок карты вошёл в экран. Выбираем инструмент «прямоугольное выделение» (вторая слева кнопка на панели инструментов или сочетание Ctrl+R на клавиатуре), и выделяем границы нашей будущей карты.

По окончании выделения появится диалоговое окно «Операции с выделенной областью». Сейчас нас интересует вкладка «Загрузить». Нужный тип карты уже выбран, а требуемый уровень детализации надо выбрать в выпадающем списке (мы его уточняли чуть раньше). Остается только нажать кнопку «Начать».

Спустя некоторое время (зависящее от детализации и площади карты), её участки будут загружены, и в окне появится надпись «Обработка файлов завершена». Окно загрузки можно закрыть, и переходить к следующему этапу — склейке снимков.

Выбираем в меню выделения пункт «Предыдущее выделение», либо нажимаем Ctrl+B на клавиатуре, чтобы заново не выделять ту же самую область, и появится знакомое нам окно.

На этот раз нас интересует вкладка «Склеить». Здесь потребуется настроить большее количество параметров:

• Результирующий формат — формат изображения, в котором будет сохранена наша карта. Для дальнейшей обработки желательно выбирать BMP, хотя он и занимает больше места, но понимается всеми программами и не имеет потерь при кодировании.
• Куда сохранять — здесь надо указать папку и имя файла, в который будет сохранена карта.
• Тип карты — будет автоматически подставлен текущий источник.
• Масштаб — не забудьте выставить нужный уровень детализации. По умолчанию программа выставила низкодетализованный, отображающийся сейчас на экране.
• Наложить — здесь на карту можно наложить дополнительные слои. Такие, как Гибрид для Google maps, где отображены основные дороги и условные обозначения. Иногда может быть полезным для уточнения спутниковых снимков или нанесения на них названий населенных пунктов. Для этого не забудьте прогрузить дополнительный слой с нужным уровнем детализации при помощи метода, описанного выше.
• Создавать файл привязки — отметьте галочкой пункт «.map», он нам пригодится на следующем этапе. В файле будут сохранены географические координаты углов результирующего изображения.

Нажимаем кнопку «Начать» и через некоторое время в указанной папке получаем два файла — изображение с картой и.map-файл привязки к координатам. Некоторые навигационные программы могут напрямую использовать такие изображения. Но для карманных устройств с ограниченным количеством ресурсов лучше всё же сохранить карту в специальном формате.

Обработка снимка в графическом редакторе

Нередко из-за не совсем удачных условий освещения, или мешающей дымки, или в силу ещё каких-то причин спутниковые снимки бывают «слепыми», особенно при отображении их на экране мобильного устройства в яркий солнечный день. Для улучшения можно провести небольшую коррекцию в любом графическом редакторе. Я покажу это на примере бесплатного XnView , но Вы можете использовать любой другой подходящий (от IrfanView до Photoshop), эта процедура везде аналогична.

Но если качество и контрастность полученного на предыдущем этапе изображения Вас полностью устраивает, можете пропустить этот этап.

На снимке выше показано исходное изображение и нахождение пункта меню «Автокоррекция уровней», который можно использовать для автоматической подстройки контраста. На снимке ниже — результат этой операции. Как можно увидеть — цветность и контраст изображения увеличились, различимость дорог и водных объектов тоже немного улучшилась.

Можно использовать также ручной режим — правку контраста и гамма-коррекции (увеличить то и другое):

или Оттенка/Насыщенности/Осветленности. Ориентируйтесь на более подходящих для Ваших условий вариант.

Преобразование снимка в формат OziExplorer

Для дальнейшего преобразования картинки в более компактный формат, понимаемый OziExplorer-ом нам понадобится утилита img2ozf. Скачать её можно бесплатно на официальном сайте OziExplorer: oziexplorer3.com/img2ozf/img2ozf.html . По ссылке — последняя версия утилиты, сохраняющая в ozfx3 формат. Для ozf2-файлов (используются в более старых версиях OziExplorer) потребуется найти более старую версию утилиты. В этом вам поможет поиск .

Устанавливаем и запускаем программу. В поле Source Image Folder указываем путь, по которому лежат подготовленные изображения и соответствующие им.map -файлы. В поле Destination Folder указываем, куда складывать конвертированные карты (если нажать синюю стрелочку слева, будет использоваться папка с исходными файлами). Можно поиграться с количеством цветов (поле Number Colors в левой части). Чем больше количество цветов, тем плавней картинка, но тем больше размер результирующего файла.

Отмечаем галочками нужные для конвертирования изображения и нажимаем большую кнопку Process Image Files to OZF Files.

Программа некоторое время пошебуршит, перерабатывая файлы. При этом в строке статуса отображаются текущие операции. Программа создает несколько уровней детализации для разных увеличений, чтобы не тратить ресурсы мобильного устройства для пересчета больших изображений. Поэтому кодирование происходит в несколько проходов.

Как только в строке статуса появится надпись Completed — конвертирование завершено. В папке, указанной в Destination Folder появятся два файла — .ozfx3 (или.ozf2 для старой версии) и соответствующий ему.map-файл (который, в отличие от исходного, будет иметь имя типа исходное_название _ozf.map).

Теперь осталось оба этих файла залить на мобильное устройство, и указать OziExplorer место, где они лежат.

Например, так выглядит окно OziExplorer со спутниковыми снимками в Windows Mobile:

Вот и все, карты готовы.

Если что-то осталось непонятным — спрашивайте в комментариях — постараюсь ответить.