Изучение гештальт-принципов дизайна

Послушайте аудиоверсию этой статьи.

Негативное пространство долгое время было основным элементом хорошего дизайна. Оставлять пустое пространство вокруг элементов дизайна — это первое, что обычно приходит на ум. Но есть дизайны, в которых это пустое пространство используется для обозначения элемента, которого на самом деле нет (в качестве примера сразу же приходит на ум стрелка, спрятанная между буквами E и X в логотипе FedEx).

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

Этот принцип является одной из наиболее важных идей, лежащих в основе гештальт-принципов визуального восприятия. Наиболее влиятельное раннее предложение, написанное о теории, было опубликовано Максом Вертхаймером в его гештальт-законах организации восприятия 1923 года , хотя обсуждение физических гештальтов Вольфганга Келера 1920 года также содержит много влиятельных идей по этому вопросу.

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

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

Существует шесть отдельных принципов, обычно связанных с теорией гештальта: сходство , продолжение , закрытие , близость , фигура/ фон и симметрия и порядок (также называемые прагнанцем ). Есть также некоторые дополнительные, более новые принципы, иногда связанные с гештальтом, такие как общая судьба.

Сходство

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

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

В UX-дизайне использование сходства позволяет вашим посетителям понять, какие элементы похожи. Например, в списке функций, использующем повторяющиеся элементы дизайна (такие как значок, сопровождаемый 3-4 строками текста), принцип подобия облегчит их просмотр. Напротив, изменение элементов дизайна для функций, которые вы хотите выделить, выделяет их и придает им большее значение в восприятии посетителя.

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

Продолжение

Закон непрерывности утверждает, что человеческий глаз будет следовать наиболее плавному пути при просмотре линий, независимо от того, как линии были на самом деле нарисованы.

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

Так как глаз естественным образом следует за линией, размещение элементов в ряд в ряд естественным образом будет привлекать взгляд от одного элемента к другому. Горизонтальные ползунки — один из таких примеров, как и списки связанных продуктов на таких сайтах, как Amazon.

Закрытие

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

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

Закрытие довольно часто используется в дизайне логотипов, например, для USA Network, NBC, Sun Microsystems и даже Adobe.

Еще один очень важный пример закрытия в работе в дизайне UX и UI — это когда вы показываете частичное изображение, исчезающее с экрана пользователя, чтобы показать им, что можно найти больше, если они проведут пальцем влево или вправо. Без частичного изображения, т. е. если отображаются только полные изображения, мозг не сразу интерпретирует, что может быть видно больше, и, следовательно, ваш пользователь с меньшей вероятностью будет прокручивать (поскольку закрытие уже очевидно).

Близость

Близость относится к тому, насколько близко элементы находятся друг к другу. Самые сильные отношения близости — это отношения между перекрывающимися объектами, но простое группирование объектов в одну область также может иметь сильный эффект близости.

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

Возьмите эту группу кругов, например:

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

Фигура/фон

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

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

Более простой пример можно увидеть на этом изображении двух лиц, образующих между собой подсвечник или вазу:

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

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

Симметрия и порядок

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

Вот еще один хороший пример принципа гештальт-дизайна « pragnanz »:

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

Общая судьба

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

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

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

Гештальт-принципы в UX-дизайне

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

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

Дальнейшее чтение в блоге Toptal Design:

• Принципы проектирования: введение в иерархию
• Лучшие практики дизайна пользовательского интерфейса и распространенные ошибки
• Как использовать мощные гештальт-принципы в дизайне (с инфографикой)
• Всеобъемлющее руководство по информационной архитектуре
• Улучшите свой UX с помощью этих успешных принципов дизайна взаимодействия