Обязательно ли использовать блочную структуру у сайтов?

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

Почему сайты состоят из блоков?

Основываясь на данных 471 айтрекинг-исследования, проведенных в период с 2017 по 2019 год, NNGroup проанализировали поведение пользователей при просмотре онлайн-контента. 

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

NNGroup: “Поведение пользователей”, 2019 год

В статье “Особенности восприятия текстовой и графической информации” изучается то, как пользователи воспринимают текстовую информацию. 

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

Статья “Особенности восприятия текстовой и графической информации”

NNGroup проанализировали серию проведенных за 13 лет айтрекинг-исследований, в которых приняли участие более 500 пользователей. 

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

NNGroup: “Как люди читают в сети?”, 2020 год

Статистика NNGroup за 1997 год подтверждает результаты предыдущего исследования: разделение контента на блоки повышает удобство использования веб-страницы на 47%, за счет улучшения читабельности и восприятия текста.

Статистика Нильсен Норман Групп, 1997 год

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

Блочная структура сайта и адаптивность

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

Статья «Создание блоков для эффективных макетов»,  2016 год

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

Статья «Основы адаптивного дизайна», 2016 год

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

Резюме

Блочная структура стала основой для проектирования современных сайтов по двум основным причинам:

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

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