Нужны ли модульные сетки в дизайне сайтов?

Иногда дизайнеры пренебрегают этим инструментом, считая его препятствием для креативности. Можно ли действительно обойтись без сеток при проектировании дизайна? И какой дизайн является более приемлемым для пользователей: спроектированный по сеткам или без?

Люди лучше всего воспринимают структурированную информацию

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

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

Структурированная информация в виде инфографики в 30 раз чаще читается, нежели обычный текст.
Рассвет инфографики, 2017 год

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

Пользователи используют паттерны для изучения информации на сайте

79% людей при ознакомлении с сайтом не читают всё по порядку, а сканируют (выборочно просматривают) текст.
Исследования Я.Нильсена, 1997 год

Существует 4 основных вида просмотра контента пользователями: по F-шаблону (F-pattern), точечно (spotted pattern), по абзацам (layer-cake pattern), полное ознакомление (commitment patter). Каждый вид сканирования текста предусматривает движение глаз по определенным структурированным схемам.
Исследования Нильсен Норман Групп, 2019 год

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

Сетки упрощают сканирование и поиск нужной информации

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

Представление информации в виде, облегчающем сканирование, улучшает удобство использования веб-страницы на 47%.
Статистика Нильсен Норман Групп, 1997 год

Проектирование дизайна по модульным сеткам позволяет визуально разделить контент веб-страницы на области, которые можно быстро и легко просканировать для поиска нужной информации.
Статистика eye-tracking Нильсен Норман Групп, 2019 год

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

Какие дополнительные преимущества при использовании сеток?

Использование сеток при проектировании дизайна не создает в дальнейшем конфликт при верстке и создании адаптивных версий сайта.
Адаптивный макет и сетки

Применение сеток помогает экономить время при создании других страниц сайта, а также при возникновении необходимости внести изменения в макет.
«4 причины применения сеток в дизайне» С.Брэдли, 2013 год

Сетки помогают избежать ошибок. Рекомендуемый интервал между кнопками, который помогает избежать ошибок пользователей при их нажатии — 23 пикселя. Использование сеток поможет избежать подобных ошибок уже на стадии проектирования дизайна.
«Создание дизайна для различных экранов и устройств», Н.Бабич, 2017 год

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

‍Резюме‍

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

Применение сеток позволяет оптимизировать работу дизайнера и избежать ошибок в дальнейшей работе готового сайта.

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