Микроэлементы графического языка в интерфейсах

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

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

В экране с блоком про тесты и тип личности палитра считывается как что-то мягкое и нежное: розовый фон с акцентами сиреневого, голубого и лилового. Розовый цвет в психологии цвета устойчиво связывают с темами заботы и безопасности: он сочетает энергию красного и чистую нейтральность белого, за счёт чего воспринимается менее агрессивно, чем яркий красный «из банки», и при кратковременном воздействии дает успокаивающий эффект, снижает уровень агрессии и нервозности и создает ощущение защищенности и эмоционального комфорта.

Для такого интерфейса такой выбор не случаен: пользователь приходит в зону потенциально уязвимой темы — разговора о себе, своих слабых и сильных сторонах, — и нежные оттенки и отсутствие резких контрастов работают как визуальный сигнал: здесь не будут оценивать, здесь безопасно пробовать и исследовать.​

Фрейминг напрямую влияет на восприятие контента: один и тот же тест в визуально «клинической» оболочке и в мягкой, почти игрушечной палитре будет восприниматься как разные по сути практики. В первом случае люди с высокой чувствительностью к оценке скорее будут избегать его из‑за ожидания негативного результата, во втором — воспринимать как игру, обычный легкий тест и возможность узнать о себе что‑то любопытное.​

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

Это важный баланс для психологического сервиса: выбранные цвета одновременно снижают уже приобретенную тревогу и беспокойство от нового опыта, давая понять, что речь пойдет о чём‑то личном, но без давления. Отдельно стоит отметить стык розового фона и белого пространства вокруг текста «Personality Type»: такое разделение создает легкую визуальную иерархию, где эмоционально окрашенная часть (иллюстрация) отделена от нейтрального блока смысловой информации. Белый здесь выступает как «заземляющий» цвет — он добавляет ясности и не даёт розовому превратить интерфейс в детский.

Это относится почти ко всем представленным примерам. Многие бренды при выборе концепции стараются выбрать архетип «заботливого» и «своего малого», старясь заранее снизить беспокойство пользователя.

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

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

Глубокий синий и темно-фиолетовые оттенки поддерживают состояние сосредоточенности и спокойствия, как раз то, что нужно пользователю в вечернее время: чаще всего такие сервисы используются именно в это время. Синий традиционно связывают с доверием, устойчивостью и чувством защищённости, а в темной гамме он дополнительно ассоциируется с ночным небом и рутиной перед сном.

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

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

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

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

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

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

Смотря на блок «Уроки понимания себя», считается, что обращение строится вокруг идеи постепенного обучения, а не лечения: здесь пользователь – ученик, а не пациент. Это помогает пользователю воспринимать происходящее легче, почти как игру, таким образом у него не возникнет ощущения того, что он «больной» или какой-то ненормальный, а все вокруг справляются сами. Копирайтинг — это еще один способ поддержать, а не возможность показать профессионализм, используя медицинскую терминологию. Здесь языковая форма обращения, как мягкое приглашение, задает эмоциональный тон, который типографика затем усиливает или ослабляет, если на то есть необходимость.