Адаптивная навигация на сложных веб-сайтах.

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

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

Веб-сайт “Middlesex-London Health Unit”.

Процесс создания сайта.

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

В нашем последнем проекте, посвященном вопросам организации здравоохранения, под названием Middlesex-London Health Unit ( MLHU), мы начали с исследования аудитории, чтобы выяснить, какую информацию, связанную со здоровьем, пользователи ищут на подобного рода веб-сайтах. Учитывая тот факт, что на сайте MLHU находилось более 1300 страниц, подлежащих детальной переработке, мы должны были убедиться в том, что приоритетный контент будет находиться на самом видном месте.

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

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

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

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

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

MLHU site map

Карта веб-сайта MLHU. (Увеличенная версия | Источник).

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

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

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

MLHU website on mobile Представление сайта MLHU на мобильном телефоне (Увеличенная версия | Источник).

Реализация.

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

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

@media only screen and (max-width: 600px) {
	nav li {
		width: 100%;
		box-sizing: border-box;
	}

	nav a {
		background: rgba(0,0,0,0.5);
		padding: 10px 12px;
		text-align: left;
		margin: 0;
		box-sizing: border-box;
	}
}

MLHU Mobile Navigation

Навигация MLHU для мобильных (Источник).

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

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Comments are closed.