Сейчас, когда экран любого устройства становится полем битвы за внимание пользователя, умение управлять этим вниманием превращается в необходимое условие профессиональной пригодности для дизайнера. Представьте себе на минуту цифровой ландшафт как гигантскую картину Питера Брейгеля: яркую, перенасыщенную деталями, и каждая кричит «Посмотри на меня!». В этом хаосе визуальных стимулов наша задача — создавать островки смысла и порядка. Почему это так важно? Потому что в мире, где информация стала новой валютой, внимание пользователя — это самый ценный ресурс.

Более того, в эпоху «постправды» и информационных пузырей умение эффективно доносить информацию становится не просто профессиональным навыком, но и этической ответственностью. Мы не просто создаём красивые изображения — мы влияем на то, как люди воспринимают мир. И это чертовски серьёзная задача.

Когда дело касается «цифрового продукта» (а мультимедийный лонгрид, безусловно, является цифровым продуктом), чаще всего говорят о «прозрачности» (или, если пользоваться терминологией Хайдеггера, «подручности») интерфейса: он просто должен решать свою задачу (в данном случае, «рассказать историю») так, чтобы никто на него не обратил внимания, как будто его нет.

С другой стороны, выдающийся иллюстратор и преподаватель Виктор Меламед пишет в своей книге «Машинерия портрета»:

Сегодняшний зритель поглощает огромное количество визуального материала, и очень быстро. Он прокручивает ленту... со скоростью пост в секунду, практически бежит по городу мимо стрит-арта и картин в галерее. Его зрительная память перегружена, и для него всегда есть вещи поважнее наших с вами картинок. Во все времена художники стремились к ясности, но сейчас перед художниом встаёт задача остановить зрителя, затруднить его восприятие (курсив наш — О. П.).

Поэтому наша задача несколько парадоксальна: мы должны добиваться того, чтобы зрителю было одновременно и легко, и трудно читать наш материал. С этим надо разобраться — этим мы и займёмся.

Давайте разберёмся, как этот удивительный механизм работает, и как мы, дизайнеры, можем использовать его в своих целях (разумеется, исключительно на благо пользователя).

Зрение играет ключевую роль в обработке информации мозгом. Большинство нейронов связаны со зрительной системой, которая обрабатывает около 90 % входящей информации.

Мозг обрабатывает изображения в 60 000 раз быстрее, чем слова. На распознавание изображения уходит 150 миллисекунд, а на понимание его значения — ещё 100 миллисекунд.

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

Неокортекс играет главную роль в обработке сенсорной информации. Зрительная информация сначала попадает в затылочные доли, затем передаётся в височные или теменные доли. Теменная кора отвечает за пространственное восприятие («где»), а височная — за распознавание образов («что»).

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

Итак, наш мозг обрабатывает визуальную информацию в следующем порядке:

1. Цвет

Первое, что замечает наш мозг — это цвет.

Урок для нас: используйте цвет стратегически. Хотите, чтобы что-то заметили в первую очередь? Сделайте это ярким или контрастным. Но помните: если всё кричит, никто не слышит. Используйте яркие цвета экономно, как специи в хорошем блюде.

2. Форма

После цвета мозг обрабатывает форму и делает это за миллисекунды.

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

3. Содержание

Только после обработки цвета и формы мозг начинает понимать, что же он, собственно, видит.

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

4. Знак

Наконец, мозг начинает приписывать значение тому, что он видит (как если бы он был богословом, который смотрит на яблоко и думает: «А что, если это не просто фрукт, а метафора грехопадения?»).

Урок для нас: помните о культурном контексте и ассоциациях, которые могут вызывать ваши визуальные элементы. Красный цвет может означать «опасность» в одной культуре и «удачу» в другой. Убедитесь, что ваш визуальный язык понятен целевой аудитории.

Теперь давайте поговорим о том, как наш мозг запоминает информацию.

1. Мы лучше запоминаем то, что имеет эмоциональную окраску. Если информация вызывает сильные эмоции (позитивные или негативные), она врезается в память. Поэтому рекламисты так любят шокировать или умилять — это работает.

2. Мы лучше запоминаем начало и конец последовательности (эффект первичности и недавности). В дизайне это означает, что самую важную информацию стоит размещать в начале и в конце страницы или раздела.

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

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

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

6. Мы лучше запоминаем то, что используем. Это как с мышцами: используешь — растут, не используешь — атрофируются. Поэтому интерактивность в дизайне — это не просто увеселение пользователя, а мощный инструмент для улучшения запоминания.

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

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

Детское узнавание или «узнавание собаки»

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

Взрослое узнавание или «узнавание актёра в костюме собаки»

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

Семантическое узнавание