Проектирование структуры веб-сайта
Последовательная и логичная структура веб-сайта — важный фактор, влияющий на лояльность пользователей. Выбор подходящей структуры осуществляется на этапе проектирования и зависит от назначения сайта.
Знакомство человека с новым для него окружением всегда начинается с его предположения о том, как он должен вести себя в нем. Он строит свое поведение, в первую очередь, на основе предыдущего опыта, оценивая свое отношение к тому, с чем уже сталкивался и тому, что впервые видит (создает т.н. ментальную модель). Популярность нового веб-сайта в значительной мере будет определяться тем, насколько хорошо его информационная структура соответствует ментальной модели пользователя, его ожиданиям. Логичная и предсказуемая структура позволяет новому посетителю делать успешные предположения о том, где может находиться нужная веб-страница, а регулярные методы организации и отображения информации позволяют прозрачно «обучить» пользователя работе с сайтом.
Внутренняя и внешняя структура
Структуризация представляемой на сайте информации выполняется на двух уровнях: внутреннем и внешнем.
Внутренняя структура определяет логические связи между веб-страницами, то, что в SEO называется внутренней перелинковкой. Продуманная внутренняя структура позволяет избежать ситуаций, когда, например, на сайте появляются страницы, доступные более чем в 3-х кликах от стартовой или в поисковую выдачу попадают приватные страницы или множественные дубли. С другой стороны, под внутренней структурой сайта иногда подразумевают размещение файлов и каталогов в файловой системе веб-сервера. Хороший пример — размещение всех изображений в каталоге images, а скачиваемых файлов — в каталоге download. Внутренняя структура может частично или полностью отображаться во внешнюю структуру.
Внешняя структура – это, по сути, схема навигации, вписанная в дизайн сайта. Именно с внешней структурой имеют дело посетители, будь то люди или роботы. Переходя по ссылкам, они получают доступ (или не получают) к той информации, которую представляет сайт. Тщательно проработанная внешняя структура не только упрощает перемещение по страницам, но и способствует продвижению сайтов в поисковых системах, об этом говорят сами разработчики поисковиков (например, здесь).
Типовые структуры
Линейная структура
Простая и естественная структура, в которой все страницы сайта последовательно связаны между собой (рис. 1). Навигация по такому сайту в основном сводится к указанию ссылок на предыдущую и следующую страницы — переходя по ним, пользователь словно листает книгу. В чистом виде линейная структура применяется разве что на самых простых сайтах с небольшим количеством станиц.
Рис. 1. Сайт с линейной структурой
Иерархия
Такая структура предполагает размещение информации в несколько уровней (рис. 2). Страницы нижнего уровня являются подразделами страниц более высокого уровня. Корнем иерархии является стартовая страница сайта, ссылки с которой ведут на разделы и/или страницы 2-го уровня. Иерархическая структура используется во всевозможных сайтах-каталогах.
Рис. 2. Иерархическая структура веб-сайта
«Паутина»
«Паутина» — это структура, практически идентичная концепции сервиса WWW, но в масштабах отдельно взятого сайта (рис. 3). Она основана на установлении таких связей между страницами, которые позволяют быстро перемещаться между ними, минуя какие-либо промежуточные страницы (стартовую или страницы разделов). Подобная структура избыточна, управление ей сильно затрудняется с ростом числа страниц, а пользователь может элементарно «увязнуть» на страницах такого сайта.
Рис. 3. Сайт со структурой типа «паутина»
БОльший порядок на сайте можно навести, если установить связи между страницами по принципу «решетки» (рис. 4)
Рис. 4. Структура типа «решетка»
Практические соображения
Приведенные выше базовые структуры на практике редко используются в исходном виде. Подавляющее большинство сайтов используют их в той или иной комбинации. Так, например, каталог статей начинается с тематической иерархии, но отдельные, объемные статьи раздела имеет смысл представлять линейно, поделив их на несколько страниц. Это пример того, что называется гибридной (или комбинированной) структурой.
Приведем концептуальный пример гибридной структуры сайта, не только удобной и понятной для пользователя, но и, как показывает личный опыт, позволяющей только на одной внутренней перелинковке поднять PR главной страницы до 3-4, а страниц разделов — до 1-2 (рис. 5).
Рис. 5. Комбинированная структура сайта, учитывающая передачу «веса» страниц
(цветом выделены исходящие связи).
Некоторые пояснения к рис. 5:
- На всех страницах имеется ссылка на стартовую страницу (т.н. «сквозная ссылка»).
- Страницы нижнего уровня ссылаются на страницу раздела и, линейно, на соседние тематические страницы.
- Страницы разделов связаны между собой и ссылаются на тематические страницы нижележащего уровня.
- Исходящие ссылки с главной страницы ведут на разделы и, возможно, на целевые страницы.
Есть одно «но» - какая-бы структура сайта не закладывалась на этапе проектирования, реальность вносит свои коррективы. Разработчик «зашивает» регулярную структуру в навигационную схему, а контент-менеджер, проставляя ссылки из добавляемых на сайт материалов, в определенной степени ее нарушает.
Еще один аспект, отчасти иронический: чем более понятна и проста структура сайта, тем легче пользователю произвольно и вопреки запланированным разработчиками путям по сайту, перемещаться со страницы на страницу без опасения «потеряться» среди них.
Вместо заключения
Большинство более-менее сложных сайтов имеют комбинированную структуру. Линейная или иерархическая организация связей между страницами удобна и логична для навигации по сайту, но ссылки, встроенные в содержание, создают «паутину» ассоциативных связей, которая намного сложнее и гибче исходной структурной модели. Это вовсе не означает, что нелинейные модели поведения типичных посетителей освобождают разработчиков от создания веб-сайтов с логичной и продуманной структурой. На рис. 6 условно показаны типовые структуры и их применимость в зависимости от функциональности сайта и сложности представляемой информации.
Рис. 6. Сравнение основных структур
CC-BY-SA Анатольев А.Г., 03.12.2013