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

Как работает визуальный шум

Визуальный шум усложняет восприятие информации. Например, на картинке ниже есть две надписи "Шевелись, Плотва!". Левую надпись прочитать заметно сложнее, потому что она лежит на шумном фоне и перемешивается с ним, а правую надпись читать проще, потому что она лежит на однородном фоне

Как уменьшить визуальный шум

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

Но если мы положим текст на подложку, как на примере ниже, читабельность будет сохраняться на любом фоне

Ниже ещё один пример из этой серии. В удивительном мире Red Dead Redemption 2 встречаются самые разные фоны, и проблема читабельности реплик героев также решается через непрозрачные подложки

Визуальный шум можно уменьшить, размыв и затемнив фон

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

Такой подход годится и для более сложных интерфейсов, на примере ниже размытый фон упрощает работу с интерфейсом фракций

Шум от декоративных элементов

Декоративные элементы интерфейса могут добавлять визуальный шум и повышать когнитивную нагрузку на наших зрителей 

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

Декоративные элементы также могут Очень круто добавлять атмосферности, и также мощно мешать восприятие ��нформации. На примере ниже показана карта города из Cyberpunk 2077. Выглядит очень круто и интересно, но вместе с тем она мешает считывать иконки объектов, а также надписеи рядом с биндами

Декор можно притушить

Хорошая новость в том, что декоративные элементы можно не убирать, а просто притушить, чтобы они не спорили с более значимыми вещами

На примере ниже есть карта города из Destiny 2. Она не такая шумная, как карта в Cyberpunk 2077, поэтому нам намного проще считывать иконки и надписи, расположенные на ней

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

При этом декоративный элемент никак не влияет на читабельность текста, расположенного на нём

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

Все элементы интерфейса — это визуальый шум

К сожалению, даже самые важные и полезные элементы интерфейса тоже являются источником визуального шума

На примере ниже у нас интерфейс торговли из Baldur’s Gate 3. Большинство элементов этого интерфейса нужны нам, чтобы решать свои задачи внутри игры. И вместе с тем они же являются источниками визуального шума и когнитивной нагрузки для игроков

Шум можно уменьшить, скрывая элементы, которые прямо сейчас не нужны

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

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

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

Игроки могут сами регулировать уровень визуального шума

Если интерфейсы можно настраивать, многие игроки будут рады заточить их под себя. На примере ниже показаны разные состояния панели с умениями из Baldur’s Gate 3.

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

Шумный контекст

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

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

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

На примере ниже у текстового блока нормальная читабельность, но мы не можем рассчитывать, что его гарантированно прочитают все зрители

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

Можно поменять контекст

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

На примере ниже мы играем в Dishonored 2 и впервые подходим к боевой ситуации. Игра встаёт на паузу, закрывает HUD однородным фоном и рассказывает про возможности, которые пригодятся в бою

Заключение

Мы с вами поговорили про визуальный шум в игровых интерфейсах и способы, которые помогают с ним бороться:

1. Размытый фон

2. Однородные подложки

3. Притушенные декоративные элементы

4. Контекстный показ только нужных вещей

5. Возможность настраивать интерфейс

6. Поправка на контекст

7. Изменение контекста

Больше полезных материалов тут: https://t.me/goodgameui
Видео про дизайн игровых интерфейсов тут: https://www.youtube.com/@GoodGameUi

Желаю всем удачи и творческих успехов ?