Навигационные интерфейсы

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

Навигация напрямую определяет качество работы с системой. Руководства по проектированию интерфейсов ставят условие: пользователь должен понимать, где он находится и что может сделать дальше, без дополнительного обучения; обещание простоты использования лежит в основе подхода к организации страниц и переходов^[4]. Эргономические свойства интерфейса — понятные названия разделов, предсказуемое поведение ссылок, различение посещённого и непосещённого — входят в число требований юзабилити^[5]. Элементы навигации действуют как знаки: руководство по дизайну привычных вещей описывает, что форма объекта подсказывает способ обращения с ним, и переносит этот принцип на экраны — кнопка должна выглядеть нажимаемой, раздел — открываемым^[5]. Привычные образцы экономят усилия: посетитель узнаёт знакомый элемент и действует без размышления. Отсюда общее требование к навигационным элементам: их назначение должно читаться без инструкции. Для навигации это означает понятные названия ссылок, заметное отличие текущего раздела и единообразие элементов на всех экранах^[5].

Навигационные задачи принято делить на два круга. Первый — перемещение: дойти от главной страницы до нужного материала за наименьшее число шагов. Второй — ориентирование: посетитель должен в любой момент понимать, в какой части системы он находится, иначе даже короткий путь не даёт уверенности; руководство по информационной архитектуре описывает поддержку ориентирования как отдельную обязанность навигационного интерфейса^[6].

Названия разделов — такая же часть навигационного интерфейса, как и сами переходы: руководство по информационной архитектуре относит к ней систему маркировки, где каждый пункт меню получает подпись, понятную посетителю, а не специалисту^[6]. Практические руководства по юзабилити добавляют: заголовок страницы должен совпадать с названием пункта, по которому на неё пришли, — совпадение служит подтверждением, что движение по системе верно^[4].

Проектирование взаимодействия рассматривает навигацию как часть диалога между человеком и системой: каждый переход — реплика пользователя, а ответ системы даёт материал для следующего решения; такой взгляд сближает навигационный интерфейс с логикой работы всей программы^[7].

Развитие представлений о пользовательском опыте привело к тому, что дизайн навигации рассматривается как отдельная дисциплина со своими методами и шаблонами^[7]. Систематизирует эти задачи информационная архитектура — область знаний, описывающая организацию информации в системах: руководство по информационной архитектуре выделяет в ней системы организации, маркировки, навигации и поиска. Навигационный интерфейс выступает видимым слоем, через который пользователь обращается к невидимой структуре^[6].

Наиболее распространённый тип — меню. Обзор типов пользовательских интерфейсов описывает две модели организации навигации: древовидную ограниченную, где движение идёт по заранее заданным уровням, и свободную, где пользователь переходит между разделами без фиксированной последовательности^[8]. В крупных порталах меню строится многоуровневым: обзор концепции портала научного центра описывает иерархические разделы с раскрывающимися подменю, а структуру портала образует дерево с главным меню на верхнем уровне^[9].

Второй тип — навигационные цепочки: строка ссылок, показывающая путь от главной страницы к текущему разделу, как линия маршрута на схеме пересадок. Специализированные руководства по юзабилити отмечают их двойную роль: они указывают текущее положение в иерархии и позволяют подняться на несколько уровней вверх одним переходом^[10]. Типичное место цепочки — верх страницы, сразу под глобальной панелью навигации; на небольших экранах подписи цепочек должны оставаться различимыми и не переноситься, для чего применяются компактные варианты^[10]. Цепочки привязаны к иерархии, а не к истории просмотров: один и тот же раздел описан в них одинаково для любого посетителя, что делает их предсказуемым средством ориентирования. Третий тип — внутренний поиск, который дополняет меню для больших массивов содержимого: пользователь вводит запрос и попадает в раздел минуя промежуточные уровни. В отличие от поисковых систем общего назначения, внутренний поиск охватывает только содержимое одного сайта. Для больших систем перечень разделов одной строкой теряет обозримость, поэтому дополнительным средством становится карта сайта — отдельная страница с полным деревом разделов^[6]. Глубина иерархии — компромисс: глубокое дерево делает пункты меню короткими, но удлиняет путь до материала, широкое сокращает число переходов ценой перегруженного меню; обзор портала описывает многоуровневую структуру с раскрывающимися подменю, в которой глубина ограничена требованиями обозримости^[9]. Границы разделов и ссылки между страницами оформляются средствами разметки гипертекста; стандартный элемент выделения навигационного блока поддерживается всеми браузерами^[11].

Соотношение перемещения просмотром и через меню изучалось на мобильном интернете: сравнительное исследование юзабилити мобильного интернета разделяет задачи полного просмотра страниц и задачи, решаемые через меню. Сравнение фиксирует, что на небольшом экране эти два способа дают разную скорость и точность действий^[12].

Навигацию принято делить на глобальную и локальную. Глобальная охватывает всю систему и остаётся неизменной при переходе между разделами, локальная работает внутри одного раздела и отражает его внутренний состав. Руководство по информационной архитектуре описывает и вспомогательные слои — контекстные ссылки внутри текста и указатели, связывающие близкие по теме материалы^[6]. Постоянство глобальной навигации даёт пользователю опору, локальная отвечает за глубину внутри раздела^[4].

Меню различается положением и поведением. Горизонтальное меню в заголовке задаёт основные разделы, вертикальное раскрывает их состав; обзор концепции портала описывает и служебные навигационные полосы — вход, контакты, карту сайта^[9]. Служебные полосы дополняют основные и отделяются от них визуально. Мобильные шаблоны добавляют нижние полосы навигации — таб-бары: руководства по интерфейсам вкладок описывают их как средство переключения между главными разделами приложения^[13].

Проектирование навигационного интерфейса начинается с информационной структуры, а не с рисования пунктов меню. Анализ этапов создания сайтов относит разработку схемы навигации к этапу, следующему за определением состава и связей разделов. Информационная структура фиксирует, какие сведения присутствуют в системе и как они связаны, после чего формируются пути доступа к ним^[1]. Работа над навигацией встроена в общий порядок создания сайта: к моменту разработки схемы состав разделов уже известен, а оформление ещё не утверждено, поэтому изменения структуры обходятся дешевле на этом этапе. Анализ навигационных систем предлагает строить их из семантической сети предметной области, представленной на сайте: связи между понятиями превращаются в ссылки, а базы данных хранят соответствие между терминами и разделами^[3]. В той же работе описаны алгоритмы построения семантической сети предметной области и формирования из неё структуры навигации, а также проблемы, возникающие при оптимизации такой структуры.

Формализованный подход даёт онтологическое моделирование: проектирование и реализация онтологии навигационной системы сайта описывают представление разделов и связей между ними в виде онтологии с отношениями вида «подраздел» и «ссылается на», из которой навигационное меню генерируется автоматически. Онтологический подход позволяет единообразно описывать крупные сайты: при изменении структуры правки вносятся в базу, а меню перестраивается без ручной переделки страниц^[14].

Методы проверки структуры опираются на поведение пользователей. Сортировка карточек проводится в открытом и закрытом вариантах: в первом участники сами называют группы, во втором распределяют карточки по готовым, гибридный вариант занимает промежуточное положение. Сама сортировка проводится очно с бумажными карточками или удалённо через веб-сервисы^[15]. Сравнение результатов показывает, где ожидания пользователей расходятся с замыслом проектировщика. Древовидное тестирование дополняет картину числами: доля участников, нашедших раздел, и время поиска указывают, какие ветви иерархии требуют переименования или перестройки^[16]; руководства по методу собирают рекомендации, помогающие оценить навигационную иерархию и избежать типовых ошибок проектирования^[16].

Поведение посетителя при поиске нужного раздела описывается теорией информационного добывания: пользователь движется по ссылкам, ориентируясь на «запах» информации — признаки близости цели в самих названиях и отрывках. Рациональный анализ информационного запаха и веб-поискового поведения задаёт количественную модель этого движения^[17]. Экспериментальные проверки этой теории отмечают её ограничения: реальные сценарии не всегда укладываются в модель оптимального поиска^[18]. Для практики теории добывания дают критерий оценки формулировок: чем сильнее в названии ссылки признаки близости цели, тем увереннее посетитель выбирает переход. Пользователь сопоставляет ориентиры на разных ссылках и идёт туда, где ожидаемая польза выше; поэтому формулировки разделов проверяют на посетителях до программной реализации сайта. Отсюда видно, почему сортировка карточек и древовидное тестирование дают устойчивые результаты: они измеряют ту же связь — между названием и ожидаемым содержимым.

Влияние навигационной структуры на успех работы с сайтом подтверждается экспериментально: эмпирическое исследование влияния структуры навигации, сложности задачи и знания предметной области показывает, что тип структуры заметно сказывается на скорости и качестве выполнения задач^[19]. Одна и та же структура по-разному подходит задачам разного типа и пользователям с разным знанием предметной области. Поэтому выбор схемы навигации связан с тем, кто и зачем приходит в систему, а проверку структуры проводят на реальных задачах.

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

Основная область — веб: навигационные интерфейсы образуют каркас корпоративных порталов, интернет-магазинов и сервисов. Концепция портала научной организации показывает типовой состав: иерархическое меню разделов, навигационные цепочки и поиск поверх базы материалов^[9]. Концепция портала показывает и порядок работ: состав разделов выводится из задач учреждения и планов информационного наполнения, после чего закрепляются меню, служебные страницы и правила размещения материалов. Такой порядок повторяется в проектах разного масштаба: от содержания — к структуре, от структуры — к элементам навигации. В электронной коммерции навигация по каталогу определяет доступность товаров: меню задаёт категории, фильтры ограничивают выборку внутри категории, а цепочки показывают положение текущего товара в иерархии каталога^[10].

Прикладной пример даёт проектирование веб-приложения для взаимодействия с клиентами мебельной организации: авторы формируют схемы навигации из структуры бизнес-процесса и показывают, как разделы каталога и служебные страницы следуют этапам работы с клиентом^[2]. Такой путь — от процесса к структуре, затем к навигации — типичен для небольших систем, где меню строится вручную.

Отдельный круг задач — небольшие экраны. Сравнительное исследование юзабилити мобильного интернета различает навигацию при полном просмотре страниц и навигацию через меню: на ограниченном экране мобильного приложения способ перемещения между разделами заметно влияет на время и точность действий^[12]. Выбор способа связан с характером задачи: просмотр длинных материалов и точечные переходы по меню требуют разных решений. Руководства по мобильным шаблонам фиксируют компактные варианты меню — выдвижные панели и нижние полосы навигации как стандарт перемещения в приложениях смартфона^[13]. Такие полосы служат для переключения между основными видами экранов устройства, а названия пунктов на них совпадают с названиями главных разделов, поэтому навигация остаётся единообразной между экранами.

Собственные схемы перемещения требуют и сложные сервисы: справочные системы, личные кабинеты и длинные инструкции строят навигацию поверх общей структуры сайта, сочетая иерархию, цепочки и поиск в пропорциях, которые диктует сценарий работы^[6].

Навигационные интерфейсы выходят за пределы веба. Обзор человеко-машинных интерфейсов электромобилей описывает динамику развития элементов взаимодействия в салоне и отмечает, что организация перемещения по функциям бортовых систем — отдельная задача, связанная с ограничениями внимания водителя и с «боязнью ограничения дальности» поездки^[20]

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

Набор элементов взаимодействия в салоне меняется по мере развития техники, и обзоры человеко-машинных интерфейсов электромобилей показывают, что навигационные задачи занимают в нём устойчивое место — от выбора режима движения до перемещения по настройкам^[20]. Практика библиотечных сайтов показывает, что термины в навигации влияют на понимание разделов: обсуждение навигационного дизайна и библиотечной терминологии отмечает расхождение между профессиональными названиями и привычной лексикой читателей^[21]. Это пример общей задачи: названия разделов пишутся для посетителя, и профессиональный жаргон заменяется словами его языка.

Навигационные интерфейсы опираются на гипертекстовую модель: сайт или приложение представляет собой совокупность узлов и переходов, а навигация — средства выбора маршрута по этой сети. За навигационными интерфейсами стоит модель гипертекста: система представима как сеть узлов и переходов, а навигация предъявляет эту сеть пользователю. В исследованиях удобства использования навигационные задачи служат типовым материалом для измерений: фиксируются скорость нахождения раздела, число ошибочных переходов и субъективные оценки посетителей^[4].

Навигационная разметка имеет значение для доступности: элемент выделения навигационного блока позволяет вспомогательным программам чтения с экрана отличать навигацию от основного содержимого и пропускать её при повторных просмотрах^[11].

С развитием средств разметки навигационные блоки получили собственные элементы: разметка отделяет навигацию от содержимого, и современные браузеры поддерживают такое выделение^[11].

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

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

Постоянные навигационные элементы занимают фиксированные области экрана и остаются доступными при прокрутке; временные появляются по действию пользователя. Такое разделение отражено в современных наборах шаблонов интерфейса и применяется как в вебе, так и в приложениях^[13]. Методы сортировки карточек и древовидного тестирования вышли за пределы веб-проектирования и применяются при классификации содержимого в разных предметных областях^[15].

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