Принципы гештальта в дизайне — принцип симметрии

Мы склонны воспринимать симметричные элементы как связанные, даже если это не так.

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

Это пятая часть серии о принципах гештальта в дизайне. Первая, Принцип близости, рассматривает, как мозг воспринимает группы предметов в зависимости от того, насколько близко они расположены друг к другу. Вторая, Принцип замкнутости/завершения, объясняет, как наш мозг способен воспринимать больше информации, чем находится в нашей видимости. Третья часть, Принцип подобия, объясняет, почему мозг воспринимает похожие объекты как группу или паттерн. Четвертая часть, Принцип продолжения, предполагает, что элементы, которые расположены вдоль линии или кривой, мозг воспринимает как более связанные, чем элементы, не связанные между собой линией или кривой.

Как работает симметрия

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

Проще говоря, баланс облегчает восприятие.

Существует несколько различных видов симметрии. Некоторые примеры симметрии:

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

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

Трансляционная симметрия — важный аспект атомарного дизайна. Идея дизайн-организмов Брэда Фроста — «группы молекул, объединённых в относительно сложный, отдельный раздел интерфейса» — идеальный пример того, как работает трансляционная симметрия и почему она способствует созданию хорошего дизайна.

Представьте, что «организмы» Фроста — компоненты, которые используются во всей дизайн-системе. Один из простых примеров — карточка с контентом на странице или в макетах, которая показывает или перечисляет контент из других мест, например, список статей или таблицу товаров. Одинаковый дизайн карточек помогает пользователю быстро понять, что все «организмы» относятся к одному и тому же типу, независимо от того, как они отображены на экране.

Когда элементы сохраняют свои положения и относительные ориентации при перемещении или переносе в новое местоположение, они обладают трансляционной симметрией.

Как работает асимметрия

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

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

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

Слева от этого макета расположены инструменты для фильтрации списка с контентом, который находится в центральной колонке. Тогда как справа находятся точки, которые предназначены для углубления опыта взаимодействия с контентом из других мест. Здесь, конечно же, действует трансляционная симметрия, так как элементы фильтра, списка с контентом и точек взаимодействия стандартные и повторяются. Однако есть и общая асимметрия макета, которая намеренно управляет установленными ожиданиями согласно L-паттерну. Чтобы объяснить это, я процитирую свою старую статью:

«Исследования юзабилити продолжают подтверждать факт о том, что посетители следуют L-паттерну при сканировании страницы. Иногда его также называют F-паттерном. По сути, это означает, что мы сканируем страницу сверху вниз, а затем слева направо. Более того, кроме описания направления взгляда пользователя, L-паттерн также свидетельствует о наших ожиданиях. При сканировании мы ожидаем увидеть определенные типы информации в конкретных местах. Годы онлайн-рекламы и привычные стандартные макеты, которые есть в Интернете — все другие сайты, которые мы просмотрели за всю свою жизнь — привели к привычным ожиданиям во всех контекстах. Как в бизнесе, так и в личных делах.

Эти привычные ожидания можно разделить на три типа, которые, благодаря L-паттерну, естественным образом попадают в три сектора на странице:

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

Контент: Центр страницы, как правило, резервируют для размещения основного контента страницы. Это позволяет пользователям быстро скроллить страницу вниз в одном направлении, а не передвигать взгляд вверх-вниз и туда-сюда. Я рекомендую применять одноколоночный макет, потому что он упрощает сканирование. Например, сетки усложняют навигацию, так как требуют гораздо больше усилий для анализа. Пользователям необходимо разобраться в логике расположения элементов сетки по двум осям, прежде чем сделать выбор. Часто они делают это плохо и вынуждены вернуться назад, когда понимают, что страница, на которую они попали, на самом деле не то, что они искали.

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

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

Если мы применяем дизайн-решения, которые требуют от пользователя «переучиваться» каждый раз, когда он видит компоненты макета или разбираться в том, как в целом работает макет, расположенный по осям, то мы ожидаем от него слишком быстрого фокуса. Внимание поддерживает фокус; и не наоборот.

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