СТРУКТУРА СТРАНИЦ САЙТА

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

Обычно сайт подразумевает определенный сценарий ознакомления с ним посетителя. И, в 9-и случаях из 10, в настоящее время, имеет линейную вертикальную структуру, (иногда используется горизонтальная прокрутка содержимого страницы или иный способы размещения информационных блоков, но это таки редко) т.е. просматривается посетителем и пролистывается страница сайта сверху вниз …

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

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

Итак, что из себя представляет структура таковой страницы?!

1.  Обложка

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

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

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

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

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

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

2.  Навигация

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

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

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

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

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

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

3.  хейдер

То, что видит пользователь на первом экране (Обложка, главное меню, субменю, логотип, сопутствующая информация) можно объединить общим термином, в соответствии с принятым в настоящее время стандартом разметки кода HTML5 - обозначать как header (шапка сайта).

Метатеги, или Немного о seo

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

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

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

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

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

Иллюстрация 2. Пример блока метатегов (код)

4. Футер

Раз уж у нас есть первая обложка сайт, логично, что будет и наличие последней (аналогично шапке сайта в соответствии со стандартом HTML5, обозначаемой как Footer). Т.е. завершающая, подводящая итог знакомству со страницей сайта часть. Соответственно своему назначению позволяющая делать выводы, подводящая итоги знакомства и адресующая к тем или иным действиям, например контакту с представителем сайта.

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

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

Т.е. теперь, когда вы о нас все узнали, мы можем ответить на появившиеся в результате вопросы или дать возможность проконсультироваться и узнать еще больше.

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

4.1 Футер меню

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

4.2 Техническое меню

Может содержать ссылки на разделы сайта или сторонние ресурсы, необходимые для нормальной работы сайта – карта сайта, аналитический сервис, канал RSS и т.д.

5.  Контент страницы

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

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

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

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

Итак, из каких разделов может состоять контентная часть страницы сайта…

section

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

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

В соответствии с делением страницы по вертикали на отдельные секции я и предлагаю далее рассматривать далее содержимое блоков…

5.1 представление (о нас)

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

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

5.2 наши Услуги/товары

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

5.3 Основные преимущества

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

5.4 Доказательства преимуществ

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

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

5.5 Отзывы

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

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

5.6 Презентация, Видеофрейм

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

5.7 Дополнительные сервисные опции

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

5.8 Алгоритм работы

Никогда не пытайтесь продать товар клиенту, помогайте ему совершить покупку! Человек с раздражением относится, когда ему что-то "впаривают", но при этом обожает приобретать…  А вы представляете в первую очередь его интересы, и только потом уже свои…

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

5.9 Портфолио

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

5.10 Блок тематических статей

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

5.11 Блок новостей

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

5.12 Блок информационных материалов

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

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

5.13 Форма обратной связи

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

5.14 контакты

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

Кроме того, этот блок должен содержать реквизиты компании, адреса ее представительств и различные варианты позволяющие иметь контакт как в режиме онлайн, так и оффлайн.

Как вариант, раздел может содержать карту расположения офисов, мест продажи, различных вспомогательных служб, форму офлайн обращений…

Иллюстрация 3 Отображение прототипа внутренней страницы сайта (контакты) 

5.15 Акции и баннеры

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

выводы

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

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

6.  Внутренние страницы

6.1 Страница публикации

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

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

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

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

Достаточно часто помимо основного текста статьи на странице может быть размещен блок дополнительных материалов, призванных дать расширенную информацию (например, "похожие материалы"), а также различные инструменты, облегчающие поиск и фильтрацию информации (например, облако тегов)

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

Иллюстрация 4. Отображение прототипа внутренней страницы сайта (статьи)

6.2 Страница раздела

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

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

Для удобства представления материалов раздела используется пагинация (разбивка содержимого на отдельные страницы)

Иллюстрация 5. Отображение прототипа внутренней страницы сайта (раздела) 

6.3 Техническая страница

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

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

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

6.4 каталог товаров

Информационный раздел специфического назначения - служит для отображения ассортимента предлагаемых товаров (иногда - услуг), например в виде товарных карточек.

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

Как правило, имеет функционал раздела. Практически, это витрина , на которой представлено все разнообразие размещенной на сайте продукции.

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

6.5 Карточка товара

Носит вспомогательный характер для отображения в каталоге... Представляет из себя описание и краткие, самые значимые характеристики товара, содержит ссылку на страницу или блок с подробным описанием товара. Его цель – быстро представить предлагаемый "товар-лицом"…

6.6 Прайс лист

Если имеет место в рамках разрабатываемого сайта, то может быть представлен в виде таблоида или более сложного варианта отображения (например, в виде сравнительного отображения тарифных сеток, в которых перечислены их составляющие опции)

6.7 калькулятор стоимости

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

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

6.8 Корзина

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

Как правило, для нормального своего функционирования требует также наличия механизма оформления сделки (Системы CRM - управления заказами, выписки сопроводительных документов, организации уведомлений) и сложного программирования для обработки этих действий.

Иллюстрация 8. Пример отображения витрины с фильтрами, корзиной

6.9 Личный кабинет

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

6.10 поиск по сайту

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

Вместо заключения

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