Гештальт принципы в WEB UI дизайне с примерами

Опубликовано: Понедельник, Март 23, 2015 Комментарии (0)

Оптические иллюзии и образное восприятие в целом – мощный механизм в средствах графического выражения и web ui дизайна. Эти захватывающие (или не заметные, но действенные) эффекты не всегда просто результат какой-то магии или интуиции. Как правило у грамотного дизайнера найдется адекватное объяснение для бОльшей части его работы.

На Гештальт принципах построено очень много хороших web интерфейсов. Здесь я бы хотела привести примеры, основываясь на материалах любопытной книги от UxPin «Web UI design for the human eye», которые показывают принципы именно в работе с web проектами, а не на основе абстрактных всем знакомых картинок с иллюзиями. Но для начала немного теории.

Кто такой этот Гештальт

Можно было бы предположить, если не знать о чем речь, что эти самые принципы придумал некий умный дяденька Гештальт. Но не тут-то было. Слово «гештальт» по-немецки значит форма. И начало этой области положил Макс Вертхаймер в далеком 1910 году, наблюдавший за световым сигналом на железнодорожном переезде. Помните 2 попеременно включающиеся лампочки? Это всего лишь два отдельных огонька, а кажется будто один огонек «бегает» туда-сюда.

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

Основные Гештальт принципы

Появление / Emergence

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

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

Материализация / Reification

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

Применение в web дизайне: используйте белое/негативное пространство не как пустой холст, а как дополнительный инструмент для выражения (этот аспект подробнее рассмотрен ниже в разделе “Замыкание / Closure”).

Мультистабильность / Multistability

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

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

Инвариантность / Invariance

Мы способны различать объекты независимо от их масштаба, перспективы и даже при небольшой деформации.

Гештальт принцип: Инвариантность / Invariance

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

Применение в web дизайне: это любопытное свойство не так значительно как остальные принципы, описанные выше. Однако и оно нашло свое применение: CAPTCHA (проверка человек ли отправляет некий запрос в интернете или робот).

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

В 1954 году Рудольф Арнхейм переработал Гештальт принципы в книге «Искусство и визуальное восприятие» и опубликовал 5 основных принципов, которые могут быть очень полезны в проектировании интерфейсов:

  1. Сходство / Similarity
  2. Взаимодействие фигуры и фона / Figure-Ground Relationship
  3. Группировка / Grouping
  4. Замыкание / Closure
  5. Продолжение / Continuation

Сходство / Similarity

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

Пример из web дизайна:

Принцип Гештальт Сходство / Similarity на примере

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

Взаимодействие фигуры и фона / Figure-Ground Relationship

Элемент может восприниматься либо как фигура (элемент, на котором фокусируется глаз), либо как фон.

Стивен Брэдли описал 3 типа взаимодействия фигуры и фона, которые показаны в следующей иллюстрации:

Принцип Гештальт: Взаимодействие фигуры и фона / Figure-Ground Relationship

Стабильное (слева). Очевидно, что слева изображен круг. Очертания фигуры четко видны на однотонном сером фоне.

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

Неопределенное (справа). Не понятно где фигура, а где фон. Это позволяет оставить больше свободы для интерпретации изображения зрителем.

Примеры из web дизайнов:

Гештальт принцип: стабильное взаимодействие фигуры и фона

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

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

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

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

И есть еще один очень интересный прием в web дизайне, который косвенно, но все же можно рассматривать как пример этого принципа:

geshtalt-7
Эффект, когда текст как бы «вырезан» и внутреннюю часть букв наполняет продолжение фона. На мой взгляд с приходом css поддержки (clip-path) этот эффект нам еще надоест в будущем :)

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

Группировка / Grouping

Это одно из самых важных свойств для web ui дизайна. Неоднородные элементы, сгруппированные вместе могут выглядеть схожими/подобными. Принципы Гештальт могут предложить по крайней мере 2 способа группировки разнородных объектов:

Общая зона. Объединение разных объектов какой-либо общей рамкой, блоком с фоном и т.п.

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

Пример для web дизайна. Иерархия управляющих элементов.

Пример принципа Гештальт. Группировка
Рассмотрим прототип онлайн карты. В иерархии данной страницы как раз очень хорошо показаны принципы группировки.

Условно все элементы управления/блоки можно разделить на 3 части:

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

Средний уровень взаимодействия (поиск адреса). Когда вы вводите адрес, то это влияет на карту и ее масштабирование, но никак не влияет на выбор категории. Чтобы это показать визуально блок с поиском занимает ширину всей карты, но при этом находится в рамках левой колонки.

Тонкая настройка (кнопки масштабирования). Кнопки масштабирования изменяют только вид карты, поэтому они расположены внутри блока с картой.

Замыкание / Closure

Данное свойство основано на уже рассмотренном принципе Гештальт «Материализация / Reification». Свойство человеческого разума дополнять неточные формы дает нам дополнительные инструменты проектирования интерфейсов.

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

Пример принципа Гештальт

Можно создавать из малых объектов большие формы, совмещая несколько идей, посылаемых пользователям в вашем интерфейсе. Например, здесь человеческий глаз способен «собрать» из мелких картинок текст, при этом мелкие картинки здесь – клиенты компании, а текст – название компании:

Пример принципов Гештальт

Продолжение / Continuation

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

Пример Гештальт принципа Продолжение Continuation

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

Пример Гештальт принципа Продолжение Continuation

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

Заключение

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

Хорошо спроектированные интерфейсы – это не просто красивая статичная картинка, не только бесконечные паттерны, рамки, иконки и большие стоковые фотографии. Это так же незаметная, но очень кропотливая работа, которая даже не многим дизайнерам из других сфер понятна. Как довести пользователя до желаемого результата? Какие должны быть кнопки? Как интерфейс должен реагировать на действия пользователя? Где какую информацию выводить, как её лучше структурировать и как выделить самое главное. Это все web ui дизайн. И данная статья, основанная на разделе из книги «Web UI design for the human eye» лишь капля в море знаний на пути к хорошему интерфейсу.

Материалы по теме

Uxpin web ui design for the human eye
The Gestalt Principle: Design Theory for Web Designers
Gestalt Principles of Perception – 5: Closure

Поделитесь с друзьями:

Читайте также:

Комментируйте: