Структура и проектирование страниц сайта

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

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

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

• Главная
• Текстовая
• 404 ошибка

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

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

• Форма заказа обратного звонка
• Форма заказа товара или услуги

Если сайт коммерческий, то скорее всего компания занимается продажей различных товаров и/или услуг. Для них требуются отдельные страницы, на которых будут представлены характеристики, изображения, описания и цены. Такие страницы можно объединить в один тип: “Карточки товаров”. Но для карточек товаров всегда требуется оглавление, некий раздел, где пользователь сможет ознакомится с товарами или услугами в кратком виде и перейти к деталям заинтересовавшей его записи. Такой тип назовем : “Каталожным разделом”. Итак:

• Каталожный раздел
• Карточка товара

Кроме всего прочего компания живет и развивается. Постоянно появляются новости, и другая полезная пользователям информация. Для этого можно создать раздел “Корпоративный блог” или два раздела “Новости” и “Статьи”. М добавим две типовые страницы:

• Раздел корпоративного блога
• Страница материала корпоративного блога

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

• Страница с результатами поиска

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

• Нотификация “спасибо за обращение”
• Нотификация “что-то пошло не так”

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

• Результаты поиска, когда не найден ответ

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

• Главная
• Текстовая
• 404 ошибка
• Форма заказа обратного звонка
• Форма заказа товара или услуги
• Каталожный раздел
• Карточка товара
• Раздел корпоративного блога
• Страница материала корпоративного блога
• Страница с результатами поиска
• Нотификация “спасибо за обращение”
• Нотификация “что-то пошло не так”
• Результаты поиска, когда не найден ответ

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

• Главная
• Текстовые страницы
• Каталожный раздел
• Карточка товара
• Раздел корпоративного блога
• Страница материала корпоративного блога
• Страница с результатами поиска
• Результаты поиска, когда не найден ответ
• 404 ошибка

Таким образом в структуре мы имеем три уровня:

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

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

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

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

Давайте перечислим блоки, которые необходимо разместить на этой странице:

• Шапка с логотипом и контактами
• Навигационная строка по сайту (меню)
• Изображение товара в увеличенном виде и ряд дополнительных изображений
• Название товара
• Его стоимость
• Кнопка заказа товара
• Преимущества вашего сервиса (например: доставка в день обращения, бесплатная доставка, круглосуточная горячая линия, дополнительная гарантия и проч.)
• Характеристики товара
• Описание товара
• Похожие товары или товары, покупаемые с этим товаром
• Специальные условия при покупки от … штук
• Блок заказа обратного звонка для консультации со специалистом
• Подвал сайта с логотипом, контактами и навигацией

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

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