Навигационная панель что это такое
Перейти к содержимому

Навигационная панель что это такое

  • автор:

Навигационная панель инструментов и особенности ее расположения на сайте

Навигационная панель инструментов и особенности ее расположения на сайте

Так называемая utility navigation (в пер. с англ. — навигационная панель инструментов), как правило, предоставляет пользователю интернет-ресурса возможности для совершения на сайте второстепенных действий и включает в себя такие инструменты, как контактная форма, форма подписки, форма регистрации или входа на сайт, возможность распечатать страницу (print) и т. д.

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

Перечень инструментов

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

  • форма контакта с организацией (Contact us);
  • иконки социальных сетей, позволяющие подписаться на обновления социальных аккаунтов компании (Follow us);
  • языковая панель, которая предоставляет возможность поменять язык сайта;
  • форма входа на сайт и регистрации;
  • команда распечатать страницу (Print);
  • команда сохранить страницу;
  • команда поделиться страницей в социальных сетях;
  • форма подписки на интернет-ресурс;
  • инструмент, позволяющий изменить размер отображаемых на странице шрифтов;
  • возможность открыть страницу в отдельном окне.

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

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

Расположение

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

quote

Попадая на новый веб-ресурс, мы инстинктивно ищем в правом верхнем углу форму регистрации или входа

Панель инструментов

Панель инструментов на главной странице сайта IBM располагается в правом верхнем углу, в середине страницы (иконки социальных сетей) и в футере (ссылка Contact Us).

Панель инструментов

Правый верхний угол детально.

Информационные сайты (и страницы, посвященные новостным статьям и сообщениям) обычно делят все инструменты на группы и размещают в разных местах: инструменты для работы с сайтом размещаются в правом верхнем углу, а для манипуляций со статьями — над полем с контентом по центру. Формы подписки обычно располагаются в подвале страницы, иконки социальных сетей в начале или конце статьи, видео и любого другого контента, которым люди хотели бы поделиться.

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

Панель инструментов

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

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

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

Рекомендации

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

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

2. Размещайте инструменты там, где люди ожидают их найти. Самые просматриваемые места: правый верхний угол страницы либо область до и после статьи. Можете встроить эти инструменты и в общее меню, в общую навигационную панель, потому как люди имеют склонность внимательно ее просматривать, если они ищут что-либо.

quote

Самые просматриваемые места: правый верхний угол страницы либо область до и после статьи.

3. Элементы управления должны выглядеть как элементы управления, не стоит давать им непривычные названия.

4. Очень важно сделать отличными друг от друга группу иконок, которые ведут на социальные профайлы организации (Follow Us), и группу иконок, которые позволяют поделиться каким-либо материалом в социальных сетях (Share this, Поделиться). Визуально они очень похожи, но, как понимаете, отличаются по функции.

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

6. Для отображения используемого языка достаточно указать его название символами соответствующего алфавита.

7. Формы подписки на ресурс и входа на сайт должны располагаться рядом друг с другом.

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

Примеры расположение навигационной панели инструментов:

Панель General Electric.

Панель General Electric.

Панель

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

Washington Post

The Washington Post: шапка.

Washington Post

The Washington Post: футер.

Заключение

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

Верхняя или боковая панель навигации: что лучше подходит для вашего продукта?

При выборе макета навигации для вашего приложения обычно необходимо определить положение первичной, вторичной и третичной иерархии навигации. Исследование Дженнифер Роуз Кингсбург «Сравнение трехуровневых навигационных структур меню для веб-дизайна» показало, что расположение основной навигации с левой стороны дает множество преимуществ. В 2 исследованиях (по 16 пользователей в каждом) измерялось время, предпочтения и ошибки выбора навигации. Здесь вы можете найти краткое изложение этого исследования. Имейте в виду, что оно было проведено 17 лет назад, и за это время парадигмы дизайна значительно изменились.

Панель навигации слева легче сканировать

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

Верхняя панель навигации экономит место

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

Боковую панель навигации легче масштабировать

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

Боковая панель навигации позволяет настраивать структуру

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

Согласованность с десктопным вариантом дизайна

Если у вашего продукта есть нативная версия приложения, вам нужно, чтобы веб-приложение соответствовало ей. Боковая панель широко используется как в приложениях macOS, так и в Windows, в качестве основного средства навигации, поскольку верхняя область обычно зарезервирована для строки меню (меню представляет собой список элементов – команд, атрибутов или состояний).

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

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

Верхние панели навигации и мегаменю

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

Случаи неудачного перехода на боковую панель навигации

Редизайн навигации – это всегда сложная задача. Пользователи привыкают к навигации, особенно когда используют ваш продукт ежедневно. Даже небольшие изменения в навигации могут запутать их. Независимо от новой кривой обучения, некоторые случаи, такие как переход навигации Jira Cloud на боковое меню, вызвали волну негативной реакции со стороны пользователей. Когда Jira опросила часть пользователей, более 95% первых (из 350) отдали предпочтение «старой» верхней панели навигации.

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

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

Выбор навигации будет зависеть от вашего контекста

Верхняя панель навигации

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

Боковая панель навигации

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

Навигационная панель что это такое

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

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

Для руководства разработчика, см. UINavigationBar .

Используйте панель инструментов, когда навигация не нужна, или вам нужно несколько элементов для управления контентом. Читайте Панели инструментов .

Заголовки панели навигации

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

Стандартное название
Большое название

Используйте большой заголовок, если вы хотите сделать акцент на контексте. Большие заголовки не должны повторять контент, но в некоторых приложениях большой жирный текст большого заголовка может помочь ориентировать людей при просмотре и поиске. Например, в макете с вкладками большие заголовки могут помочь прояснить активную вкладку и указать, когда люди прокручивают вверх. Телефон использует этот подход, в то время как Музыка использует большие заголовки, чтобы различать такие области контента, как альбомы, исполнители, списки воспроизведения и радио. В iOS 13 и более поздних версиях большая панель навигации заголовка не включает фоновый материал или тень по умолчанию. Кроме того, большой заголовок переходит к стандартному, если пользователи начинают прокручивать контент. Руководство разработчика см . В разделе prefersLargeTitles .

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

Элементы управления панели навигации

Избегайте переполнения навигационной панели большим количеством элементов управления. В целом, панель навигации должна содержать не более, чем текущий заголовок экрана, кнопку «Назад» и один элемент управления, который управляет содержимым экрана. Если вы используете сегментированный элемент управления на панели навигации, панель не должна содержать заголовок или какие-либо другие элементы управления, кроме него.

Используйте стандартную кнопку возврата. Люди знают, что стандартная кнопка «назад» позволяет им отслеживать шаги в иерархии информации. Однако, если вы создаете пользовательскую кнопку «Назад», убедитесь, что она по-прежнему выглядит как кнопка «Назад», ведет себя интуитивно, соответствует остальному интерфейсу и последовательно реализована в вашем приложении. Если вы замените предоставленный системой шеврон (линию в виде перевернутой буквы V) кнопки возврата на пользовательское изображение, укажите и собственное изображение маски. iOS использует эту маску для анимации заголовка кнопки во время переходов.

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

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

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

Руководство пользователя

«Первая Форма» — это конструктор. Система адаптируется под задачи конкретной компании или подразделения (это настраивает администратор системы) или даже под предпочтения конкретного пользователя (см. раздел Персональные настройки). Интерфейс системы также перестраивается — какие-то элементы могут скрываться, добавляться или менять расположение. В данном руководстве описан типовой интерфейс системы, но он может отличаться от того интерфейса, с которым работаете именно вы.

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

work_area_1f

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

При нажатии на иконку icon-navраскрывается боковая панель и может переключаться в один из режимов. Справа от вкладок находится переключатель switch_nav_icon, с помощью которого вы можете закрепить панель в раскрытом виде или открепить ее.

warning_icon

Все иконки на боковой панели интерактивны — по нажатию на иконку открывается то или иное представление данных или отображается меню для выполнения действий.

Значки и индикаторы

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

Вызов стартовой страницы. Вместо логотипа «Первой Формы» здесь может отображаться логотип вашей компании

icon-nav

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

icon-feed

create_new_task_button

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

• Личную задачу – при выборе открывается окно создания задачи в категории Личные задачи в разделе Системный

• Встречу – при выборе открывается окно создания встречи

• Групповой чат – при выборе открывается окно создания группового чата

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

icon-users

icon-comments-spa

Лента комментариев (правая часть ленты задач и комментариев). На индикаторе — число непрочитанных комментариев

icon-chats

Чаты. На индикаторе — число непрочитанных сообщений в чатах

icon-fav

Избранные комментарии. На индикаторе — число избранных комментариев

icon-overdue

Список просроченных задач (см. Работа со списками задач). На индикаторе — число просроченных задач, где вы — исполнитель.

warning_icon

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

icon-request

Список запрошенных подписей. На индикаторе — число подписей, ожидающих вашей резолюции

icon-questions-spa

Список неотвеченных вопросов (по нажатию открывается Лента комментариев на вкладке Входящие ). На индикаторе — число заданных вам вопросов, ожидающих ответа

icon-search

icon-calendar

Календарь. Видимость иконки календаря включается/отключается в меню персональных настроек в пункте Настройки интерфейса. На индикаторе — число новых календарных событий.

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

warning_icon

Количество всех записей на индикаторах в избранном и в списке задач категорий отображаются с учетом доступа

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *