Советы по упрощению навигации по вашему сайту

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

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

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

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

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

Шаг 1: Изучите существующий дизайн

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

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

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

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

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

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

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

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

Изменение его размера с кодом до универсальной полной поддержки браузером функции CSS3 Zoom означало бы изменение всего кода JavaScript (по строкам 10,000), что было бы пустой тратой.

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

Теперь, когда мы знаем недостаток существующей структуры навигации, это упрощает планирование нового дизайна навигации на следующем этапе.

Шаг 2: спланируйте новый дизайн

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

Если это сделано правильно, слева будет больше места, что позволит нам иметь дополнительный столбец посередине.

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

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

Шаг 3: реализовать план

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

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

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

Вот что увидит пользователь, если выберет урок в левом меню:

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

По мере роста списка ссылок на страницу добавляется вертикальная полоса прокрутки. Мы могли бы прикрепить полосу прокрутки к самому меню, установив фиксированную высоту для меню.

Технические вещи

Внешние скрипты, CSS-фреймворки и шрифты, используемые в приведенном выше примере, включают в себя:

  • Bootstrap v3.3.7
  • Font Awesome v4.7.0
  • Google Fonts: помперы, концертный, варела тур

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

Конструктор для прототипа меню удивительно прост, если вы используете Bootstrap в качестве своей CSS-среды.

На первом уровне отступа вы создаете div для области навигации (здесь с идентификатором «leftSide») и класс div внутри него, чтобы установить, какие свойства должно содержать пространство. В этом случае мы просто используем стандартный класс «хорошо», который уже предопределен в Bootstrap (рис. 7).

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

Как видите, нажатие на ссылки вызовет функции JavaScript для скрытия или отображения столбца. В этом случае «скрытие» означает просто удаление содержимого и сокращение столбца до меньшего размера, как показано на рис. 9.

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

Теперь нам нужно создать контейнер для хранения пунктов меню.

Затем добавьте элемент навигации, в данном случае панель «Инструкции».

Свертывание для элемента обрабатывается собственными CSS и JavaScript Bootstrap, поэтому все, что нам нужно сделать, это добавить функции для изменения содержимого среднего столбца при нажатии на элемент (l1s1 и l1s2).

Они обрабатываются внешним скриптом, но показаны на рис. 12 для полноты картины.

Вернуться в меню в нашем HTML-файле. Разрыв строки добавляется как простой разделитель, а остальные элементы добавляются в виде серии вложенных списков. Начальный конструктор показан на рис. 13.

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

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

Следующий пункт меню будет добавлен путем вставки новой строки в строку 75, а затем точно такой же процедуры для элемента T1-L2 и т. Д.

Как только все элементы (главы) от T1-L1 до T1-L6 были добавлены, мы добавим новый разрыв строки, а затем начнем новый список (как категория T2), следуя тем же процедурам, пока меню не будет заполнено.

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

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

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

Богдан Рэнца

Богдан является одним из основателей Inspired Mag, накопив за этот период почти 6-летний опыт. В свободное время он любит изучать классическую музыку и изучать изобразительное искусство. Он тоже одержим исправлениями. У него уже есть 5.