Найти тему
Дима с Холмов

Визуальное восприятие, принципы гештальта

Оглавление

«Видение — это вера». То, что вы видите своими глазами, в то ты и верите». А роль зрения в нашей жизни и культуре является центральной, о чем свидетельствует то, обилие визуального контента, который нас окружает сегодня.

 Зрение позволяет нам обрабатывать информацию из окружающего нас мира, информация попадает нам в глаза. Так происходит восприятие, посредством которого мозг организует и интерпретирует данные полученные от наших глаз. На наше восприятие влияют многие вещи, включая культуру, уже имеющийся опыт и наши будущие ожидания. Увидеть не значит поверить. Что дизайнерам нужно знать о восприятии? Когда мы разрабатываем для людей сайты, приложения да хоть что, полезно понимать некоторые процессы, которые влияют на то, как люди воспринимают всё это. Восприятие — является индивидуальным и сложным процессом, и то, как человек воспримет что-то, никогда не будет в нашем полном контроле, но мы можем предугадывать то, как поведут себя те или иные группы людей. Для этого и проводятся всевозможные апробации продуктов перед массовым запуском. Первое, что тебе нужно знать, так это то, что не всему нужно верить. Есть много способов, с помощью которых наше восприятие, в частности наше зрительное восприятие, может быть обмануто.

-2

Вот например, в одной классической оптической иллюзии, треугольнике Канижа, мы видим «белый прозрачный треугольник», хотя никакого треугольника на самом деле нет. На то, что мы видим, также влияет наш культурный контекст, например различия в восприятии глубины, которые ведут к теории «плоского мира». Эта теория предполагает, что когда мы привыкли жить в мире, полном прямых углов, мы более легко поддаемся иллюзиям, таким как иллюзия Мюллера-Лайера. В классическом исследовании 1963 года, проведенном «Segal et al», европейцы и американцы оказались наиболее восприимчивыми к иллюзии, а охотники-собиратели из Калахари были менее восприимчивыми. Дизайнерам важно понимать, что культура влияет на мировосприятие, и они должны проверять свои работы на целевых группах пользователей, чтобы понимать имела ли смысл их работа вообще.

Великие правила — Принцип Гештальта.

«Целое получается из суммы частей»
психолог Курт Коффка.

Итак, если восприятие — сложный и тонкий процесс, как на него влиять? В 1930-х и 40-х годах группа психологов разработала некоторые основополагающие теории о зрительном восприятии. Основной принцип гештальт-психологии заключается в том, что наш разум работает над созданием «единого целого» (гештальт) из различных и хаотических данных, которые он получает. Как выразился гештальт-психолог Курт Коффка, «целое получается из суммы частей». Из этих исследований был разработан набор основополагающих принципов визуального восприятия. Эти принципы имеют основополагающее значение для визуального общения в графике и интерфейсе / веб-дизайне. Понимание и применение принципов гештальта может усилить работу любого дизайнера. Существует множество подробных руководств по гештальт-принципам, если у тебя появилось желание узнать больше, то в интернете есть все основные принципы, которые можно найти и почитать. Для начала нужно понять пять гештальт-принципов, чтобы двигаться дальше:

-3

1. Соотношения сторон.

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

-4

2. Близость.

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

-5

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

-6

3. Принцип сходства (Guidline).

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

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

4. Элементы важности.

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

-7

Хороший пример — это уведомления приложений iOS, они имеют красный пузырек справа у иконки, это пример визуальной иерархии с использованием цвета и формы — глаз человека в первую очередь замечает яркие цвета, это относится и к иконкам приложений. Поток и порядок элементов будут информировать иерархию. В западно-культурном контексте мы читаем слева направо и сверху вниз. Относительный размер элементов также влияет на иерархию — подумайте о различии между заголовками h1 и h4 при верстке в HTML! Цвет и форма также могут влиять на то, как мы воспринимаем иерархию. Уведомления на главном экране iOS — отличный пример этого.

Источник изображения: @AkiyoshiKitaoka
Источник изображения: @AkiyoshiKitaoka

5.Восприятие цвета.

Мозг воспринимает цвет загадочным образом, как то самое известное платье, о котором говорил весь интернет. Эти иллюзии основаны на цветовом постоянстве, которое по «Википедии» является «особенностью системы восприятия цвета человеком, гарантируя, что воспринимаемый цвет объектов остается относительно постоянным при различных условиях освещения». Есть также люди, которые могут воспринимать больше цветов, чем мы регулярно видим, это состояние называется тетрахромацией. Опять же, когда дело доходит до восприятия реального цвета, у всех людей, оттенки воспринимаются по-разному. Акиоши Китаока, профессор психологии в университете Ritsumeikan в Японии разработала цветовую палитру, которая состоит только из серых и голубых пикселей, но мы воспринимаем их как красный.

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

Восприятие — поистине таинственный процесс, а знания о нем, это ничто иное как психология. Чтобы быть отличным дизайнером, всегда помни о процессах восприятия и их ключевых принципах. Так ты значительно продвинешься в своей работе. Как сказал Джон Леннон, «чем больше я вижу, тем меньше я знаю точно».