Вы узнаете о Гештальт психологии и как она может улучшить ваш дизайн, рассмотрены психологические и практические аспекты.
Перевод книги “Дизайн для человеческого глаза. Часть 1.
Признайтесь, в вашей жизни были моменты, когда вы были поражены, увидев какую-нибудь оптическую иллюзию.
Удивительно, как наши глаза играют с нами, и ещё более интересно, что мы склонны верить тому, что видим своими глазами. Но оптические иллюзии часто являются результатом деятельности науки о зрении — науки о Гештальте.
Гештальт принципы — это теории, анализирующие работу областей мозга, отвечающих за зрение. Эти принципы объясняют, как люди воспринимают визуальные объекты и то, как изменения расположения, перспективы, размеров и т.д могут изменять это восприятие.
В этой главе мы кратко рассмотрим концепцию Гештальта и его самые применимые принципы для дизайна UI.
Гештальт опоры дизайна
Хотя может показаться, что Гештальт принципы — это работа всей жизни какого-то парня по имени «Гештальт». Гештальт — это немецкое слово, обозначающее фигуру или форму, по сути и дало своё название направлению психологии в начале 20го века, когда возникли Гештальт принципы.
Как гласит легенда, в 1910 году психолог Макс Вертхаймер наблюдал за тем, как огни железнодорожного перекрёстка мерцали и выключались (как будто опоясывая шатёр кинотеатра).
Это создавало иллюзию движения огней по кругу, хотя это чередование было просто совпадением. Эта разница между тем, как мы воспринимаем визуальные стимулы в сравнении с тем, что мы видим, подпитывало Гешатльт движение в течение двух следующих десятилетий.
Вертхаймер с коллегами разработал теории зрительного восприятия, которые спустя более чем полвека являются основополагающими для веб дизайна. Теории излагают упрощённую классическую аксиому Аристотеля, «Целое больше, чем сумма её частей» применительно к визуальному ряду. Гештальт принципы имеют свойство вращаться вокруг нескольких подобных понятий. Хотя эти идеи касаются зрительного восприятия в целом, эти идеи особенно применимы к дизайну UI.
Давайте взглянем на 4 свойства Гештальта.
1. Появление — пытаясь определить объекты мы (люди) сначала пытаемся идентифицировать контур объекта, а потом сопоставляем его с знакомыми нам вещами. Только после этой шаблонной схематичной идентификации мы начинаем замечать детали объекта, отдельные части единого целого.
Эта картина часто цитируется при объяснении Гештальт принципов. На ней зритель сразу замечает далматинцев, а не что-то вроде: «есть нога далматинца, а ещё голова. Объединю ка я их вместе, и. . .»
Применение в веб дизайне: формы и контуры должны иметь приоритет над мелкими деталями (независимо от того, насколько они являются креативными и потрясающими). Неважно, как выглядит захватывающая кнопка призыва к действию, если ваши пользователи не знают, что это кнопка. Эти «обозначения» помогают определить функцию (известную как возможность).
2. Дополнение — поскольку визуальные стимулы очень противоречивы, наш мозг запрограммирован «заполнять пробелы» отсутствующей информации. Это позволяет нам воспринимать визуальные образы, даже если они расплывчаты или не видны полностью.
Каждый из приведённых выше примеров имеет небольшую хитрость. Все они являются не однозначными и не полными фигурами, но наш мозг всё еще может воспринимать их.
Применение в веб дизайне: помимо подков и ручных гранат, «близость» в веб дизайне тоже учитывается. Пока у вас есть достаточно информации для связи с объектом, пользователь может дополнить остальное. Это значит, что вам разрешается творчески использовать негативное пространство, рассматривая его как ещё один инструмент дизайна, а не пустоту на холсте.
Мы объясним это далее, обсуждая завершение.
3. Мультистабильность — если объект имеет более одной интерпретации, мозг будет чередовать эти интерпретации одну за другой, поскольку он не может сделать выбор между ними, но и видеть их обе одновременно ему не под силу. Чем дольше зритель фокусируется на одной интерпретации, тем более доминирующей она становится.
Это явление основа многих популярных оптических иллюзий, наподобие той, что выше. На этом изображении зрители могут увидеть как старуху, так и молодую женщину, но не их обе одновременно, всё зависит от интерпретации.
Применение в веб дизайне: избегайте множественных интерпретаций! Дважды проверьте, что ваш проект выглядит так, как вы хотите, чтобы его видели, поддерживая фактор влияния UI на UX. Тесты на юзабилити могут помочь выявить эти проблемы, даже если ваш дизайн получит всего один свежий взгляд сидящего рядом человека.
4. Неизменность — как и в случае с дополнением, неизменность — это ещё одна тактика, которой пользуется наш мозг, чтобы воспринять зрительную информацию, несмотря на вопиющие несоответствия. Неизменность показывает, что мы распознаём контуры и шаблоны объектов, несмотря на различия в перспективе, угле обзора, масштабе или даже незначительных деформациях.
В примерах выше мы можем отличить объекты группы А и B, хотя они похожи. Однако также мы понимаем, что даже в искажённом виде объекты группы А такие же как в группах C и D.
Применение к веб дизайну: в отличие от других Гештальт принципов неизменность не может иметь прямого воздействия на дизайн, однако она часто применяется к тестам САРТСНА, поскольку неизменность является одни из преимуществ людей, которое у них ещё осталось над роботами.
5 наиболее полезных Гештальт принципов
В 1954 году, спустя десятилетия после того дня, когда Вертхаймер остановился, чтобы посмотреть на огни поездов, Рудольф Архнайм собрал и обобщил Гештальт принципы в книге «Искусство и визуальное восприятие: Психология творчества глаз». Дизайнер Кэролан Боннер предлагает 5 принципов, которые будут полезны в дизайне каждый день:
1. Схожесть
2. Взаимосвязь фигуры и фона
3. Группировка
4. Закрытие
5. Продолжение
Давайте их рассмотрим:
1. Схожесть — объекты, которые выглядят похожими и воспринимаются как похожие.
Это имеет огромное значение для дизайна, области, в которой ценятся как можно более простые и лёгкие способы передачи информации. Создав поток двумя схожими элементами, вы можете объяснить назначение каждого из них интуитивно.
Сходство не должно быть вопиющим. В примере Green Chameleon, значки навигации выглядят по-разному. Однако сходство цвета, размера, отступов и размещения значков позволяет предположить, что каждый значок представляет один уровень навигации (верхний уровень).
При наведении на иконку запускается взаимодействие, появляется текст с названием раздела, который означает эта иконка. Эта схема взаимодействия особенно хороша для вертикальных вариантов навигации, поскольку она экономит пространство, но не жертвует функциональностью (при условии, что метафоры значков имеют смысл). Умный дизайнер будет использовать сходство для передачи смысла, экономя время на объяснениях и сглаживая опыт.
2. Взаимосвязь фигуры и фона — элементы воспринимаются как фигуры (отдельные элементы фокусировки) или основания (фоны, на которых лежат фигуры). Стивен Бредли перечислил три типа взаимосвязи фигур и фона.
В примере с Moddeals показана распространённая схема, использующая взаимосвязь «фигура-основание». Когда появляется форма рассылки, остальная часть страницы затемняется, гася задний план. Кроме того, пользователь всё ещё может прокручивать страницу, однако рекламный блок с рассылкой остаётся зафиксирован в центре экрана, закреплённый как фигура, отделённая от основания.
На гораздо более тонком уровне подходит к решению вопроса фигура\фон сайт немецкого фильма «Таннбах», он использует более многослойный подход. Чтобы подчеркнуть отношения между двумя людьми, дизайнер сделал их фигуры чёткими на фоне размытого фона деревни. Благодаря использованию цвета и типографики сам интерфейс становится «основной фигурой», а пара становится «вторичной». В результате пользователь видит влюблённую пару, но всё ещё понимает, как перемещаться по сайту.
Эта довольно изобретательная реализация простого Гештальт принципа показывает, что не нужно толковать его смысл просто как «сделайте всплывающее меню на размытом фоне».
3. Группировка — не однородные элементы по-прежнему могут быть сгруппированы, чтобы выглядеть похожими. Гештальт принципы предполагают, по крайней мере, 2 способа использования группировки для демонстрации взаимосвязи:
Вложенность — помещение не однородных объектов вместе в визуально обозначенную зону объединит их в сознании зрителя в группу.
Близость — объекты, близко расположенные друг к другу, будет восприниматься как похожие, особенно, если они отделены от других групп большим отступом. Это связано с элементами времени и пространства Законом Хика.
На примере Facebook можно отлично проследить применение принципов вложенности и близости.
Всё содержимое поста — заголовок, изображение, описание, комментарии и т.д — все они заключены в одном блоке, отделяющем их от более серого фона, используя вложенность и взаимосвязь фигуры-фона. Такие элементы поста как «Лайк», «Комментарий» и «Поделиться» находятся в непосредственной близости, что говорит о том, что всё это способы взаимодействия с этим постом (не говоря уже о их похожем шрифте, его размере и цвете — принцип схожести).
Разместив элементы управления рядом с соответствующим элементом, дизайнер избавляет пользователя от хлопот исследования, запоминания и погружения в сложные пути взаимодействия. Это также относится к вопросу упрощения кликов, потому что необходимо минимизировать путь между пользователем и целью. Упрощение системы позволяет элементарному здравому смыслу восторжествовать над длинными объяснениями, связанными с её работой.
4. Завершение —основываясь на принципе дополнения, о котором мы говорили ранее в этой главе, завершение — это принцип, согласно которому люди сами будут обеспечивать завершение не завершённых объектов, самостоятельно заполняя пробелы. Это можно использовать как возможности дизайна, во-первых, предоставляя им некоторую свободу действий с частичным дизайном, во-вторых, поощряя стили минимализма, связанные с элегантностью.
Взгляните на систему сеток Abduzeedo ниже. Несмотря на отсутствие чётких границ у каждой части контента, выравнивание помогает нашим глазам заполнить «сетку», созданную каждым из трёх изображений. Таким образом, мы видим три столбца текста вместо одного большого фрагмента.
Ещё завершение применяется к взаимодействиям, создавая смысл, заполняя пробелы в рамках действий.
Как объясняет дизайнер Кероланн Бонер, Urban Outfitters использует завершение, чтобы пропустить несколько шагов, делая взаимодействие «Add to Bag» очень плавным.
На гифке выше можно посмотреть это действие, шаги которого мы опишем далее:
· Текст кнопки «Добавить в сумку» после её нажатия меняется на «Добавлено!»
· Соответственно обновляется количество товара рядом с сумкой для покупок
· Из области сумки для покупок опускается слайд, визуально подтверждая, что товар был добавлен.
В результате мы понимаем, что элемент добавился в нашу корзину без каких-либо неявных действий. Нам не нужно заходить в корзину, чтобы проверить её содержимое или перетаскивать в неё любые вещи (что увеличивает сопротивление). Пропустив ненужные шаги интерфейс обеспечивает достаточную обратную связь, сохраняя при этом лёгкое взаимодействие.
Более подробно о завершении можно узнать из замечательной статьи Энди Рутледжа о применении завершения к дизайну UI.
5. Продолжение — связанный с завершением принцип продолжения гласит, что при движении от объекта к объекту глаза пользователя создают импульс, придавая линиям особую силу в дизайне макета.
В приведённой ниже визуальной подсказке зрители воспринимают прямую и изогнутую линию — не изогнутую фиолетовую или зелёную линии. Это делает силу продолжения могущественней силы цвета и мощным визуальным инструментом для демонстрации сходства.
Это значит, что пользователи воспринимают элементы линии и кривой так, чтобы они были похожи друг на друга.
Это оказывает наиболее очевидное влияние на панели навигации по сайту, поскольку элементы на одной горизонтальной плоскости имеют одинаковый уровень иерархии.
В примере навигации CreativeBloq вы можете видеть, что все элементы навигации в первой строке представляют типы контента. Все элементы навигации во второй строке представляют его категории. Сайту не нужно указывать на это различие, поскольку оно передаётся по принципу продолжения.
Больше о Гештальт принципах можно узнать из этого полезного руководства на Tuts+.
Выводы
Понимание Гештальт принципов даёт вам больший контроль над визуальной иерархией в ваших проектах, помогает создавать более гармоничный дизайн и повышает вероятность успешной передачи вашего сообщения аудитории. Сочетание основных свойств: появление, дополнение, мультистабильность и неизменность с более тонкими принципами: схожесть, завершение, связь между фигурой и фоном и т.д. открывают совершенно новый уровень визуального дизайна для вашего UI.
Друзья, надеюсь эта статья будет для вас полезной. Буду очень признателен, если вы поддержите мой проект на behance. Добавляйтесь там ко мне в друзья, если есть вопросы по дизайну-спрашивайте, чем смогу помогу!
3DNews REthink. Над этим проектом я работал 6 месяцев. Ради него (в том числе) освоил Adobe Illustrator и Adobe After Effects. Оцените результат!
