Основні принципи ергономічного розміщення інформації на веб-сторінках

Розміщення елементів на сторінці є дуже важливим для їх сприймання та розуміння. Відносне розташування позначає певне взаємовідношенням між змістом цих елементів.

Групування — створення асоціативних зв’язків розміщенням схожих елементів поряд дозволяє швидко зрозуміти структуру сторінки. Людина одразу сприймає згруповані елементи як одне ціле, а елементи з-поза меж групи — як явно відмінні. На сторінці може бути кілька групувань одночасно. При цьому їх можна відділяти одне від одного пропусками, кольорами або лініями.

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

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

Ритм — допомагає пов’язати між собою елементи за рахунок повторення спільних стилістичних особливостей чи розміщення. Наприклад, списки також ґрунтуються на понятті ритму. Ритмом є використання однакового стилю для заголовків одного рівня на всій сторінці — це додає їй цілісності. Може бути так, що на сторінці немає вирівнювання та групування, але елементи сприймаються як рівнозначні однорівневі категорії за рахунок повторення стилістичних рис.

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

Пропорція — це співвідношення між різними елементами або між цілим об’єктом та його частинами. Менші елементи майже непомітні, тоді як більші виходять на перший план.

Домінантність визначає візуальну вагу композиції, створює простір та перспективу, і часто вказує на місце композиції, яке переглянуть першочергово.