11 оптических иллюзий в интерфейсах

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

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

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

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

Есть две теории возникновения этой иллюзии:

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

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

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

Центроид может располагаться на расстоянии одной третьей от каждой стороны до противоположной вершины. Этот метод также применим к другим фигурам.

Квадраты — это фундаментальные строительные блоки любой системы дизайна. Их можно увидеть в карточках Material Design, публикациях на Facebook, пинах на Pinterest и шотах на Dribbble.

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

Представители разного пола и даже разных культур воспринимают эту иллюзию по-разному.

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

Этот эффект возникает из-за того, что более тёмная область ложно кажется темнее, а более светлая — светлее. В физиологии это называется латеральным или боковым торможением.

Хотя этот эффект едва заметен в мире визуального дизайна, полосы Маха — частая проблема для стоматологов, из-за них усложняется анализ рентгеновских снимков зубов. Неправильное определение оттенков может стать причиной ложного положительного диагноза.

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

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

Иллюзия сетки Германа применяется в макетах, которые содержат сетку квадратов, размещенных на фоне с высоким контрастом. Посмотрите прямо на любой квадрат, вы увидите призрачные шарики на пересечениях линий, окружающих квадраты. Но если вы посмотрите прямо на пересечение, они исчезнут.

Причина этого эффекта связана с латеральным торможением — когда тормозная клетка останавливает расположенные рядом нейроны.

Размещение объектов одного цвета на фоне с разным контрастом приводит к иллюзии, что объекты разного цвета. Это явление известно как иллюзия одновременного контраста. Контраст — это король в мире визуального дизайна, и люди по-разному ощущают этот эффект.

Нет единой теории, почему возникает эта иллюзия, одна из причин её возникновения — латеральное торможение, ответственное за сетки Германа и полосы Маха.

Эта иллюзия едва уловима, но не менее увлекательна. Глядя на GIF-файл выше, можно увидеть, что блоки фиолетового слева кажутся светлее фиолетовых блоков справа. Но оба блока фактически отражают одинаковое количество света.

Бывает, что я добавлю границу к объекту, а затем задаюсь вопросом: «Когда я успел изменить цвет фона?». Если вы посмотрите внимательно, то заметите, что бледная область приобретает гораздо более светлый оттенок цвета, окружающего границу. Но более светлая область на самом деле белая.

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

Эта иллюзия оставила меня в недоумении настолько, что мне пришлось использовать палитру, чтобы проверить цвета!

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

Как это возможно? Это явление известно как иллюзия Ястрова, и нет окончательного объяснения того, почему нам кажется, что сегменты разного размера. Одно из объяснений состоит в том, что наш мозг путает разницу в размере между большим и меньшим радиусом. Другими словами, короткая сторона делает длинную сторону более длинной, а длинная сторона делает короткую сторону ещё короче.

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

Эта иллюзия создаёт аналогичный эффект, что и две вышеупомянутые, но у неё есть две особенности:

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

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

На знаменитых логотипах выше некоторые символы выходят за пределы базовой линии и x-высоты. Художникам-шрифтовикам приходится вручную оптически настраивать каждую пару символов для достижения наилучшего результата.

Причина, по которой требуется перерегулирование, связана с одной из самых популярных оптических иллюзий в мире — иллюзией Мюллера-Лайера.

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

#дизайн