Элементы интерфейса против стресса: как репрезентативные системы работают в B2B‑продуктах

Элементы интерфейса — это «кирпичики», смысл которых раскрывается только в совокупности. Их главная задача — быть незаметными и помогать пользователю решать свои задачи, а не отвлекать на разгадывание логики системы. Особенно это критично в корпоративных продуктах, где сложность данных высока, а у пользователя часто нет ресурса на лишние когнитивные усилия. Непонятный интерфейс увеличивает время выполнения задач на 15–25%, поэтому цель дизайна — стать «аквалангом»: пока тот работает, пользователь о нём не думает и сосредоточен исключительно на работе.

Зачем вообще нужны элементы интерфейса

Один пользователь — три канала восприятия

Основатели нейролингвистического программирования Джон Гриндер и Ричард Бэндлер в своих ранних работах (The Structure of Magic, Frogs into Princes) определили, что люди обрабатывают информацию через три основных канала: визуальный, аудиальный и кинестетический. У каждого человека есть все три, но какой‑то один обычно ведущий. Визуалы мыслят картинками. Аудиалы — словами и последовательностями. Кинестетики — ощущениями и движением.

Главное практическое следствие: среди всех пользователей одного продукта доли визуалов, аудиалов и кинестетиков примерно одинаковые. А вот дизайнеры, как правило, — визуалы (профессия отбирает таких людей). Именно поэтому большинство корпоративных продуктов на рынке спроектированы под визуалов. Вот и получается, что двум третям ваших сотрудников рабочий софт неудобен.

Как создать продукт «для всех»: шесть принципов UX

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

Как работает на трёх каналах:

• для визуала — узнаваемая форма;
• для аудиала — узнаваемый текст;
• для кинестетика — отклик на нажатие по элементу.

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

Стандартность. Одинаковые элементы интерфейса ведут себя по единому сценарию, и сам продукт следует общепринятым паттернам индустрии.

Как работает на трёх каналах. Стандартность — это, по сути, обещание для всех трёх каналов сразу:

• визуальное — одинаковая форма у одинаковых вещей;
• аудиальное — одинаковые слова для одинаковых действий;
• кинестетическое — одинаковые расстояние, отклик, позиция.

Пример из наших экранов. Bottom Bar (строка внизу экрана) с парой «Сохранить» (filled) и «Отменить» (outlined) повторяется на десятках экранов BusinessPad. В правильной версии — это образец внутренней стандартности: пользователь знает, что в правом нижнем углу всегда найдёт основное действие и откат. Material Design от Google делает то же самое, общепринятой конвенции следует и BusinessPad.

Отзывчивость. Любое действие пользователя должно получать видимый отклик в течение 100 мс. Нет реакции — пользователь думает, что система сломалась, и нажимает ещё раз.

Как работает на трёх каналах:

• для визуала отзывчивость — видимое изменение состояния;
• для аудиала — подтверждающий текст;
• для кинестетика — тактильное ощущение.

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

Правило общей области. Элементы внутри одной видимой границы воспринимаются как связанные.

Как работает на трёх каналах. Этот принцип в чистом виде визуальный, но у него есть аудиальный и кинестетический аналоги:

• аудиальный — общая словесная подпись;
• кинестетический — общий контейнер.

Пример из наших экранов. Самый чистый пример — зоны ответственности на полотне конструктора процесса. Две горизонтальные полосы с вертикальными подписями слева. Узлы (Подготовка проекта договора, Наличие рисков, Визирование у руководителя, Передача контрагенту) физически лежат внутри полос, и весь смысл здесь в общей области: узлы одной полосы принадлежат одной роли, и пользователь понимает это ещё до прочтения подписи.

Правило близости. Элементы, расположенные близко друг к другу, воспринимаются как группа, а те что далеко — как разные группы. Это правило реализуется с помощью отступов.

Как работает на трёх каналах:

• для визуала близость работает напрямую — глаз группирует объекты по расстоянию;
• для аудиала — через паузы в чтении;
• для кинестетика — через ощущение безопасность: между опасным действием (удалить) и безопасным (сохранить) должно быть достаточно расстояния, чтобы не задеть случайно.

Пример из наших экранов. На экране редактирования ветвь «Ветвь 1» секции «Общая информация», «Условия» и «Выход из ветви» отделены друг от друга большими отступами, а внутри каждой секции поля идут плотнее. Это правильный ритм: глаз понимает иерархию, аудиал делает паузу между разделами, кинестетик не путает соседние поля.

Смысл. Пользователь должен предсказывать результат до клика, а не узнавать его после.

Как работает на трёх каналах:

• для визуала смысл — это узнаваемая иконка;
• для аудиала — подпись, описывающая результат;
• для кинестетика — поведение, подтверждающее ожидание.

Пример из наших экранов. Двухуровневая палитра «Процессы → Основной / Подпроцесс» в нижней панели инструментов полотна‑редактора. Визуал видит крупные подписанные категории (Процессы / Шлюзы / Циклы / События). Аудиал читает понятные слова BPMN‑домена. Кинестетик понимает, что сначала выбирает категорию, потом подтип — два простых решения вместо одного сложного. И каждая иконка слева от подписи даёт двойное кодирование: форма и слово.

Заключение: интерфейс как часть стратегии долголетия

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

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

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