актуально

Принцип Гутенберга при разработке web интерфейсов

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

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

Принцип Гутенберга является основополагающим описанием движения глаз при взгляде на любую конструкцию без явных визуальных акцентов. Правило работает в любых составных системах элементы которых равномерно распределены. Иногда это движение глаз называют - Z-паттерном .

Следи за моими глазами ...

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

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

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

Z-паттерн и гравитация внимания.

Принцип Гутенберга предполагает, что проектное пространство разделено на 4 равных квадранта. 

Активные квадранты - верхний левый и нижний правый. Пассивные квадранты-нижний левый и верхний правый.

Верхние квадранты являются первичными по отношению к соответствующим нижним квадрантам.

Для пользователей в регионах с письменностью справа-налево правило справедливо, но отражено зеркально.
Схема гравитации внимания по принципу Гутенберга
Схема гравитации внимания Гутенберга © Milinevskyy Sergii

Если в дизайне не предусмотреть акценты и направляющие, подсознательно, зритель сам просмотрит макет по Z-образному маршруту. Понимая эту особенность поведения мы можем проектировать иные точки взаимодействия (точки входа/выхода внимания).

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

При наличии "ритма" схема масштабируется по мере изменения зоны внимания.

Z паттерн в многоколоночной верстке
Принцип Гутенберга при многоколоночной верстке

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

Правило Гуттенберга: Манипулирование гравитацией внимания
Манипулирование гравитацией внимания в книге 17 века

Дизайнер, фотограф, иллюстратор, архитектор и любой иной представитель креативной индустрии осознав простоту правила может проще понять как ее воспримет зритель.


Комментарии
Полезность статьи
0 / 5 5 5 1
На основе 1 оценок
0%
0%
0%
0%
0%
Понравилась статья?
Отлично
Комментарий*
Представьтесь

Возврат к списку