Напис на вході до будівлі КГС ВС у Києві

Ласкаво просимо до Верховного Суду Касаційного!

Господарського суду!

Саме так можна прочитати величезну вивіску КГС ВС, яка зустрічає кожного відвідувача.

Чудовий привід написати про принцип близькості (Proximity Principle), що використовується у візуальному дизайні. Немає жодних причин не послуговуватися цим принципом у дизайні юридичних документів.

Теорія

Принцип дуже простий:

Об’єкти, розташовані поряд, сприймаються пов’язаними.

Вірним є й зворотне: елементи, між якими є простір, сприймаються як такі, що належать до різних груп.

Це означає, що:

1. Пов’язані елементи мають бути візуально згруповані.
2. Непов’язані елементи мають бути візуально розділені.
3. Має бути створена візуальна ієрархія, що має на меті полегшити життя читачу і бути для нього дороговказом.

Практика

Повернімося до напису на вході до КГС ВС. Назва суду складається з двох змістовних елементів: Верховний Суд | Касаційний господарський суд. Але у нашому прикладі відстань між рядками не виглядає однаковою.

До того ж між словами «Касаційний» та «господарський» невдало розташований стик облицювальної плитки, який створює відчуття розділювальної риски. Саме тому візуально напис складається з двох неправильних частин: Верховний Суд Касаційний | господарський суд:

Напис на вході до ВГС ВС з орієнтовною довжиною міжрядкових інтервалів. Заміри не претендують на точність.

Є очевидним, що це не провина суду, а недбалість виконавця, оскільки офіційний дизайн КГС ВС як раз чудово враховує принцип близькості:

Вивіска КГС ВС. Елемент «Верховний Суд» сприймається окремо від «Касаційний господарський суд»

Інший приклад, як робити не треба:

Напис поряд з будівлею посольства США у Києві

Тут вже неозброєним оком видно, що слово «Посольство» візуально зливається з англомовною частиною напису. Відстань між «Посольство» і «Сполучених Штатів Америки» є більшою, ніж між англомовним та україномовним блоками. Це створює враження, що слово «Посольство» належить до англомовного блоку, тоді як останній рядок українською виглядає ізольованим.

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

Останній приклад — форматування Конституції України на сайті Президента України:

Скріншот з сайту Президента України

На початку все чудово: відстані між заголовком, підзаголовком і основним текстом є різними, в залежності від ієрархії. Але далі будову порушено, адже відстань між статтями є такою ж, що і відстань між абзацами всередині самих статей. Через це структурованість дещо збивається, оскільки статті недостатньо ізольовані одна від одної і сприймаються менш «промовисто».

Приклад

Пропоную уривок з однієї апеляційної скарги:

Фрагмент апеляційної скарги в одній адміністративній справі. Місце, де «шапка» перетікає в основний текст

У цьому прикладі:

1. Реквізити відповідачів «приклеєні» до написів «відповідач 1» і «відповідач 2».
2. Відстань між адресою відповідачів є більшою, ніж відстань між рядками з їх іменами/назвами. Але меншою, ніж між двома відповідачами.
3. Заголовок документа («Апеляційна скарга») розташований далі від «шапки» та ближче до основної частини. Це єдине місце в документі, де використано шрифт більшого розміру.
4. Підзаголовок розташовано ближче до основного тексту, ніж до заголовка.
5. Відстань між абзацами є більшою, ніж відстань між рядками.

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

Загалом, рекомендації прості й очевидні:

1. Зближувати пов’язані змістовні блоки для покращення їхньої візуальної єдності.
2. Чітко відділяти ці блоки один від одного.
3. Розташовувати заголовки та підзаголовки ближче до відповідних абзаців чи рядків

Мій канал у телеграмі