Визуальные зависимости в пользовательских интерфейсах

Часто при построении интерфейсов дизайнеры используют теорию Гештальта о визуальной зависимости элементов. Буквально он звучит так: Близкие друг к другу объекты или формы образуют группы. Даже если формы, размеры и объекты радикально отличаются друг от друга, они будут выглядеть как группа, если они близки.

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

Звучит немного сложно, но на деле все гораздо проще.

Итак, для начала я разделил эти зависимости на четыре группы:

Теперь по порядку.

Самая связанная группа элементов. Пример из жизни — мать и ребёнок. Они очень близки и ребёнок имеет прямую зависимость от матери. В пользовательском интерфейсе это можно представить как инпут и лейбл, или статусное сообщение. Все эти элементы имеют прямую зависимость друг от друга.

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

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

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

На первый взгляд этот подход кажется сложным и избыточным. Возможно, вы правы. Данный подход не универсален, и я не утверждаю, что он работает всегда. Но в 98% случаев он мне помогал безотказно.

P.S. Если у вас есть свой способ визуальной иерархии элементов, поделитесь им в комментариях!

Удачи!