Как применять оптические иллюзии в интерфейсах

#гештальт #интерфейс #иллюзия #сайт
Признайте, в какой-то момент жизни оптические иллюзии здорово вас удивили.
Поразительно, какие фокусы проделывает с нами зрение, но ещё больше удивляет, что мы, как правило, склонны доверять глазам больше, чем здравому смыслу. Но оптические иллюзии чаще являются результатом науки о зрении — науки гештальт.
Столпы гештальт в дизайне
Хотя так может и показаться, но основы гештальт — не работа всей жизни какого-то парня по имени Гештальт. гештальт на самом деле — немецкое слово, означающее форму или очертания. Оно было использовано в начале XX века в качестве названия движения в психологии, в котором зародились основы гештальт.
Рассмотрим ниже четыре свойства гештальт.
1. Появление
Пытаясь опознать объект, мы (люди) сначала обращаем внимание на его контуры, а потом уже сопоставляем их с знакомыми нам очертаниями. Только после опознания контуров образа мы начинаем замечать детали объекта, его части отдельно от целого.
2. Материализация
По причине того, что визуальные стимулы сильно противоречивы, наш мозг запрограммирован на «заполнение пробелов», когда информации не хватает. Это позволяет нам понимать видимое, даже если оно расплывчатое или ограниченное.
3. Мультиустойчивость
Если у объекта есть больше, чем одна интерпретация, то сознание будет переключаться между интерпретациями, так как оно не может видеть их все одновременно. Чем дольше зритель фокусируется на одной интерпретации и меньше на другой, тем более доминирующей становится первая.
4. Неизменность
Также как и воплощение, неизменность — другая тактика, которую использует наш мозг, воспринимая картинку несмотря на её сильную несогласованность. Принцип неизменности показывает, что мы распознаём очертания и образ объекта вопреки разнице в перспективе, повороте, масштабе и даже незначительных деформациях.
5 наиболее полезных правил гештальт
В 1954 году, через десятилетия после того, как Вертхаймер впервые остановился и смотрел на огни поездов, Рудольф Арнхейм собрал все основы гештальт в сокращённом виде в книге «Искусство и визуальное восприятие: психология креативного зрения». Как предложил дизайнер Кароланн Боннер, есть пять правил, наиболее полезных в ежедневном применении:
Сходство.
Соотношение фигур и фона.
Группировка.
Завершение.
Продолжение.
Опишем их все по порядку.
1. Сходство
Объекты, которые смотрятся похоже, воспринимаются, как одинаковые. Это можно часто использовать в веб-дизайне, в области, в которой ценятся быстрейшие и простейшие способы передачи информации. Создав два элемента с похожими визуальными контурами, вы можете интуитивно передать назначение каждого.
2. Соотношение фигур и фона
Элементы одинаково воспринимаются и как фигуры (отчётливые части фокуса), и как фон, на котором фигуры расположены. Стивен Бредли выделил три типа соотношения фигур и фона.
Устойчивые (слева) — ясно, что круг — фигура, а серое пространство — фон.
Двусторонние (в центре) — каждый столбец может одинаково претендовать на звание фигуры или фона, это создаёт напряжение, которое можно использовать в динамическом дизайне.
Неопределённые (справа) — когда непонятно, что фигура, а что фон — зрителю даётся большая свобода интерпретации.
3. Группировка
Непохожие детали всё равно могут быть сгруппированы вместе, чтобы представить их подобными друг другу. Основы гештальт предлагают как минимум два способа использования группировки для отображения связи между предметами:
Ограждение — ограждение непохожих объектов вместе с помощью заметной черты объединит их в сознании зрителя.
Сближение — собранные близко друг к другу объекты будут восприниматься как похожие, особенно если они отделены от других групп большим пространством. Это также имеет отношение к временным и пространственным элементам закона Хика.
4. Завершение
Опираясь на принципы материализации, которые мы описали ранее, правило завершения основано на том, что мозг автоматически обеспечивает человеку заполнение незаконченных визуальных объектов. Это может быть использовано дизайнерами как преимущество, во-первых, давая им свободу в работе с компонентным дизайном, и, во-вторых, поощряя создание минималистичных стилей, передающих изящность.
5. Продолжение
Связанное с правилом завершения правило продолжения утверждает, что зрение пользователя создаёт движение, в то время как оно переходит от объекта к объекту, давая линиям особую силу в layout-дизайне.
Вывод
Понимание принципов гештальт даёт вам больший контроль над визуальной иерархией, помогает создавать более гармоничные решения и повышает вероятность передачи идеи вашей аудитории.
Сочетание главных принципов: появления, материализации, мультиустойчивости и неизменности, так же как и правил сходства, ограждения, соотношения фигур и фона и многих других позволит перейти вам на качественно новый уровень визуального дизайна для интерфейса сайтов. http://siliconrus.com/2015/04/ui-optical-illusions/