Как создать интуитивно-понятный дизайн: гештальт-принципы в UX

Привет! На связи KISLOROD.

Коммуникация играет центральную роль как в пользовательском интерфейсе — UI, так и в проектировании пользовательского опыта — UX. Понять то, как пользователи воспринимают вашу работу, помогут принципы гештальта.

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

Gestalt (гештальт) в дословном переводе с немецкого — форма, образ, фигура, но если переводить по смыслу, то по-русски — это целостность. Термин подразумевает, что человеческий мозг воспринимает объекты в совокупности, как цельную картину.

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

В в 1920-х годах эту идею развили немецкие экспериментальные психологи Макс Вертгеймер, Вольфганг Келлер и Курт Коффка.

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

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

Таким образом, гештальт — это любой цельный образ, который составлен из разделенных частей.

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

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

Это работает не только с картинками, например, мозг воспринимает мелодию не просто как набор звуков — из всей массы сигналов сознание выделяет отдельный образ, а остальное становится его фоном.

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

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

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

Далее рассмотрим каждый принцип по отдельности.

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

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

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

Еще один пример — логотип «Музея современного искусства» в Лос-Анджелесе. Лишь одна буква настоящая, а остальные буквы — «М», «О» и «А» заменены на квадрат, круг и треугольник соответственно.

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

Любые изображения мозг автоматически раскладывает на фигуру и его фон, таким образом он отделяет главное от второстепенного.

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

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

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

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

Например, в логотипе FedEx спряталась стрелка перед буквой X.

Красивый пример на афише симфонической сказки «Петя и волк» Сергея Прокофьева.

А вот еще один пример, уже из веб-дизайна.

Группа объектов, которые расположены близко друг к другу, воспринимается, как единое целое.

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

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

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

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

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

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

Это принцип близости в действии.

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

Объекты, которые схожи между собой, объединяются в общую группу.

Мозг склонен группировать объекты по форме, цвету, размеру и думать, что они выполняют одинаковые функции.

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

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

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

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

Незаметно для нас цветовая дифференциация сигнализирует о том, что эти ссылки выполняют разные функции.

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

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

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

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

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

Примеры, как работает принцип в графике. Первыми этот принцип использовали художники, посмотрите, например, на картину Пикассо «Поцелуй».

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

Еще один — всем знакомый пример.

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

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

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

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

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

Симметричные друг другу элементы пользовательского интерфейса помогают распознать определенный шаблон.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Еще один пример.

Когда же надо показать различия, то достаточно отойти от этого принципа

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

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

Сфокусируйте внимание пользователей на важных элементах: кнопках и CTA.

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

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

Так например, вы интерпретируете красный, желтый и зеленый круги внизу как сигналы светофора, потому что именно там мы часто видим эти цвета и формы.

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

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

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

Многие приложения Apple по умолчанию имеют узнаваемые формы и символы: значок FaceTime — это видеокамера, приложение Mail — конверт, приложение Clock выглядит как часы и т. д.

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

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

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

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

Этот принцип интересен тем, что изначально он не был включен в число исходных принципов. В 1990-х годах психологи Стивен Палмер, Ирвин Рок и Дайан Бек провели обширные исследования человеческого восприятия и роли взаимосвязанности. Они заметили, что предвзятость восприятия, связанная со связанностью, не была устранена, и ввели новый принцип под названием «Закон связанности элементов».

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

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

Почему важны принципы визуального дизайна:

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

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

А вы используете гештальт-принципы в UX и UI? Поделитесь своим опытом в комментариях.

Читайте предыдущие статьи о психологии в UX и веб-дизайне:

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

Расскажите нам о своих задачах.

Чтобы узнать больше про продуктовый подход в e-com проектах — присоединяйтесь к нашему каналу в Telegram и подписывайтесь на блог на VC.RU.