Как закрыть гештальт: продающий дизайн сайта с точки зрения психологии

Гештальт в дизайне. Продающий дизайн сайта с точки зрения психологии

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

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

Основные положения гештальтпсихологии

Это направление психологии направлено на изучение целостных структур (гештальтов), призванных объяснить особенности восприятия и мышления человека. Нас в гештальт-теории, прежде всего, будет интересовать то, как люди воспринимают визуальные объекты. Можно выделить 3 основные идеи:

1. Соотношение целого и частей. Наш мозг быстрее распознаёт целое, чем его составляющие. При взгляде на какой-либо сложный объект сначала мы воспринимаем его с точки зрения целостной формы, а уже потом переходим к выделению и анализу его частей. Любопытный факт, открытый гештальтистами, состоит в том, что мозг стремится дорисовать детали даже в случае отсутствия некоторых из них. Таким образом, происходит достраивание картинки до целостного образа, или закрытие гештальта. Этот приём часто используется при создании логотипа.
2. Простые объекты легче воспринимаются. При этом не важно, каковы их размеры или положение в пространстве. Вне зависимости от степени искажения мы всё равно узнаём простую форму и выделяем её среди более сложных.
3. Избирательность восприятия. Когда объект невозможно однозначно идентифицировать, мозг получает сразу несколько способов его восприятия. При этом выбор всегда делается в пользу какой-то одной доминирующей интерпретации. Так, например, в XVIII–XIX веках создавались «обратимые фигуры», пользующиеся большой популярностью в юмористических журналах того времени.

Идеи, составляющие основу гештальтизма, широко используются в UX-дизайне.

Законы визуального восприятия в UX

При создании интерфейсов продающих сайтов разработчики могут использовать основные законы гештальтпсихологии:

1. Закон Хика. Чем больше возможных вариантов предлагается пользователю, тем сложнее ему будет в итоге выбрать наиболее подходящий для себя. Кстати, это заметно и на бытовом уровне: когда мы в магазине покупаем яблоки, то нам психологически проще сделать выбор из 2-3 сортов, чем из 10. С интерфейсами всё так же. Закон гештальта в дизайне сайта лучше всего работает в том случае, когда у посетителя есть выбор, но не слишком большой.
2. Концепция избирательного игнорирования. При просмотре страницы сайта пользователи сразу воспринимают какую-то часть информации, при этом данные, не представляющие для них интереса, они просто игнорируют. Вот почему UX-дизайнеры стараются всю важную информацию чётко структурировать и представлять в максимально лаконичной форме без лишних декоративных элементов, чтобы посетителя ничто не отвлекало.
3. Закон Миллера. В среднем человек способен запомнить около 7 ± 2 элементов, предъявляемых ему одновременно. Как мы уже выяснили, при просмотре страницы сайта восприятие работает в ускоренном режиме (полный анализ занимает 10-15 секунд), поэтому количество элементов можно смело сократить вдвое. Интерфейс должен быть построен таким образом, чтобы вся важная информация как раз укладывалась в эти 10-15 секунд. От разработчиков сайта требуется грамотно направлять внимание пользователя, располагая в нужных местах подсказки, всплывающие окна уведомлений и т.д.
4. Ментальные модели. Наш мозг поиску новых способов действия предпочитает уже проверенный путь, вот почему так важен предыдущий опыт взаимодействия с объектом. Восприятие в таком случае будет опираться на уже привычную схему. Например, посетитель ожидает увидеть поле для входа/регистрации на сайт в правом верхнем углу страницы, и он может удивиться и даже впасть в ступор, обнаружив его, скажем, в нижнем углу слева.

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

Принципы гештальтизма в разработке интерфейса сайта

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

Гештальт в дизайне – Простота

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

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

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

Близость

Когда объекты расположены близко друг к другу, мы воспринимаем их как единую группу вне зависимости от их формы, цвета или размера. Например, слово – это не что иное, как сочетание близко расположенных букв. Для UX-дизайна этот принцип также актуален, особенно в тех случаях, когда необходимо показать связанность элементов:

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

Принцип близости призван облегчать восприятия визуальной информации большого объёма. Например, в соответствии с ним можно оформить раздел «Вопрос – ответ» или страницы с длинным текстом. Объединение в группы удачно использовать тогда, когда пользователю предлагается заполнить слишком много полей. Вспомним закон Миллера, согласно которому мы можем одновременно  охватывать взглядом не так уж много объектов (около 7 ± 2). Для облегчения восприятия рекомендуется компоновать поля в группы по 4-5 штук.

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

Общие области

Принцип, рассмотренный нами выше, касался расположенных близко элементов. Мозг воспринимает их как группу. Однако иногда возникает необходимость выделения отдельных частей единого целого, например, в подгруппу. И в таком случае приходит на выручку такой постулат гештальта в дизайне, как принцип общих областей: элементы могут быть отнесены к отдельной группе, если они визуально объединены друг с другом (с помощью другого цвета, подчёркивания, рамки и т.д.).

Гештальт в дизайне – Сходство

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

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

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

Общее направление

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

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

Завершение

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

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

Симметрия

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

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

Фигура и фон

Наше восприятие способно безошибочно отличать фигуру на основном фоне, даже когда речь идёт о 2D-изображениях. Дело в том, что визуально всегда присутствуют два плана: ближний и дальний. Мозг человека, определяя, какой из них важнее, как бы даёт подсказку, на что конкретно необходимо отреагировать.

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

Непрерывность

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

Заключение

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