Сделать хорошую навигацию для информационного сайта, ориентированного как на новичков, так и на знатоков темы — задача весьма непростая. С одной стороны, навигация должна позволять быстро перейти с одной страницы на другую, с другой — помочь новичку сориентироваться, с чего начать изучение, с третьей, показать человеку, который уже отчасти знаком с этой темой, что именно по ней есть на этом сайте. Кроме этого, зачастую бывает важно сделать ее достаточно компактной, чтобы вписать в дизайн.
Но все эти противоречия можно устранить, если использовать для навигации mindmap (иногда их еще называют "ассоциативными картами"). Mindmap — это изображение, показывающее между собой связь различных понятий, используемая для облегчения изучения и запоминания чего-либо нового. Как правило, в центре его располагается ключевое понятие (тема сайта), от которого расходятся связи к более частным (разделам сайта), а от них к еще более частным (подразделам или конкретным статьям). Каждое понятие можно обозначить как просто словом, так и добавить к нему небольшую картинку для большей наглядности. Нарисовать такой mindmap можно сначала от руки еще на самом начальном этапе проектирования сайта. Это, помимо всего прочего, поможет лучше продумать его структуру.
Техническую реализацию этой идеи я вижу так: изначально в правом верхнем углу сайта находится уменьшенная картинка mindmap, причем она выводится с position: fixed, то есть даже при прокрутке сайта вниз остается на экране на том же самом месте и доступна в любой момент. По щелчку мыши по ней разворачивается полная версия mindmap, содержащая кликабельные области, щелчок по которым приводит к переходу в соответствующий раздел. (Области могут быть произвольной формы, это легко реализуется с помощью тегов map и area.)
Из недостатков такой идеи можно выделить три:
- немного увеличивается объем работы над сайтом, а также возникает необходимость использовать специальные программы для генерации тегов area;
- при добавлении новых разделов mindmap придется дорисовывать, поэтому такое решение подходит, в основном, сайтам, структура которых особо не меняется;
- неудобство для пользователей, заходящих с мобильных устройств с низким разрешением (но таковых можно отслеживать с помощью JavaScript и показывать им уменьшенную и упрощенную версию картинки).
Но с другой стороны, хорошо продуманный и красочный mindmap не только покажет пользователю все что есть на сайте, но и станет одним из самых запоминающихся элементов, выделяющих его среди прочих, своего рода лицом сайта. Но помните: mindmap — это расширение традиционной навигации, но не полная ее замена, и не следует полностью отказываться от таких элементов как указатель текущего местоположения ("хлебные крошки") или главное меню.