Направление чтения

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

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

По умолчанию человек читает слева направо и сверху вниз, как на этой схеме:

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

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

Если текст разбит на колонки, человек читает сначала одну колонку, потом переходит наверх вправо и ищет продолжение:

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

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

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

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

Также надо следить, чтобы разница в высоте колонок была не слишком большой и чтоб они не связались с чем‑то рядом.

В вебе лучше стараться не экспериментировать и следовать правилам: колонки должны быть выровнены по верху и не слишком сильно отличаться по высоте.

Теперь представим, что есть не просто две колонки, а матрица:

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

Теперь мы без проблем понимаем, что нужно прочитать левую колонку, а затем правую.

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

Теперь читатель разберётся в порядке чтения.

А вот пример, когда недоразделили. С одной стороны, блоки пронумеровали, а с другой — взгляд первым делом бежит на тройку, хотя должен бежать на двойку:

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

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

Чтобы такого не происходило, лучше разбить эти две колонки на два этажа:

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

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