Свяжитесь с нами

Нужна информация?

Enter F.A.Q.

Нужна информация?

Enter F.A.Q.
>   Делимся опытом  >  Принципы гештальт-психологии в веб-дизайне
Принципы гештальт-психологии в веб-дизайне
«Целое есть нечто иное, нежели сумма его частей», — Курт Коффка (Kurt Koffka, немецко-американский психолог, один из основателей гештальт-психологии)
   Комментариев: "1"          5 мин.         Дизайнер   
     Февраль 01, 2018              Дизайн     

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

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

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

1. Появление

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

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

2. Материализация

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

На рисунках ниже мы без труда дорисовываем мысленно геометрические фигуры:

3. Мультистабильность

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

Что вы видите? Вазу или два лица? Такой популярный в графическом дизайне принцип может навредить в веб -дизайне, если вы изначально не рассчитывали на двойственный эффект.

4. Инвариантность

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

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

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

1. Сходство

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

Например, иконки слева:

2. Взаимодействие фигуры и фона

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

Простейший пример - фоновая картинка. В целом она воспринимается как фон, но мы можем распознать листик и текстуру дерева:

3. Группировка

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

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

Как пример, пункты на плашке “Новости” воспринимаются как равнозначные пункты меню:

4. Замыкание

Это тот же принцип, что и “материализация” выше. Мозг достраивает геометрические фигуры, даже если они не прорисованы. По этому принципу работают сетки в веб-дизайне, тот же bootstrap, например.

Новость (слева картинка, справа текст) воспринимается целостно, хоть и не обрамлена рамкой:

5. Продолжение

Наш глаз склонен двигаться по определенным направлениям и отдает при движении предпочтение линиям, а не каким-то отдельным объектам.

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

Вывод

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

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


Digital-дизайнер компании IT-Мастерская

Поделиться:

Комментариев: " 1 "

     через vk

29 Августа 2018
ITM, 2017