Взгляд на навигацию в веб-дизайне. Принципы эффективной системы web-навигации Что такое навигация
ЛЕКЦИЯ 1.
ОСНОВЫ WEB: САЙТЫ, НАВИГАТОРЫ И НАВИГАЦИЯ
Этот курс для тех, кто настроен освоить HTML (язык конструирования сайтов), а главное, принять на вооружение те правила дизайна, которые не просто увеличивают число посетителей гипертекстовых страничек, но и улучшают “экологию” глобальной информационной сети . В современном мире разразился настоящий бум сайтостроения. Свои странички в Интернете имеют все: государственные учреждения, большие компании, мелкие предприниматели, магазины, библиотеки, школы, сады, ясли, Президент России и Петр Мячиков. Вероятно, и вы подумываете об этом!
В самом деле, почему нет? В Интернет принимают всех! Вы тоже можете построить свой собственный виртуальный дом. Или вместе с друзьями свить уютное гнездышко для своей школы, а потом ходить друг к другу в гости.
Какими знаниями и умениями нужно обладать, чтобы успешно освоить предлагаемый курс?
Предполагается, что начинающий конструктор умеет:
Ø запускать компьютерное приложение и завершать его работу;
Ø переключаться между экранными окнами приложений и переносить информацию через буфер обмена из одного окна в другое;
Ø писать и редактировать тексты на компьютере;
Ø редактировать графическую информацию;
Ø ну, и кое-что еще из обычного багажа пользователя домашнего компьютера.
Никаких предварительных знаний по HTML, проектированию сайтов, дизайну, а также программированию не предполагается.
Первая лекция содержит вводный материал. Она описывает web-пространство для начинающего пользователя - человека, который, не отставая от технического прогресса, намерен использовать Интернет в своей повседневной деятельности.
Понятие web-пространства
Web-пространство - это мировая совокупность сайтов. Сайт расположен на сервере, серверы соединены между собой при помощи каналов связи.
Понятие сайта
Сайт - это совокупность гипертекстовых страниц (чаще имеющая древовидную структуру) для представления предприятия, фирмы (корпоративные сайты), для представления школ (школьные сайты), частных
лиц (личные сайты). Сайт может осуществлять коммерцию (интернет-магазины), поставлять информационные услуги (сайты для поиска информации,
библиотеки, справочные системы, списки рассылки, обучение). В современном мире сайт становится визитной карточкой , как организации, так и частного лица.
Гипертекстовые страницы, которые составляют сайт, записываются на специальном языке HTML (Hyper Text Markup Language - “эйч-ти-эм-эл”, или “аш-тэ-эм-эль”, используется английская или латинская транскрипция). Этот язык не является, строго говоря, языком программирования, хотя он и интерпретируется браузером. Средства HTML служат для указаний браузеру, в каком виде выводить на экран текст и графику, а также позволяют записывать на страницах гиперссылки.
HTML-разметка (в отличие, например, от Word-разметки) довольно терпима к различным платформам, операционным системам и мощностям компьютера. Это позволяет использовать ее как основу для построения сайтов в Интернете, где разнообразие платформ, ОС и компьютеров очень велико.
Сайты смотрят при помощи браузера - специальной компьютерной программы.
Гиперссылка - это чувствительная область на экране. При щелчке мыши по такой области происходит гипертекстовый переход - браузер загружает другую страницу (она может быть расположена на каком угодно сервере мировой сети).
Чувствительной областью может быть фрагмент текста (обычно он выделяется, синим цветом и подчеркиванием), картинка или фрагмент картинки. Попадание курсора мыши в область действия гиперссылки легко увидеть - он меняет свою форму на указующий перст.
Просмотр сайта
Для просмотра страниц сайта используется специальная программа просмотра - браузер (browser). Браузер интерпретирует указания, записанные разработчиками в обычном текстовом файле (стандартные расширения htm и html), и отображает документ на экране.
Разнообразие браузеров Современные гипертекстовые документы все больше снабжаются средствами мультимедиа: графикой высокого разрешения, звуком, видео, различными спецэффектами, интерактивностью (диалог с пользователем).
Соответственно, разработчики браузеров добавляют в свои продукты средства поддержки этих новых гипертекстовых технологий.
Однако существуют браузеры, которые вообще не поддерживают графики, например, текстовый браузер Lynx. Голосовой браузер pwWebSpeek предназначен для слепых людей. Такие люди не видят картинку, но получают о ней представление, услышав ее описание. Существуют браузеры, использующие тактильный ввод-вывод по азбуке Брайля. Некоторые пользователи работают с Web по телефону. Так, например, устроена система Web-on-Call Voice Browser.
В последнее время становится модным иметь в автомобиле бортовой компьютер с интернет-связью. Так как глаза пользователя заняты дорогой, к браузеру подключают речевой синтезатор.
Из большого числа существующих браузеров наиболее популярным является Microsoft Internet Explorer (около 90% пользователей). Его сверхпопулярность в основном объясняется тем, что этот браузер входит в состав операционной системы Windows и поэтому не требует дополнительных средств и усилий по установке на компьютере.
Управление браузером Microsoft Internet Explorer (версия 6.0)
При запуске браузера открывается окно (рис. 1), которое содержит:
Ø заголовок окна;
Ø главное меню;
Ø панель инструментов;
Ø панель адреса;
Ø рабочую область окна (в ней отображается web-страница);
Ø строку состояния.
Рис. 1. Окно браузера
Ввод адреса
Адрес документа (гипертекстовой страницы) в сети - URL (Uniform Resource Location, универсальный указатель ресурсов) - записывается в адресной строке браузера. Для ввода адреса нужно щелкнуть по адресной строке и набрать в ней URL документа с клавиатуры, например, http://www. *****
Чтение страницы
Загруженная страница (документ) может содержать информацию, представленную в виде текста вместе с картинками (реже звук и видео). После активизации гиперссылки в документе происходит загрузка другого документа, который может находиться на этом же или другом сервере сети. Так как Интернет работает медленно, загрузка страницы может продолжаться от нескольких секунд до нескольких минут (зависит от размера страницы, скорости канала связи и устойчивости работы сети на момент просмотра).
Текстовые ссылки в документе обычно имеют одновременно два выделения: синий цвет и подчеркивание. В момент активизации ссылки цвет ее меняется на красный. Ссылка сообщает о том, что она начинает работать. Если переход по ссылке уже выполнялся, ее цвет становится более приглушенным (пурпурным).
Использование разных цветов для отображения гиперссылки позволяет лучше ориентироваться при просмотре сайтов. Например, в документе может быть несколько разных ссылок на одну и ту же страницу. Просмотр документа по любой ссылке “окрасит” все ссылки на него в пурпурный цвет, что является подсказкой пользователю об уже посещенных местах сайта.
В современном дизайне сайтов часто используют и другой прием оформления гиперссылок: чувствительный текст выделяется цветом, а подчеркивание появляется только в момент зависания над ссылкой курсора.
Не надо забывать, что ссылкой может быть и картинка (например, выполненная в виде кнопки). Однозначным указанием на то, что область на странице является ссылкой, является преобразование курсора в указующий перст в момент зависания над чувствительной областью.
Главное меню браузера
Файл
Основные операции меню Файл (рис.2):
Ø запись на диск текущей страницы;
Ø печать текущей страницы.
Рис. 2. Меню Файл
Правка
Меню Правка позволяет выполнять операции (рис. 3):
Ø копирование выделенных элементов в буфер обмена Windows;
Ø поиск на текущей странице.
Рис. 3. Меню Правка
Меню Вид позволяет выполнять операции (рис. 4):
Ø управление внешним видом браузера;
Ø выбор кодировки и размера шрифта;
Ø просмотр HTML-кода страницы;
Ø прекращение загрузки страницы;
Рис. 4. Меню Вид
Избранное
Позволяет работать с “закладками” (адреса запомненных пользователем страниц).
Сервис
Меню Сервис позволяет (рис. 5):
Ø настроить браузер;
Ø вызвать дополнительные службы.
Рис. 5. Меню Сервис
Справка
Доступ к справочной информации.
Панель инструментов
Панель инструментов (рис. 6) включает в себя кнопки часто используемых команд (они дублируют позиции главного меню).
Рис. 6. Панель инструментов браузера
Кнопки Назад и Вперед
Браузер сохраняет “путь”, по которому пользователь просматривает страницы. Кнопки Назад и Вперед позволяют перемещаться по этой истории, соответственно, назад и вперед.
Кнопка “Остановить”
Когда документ долго не грузится (неполадки на сервере), пользователь передумал или с первых строк понял, что документ не нужен, можно нажать на
Кнопка “Обновить”
Эта команда иногда помогает при явно затянувшейся загрузке (сбой в сети или на сервере). Однако наиболее часто этой кнопкой пользуются web-разработчики, чтобы увидеть изменения после выполнения редактирования htm-файла.
Кнопка “Домой”
Эта кнопка загружает в браузер “домашнюю” страницу, ту, которую браузер загружает автоматически при старте. “Домашняя” страница задается пользователем в настройках браузера.
Кнопка “Поиск”
Кнопка “Избранное”
Добавить закладку на текущую страницу или загрузить документ по имеющейся закладке.
Кнопка “Печать”
Печать текущей страницы.
Настройка Панели инструментов
Панель настройки можно вызвать через меню Вид/ Панели инструментов/Настройка (или щелчком правой кнопкой по панели инструментов):
Рис. 7. Окно настройки панели инструментов
Панель инструментов (справа) можно сформировать по своему желанию, используя заготовки (слева).
Настройка браузера
Вызов панели настроек выполняется через позицию Сервис/Свойства обозревателя главного меню.
Вкладка “Общие”
Вид вкладки показан на рис. 1.8.
Рис. 8. Вкладка Общие панели настройки браузера
Домашняя страница
Устанавливается вводом (копированием) нужного URL в поле “Адрес”.
Вкладка “Дополнительно”
Раздел “Мультимедиа”
Если вас интересует только текстовая информация страницы, а на графику вы не хотите тратить время и деньги, снимите флажок в строке “Отображать рисунки”.
Рис. 9. Пункт “Отображать рисунки”
Вкладка “Программы”
В поле “Редактор HTML” установите “текстовый редактор “Блокнот”.
Рис. 10. Редактор “Блокнот” для быстрого просмотра кода страницы
Стоимость просмотра сайта
Разные провайдеры по-разному начисляют оплату за работу в сети. Одни берут деньги за килобайты, другие - за время подключения к Интернету. В любом случае килобайтный размер страницы прямо пропорционален числу копеек, необходимых для ее просмотра.
Устройство сайта
Рассмотрим устройство сайта на примере
В окне браузера с загруженным сайтом можно выделить следующие важные элементы (рис. 11):
Ø Заголовок окна. Заголовок окна совпадает с заголовком страницы.
Ø Заголовок сайта. Расположен в самом верху страницы.
Ø Логотип. Обычно расположен в левом верхнем углу страницы. На вторых страницах логотип является ссылкой на Главную (начальную) страницу.
Ø Горизонтальное навигационное меню сайта. Обычно располагается под заголовком сайта.
Ø Вертикальное навигационное меню. Обычно располагается под логотипом.
Рис. 11. Элементы гипертекстового документа
Сайт состоит из страниц
Как и печатное издание, например книга, сайт состоит из страниц. Страницы сайта - это файлы с расширением htm (html). Страницу сайта часто называют документом. Как и книга, сайт имеет одну главную страницу (входная
точка, домашняя страница, начальная страница). Именно эта страница указывается в качестве адреса сайта.
В отличие от обычной книги страницы сайта редко листаются по порядку. Благодаря гипертекстовым переходам пользователь переходит со страницы на страницу по контексту (по смыслу, по необходимости получить только ту информацию, которая относится к интересующей теме).
Задание
Попробуйте в браузере, подключенном к Интернету, перейти на сайт *****
Сайты с иерархической структурой
Иерархия - это зависимость по подчинению. Эта структура чаще других (цепочка, таблица) используется для организации страниц сайта. Обычно сайты имеют специальную страницу с названием “Карта сайта”, где иерархия страниц показана в виде системы вложенных списков. Вложенность отражает иерархическую схему сайта, а списочные записи являются гиперссылками на соответствующие страницы.
Пользователь видит полное логическое строение сайта и имеет возможность одним щелчком попасть на любую страницу (рис. 12).
Рис. 12. Карта сайта
Системы навигации по сайту
Перемещение по сайту (навигация) должно быть организовано понятно и удобно для пользователя. При этом приемы навигации на правильных сайтах едины для всех его страниц. Исключение составляет случай, когда сайт имеет самостоятельные подсайты - на них может быть использована собственная навигационная схема.
Удобная навигация
Навигация является удобной, если на любой странице сайта можно легко ответить на три вопроса.
Ø Где я? Пользователь однозначно понимает, где внутри сайта он находится.
Ø Куда я могу пойти? С каждой страницы есть возможность попасть на любую другую, минуя Главную.
Ø Где меню? Пользователю не приходится прокручивать страницу для доступа к навигационным элементам.
Перечисленные ниже книги будут очень полезны для работы на курсах:
1. . Web-конструирование. HTML, БХВ-Петербург,2003.
2. Дмитрий Кирсанов. Веб-дизайн. СПб.: Символ, 1999.
Привет, Уважаемые подписчики!
Только закончил работу над очередным проектом. В нем помимо основного меню, присутствовала так же и навигация . И я решил, что неплохо было бы показать вам, как подобные вещи делаются буквально в несколько строк кода. Причем делается это исключительно средствами html и css.
Такая навигация ставится обычно слева на сайте. Ничего сложного при ее разработке нет. Каждый пункт навигации заключаем в тег
…
. В него ставится ссылка.PSD макет данной вещи для тренировки можно скачать .
Так же данный урок доступен в видео версии , которую можно скачать здесь:
Ну, в общем все! Давайте посмотрим на код, и все станет ясно окончательно.
О ЦЕНТРЕ
ФОТОГАЛЕРЕЯ
ПРЕЙСКУРАНТ ЦЕН
КОНТАКТЫ
Все остальное будем делать с помощью стилей.
Для класса.bar-menu назначаются стили, которые нужны исходя из расположения соседних блоков. У меня в примере ничего кроме этой навигации на странице нет, поэтому я просто задам ему ширину.
Поскольку текст располагается по центу, то проще всего его отцентрировать, задав для тега
выравнивание текста по центру.
Картинки вырезаны, принимаемся писать css код для навигации. Точнее для ссылок навигации! Остальные стили у нас уже есть.
font-family:Tahoma;
font-weight:bold;
И что ж мы увидим?
Почему так? Дело в том, что фоновая картинка расположилась в ссылке ровно на столько, сколько ей позволяет это сделать текст. То есть ширина и высота ссылки определяется лежащим в ней текстом. Это кстати явный признак строчных тегов. Давайте укажем ширину и высоту:
background:url(images/bg-menu-main.jpg) center center;
font-family:Tahoma;
font-weight:bold;
width:190px;
height:27px;
По-прежнему ничего не изменилось.
background:url(images/bg-menu-main.jpg) center center;
font-family:Tahoma;
font-weight:bold;
display:block;
Вроде начинает навигация принимать нужный нам вид:
Добавляем отступ снизу у каждой из ссылок. Так же добавляем padding-top для каждой из ссылок и незабываем его вычесть из высоты:
background:url(images/bg-menu-main.jpg) center center;
font-family:Tahoma;
font-size:10px; color:#056e04;
font-weight:bold;
height:21px;
margin-bottom:10px;
padding-top:6px;
Получаем то, что нужно:
Bar-menu h2 a:hover {
background:url(images/bg-menu.jpg) center center;
font-family:Tahoma;
color:#ffffff;
font-weight:bold;
margin-bottom:10px;
padding-top:6px;
text-decoration:none;
Вот и получилась наше навигационное меню:
Надеюсь, урок будет полезен. С вами был Андрей. Спасибо за внимание. До встречи в очередных уроках!
Эффективность веб-проекта, возможность получения дохода или прибыли от сайта, прямо пропорционально зависит от системы навигации на нем. Навигация сайта входит в основу восприятия целостного веб-дизайна наряду с компоновкой сайта и его структурой. Какую бы навигацию для проекта вы не выбрали, немного любви и творчества не навредит, а скорее оставит только приятные эмоции от путешествия по сайту. Сегодня мы рассмотрим различные примеры навигации.
Наиболее популярными и все еще актуальными «путеводителями» по сайтам являются ролловеры (от англ. rollover). Они могут быть обыграны графикой, либо просто представлять собой текстовую гиперссылку. Ролловеры, как правило, помогают ответить пользователю на вопрос «Где я уже был?».
Навигация на сайте может быть вертикальная, горизонтальная и комбинированная. Вне зависимости от выбора типа навигации, если в ней присутствует основное - логика, можно побудить посетителей просматривать те страницы сайта, которые сам владелец считает приоритетными. Грамотно составленная система навигации позволяет пользователю перемещаться по сайту не задумываясь о своих действиях.
Удобная навигация это:
- возможность попасть на наиболее важные страницы сайта всего за один клик;
- максимум три клика, чтобы перейти от исходной до нужной страницы на сайте;
- использование стандартных и общепринятых элементов навигации;
- визуальное выделение и эффектность элементов навигации;
- возможность пользователю попасть на нужную ему страницу несколькими способами (дублирование элементов навигации).
Какую бы навигацию для проекта вы не выбрали, немного любви и творчества не навредит, а скорее оставит только приятные эмоции от путешествия по сайту. Онлайн-портфолио фотографа в виде книги. Разноцветные квадратные кнопки служат переходом к страницам сайта, а листает странички вентилятор. Это один из немногих случаев, когда ждать загрузку страниц совсем не скучно.
Веб-дизайн из Украины. Наслаждаться рабочим столом с элементами навигации можно бесконечно долго.
Сайт актрисы Сары Хайленд (Sarah Hyland) является истинным отражением ее личности. Эскизы, использованные в качестве меню, подходят для этой странички идеально!
Необязательно понимать испанский язык, чтобы оценить эстетическую сторону рисованного меню этого сайта. Симпатичная «небрежность» придает проекту экстравагантности.
Креативное агентство оригинально во всем. Навигационное меню в виде шкалы измерений.
Яркий сайт бюро путешествий с не менее красочным и запоминающимся меню.
Необычный сайт человека с необычным увлечением. Веб-проект картографа-любителя.
Пункты меню вроде как нарисованы от руки, правда?
Недаром пункты меню обозначены пиктограммами, ведь этот проект как раз и посвящен иконкам для сайтов.
Интернет-проект для размещения портфолио. При клике на любой из пунктов меню картинка «утапливается».
Еще одно оригинальное представление меню.
Все гениальное - просто.
Не меню, а сплошная мозаика. Необычно и практично.
Каждая фигурка на странице что-то , да таит в себе.
Сайт готовых проектов домов и коттеджей с наглядными материалами, доступ к которым осуществляется в один клик.
Самое оригинальное hand-made ателье.
Навигация – важнейший аспект любого сайта. Сможет ли пользователь найти актуальную для себя информацию и захочет ли он вернуться – зависит от эффективности вашей веб-навигации.
Навигация ничем не регламентирована: ее можно сделать прозрачной и интуитивной или многоуровневой и нестандартной.
Как сделать навигацию на сайте максимально эффективной и какой дизайн подойдет именно вам?
У компании веб-разработки есть ответы на все ваши вопросы.
Но обо всем по порядку.
ЧТО ТАКОЕ НАВИГАЦИЯ?
Навигация сайта или веб-навигация – это система программных и визуальных средств, которые помогают пользователю ориентироваться на сайте и находить нужную информацию.
ПЛАНИРОВАНИЕ НАВИГАЦИИ
Максимально эффективная веб-навигация держится на 3 китах:
- Структура
- Лаконичность
- Дизайн
- Структура: навигация начинается с детальной проработки информационной архитектуры (ИА), которая позволяет создать оптимальный доступ к сайту и структурировать контент с точки зрения пользователя. В идеале, ИА сайта состоит из минимума навигационных слоев и предоставляет пользователю доступ к нужному разделу всего за несколько кликов. При этом само деление разделов — четкое, логичное и предсказуемое.
- Лаконичность: практичная веб-навигация всегда проста и интуитивно-понятна. Включайте в меню сайта только те элементы, которые необходимы для эффективной коммуникации. Ключ к успеху – меню, состоящее из минимального количества равноценных разделов, которые не оставляют ошибке никаких шансов.
- Дизайн: при выборе дизайна делайте упор на читабельность, органичность и единообразие. Отдайте предпочтение общепринятым элементам навигации. Запутанная система нестандартных иконок, кнопок и ярлыков – плохая идея, которая может негативно отразиться на удобстве и практичности вашего сайта. Чем меньше лишних активных элементов – тем больше довольных пользователей.
ТРЕНДЫ В ДИЗАЙНЕ ВЕБ-НАВИГАЦИИ
Дизайн веб-навигации необычайно вариативен, однако некоторые его элементы завоевали большую популярность, чем другие. Umbrella IT отобрала 10 примеров наиболее удачных дизайнов веб-навигации, которые работают как индивидуально, так и в сочетании друг с другом. Каждый из них имеет свои достоинства и недостатки, и какой из них лучший – решать только Вам.
1. ГОРИЗОНТАЛЬНАЯ НАВИГАЦИЯ
Горизонтальная навигация – классический дизайн, соединивший удобство с функциональностью.
Плюсы:
- Органичное решение для стандартной экранной ориентации большинства мониторов;
- Все элементы навигационного меню активны и доступны одновременно;
- Возможность расширения списка разделов с помощью меню, выпадающего по наведению курсора или нажатию.
Минусы:
- Большое количество разделов и объемное выпадающее меню могут перекрывать важный контент;
- Добавление новых пунктов меню затруднительно.
2. ВЕРТИКАЛЬНАЯ НАВИГАЦИЯ
Вертикальная навигация — прямая альтернатива горизонтальной навигации – меню, расположенное в левой колонке страницы.
Плюсы:
- Простота редактирования и неограниченная возможность расширения меню — отличный вариант для сложных мультифункциональных сервисов и электронной коммерции;
- Оптимально для разных устройств.
Минусы:
- В развернутом виде может перекрывать контент;
- Нижние навигационные элементы малозаметны.
3. ВЫЕЗЖАЮЩЕЕ МЕНЮ
Выезжающее меню или слайд-меню – один из способов сохранить полный функционал и экранное пространство. Меню скрыто за левой границей экрана и появляется по клику или касанию.
Плюсы:
- Максимально компактный способ организации сайта;
- Дизайн может быть адаптивным, что в сочетании с гамбургером-иконкой представляет отличный вариант для интерфейса мобильной версии сайта;
- Скрытое меню позволяет сделать сильный акцент на контенте;
- Удобный доступ к меню из любой точки сайта.
Минусы:
- Скрытая навигация затрудняет доступ к меню;
- В развернутом виде меню перекрывает контент.
4. ЛЕНДИНГ
Лендинг – это одностраничный сайт с длинной или бесконечной прокруткой, оптимизированный под определенные цели.
Плюсы:
- Листать быстрее, чем кликать – подходящий вариант для новостных сервисов, онлайн-магазинов и сайтов, обновляющих контент в режиме реального времени;
- Бесконечная прокрутка удерживает внимание пользователя;
- Позволяет размещать большой объем визуальной информации;
- Удобный интерфейс для мобильных платформ.
Минусы :
- Ограниченная свобода пользователя: невозможно контролировать порядок информации и способ представления контента;
- Невозможно использовать футер;
- Увеличивает нагрузку на серверы;
- Снижает показатели SEO.
5. ФИКСИРОВАННОЕ МЕНЮ
Фиксированная или “липкая” навигация статично закрепляет панель меню в конкретной части страницы, предоставляя пользователю постоянный доступ к опциям меню.
Плюсы:
- Комфортный доступ ко всем разделам из любой точки сайта — самое оптимальное решение для одностраничных сайтов;
- Позволяет укрепить узнаваемость бренда при грамотно закрепленном в хедере логотипе;
- Повышает показатели аналитики, увеличивая количество просматриваемых страниц за одно посещение сайта.
Минусы:
- Перегруженный и навязчивый хедер затрудняет веб-навигацию и перекрывает контент.
6. ГАМБУРГЕР-МЕНЮ
Гамбургер-меню – навигационное меню, изначально разработанное для смартфонов, но все чаще появляющееся на экранах ноутбуков. Представляет собой иконку, скрывающую широкий диапазон опций и категорий. Свое название меню получило из-за сходства иконки с гамбургером – три горизонтальных полоски меню символизируют три слоя знаменитого сэндвича.
Плюсы:
- Гамбургер-иконка доступна из любой точки сайта одним кликом или касанием;
- Позволяет разместить неограниченное количество опций;
- Максимально экономит пространство и идеально отображается на мобильных устройствах;
- Помогает компактно разместить вторичные опции (например, историю и настройки), не перегружая ни экран, ни пользователя.
Минусы:
- Несмотря на свою распространенность, пользователи не всегда легко находят скрытое меню;
- Гамбургер – негласное стандартное меню на платформе Android, и его использование на iOs приводит к нарушению единообразия базовых навигационных элементов и перегрузке навигационной панели.
7. АДАПТИВНАЯ НАВИГАЦИЯ
Адаптивная навигация – вариативный дизайн, автоматически подстраивающийся под различную ширину экрана и мобильные платформы.
Плюсы:
- Кроссплатформенность: сайт изначально спроектирован для качественного отображения как на компьютерах, так и на мобильных устройствах;
- Единый URL: при адаптивной навигации не нужно создавать мобильную версию сайта, а отсутствие редиректов повышает поисковую оптимизацию.
Минусы:
- Типичные для десктопных версий сайтов активные элементы (встроенные карты, видео, анимация) замедляют загрузку сайта на мобильных устройствах;
- Мобильная версия дизайна может оказаться нечитабельной и перегруженной в виду того, что пользователи мобильных устройств, как правило, пользуются более узким функционалом сайта;
- Отсутствие альтернативы: в случае с самостоятельной мобильной версией всегда есть возможность вернуться к полной версии сайта. Адаптивный дизайн этого не позволяет: если адаптированная верстка неудобна или скрывает важный элемент навигации, единственный вариант – искать ноутбук или обращаться к сайту конкурентов.
8. МЕГА-МЕНЮ
Мега-меню – обширная навигационная панель, всплывающая при наведении курсора или нажатии. Мега-меню не просто структурирует контент по группам и колонкам в текстовом формате, но и активно использует различные визуальные средства.
Плюсы:
- Все опции доступны одновременно: максимально быстрое направление пользователя — большой плюс для онлайн-магазинов и сайтов с обширным набором опций, категорий и сервисов;
- Раскрывается и скрывается по наведению курсора, щелчку или касанию без ущерба для контента.
Минусы:
- нарушение принципа организации способно осложнить навигацию;
- сложно реализовать на мобильных устройствах.
9. РАСШИРЕННЫЙ ФУТЕР
Футер или “подвал” сайта – это нижняя часть страницы. В стандартном футере, как правило, размещается дополнительная информация: контакты, ссылки, уведомление об авторских правах и кнопки социальных сетей. В расширенном футере помимо этих данных содержится полноценное навигационное меню, которое может использоваться как основная или альтернативная система навигации. Расширенный футер — простой способ выйти за границы стандартного дизайна и повысить функциональность Вашего сайта.
Плюсы:
- Предоставляет альтернативное или дополнительное меню для тех, кто не нашел нужный контент в главном;
- Позволяет разместить важный, но не вписывающийся в содержание основных страниц контент;
- Дополнительные опции в классическом футере (содержащим только контактную информацию) позволяют расширить клиентскую базу;
- Акцентирует внимание на определенной информации.
Минусы:
- Рядовой пользователь часто не дочитывает до футера.
10. ПОЛНОЭКРАННАЯ НАВИГАЦИЯ
В отличие от всех представленных здесь вариантов дизайна, полноэкранная навигация не ставит перед собой задачу экономии экранного пространства. Напротив, полноэкранная навигация использует интро-страницу на все 100 процентов, сочетая текст с графикой.
Плюсы:
- Предоставляет четкую структуру сайта;
- Открывает широкие возможности для визуального оформления;
- За счет перегруженной домашней страницы основные подразделы содержат только контент, что значительно экономит экранное пространство;
- Простая реализация на мобильных платформах;
- Идеальный вариант для узкоспециализированных сайтов.
Минусы:
- Возможно снижение скорости загрузки;
- Нерациональный выбор для сайтов со сложной навигационной картой.
И традиционный бонус от компании Umbrella IT, которая всегда готова предложить Вам больше — 11 вариант — АНИМИРОВАННЫЕ ЭЛЕМЕНТЫ НАВИГАЦИИ .
Рациональное использование анимированных элементов как основных или дополнительных средств навигации позволяет разнообразить консервативный дизайн и привлечь внимание пользователей.
Плюсы:
- Привлекают внимание пользователей;
- Структурируют меню;
- Улучшают юзабилити сайта и ориентируют пользователя.
Минусы:
- Чрезмерная визуальная перегруженность затрудняет навигацию по сайту;
- Могут замедлить скорость загрузки сайта.
На этапе выбора и разработки дизайна веб-навигации трудно предугадать, какой именно вариант окажется выигрышным. Успех каждого конкретного случая зависит от ряда факторов: от бизнес-назначения, целей и задач сайта, природы контента, целевой аудитории и Ваших личных предпочтений.
Представленные примеры – лишь малая часть того, что позволяет реализовать современный веб-дизайн. Остались вопросы? , и мы поможем воплотить Ваши самые смелые проекты в реальность.
Навигация - это то, что помогает пользователю путешествовать по сайту. Это структура каталога в интернет-магазине, помогающая отыскать нужную вещь, меню информационного сайта с подразделами для разных групп контента, список тем на новостном портале и так далее.
Навигация всегда используется посетителями вне зависимости от их знаний относительно терминологии. И чем она проще, тем быстрее пользователь находит нужную ему информацию и тем лучшее впечатление остается от вашего ресурса. Запутанные пути, даже если и приводят к нужному результату, все же могут обеспечивать его постоянно. Но зачастую пользователи просто уходят с сайта в недоумении, так и не поняв, как пользоваться всем этим «богатством».
Какой должна быть навигация
Вот 8 критериев, по котором нужно оценить существующую навигацию. Если на вашем сайте все не так - изменяйте. Если же вы только создаете ресурс, ориентируйтесь на наши советы сразу, чтобы потом не пришлось переделывать. Итак, навигация на сайте должна соответствовать таким критериям:
Не забывайте, что всем этим правилам должна соответствовать не только первичная, но и вторичная навигация.
Загрузка...
