Введение
Сейчас, когда экран любого устройства становится полем битвы за внимание пользователя, умение управлять этим вниманием превращается в необходимое условие профессиональной пригодности для дизайнера. Представьте себе на минуту цифровой ландшафт как гигантскую картину Питера Брейгеля: яркую, перенасыщенную деталями, и каждая кричит «Посмотри на меня!». В этом хаосе визуальных стимулов наша задача — создавать островки смысла и порядка. Почему это так важно? Потому что в мире, где информация стала новой валютой, внимание пользователя — это самый ценный ресурс.
Более того, в эпоху «постправды» и информационных пузырей умение эффективно доносить информацию становится не просто профессиональным навыком, но и этической ответственностью. Мы не просто создаём красивые изображения — мы влияем на то, как люди воспринимают мир. И это чертовски серьёзная задача.
Когда дело касается «цифрового продукта» (а мультимедийный лонгрид, безусловно, является цифровым продуктом), чаще всего говорят о «прозрачности» (или, если пользоваться терминологией Хайдеггера, «подручности») интерфейса: он просто должен решать свою задачу (в данном случае, «рассказать историю») так, чтобы никто на него не обратил внимания, как будто его нет.
С другой стороны, выдающийся иллюстратор и преподаватель Виктор Меламед пишет в своей книге «Машинерия портрета»:
Сегодняшний зритель поглощает огромное количество визуального материала, и очень быстро. Он прокручивает ленту… со скоростью пост в секунду, практически бежит по городу мимо стрит-арта и картин в галерее. Его зрительная память перегружена, и для него всегда есть вещи поважнее наших с вами картинок. Во все времена художники стремились к ясности, но сейчас перед художниом встаёт задача остановить зрителя, затруднить его восприятие (курсив наш — О. П.).
Поэтому наша задача несколько парадоксальна: мы должны добиваться того, чтобы зрителю было одновременно и легко, и трудно читать наш материал. С этим надо разобраться — этим мы и займёмся.
Распознавание образов
Давайте разберёмся, как этот удивительный механизм работает, и как мы, дизайнеры, можем использовать его в своих целях (разумеется, исключительно на благо пользователя).
Зрение играет ключевую роль в обработке информации мозгом. Большинство нейронов связаны со зрительной системой, которая обрабатывает около 90% входящей информации.
Мозг обрабатывает изображения в 60 000 раз быстрее, чем слова. На распознавание изображения уходит 150 миллисекунд, а на понимание его значения — ещё 100 миллисекунд.
Процесс визуального восприятия многоступенчатый. Сначала обрабатывается цвет, затем форма, содержание формы и, наконец, её значение. Недавние исследования показали, что мозг классифицирует образы по схожести форм, а не по смыслу.
Неокортекс играет главную роль в обработке сенсорной информации. Зрительная информация сначала попадает в затылочные доли, затем передаётся в височные или теменные доли. Теменная кора отвечает за пространственное восприятие («где»), а височная — за распознавание образов («что»).
Нижняя височная кора является высшим отделом зрительной системы, где происходит распознавание сложных объектов. Она связана с медиальной височной и префронтальной корой, где происходит окончательная обработка мультимодальной информации.
Итак, наш мозг обрабатывает визуальную информацию в следующем порядке:
1. Цвет
Первое, что замечает наш мозг — это цвет.
Урок для нас: используйте цвет стратегически. Хотите, чтобы что-то заметили в первую очередь? Сделайте это ярким или контрастным. Но помните: если всё кричит, никто не слышит. Используйте яркие цвета экономно, как специи в хорошем блюде.
2. Форма
После цвета мозг обрабатывает форму и делает это за миллисекунды.
Урок для нас: создавайте чёткие, узнаваемые формы для ключевых элементов интерфейса. Прямоугольная кнопка будет восприниматься быстрее, чем кнопка в форме додекаэдра.
3. Содержание
Только после обработки цвета и формы мозг начинает понимать, что же он, собственно, видит.
Урок для нас: убедитесь, что ваш контент легко считывается после того, как пользователь обработал цвет и форму. Используйте понятные иконки, чёткую типографику и логичную структуру информации.
4. Знак
Наконец, мозг начинает приписывать значение тому, что он видит (как если бы он был богословом, который смотрит на яблоко и думает: «А что, если это не просто фрукт, а метафора грехопадения?»).
Урок для нас: помните о культурном контексте и ассоциациях, которые могут вызывать ваши визуальные элементы. Красный цвет может означать «опасность» в одной культуре и «удачу» в другой. Убедитесь, что ваш визуальный язык понятен целевой аудитории.
Особенности запоминания информации
Теперь давайте поговорим о том, как наш мозг запоминает информацию.
1. Мы лучше запоминаем то, что имеет эмоциональную окраску. Если информация вызывает сильные эмоции (позитивные или негативные), она врезается в память. Поэтому рекламисты так любят шокировать или умилять — это работает.
2. Мы лучше запоминаем начало и конец последовательности (эффект первичности и недавности). В дизайне это означает, что самую важную информацию стоит размещать в начале и в конце страницы или раздела.
3. Мы лучше запоминаем визуальную информацию. Наш мозг — отличный обработчик изображений, но так плохой текстовый редактор. Поэтому инфографика часто эффективнее, чем сплошной текст.
4. Повторение важной информации в разных контекстах и форматах усиливает запоминание. Но если вы будете повторять одно и то же, как попугай, произойдёт так называемое семантическое насыщение, и пользователю начнёт казаться, что вы сообщаете ему бессмыслицу.
5. Мы лучше запоминаем то, что связано с уже известной нам информацией: новые знания цепляются за старые, образуя сеть. Поэтому использование метафор и аналогий в дизайне может быть очень эффективным.
6. Мы лучше запоминаем то, что используем. Это как с мышцами: используешь — растут, не используешь — атрофируются. Поэтому интерактивность в дизайне — это не просто увеселение пользователя, а мощный инструмент для улучшения запоминания.
Применяя эти принципы в дизайне, мы можем создавать интерфейсы, которые не просто красивы, но и эффективны с точки зрения когнитивной эргономики. Мы как бы настраиваем наш дизайн на ту же волну, на которой работает мозг пользователя.
Типы узнавания
Теперь давайте поговорим о типах узнавания — о различных способах, которыми наш мозг говорит «Эй, я это знаю!» Понимание этих процессов может помочь нам создавать более интуитивные и запоминающиеся дизайны.
Детское узнавание или «узнавание собаки»
Это как если бы ваш мозг был трёхлетним ребёнком. Он узнаёт объект напрямую, без контекста. В дизайне мы можем использовать это, создавая очень простые и узнаваемые иконки или символы. Но помните: не все пользователи — трёхлетки, и иногда нужно немного больше сложности.
Взрослое узнавание или «узнавание актёра в костюме собаки»
Это более сложный процесс. Мозг не только узнаёт объект, но и понимает контекст. Он видит не просто мужчину, стоящего на четвереньках, а актёра, играющего животное. В дизайне это означает, что мы можем использовать более сложные визуальные метафоры и рассчитывать на то, что пользователь поймёт скрытый смысл.
Семантическое узнавание
Мозг узнаёт не только форму, но и значение. Например, человек может узнать слово «собака» на незнакомом языке, если оно сопровождается изображением собаки. В дизайне мы можем использовать это, сочетая текст и изображения для усиления понимания.
Контекстуальное узнавание
Здесь ключевую роль играет контекст. Мозг узнаёт объект, основываясь на окружении. Например, собаку легко узнать на кухне, но она может быть менее очевидна на космическом корабле. В дизайне это означает, что мы должны учитывать общий контекст нашего интерфейса.
Эмоциональное узнавание
Это когда мозг узнаёт не только объект, но и связанные с ним эмоции. Например, человек может «узнать» исходящую от большого пса опасность, даже если никогда не сталкивался с конкретной угрозой. В дизайне мы можем использовать это, создавая эмоциональные ассоциации с нашими продуктами или брендами.
Кинестетическое узнавание
Мозг узнаёт объекты через движение и взаимодействие. Что можно сделать с милым щенком? Конечно, погладить. В интерфейсе пользователь может «узнать» функцию свайпа, даже если она не обозначена явно, — в таких случаях говорят, что пользователь обнаружил скрытый аффорданс. В дизайне это означает, что мы можем создавать интуитивные жесты и взаимодействия, основанные на физическом опыте пользователей.
«Поедающий огонь — испражняется искрами» (фламандская пословица)
Давайте возьмём знаменитую картину Питера Брейгеля Старшего «Фламандские пословицы» и посмотрим, как она может научить нас управлять вниманием читателя в цифровую эпоху. На этой картине мы ищем визуальные репрезентации более чем 100 нидерландских пословиц.
В определённом смысле мы в соавторстве с художником монтируем некий фильм: футажи предоставил Брейгель, а их последовательность зависит от того, по какой траектории движется наш взгляд.
Итак, чему мы можем научиться у великого нидерландского мастера?
Иерархия внимания
Брейгель не разбрасывает сцены случайным образом. Он создаёт визуальную иерархию, используя размер, расположение и цвет. Центральные, более крупные фигуры привлекают внимание в первую очередь.
Урок для нас: размещайте ключевой контент там, где взгляд пользователя естественным образом падает первым. На веб-странице это обычно верхний левый угол. Можно сказать, что это наш цифровой «центр картины».
Путь взгляда
Брейгель создаёт визуальные пути, которые ведут взгляд зрителя через картину. Он использует линии архитектуры, жесты фигур и даже направления взглядов персонажей.
Урок для нас: создавайте визуальные пути на вашей странице. Используйте линии, стрелки, или даже просто правильно направленные взгляды людей на фотографиях, чтобы вести взгляд пользователя к важным элементам.
Группировка информации
Брейгель группирует связанные сцены вместе. Например, все пословицы, связанные с глупостью, могут быть в одной области картины.
Урок для нас: группируйте связанную информацию. Используйте принцип близости из гештальт-психологии, чтобы помочь пользователям быстро понять, какие элементы связаны между собой.
Детали и повторное рассмотрение
Картина Брейгеля настолько богата деталями, что требует многократного рассматривания. Каждый раз, когда вы смотрите на неё, вы замечаете что-то новое.
Урок для нас: создавайте слои сложности в вашем дизайне. Пусть основная информация будет легко доступна, но добавьте детали и глубину для тех, кто хочет углубиться. Это как система прогрессивного раскрытия в UX дизайне.
Контекст и взаимосвязи
Брейгель показывает, как различные пословицы взаимодействуют друг с другом в рамках одной сцены.
Урок для нас: показывайте взаимосвязи между различными элементами вашего контента. Используйте визуальные подсказки, чтобы показать, как различные части информации связаны друг с другом.
Элемент неожиданности
Брейгель помещает неожиданные элементы в неожиданные места. Например, человек, мочащийся на луну (да, такая пословица существовала и означала «тратить время на бесполезные усилия»).
Урок для нас: не бойтесь удивлять ваших пользователей. Неожиданный элемент может привлечь внимание и сделать опыт взаимодействия с вашим дизайном более запоминающимся. Только, пожалуйста, без испражнений на луну.
Цветовые акценты
Брейгель использует яркие цвета, чтобы привлечь внимание к определённым областям картины.
Урок для нас: используйте цвет стратегически. Яркий акцент может мгновенно привлечь внимание пользователя к важному элементу или призыву к действию.
Помните, что управление вниманием читателя — это не о манипуляции, а о создании ясного и интуитивно понятного пути через ваш контент. Каждый пользователь уникален. Как и зрители картины Брейгеля, каждый может найти свой собственный путь через ваш дизайн. Наша задача — сделать этот путь как можно более увлекательным и информативным, независимо от того, какую траекторию выберет пользователь. Потому что в конце концов, хороший дизайн — это не о том, чтобы контролировать пользователя, а о том, чтобы дать ему свободу исследования.
А чего вы ждали?
Альфред Лукьянович Ярбус — советский психофизиолог. Давайте посмотрим, как его исследования движений глаз могут помочь нам в дизайне цифровых интерфейсов.
Ярбус провёл серию экспериментов, в которых испытуемые рассматривали картину Ильи Репина «Не ждали». Но вместо того, чтобы просто спросить «Ну как, понравилось?», Ярбус решил проследить за движениями их глаз.
Результаты опровергли некоторые гипотезы того времени, состоявшие в том, что зрители воспринимают изображение так же, как слепой воспринимал бы скульптуру, то есть сначала исследуя её контуры, или что взгляд задерживается на областях, содержащих больше деталей. На самом деле, как продемонстрировал Ярбус, влияние этих и других факторов — цветов, контрастности, носителя изображения, пола изображённых лиц по отношению к полу зрителя — далеко не самое значительное. Отметив, что его испытуемые постоянно уделяли особое внимание некоторым элементам изображения и проявляли безразличие к другим, Ярбус предложил альтернативную логику распределения внимания, предположив, что глаз инстинктивно тяготеет к деталям, которые обещают «объяснить» изображение.
Вот ключевые выводы из его исследований и их применение в современном дизайне:
Целенаправленное рассматривание
Ярбус обнаружил, что траектория взгляда сильно зависит от задачи, поставленной перед наблюдателем. Когда людей просили оценить материальное положение семьи на картине, они фокусировались на одежде и мебели. Когда их просили определить возраст персонажей, они смотрели на лица.
Урок для нас: понимайте цель пользователя. Если вы проектируете интернет-магазин, убедитесь, что ключевая информация о товаре (цена, рейтинг, доступность) легко находима. Если это новостной сайт, сделайте заголовки и лиды заметными. Помните: пользователь — не просто зритель, он охотник за информацией.
Важность лиц
Независимо от задачи, люди часто возвращались к лицам персонажей на картине.
Урок для нас: используйте изображения людей стратегически. Лица привлекают внимание, поэтому размещайте их там, где вы хотите, чтобы пользователь задержал взгляд. Но будьте осторожны: слишком много лиц могут создать визуальный шум.
Игнорирование несущественного
Испытуемые практически не смотрели на некоторые части картины, которые не несли важной информации для выполнения задачи.
Урок для нас: не бойтесь белого пространства. Не каждый пиксель должен быть заполнен. Дайте глазам пользователя место для отдыха. Это как пауза в музыке — она делает композицию более выразительной.
Фиксация на деталях
Ярбус заметил, что люди фиксируют взгляд на деталях, а не на общих областях.
Урок для нас: уделяйте внимание микровзаимодействиям и мелким деталям вашего интерфейса. Хорошо продуманная анимация кнопки или изящный переход между состояниями могут сделать опыт пользователя более приятным и запоминающимся.
Влияние контраста
Области с высоким контрастом всегда привлекали больше внимания.
Урок для нас: используйте контраст осознанно. Высококонтрастные элементы будут притягивать взгляд, поэтому используйте их для важных сообщений или призывов к действию. Но не переборщите, иначе ваш интерфейс будет выглядеть как новогодняя ёлка.
Циклические паттерны
Ярбус заметил, что люди часто «обходят» картину по кругу, возвращаясь к начальной точке.
Урок для нас: создавайте циклические пути в вашем дизайне. Убедитесь, что пользователь может легко вернуться к началу, если захочет. Это особенно важно для длинных страниц или сложных интерфейсов.
Помните, что исследования Ярбуса показывают нам не только то, как люди смотрят, но и как они думают. Каждое движение глаз — это маленькое решение, принятое мозгом. Наша задача как дизайнеров — сделать эти решения как можно более лёгкими и интуитивными.
Голова не резиновая
«Кошелёк Миллера» (7±2)
В 1956 году психолог Джордж Миллер опубликовал статью «Магическое число семь плюс-минус два: некоторые ограничения нашей способности обрабатывать информацию». Суть её проста: наш мозг способен одновременно удерживать в краткосрочной памяти от 5 до 9 однородных элементов информации.
Представьте, что ваш мозг — это небольшое портмоне, а единицы информации — монеты. Правило «кошелёк Миллера» говорит нам, что в это портмоне помещается всего 7 монет. Если мы хотим положить восьмую, одну придётся потратить. При этом процесс запоминания не включает анализа содержания информации: ключевую роль играют лишь внешние, чувственно воспринимаемые качества. Образно говоря, для памяти не имеет значения, какие именно «монеты» хранятся в «кошельке» — доллары, рубли или тенге. Главное, чтобы их общее количество не превышало семи.
Когда число элементов превышает семь (в крайнем случае девять), мозг автоматически прибегает к тактике группировки. Он объединяет элементы таким образом, чтобы итоговое количество запоминаемых единиц оставалось в пределах от пяти до девяти. Это позволяет эффективно обрабатывать и хранить информацию, не перегружая кратковременную память.
Что это значит для дизайна? Мы должны группировать информацию в «чанки» — смысловые блоки, которые мозг может обработать как единое целое. Например, номер телефона 1324687 труднее запомнить, чем 132-46-87. Три чанка легче, чем семь отдельных цифр.
В дизайне интерфейсов это может выглядеть так:
- Меню с 7±2 основными категориями. - Разбивка длинных форм на логические разделы. - Группировка иконок связанных элементов в меню и тулбарах.
В Китае кошельки вместительнее
Представьте себе, что вы открываете веб-страницу, и вам кажется, будто вся информация мира решила устроить вечеринку на одном экране. Добро пожаловать в мир китайского веб-дизайна!
Для неподготовленного глаза китайские веб-сайты могут выглядеть как информационный Армагеддон. Они часто характеризуются:
- высокой плотностью информации; - множеством мелких изображений и иконок; - яркими цветами и анимацией; - многоуровневыми меню; - обилием текстовых ссылок повсюду.
Давайте попробуем понять, почему это работает в китайской культуре.
Во-первых, китайский язык сам по себе более «плотный». Одним иероглифом можно выразить то, для чего в английском или русском потребуется целое слово или даже фраза. Это приучает к восприятию большого объёма информации в компактной форме.
Иероглиф — это не просто буква, это целая история, запакованная в один символ. Это как если бы каждая буква нашего алфавита была бы маленьким произведением искусства со своим сюжетом.
Вот иероглиф, который традиционно считается самым сложным в китайском языке.
Легенда гласит, что однажды некий молодой человек шёл по улице, увидел лапшичную и заглянул туда, поражённый тем, что лапша там была такой же широкой, как и пояс для одежды. Он съел миску этой чудо-лапши и только потом обнаружил, что денег, чтобы расплатиться, у него нет. Юноша подошёл к повару и спросил: «как называется эта лапша?». Повар сказал, что лапшу все называют «бян» (biáng) по тому звуку, который слышится во время её приготовления (когда повар растягивает тесто и бьёт им по столу. Молодой человек попросил написать иероглиф этого слова, но повар отметил, что иероглифа не существует. Тогда молодой человек предложил придумать для лапши иероглиф в качестве платы за свой обед. Повар согласился.
Юноша создал не просто иероглиф — он написал целую песню, благодаря которой можно было правильно изобразить новое наименование лапши. Иероглиф получился сложный, но он принёс лапше и тому заведению, в котором её готовили, большую популярность.
- Плотность информации: Как один иероглиф может нести в себе целое понятие, так и китайский веб-сайт стремится упаковать максимум смысла в минимум пространства. - Визуальная сложность: Иероглифы могут быть очень сложными визуально, с множеством черт и деталей. Так же и китайские веб-страницы не боятся визуальной сложности. - Контекстуальность: Значение иероглифа часто зависит от контекста, в котором он используется. Аналогично, элементы китайского веб-дизайна часто обретают смысл в сочетании друг с другом. - Иерархия и структура: В иероглифах есть своя внутренняя структура и иерархия элементов. Так же и в кажущемся хаосе китайского веб-дизайна есть своя логика и структура. - Эстетика как функция: В каллиграфии красота начертания иероглифа неотделима от его смысла. В китайском веб-дизайне эстетика также неразрывно связана с функциональностью.
Во-вторых, в китайской культуре пустота часто ассоциируется не с минимализмом и элегантностью, а с отсутствием содержания или даже с ленью. Полный экран — знак того, что вам есть что сказать.
В-третьих, китайские пользователи привыкли к такому стилю и ожидают его. Для них «пустой» западный сайт может показаться неинформативным или даже подозрительным. «Где вся информация? Они что-то скрывают?»
Наконец, не забывайте о контексте использования. В стране с более чем миллиардом пользователей и высокой конкуренцией за внимание, сайты стремятся предоставить максимум информации «здесь и сейчас», не надеясь, что пользователь будет долго искать.
Понимание этой связи между традиционной письменностью и современным цифровым дизайном может помочь нам лучше понять и оценить китайский подход к веб-дизайну. Это не «неправильный» дизайн, это просто другая парадигма, другой способ организации информации.
В конце концов, дизайн — это не только эстетика, но и культурный артефакт. Он отражает способ мышления, восприятия и взаимодействия с информацией, характерный для данной культуры. И вместо того, чтобы критиковать то, что нам непривычно, мы можем попытаться понять и, возможно, даже чему-то научиться.
Гештальт
Порой, вглядываясь в облака причудливой формы, мы видим в них то, чем они, скорее всего, не являются. Каким образом обычное скопление водяных паров способно пробудить в вашем сознании столь яркие образы? Ответ кроется в уникальных особенностях функционирования нашего мозга.
Наш мыслительный аппарат неустанно стремится к постижению окружающей действительности, сопоставляя текущие визуальные впечатления с накопленным опытом и устанавливая между ними связи. Он обладает своеобразным механизмом интерпретации контуров и форм, систематизации информации, восполнения недостающих элементов для формирования целостной картины.
Глубокое понимание принципов работы нашего мозга способно значительно обогатить ваш профессиональный инструментарий как дизайнера и мастера визуальной коммуникации. Это знание позволит вам с большей точностью определять, какие визуальные элементы наиболее эффективны в конкретных обстоятельствах, и как их можно применять для результативного воздействия на восприятие, привлечения внимания и стимулирования желаемых поведенческих реакций пользователей. Не вызывает сомнений тот факт, что визуальный дизайн и психология находятся в тесной взаимосвязи, оказывая друг на друга значительное влияние.
Что такое гештальт?
Гештальт, термин немецкого происхождения, обозначающий «форму», представляет собой совокупность принципов визуального восприятия, сформулированных немецкими психологами в начале XX века. В основе этой теории лежит постулат о том, что «организованное целое воспринимается как нечто большее, чем простая сумма его составных частей».
Гештальт-принципы — это способ описать механизмы восприятия визуальных элементов при определённых условиях. Они базируются на четырёх фундаментальных идеях:
Эмергентность
Человеческий мозг склонен к первичному распознаванию обобщённых форм. Целостный образ регистрируется когнитивными процессами с большей оперативностью, нежели его отдельные компоненты.
Реификация
Люди способны идентифицировать объекты даже при отсутствии некоторых их частей. Наш мозг соотносит наблюдаемое с имеющимися в памяти паттернами и восполняет недостающие элементы.
Мультистабильность
При столкновении с неоднозначными объектами, человеческое восприятие часто колеблется между различными интерпретациями в поисках определённости. Одна из трактовок обычно становится доминирующей, тогда как переход к альтернативным интерпретациям усложняется, при этом за успешное преодоление этого барьера мозг награждает нас дозой дофамина.
Инвариантность
Люди демонстрируют способность к распознаванию простых объектов независимо от их ротации, масштабирования или перемещения в пространстве. Мозг может воспринимать объекты с различных ракурсов, сохраняя при этом их сущностную идентичность.
Основополагающие принципы
Принцип простоты
Принцип простоты заключается в том, что люди редуцируют неоднозначные или сложные изображения до максимально простых элементов.
В приведённом примере мы, скорее всего, увидим левое изображение в виде комбинации круга, квадрата и треугольника, подобных изображению справа, потому что три более простые фигуры понять проще, чем абстрактную сложную форму.
Как это использовать в дизайне? Наиболее знаковым примером этой концепции в дизайне можно назвать логотип Олимпийских игр. Мы видим его как пять перекрывающихся кругов, потому что всю форму невозможно понять и описать.
Принцип близости
Элементы, расположенные в непосредственной близости друг от друга, воспринимаются как более тесно связанные, нежели те, которые разделены значительным расстоянием.
Таким образом, разрозненные элементы могут восприниматься как единая группа, а не как отдельные сущности.
Каким образом принцип близости находит применение в дизайне пользовательского интерфейса?
Мы можем использовать этот принцип для группировки родственной информации, структурирования контента и упорядочивания элементов и блоков. Грамотное применение этого принципа способно оказать благотворное влияние на визуальную коммуникацию и взаимодействие с пользователями.
Согласно этому принципу, элементы, имеющие смысловую связь, должны располагаться в непосредственной близости друг от друга, в то время как несвязанные элементы следует размещать на некотором удалении. Незаполненное пространство играет здесь ключевую роль: оно создаёт контраст, усиливает визуальную иерархию и направляет взгляд пользователей по заданной траектории, помогая им быстрее достигать своих целей и глубже погружаться в контент.
Другая формулировка принципа близости — так называемое правило внутреннего и внешнего. Вот что пишет о типографических импликциях этого правила Артём Горбунов: «Типографический объект любого уровня состоит из других объектов: буквы из штрихов, слова из букв, строки из слов, абзацы из строк. И для того чтобы объект имел самостоятельное значение, то есть буква, слово, строка и абзац отделялись от соседних, его внутренние расстояния должны быть меньше внешних».
Принцип общего поведения
Элементы, движущиеся в одном направлении, воспринимаются как более тесно связанные, нежели те, которые перемещаются в разных направлениях или остаются неподвижными.
Независимо от пространственного разделения или визуальных различий, элементы, демонстрирующие согласованное движение или изменение, воспринимаются как взаимосвязанные.
Этот принцип проявляет наибольшую эффективность при синхронном перемещении элементов: в одном направлении, в один и тот же момент времени и с одинаковой скоростью. Он способствует группировке релевантной информации и установлению связи между действиями и их результатами. Нарушение синхронности движения может привлечь внимание пользователей и направить его к определённому элементу или функции. Кроме того, этот принцип может служить для обозначения взаимосвязи между различными группами.
Принцип общего поведения находит применение в таких элементах интерфейса, как раскрывающиеся меню, аккордеон-меню, всплывающие подсказки, а также при реализации многоуровневой прокрутки и индикации процесса скроллинга.
Принцип продолжения
Элементы, выстроенные в линию или расположенные вдоль плавной кривой, воспринимаются как более тесно связанные, нежели те, которые размещены хаотично. Элементы, следующие непрерывной линии, воспринимаются как единая группа. Чем более плавными являются участки линии, тем более целостной представляется форма — наш разум стремится к пути наименьшего сопротивления.
Принцип непрерывности помогает нам интерпретировать направление и движение в композиции. Это проявляется при выравнивании элементов и способствует плавному перемещению взгляда по странице, повышая удобочитаемость. Данный принцип усиливает восприятие информации по группам, создаёт упорядоченность и направляет пользователей через различные сегменты контента. Нарушение непрерывности может сигнализировать о завершении раздела, привлекая внимание к новому фрагменту содержания.
Принцип сходства
Элементы, обладающие схожими визуальными характеристиками, воспринимаются как более тесно связанные, нежели те, которые лишены общих черт.
Мы склонны воспринимать визуально схожие элементы как единую группу или паттерн. Кроме того, мы можем предполагать, что они служат одной цели. Сходство помогает нам организовывать и классифицировать объекты внутри группы, а также связывать их с определённым значением или функцией.
Существует множество способов придать элементам визуальное сходство и, следовательно, восприятие их как связанных. К ним относятся сходство по цвету, размеру, форме, текстуре и ориентации. При этом некоторые характеристики обладают большей «коммуникативностью», чем другие (например, цвет > размер > форма).
Принцип сходства находит широкое применение в навигационных элементах, ссылках, кнопках, заголовках, призывах к действию и многих других компонентах интерфейса.
Принцип замыкания
Группа элементов часто воспринимается как единая узнаваемая форма или фигура. При взгляде на сложно организованные элементы мы стремимся увидеть в них простую и знакомую форму. Процесс замыкания также происходит в нашем мозге, когда объект представлен не полностью или его части не завершены.
Согласно принципу замыкания, при наличии достаточного объёма информации наш мозг самостоятельно делает выводы, заполняя пробелы и формируя целостный образ. Это позволяет нам сократить количество элементов, необходимых для передачи информации, уменьшая визуальную сложность и делая дизайн более привлекательным. Замыкание помогает минимизировать визуальный шум и эффективно передавать сообщение, усиливая концептуальную составляющую на сравнительно небольшом пространстве.
Принцип замыкания особенно эффективен в дизайне эмблем и пиктограмм, где простота способствует быстрой и чёткой передаче смысла.
Кроме того, в экранном дизайне этот принцип можно применять так:
- Использование неполных форм для создания интриги. - Интерфейсы, где пользователь предвосхищает завершение действия.
Принцип общей области
Подобно принципу близости, элементы, расположенные в пределах одной замкнутой области, воспринимаются как сгруппированные.
Принцип общей области демонстрирует особую эффективность не только в организации и группировке информации и контента, но и в разграничении содержания, выступая в роли координационного центра.
Этот принцип может включать множество признаков, по которым объекты объединяются в более крупные группы. Мы можем использовать линии, цвета, формы и тени. Часто это оказывается полезным для выделения элементов на переднем плане и акцентирования внимания пользователя на взаимодействии с интерфейсом или на важности определённых компонентов.
Принцип симметрии
Симметричные элементы, как правило, воспринимаются как взаимосвязанные, независимо от расстояния между ними, создавая ощущение целостности и упорядоченности.
Наш взгляд инстинктивно ищет проявления симметрии наряду с порядком и стабильностью в стремлении осмыслить окружающий мир. По этой причине симметрия является мощным инструментом для быстрой и эффективной передачи информации.
Применение в экранном дизайне:
- Создание сбалансированных композиций. - Использование сеток и направляющих для организации контента. - Применение золотого сечения и других пропорциональных систем.
Хотя симметричные композиции обладают определёнными достоинствами, они могут показаться несколько монотонными и статичными — и, иногда, как бы «возвышающимися» над пользователем. Визуальная асимметрия, напротив, чаще более динамична и интересна. Введение асимметричного элемента в преимущественно симметричный дизайн может помочь привлечь внимание к важному элементу или призыву к действию. Баланс между симметрией и умеренной асимметрией — игра, которая имеет значение в любом дизайне.
В заключение стоит отметить, что принципы гештальта не являются строгими правилами, а скорее служат ориентирами. Их эффективное применение требует глубокого понимания контекста, целевой аудитории и конкретных задач проекта. В современном цифровом дизайне, где внимание пользователей становится все более ценным ресурсом, понимание и применение принципов гештальта может стать ключевым фактором, отличающим выдающийся дизайн от посредственного.
Из ряда вон
Хёдвига фон Ресторфф, немецкий психиатр и педиатр, выявила феномен, согласно которому при предъявлении группы схожих объектов тот, что отличается от остальных, запоминается наиболее эффективно. Представьте себе пляж, где среди отдыхающих в купальных костюмах вдруг появляется персона в строгом чёрном костюме. Кого вы, вероятнее всего, запомните? Несомненно, человека в формальной одежде. Это и есть наглядная демонстрация принципа фон Ресторфф.
Эффект фон Ресторфф проявляется на двух уровнях.
На этапе восприятия он возникает, когда один стимул выделяется среди других. Проведите эксперимент — попытайтесь запомнить список слов ниже за несколько секунд:
- Видеть - Думать - Делать - Сидеть - Австралийская ехидна - Узнать - Давать - Читать - Играть - Бывать
Согласно эффекту фон Ресторфф, вы скорее всего запомните фразу «Австралийская ехидна», но не остальные слова. Это происходит из-за того, что «австралийская ехидна» отличается от других слов по нескольким критериям:
- «ехидна» — это существительное, обозначающее животное, в отличие от других слов, являющихся глаголами, указывающими на действие;
- словосочетание состоит из двух слов, в то время как остальные слова — из одного;
- «австралийская ехидна» выделена полужирным шрифтом, в отличие от остальных слов, что делает её более заметной.
На этапе вспоминания эффект фон Ресторфф срабатывает, когда стимул отличается от ранее сохранённых воспоминаний.
Вероятно, можно сказать, что механизм эффекта фон Ресторфф связан с «алгоритмами сжатия», которые мозг использует для оптимизации информации: ритмические структуры и однородные списки сохраняются в «компрессированном» виде: описание реальности наподобие «пляж, на нём — люди в купальниках» короче и удобнее, чем «пляж, на нём люди, на первом из которых купальник, на втором — купальник, на третьем — купальник…»
Но любое исключение из правил (например, на одном из этих людей — чёрный костюм) становится предметом особого внимания, так как высвечивает неадекватность «сжатой» модели реальности и необходимость её уточнения.
В дизайне этот принцип естественным образом применяется для создания акцентов и привлечения внимания к ключевым элементам. Рассмотрим основные виды контраста, позволяющие управлять вниманием пользователя.
Цветовой контраст
Подобно тому, как в живописи используются контрастные цвета для создания визуального напряжения, в дизайне применяются сильно отличающиеся друг от друга цвета. Однако следует помнить о чувстве меры, дабы избежать излишне «праздничного» эффекта.
Контраст размера
Подобно тому, как в природе крупные объекты привлекают больше внимания, чем мелкие, в дизайне можно использовать разницу в размерах для выделения важных элементов.
Контраст формы
Нестандартная форма среди однотипных элементов привлекает внимание, словно эксцентричная личность в толпе конформистов.
Контраст текстуры
Игра с различными текстурами создаёт визуальный интерес и может подчеркнуть иерархию элементов, подобно тому, как в архитектуре сочетаются различные материалы.
Контраст пространства
Пустота может быть столь же выразительна, как и заполненное пространство. Грамотное использование негативного пространства позволяет акцентировать внимание на ключевых элементах.
Контраст движения
Динамичный элемент на статичном фоне неизбежно привлекает внимание, подобно тому, как движущийся объект выделяется на неподвижном фоне в природе.
Контраст направления
Элемент, ориентированный иначе, чем окружающие, выделяется из общего ряда.
Принцип фон Ресторфф — мощный инструмент в арсенале дизайнера, но, как и любой инструмент, требует умелого обращения. Чрезмерное использование контраста может привести к визуальной какофонии, где каждый элемент пытается перекричать остальные, оставляя пользователя в замешательстве.
Контраст в типографике
В каждом из нижеследующих примеров мы видим сочетание приёмов, когда каждый приём усиливает эффект от другого.
Контраст размера шрифта: Большой заголовок и маленький подзаголовок — это классика. Это как бас и сопрано в хоре — они дополняют друг друга и создают гармонию.
Контраст начертания: Жирный шрифт рядом с обычным — это как крик и шёпот. Используйте это, чтобы выделить ключевые слова или фразы. Но помните: если все кричат, никого не слышно.
Контраст гарнитур: Сочетание шрифта с засечками и без засечек создаёт визуальный интерес и помогает разделить разные виды информации.
Контраст цвета текста: Цветной текст на нейтральном фоне — это как яркая птица в пасмурном небе. Он притягивает взгляд.
Контраст межстрочного интервала: Плотный текст рядом с «воздушным» создаёт разные текстуры на странице. Это как игра света и тени в фотографии.
Контраст регистра: ПРОПИСНЫЕ буквы рядом со строчными —очень эффективное выделение, но используйте с осторожностью, иначе пользователь подумает, что вы на него кричите.
Негативное пространство
Фокус внимания. Негативное пространство помогает направить внимание на важные элементы. Это как прожектор на сцене — он выделяет главного героя, оставляя все остальное в тени.
Читабельность. В типографике правильное использование негативного пространства улучшает читабельность.
Элегантность и простота. Обильное использование негативного пространства создаёт ощущение уверенной роскоши и элегантной простоты. Этот объект — он такой один, а других и не надо.
Баланс. Негативное пространство помогает сбалансировать композицию.
Например, в дизайне «швейцарского стиля» пустота словно обладает физическими качествами — объёмом, весом, упругостью, твёрдостью и так далее, и в силу этого участвует в композиции на тех же основаниях, что и текстовые объекты или иллюстрации.
Подразумеваемые формы. Иногда негативное пространство может складываться в свои собственные формы, которые считываются как автономный носитель смысла.
Умелое использование негативного пространства может стать отличительной чертой бренда. Самый знаменитый пример — логотип FedEx с его скрытой стрелкой.
Триггернёт? — Должно
Визуальные триггеры (или, что то же самое, визуальные аттракторы) — это маленькие ловушки для нашего внимания.
Точки нестабильности и предчувствия катастрофы
Когда целостности и стабильности нашей модели реальности что-то угрожает, мы начинаем с тревогой вглядываться в источник этой угрозы, понимая: существующая картина мира несовершенна, и появилось нечто, требующее, чтобы его мы его вписали в уточнённую её версию.
Неустойчивость
Любая неустойчивость привлекает внимание. Если вы смотрите на Пизанскую башню — вы не можете оторвать взгляд, ожидая, что она вот-вот упадёт (даже если умом вы понимаете, что этого не произойдёт, по крайней мере, в ближайшее время).
Незавершённость
Недорисованные формы или обрезанные изображения заставляют мозг достраивать картину. Это как недосказанная шутка — вы не можете не думать о том, чем она закончится.
Асимметрия и диагонали
Они создают ощущение движения и нестабильности.
Жесты и поза
Динамичные позы и жесты привлекают больше внимания, чем статичные.
Размытость и нечёткость
Размытые изображения заставляют нас напрягаться и тщетно пытаться сфокусировать зрение.
Прерванные паттерны
Неожиданное нарушение повторяющегося паттерна создаёт ощущение «сбоя в Матрице». Ваш мозг не может не заметить эту аномалию.
Подобным образом действует размещение элемента «не по сетке» — он привлекает внимание своей «беззаконностью».
Лица и фигуры
Эффект «детского лица»
Большие глаза, высокий лоб, маленький подбородок — эти черты активируют наш инстинкт заботы, защиты и кормления, повышая уровень пролактина и окситоцина. Вот почему мультяшные персонажи часто имеют преувеличенно детские черты.
Направление взгляда
Глаза на изображении действуют как указатели. Если персонаж смотрит в определённом направлении, пользователь неосознанно проследит за его взглядом.
Эмоциональное выражение
Лица с яркими эмоциями привлекают больше внимания. Например, улыбающееся лицо может создать позитивную ассоциацию с вашим продуктом — только не забывайте о своего рода «улыбочной слепоте», выработавшейся, когда человечество научилось игнорировать рекламу и любую другую фальшь.
Эффект знаменитости
Известные лица привлекают ещё больше внимания.
Парейдолия
Парейдолия — это способность нашего мозга видеть знакомые паттерны там, где их нет. Лица повсюду. Наш мозг буквально одержим поиском лиц. Точка, точка, запятая, вышла рожица смешная.
В дизайне иногда используют этот эффект, создавая абстрактные формы, которые намекают на лица, но не являются ими явно. По-видимому, особенно часто — в дизайне кузовов автомобилей.
Животные в облаках. Это классический пример парейдолии. В дизайне мы можем использовать этот эффект, создавая абстрактные формы, которые намекают на что-то конкретное, но оставляют простор для воображения.
Скрытые сообщения. Некоторые люди видят скрытые сообщения везде. В дизайне мы можем играть с этим, создавая визуальные головоломки или «пасхальные яйца» в наших работах. Иногда в таких случаях используют термин апофени́я (от др.-греч. ἀποφαίνω «высказываю суждение, делаю явным» ← ἀπο «из-» + φαίνω «представление») — переживание, заключающееся в способности видеть структуру или взаимосвязи в случайных или бессмысленных данных.
Мерцание восприятия
Представьте себе проволочный куб. Теперь попытайтесь понять, какая грань ближе к вам. Внезапно куб «переворачивается» в вашем восприятии.
Виктор Меламед пишет в «Машинерии портрета»: «Речь не просто о неочевидности. Мы попеременно воспринимаем куб повёрнутым к нам то одной, то другой гранью. Эта пульсация способна достаточно долго удерживать наше внимание даже на такой простой форме. При каждой смене одного аспекта другим мозг вознаграждает себя за решённую задачу порцией дофамина. Если в изображении присутствуют узнаваемые образы, эффект многократно усиливается».
В дизайне мы можем использовать этот эффект, создавая изображения, которые можно интерпретировать по-разному, заставляя пользователя задуматься и вовлекая его в визуальную игру.
Мультистабильность. Это способность изображения иметь несколько стабильных интерпретаций. Вспомните знаменитую вазу Рубина или иллюзию «утка-кролик». В один момент вы видите утку, в другой — кролика. В дизайне мы можем использовать этот эффект для создания логотипов или изображений с двойным смыслом.
Невозможные фигуры. Лестница Пенроуза или водопад Эшера — фигуры, которые кажутся логичными на первый взгляд, но при ближайшем рассмотрении оказываются невозможными в трёхмерном пространстве. В дизайне мы можем использовать этот эффект для создания интригующих и запоминающихся визуальных элементов.
Помните, однако, что, в конце концов, феномены восприятия — это как трюки фокусника (как, в принципе, наверное, и любой графический приём). Они завораживают и интригуют, но если вы покажете слишком много трюков подряд, аудитория устанет и уйдёт.
Оно пошевелилось!
Анимация может быть тонкой и элегантной или агрессивной и вызывающей, но всегда привлекает внимание. Анимация — один из мощнейших эволюционно обусловленных аттракторов: давным-давно животные научились тому, что, если что-то пошевелилось, то это означает угрозу (или добычу, или партнёра для спаривания).
Давайте посмотрим, как это может помочь нам управлять вниманием пользователя.
Микроанимации
Эти маленькие движения — как подмигивание в толпе. Они почти незаметны, но подсознательно регистрируются. Например, лёгкое покачивание кнопки при наведении курсора. Это как если бы интерфейс говорил: «Эй, я здесь, и я интерактивен!»
Анимированные переходы
Они помогают пользователю понять, что происходит, когда он переходит от одного состояния к другому. Без них навигация была бы как телепортация — внезапная и дезориентирующая.
Параллакс-эффект
Выглядит это так, словно бы ваш интерфейс обрёл глубину. Разные слои движутся с разной скоростью, создавая иллюзию 3D-пространства. Это может быть захватывающе, но не перестарайтесь, иначе пользователя может укачать.
Загрузочные анимации
Представьте себе карточного шулера, отвлекающего внимание партнёров по игре в то время, когда он достаёт из рукава туза. Похожим образом и анимированные прелоудеры занимают пользователя, пока происходит загрузка.
Анимированные графики
Это как если бы ваши данные вдруг пустились в пляс. Такой приём может сделать сухую статистику более привлекательной и понятной. Но помните: цель — информировать, а не развлекать. Не превращайте свой график в Диснейленд.
Анимированные персонажи
Когда они появляются, ваш интерфейс вдруг словно обретает субъектность. Они могут создать эмоциональную связь с пользователем. Но будьте осторожны: никто не хочет видеть танцующую скрепку, напоминающую о Microsoft Office 97.
Цвет
Семантика цвета
Семантика цвета — это как тайный язык, на котором говорят наши подсознание и культура. Это целая вселенная значений, ассоциаций и эмоций, скрытая за простыми оттенками. Этой теме посвящены две части нашей лекции о семантике цвета (Часть I; Часть II); здесь мы ограничимся самым поверхностным обзором.
Красный — цвет жизненной силы, страсти, опасности, агрессии и конфликта. В интерфейсах он кричит: «Внимание! Что-то важное происходит!» Используйте его для индикации ошибок или предупреждений. Но не переборщите, иначе ваш интерфейс будет выглядеть как кадр из слэш-хоррора.
Синий цвет — самый «спокойный». О его умиротворяющем воздействии на психику знали ещё в древности. В культурах многих народов мира различные оттенки синего символизировали вечность, постоянство, надёжность, духовность, верность, стабильность, несокрушимость, монаршее достоинство. Кроме того, сейчас это ещё и это цвет высоких технологий. Неудивительно, что половина корпоративных логотипов синие. В интерфейсах он говорит: «Доверься мне, я профессионал». Отлично подходит для бизнес-приложений и сайтов, где нужно вызвать доверие.
Зелёный — цвет свежести, природы, роста и, кстати, ещё и денег (по крайней мере, в США). В интерфейсах зелёный часто означает «всё хорошо» или «вперёд». Используйте его для позитивных действий или подтверждений.
Жёлтый. С одной стороны, он яркий, оптимистичный, как солнечный день, и роскошный, как золото. С другой стороны — в больших количествах он может вызывать тревогу, так как ассоциируется с расставанием, разлукой, осенней печалью (желтые тюльпаны, желтеющая листва), эксцентричностью, ложью, предательство, вызовом обществу, вплоть до безумия. В интерфейсах жёлтый часто используется для предупреждений или выделения важной информации.
Фиолетовый указывает на креативность, королевскую власть, амбиции и роскошь. Он также может символизировать фантазию, магию, экстравагантность, гордость, независимость и богатство. В интерфейсах может использоваться для придания премиальности или уникальности.
Оранжевый энергичен и дружелюбен, как щенок золотистого ретривера, и радостен, как новогодний мандарин. Отлично подходит для призывов к действию.
Чёрный цвет имеет двойственную репутацию. По сути чёрный цвет есть скорее отсутствие цвета, так как черные тела не отражают лучи видимого спектра, а поглощают их. Поэтому, наверно, чёрный цвет ассоциируется с непроницаемостью и недоступностью. Чёрный — это не только тьма, ночь, зло и прочие ужасы, но также элитарность, тайна, элегантность, власть. В интерфейсах может создать ощущение премиальности или использоваться для создания драматического контраста.
Белый — чистота, простота, невинность, справедливость, божественность, свежесть и лёгкость. Это цвет мира и непорочности, открытости и благочестия. Это чистый лист и пустой холст. В интерфейсах белый — это часто фон, дающий отдых глазам и позволяющий другим элементам выделяться.
Имейте в виду, что семантика цвета может сильно различаться в разных культурах. То, что означает святость в одной стране, может символизировать траур в другой. Поэтому всегда учитывайте культурный контекст вашей аудитории.
Прагматика цвета
Теперь, когда мы разобрались с тем, что цвета значат, давайте поговорим о том, как заставить их работать на нас в интерфейсах и лонгридах.
Цветовая схема. Выберите основную цветовую схему и придерживайтесь её. Используйте инструменты вроде Adobe Color или Coolors для создания гармоничных цветовых палитр. Хорошая практика — брать цветовой набор с фотографии, в которой, как вам кажется, красивый колорит.
Правило 60+30+10. Это правило — одно из основополагающих в интерьерном дизайне, и оно вполне может быть перенесёно в дизайн интерфейсов (в конце концов, что такое UI как не интерьер цифрового сооружения?) Используйте доминирующий цвет для 60% дизайна, вторичный для 30% и акцентный для 10%.
Контраст для читабельности: Убедитесь, что текст контрастирует с фоном.
WCAG (Web Content Accessibility Guidelines) устанавливает минимальные требования к контрасту: 4.5:1 для обычного текста и 3:1 для крупного текста.
Коэффициент контрастности измеряется путём сравнения относительной яркости самых светлых цветов с самыми тёмными. Значение варьируется от 1:1 (нет контраста) до 21:1 (максимальный контраст, чёрный на белом).
Для измерения контраста используются специальные инструменты и онлайн-сервисы, такие как Figma-плагин Contrast. Они учитывают яркость и цветовые характеристики выбранных цветов.
Важно отметить, что максимальный контраст не всегда оптимален. Например, чисто белый фон может быть слишком ярким и утомлять глаза. Умеренно-контрастные сочетания (например, темно-серый на светло-сером) могут обеспечить комфортное чтение при длительном взаимодействии с текстом.
При выборе цветовых сочетаний также стоит учитывать пользователей с нарушениями цветового зрения. Поддерживайте цветовое кодирование другими визуальными средствами маркировки, кодирования и передачи информации.
Цветовое кодирование. Используйте цвета последовательно для обозначения определённых типов информации или действий. Например, зелёный для «успеха», красный для «ошибки».
Эмоциональное воздействие. Используйте тёплые цвета (красный, оранжевый, жёлтый) для создания ощущения энергии и витальности, и холодные (синий, зелёный, фиолетовый) для спокойствия и надёжности.
Акценты. Используйте яркие цвета экономно, как специи в блюде. Они должны привлекать внимание к важным элементам, а не конкурировать друг с другом.
Адаптивность. Учитывайте, как ваши цвета будут выглядеть при разном освещении и на разных устройствах. То, что выглядит великолепно на вашем калиброванном мониторе, может превратиться в кашу на смартфоне под ярким солнцем.
Градиенты и текстуры. Используйте их для создания глубины и психоделической остранённости, но не перестарайтесь, чтобы интерфейс не выглядел архаично: от модной стилистики середины 2020-х — всего один шаг до веб-панка и вейпорвейва, отсылающего к 2000-м.
Что ж, настало время ещё для одной банальности (последней в этой лекции, но не последней в нашем курсе).
Цвет — это мощный инструмент, который всегда используется совместно с другими приёмами (композицией, типографикой и т. д.) и оказывает сложное воздействие на результат — это не сложение, а интерференция. Как обычно, следите за гармонией и за тем, как звучит окончательная аранжировка.
