Принципы гештальта в веб-дизайне
Еще раз напомним, что же такое гештальт? Гештальт — пространственно-наглядная форма воспринимаемых предметов, чьи существенные свойства нельзя понять путём суммирования свойств их частей .
Гештальт-психология относится к изучению восприятия. Ниже попробуем объяснить,как можно использовать и правильно применять гештальты (т.е. те самые пространственно-наглядные формы) в веб-дизайне и при проектировании других объектов УСИ.
Опираясь на принципы гештальта можно принимать важные решения относительно дизайна тех или иных элементов веб-страниц, и при этом аргументировать выбор с научной точки зрения, а не опираясь на детское «так красивее/нагляднее/приятнее/легче».
Прикладной смысл гештальтов в дизайне
Прикладная суть гештальтов для проектирования и дизайна страниц в Интернете в том, что можно лаконично и эффективно показывать пользователю, какие элементы родственные, а какие — нет. Следовательно, логично будет заключить, что большинство графических приемов по гештальтам будут носить структурный характер.
В разных источниках предлагаются разные названия этих принципов, и обсуждаются разные принципы как таковые, но мы остановимся на нескольких самых важных для нас с точки зрения проектирования и дизайна веб-страниц и их элементов.
Вот самые важные принципы гештальта:
общая зона: объединение в одну область
близость: расположение ближе друг к другу
связь: графически связанные элементы
схожесть: элементы с аналогичным цветом, формой, размером, очертанием воспринимаются как родственные
Теперь подробнее о каждом принципе.
Для демонстрации того, что принципы гештальта реально работают, мы будем работать с одним и тем же исходным шаблоном, на котором изображена группа аналогичных объектов.
По мере объяснения каждого принципа, будем изменять и применять его, чтоб показать эффект на ваш мозг (при условии, что вы психически здоровы; у душевно больных восприятие другое, и для них принципы гештальта не работают).
Общая зона
Данный принцип основан на утверждении, что элементы, объединенные в одну область воспринимаются как родственные. Общая зона может быть образована фоном, линией, или любым другим графическим приемом. Например так:
Согласен, что в данном случае демонстрация достаточно примитивна, но она иллюстрирует прекрасно саму суть данного принципа гештальта, и показывает, как работает наш мозг. Он понимает, что правая пара связана между собой каким-то образом. Но также мы видим, что левые элементы не только не связанны с правыми, но также и не связанны между собой. Следовательно, мозг делит всю конструкцию на 3 части: правая пара, левый верхний элемент и левый нижний.
Близость
Данный принцип гештальта основан на том, что элементы, расположенные ближе друг к другу воспринимаются как родственные.
Связь
Принцип связи гештальт-психологии гласит, что элементы, графически связанные (например, линиями) воспринимаются как родственные.
Схожесть
Данный принцип гештальта гласит, что элементы с аналогичным цветом, формой, размером, очертанием воспринимаются как родственные.
Итак, выше представлены самые примитивные примеры того, как принципы Гештальта влияют на восприятие группы объектов. Важно понять, что приведенные примеры демонстрируют лишь несколько из множества возможных методов группировки.
Манипуляция восприятием с помощью Гештальтов
Теперь давайте рассмотрим более наглядный пример, в котором мы будем манипулировать простыми принципами гештальта так, чтоб переносить принадлежность попарно от одной группы объектов к другой.
Исходная позиция: 2 фигурки и 2 символа. По близости понятно, какая буква относится к какой фигурке:
Теперь простым добавлением одной линии, мы рубим создавшееся у нас в голове восприятие сгруппированных элементов. Линия не оставляет нашему мозгу выбора, кроме как соотнести фигуры с буквам, которые находятся по одну сторону от сильной горизонтальной линии.
Теперь давайте еще усложним восприятие, заставив наш мозг пребывать в состоянии недоумения. В результате добавления вертикальной линии, мы в конце концов начинаем думать, что все элементы между собой вообще не связаны (по крайней мере, так хочет, чтоб мы думали, оформитель иллюстрации). Но все равно, мы видим, что все 4 объекта (и буквы и рисунки) связаны между собой по меньшей мере цветом.
А теперь мы выходим за группировку по 2-х мерному пространству, и изменяем цвет двух объектов. Сразу от этого они становятся элементами одной группы, которая, как бы, находится в другой плоскости, другом измерении: по каким-то характеристикам группировка подчиняется линиям, а по другим характеристикам — цвету. И почему-то понятно, что цветовая группировка — сильнее.
Теперь давайте усилим связи добавлением дополнительных графических связующих элементов. После такого обновления, становится понятно, какие элементы родственны между собой. Заметьте, как просто линия может служить и элементом разделения, и элементом соединения.
И наконец, добавим еще дополнительные связи, которые окончательно введут нас в недоумение. Мозг будет понимать, что добавляется еще одна характеристика для всех элементов, в которой они родственны в другом порядке.
Все эти манипуляции имеют очень большое влияние на восприятие простых графических элементов. Очень большое значение принципы гештальт-психологии имеют в проектировании интерфейсов. Но и в других сферах дизайна их значение тоже не мало.
Качественно оформленный дизайн всегда правильно применяет правила гештальта. Посмотрите на самые популярные сайты — yahoo.com, youtube.com, google.com, facebook.com — и обратите внимание, как группы объектов объединены между собой, по какому принципу гештальта; связи эти не случайны.