Фрейминг в продуктовом дизайне: как интерфейс меняет смысл

09.08.2026 · 10 мин

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

Факт один — рамки две. В хранилище занято 8 из 10 ГБ. Первый экран показывает почти полную полосу и кнопку «Освободить место». Второй сообщает: «Свободно 2 ГБ» — и предлагает посмотреть файлы. Факт одинаков, но первый экран читается как приближающаяся проблема, а второй — как доступный запас.

Фрейминг — это рамка, внутри которой человек интерпретирует факты и варианты действия. Её создают текст, композиция, сравнение цен, порядок шагов и эмоциональный тон.

ОДИН ФАКТ, ДВЕ РАМКИ
────────────────────
                 ┌─ «Занято 8 из 10 ГБ» ──▶ близко ограничение
8 из 10 ГБ занято┤
                 └─ «Свободно 2 ГБ» ──────▶ пока есть запас

Факт тот же. Меняются точка отсчёта, акцент и возможный вывод.
Фрейм не подменяет факт, но меняет контекст, в котором этот факт получает смысл.

Фрейминг — не просто оформление

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

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

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

1. Визуальный слой: что попало в одну рамку

Что меняется в интерпретации. Границы, пустое пространство и группировка связывают элементы. Масштаб, композиция и контраст предлагают порядок чтения. Цена и подпись могут выглядеть единым условием либо независимыми деталями; предупреждение — частью действия либо общим фоном.

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

Когда это полезно. В форме оплаты можно собрать сумму, период списания и налоги в один визуальный блок, а справочную информацию отделить. Так рамка совпадает с реальным объектом решения: пользователь видит не отдельное число, а полную стоимость операции. Видимый клавиатурный фокус тоже делает текущее состояние интерфейса считываемым. WCAG 2.2 SC 2.4.13 Focus Appearance описывает проверяемые требования к площади и контрасту индикатора на уровне AAA; это усиленное руководство, а не общий обязательный базовый уровень и не доказательство психологического влияния акцента на выбор.

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

2. Семантический слой: как назван тот же исход

Что меняется в интерпретации. Слова выбирают точку отсчёта. «Сохраните 2 часа» выделяет приобретение, «не теряйте 2 часа» — потерю. «20% использовано» и «осталось 80%» описывают одно состояние с разных сторон. Названия, порядок аргументов, единицы и подписи подсказывают, что считать нормой, риском или преимуществом.

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

Когда это полезно. В настройке резервного копирования фраза «Защищено 980 из 1 000 файлов» помогает оценить покрытие, а рядом «20 файлов ещё не загружены» показывает незавершённую работу. Две рамки вместе дают полную картину. Для тарифа «600 ₽ в месяц при оплате за год» полезнее, чем только «7 200 ₽ в год», если продукт одновременно показывает общую сумму списания и период обязательства.

Когда это вводит в заблуждение. Формулировка «Не потеряйте свои данные» рядом с необязательной платной функцией может раздувать угрозу, если базовая защита уже включена. Проценты без знаменателя тоже создают ложную ясность: фразы «скидка 20%» или «ошибок на 50% меньше» недостаточно, чтобы оценить масштаб без исходного числа, периода и метода расчёта. Честный семантический фрейм выдерживает перефразирование: после смены языка выигрыша на язык потери факты и решение не должны становиться неузнаваемыми.

3. Ценовой слой: относительно чего предложение кажется выгодным

Что меняется в интерпретации. Цена почти всегда читается относительно чего-то: старой цены, соседнего тарифа, месячной стоимости или бюджета пользователя. Первое заметное число может стать якорем для последующей оценки. Тверски и Канеман описывали якорение в числовых суждениях, но не исследовали продуктовые прайсинги или конверсию.

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

Когда это полезно. Сравнение тарифов помогает, если строки одинаковы, ограничения названы прямо, а переключатель «месяц / год» показывает сумму и график списаний. Процент полезен для сопоставления, абсолютная сумма — для бюджета: «экономия 20%, или 1 800 ₽ за год». Проверять стоит понимание, а не только клики.

Когда это вводит в заблуждение. Необоснованная зачёркнутая цена создаёт фиктивную точку отсчёта. Мелкое «в месяц» рядом с крупной годовой скидкой скрывает реальное списание. Третий, нарочно слабый тариф может работать как приманка. Асимметрично доминируемая альтернатива не лучше одного целевого варианта ни по одному значимому атрибуту и хуже хотя бы по одному, но не обязательно хуже каждой другой альтернативы. Эксперименты Huber, Payne и Puto показали, что её добавление может сдвинуть выбор к превосходящему её варианту, однако результат зависит от состава набора, атрибутов и ситуации. Это не гарантия. Если вариант существует только для давления и не имеет самостоятельной пользы, сравнение перестаёт помогать пользователю.

4. Поведенческий слой: какой путь интерфейс делает ближайшим

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

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

Когда это полезно. В мастере импорта одна заметная кнопка «Продолжить», обратимый формат по умолчанию и честный прогресс могут снизить нагрузку от промежуточных решений; это гипотеза, которую нужно проверять на понимании и завершении задачи. Выбор по умолчанию действительно может влиять на выраженный выбор: в исследовании Johnson и Goldstein ответы о донорстве различались между формой, где донорство нужно было выбрать, формой, где нужно было выбрать отказ, и нейтральным выбором. Однако причины и масштабы нельзя автоматически переносить на уведомления, подписки или настройки приватности.

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

Когда это вводит в заблуждение. Предустановленное согласие на необязательную рассылку использует инерцию не в интересах человека. Большая кнопка «Принять всё» рядом со слабой ссылкой «Настроить» неравномерно распределяет усилие. Внезапный модальный диалог перед завершением задачи может создавать ложную срочность. Прогресс «шаг 2 из 3» обманывает, если после третьего шага внезапно открываются ещё два обязательных экрана.

5. Эмоциональный слой: в каком настроении читается решение

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

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

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

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

Один экран собирает несколько рамок

На реальном экране слои почти никогда не работают по одному. Возьмём подтверждение годовой подписки. Карточка объединяет цену и набор функций визуально. Заголовок называет план «Для регулярной работы». Старая месячная сумма может стать ценовым якорем. Главная кнопка ведёт к оплате, а спокойная иллюстрация обещает предсказуемость. Решение возникает из их суммы.

ПЯТЬ СЛОЁВ ОДНОГО РЕШЕНИЯ
─────────────────────────
             [ Визуальный ]
                    │
[ Эмоциональный ] ──┼── [ Семантический ]
                    ▼
          ┌──────────────────┐
          │ РЕШЕНИЕ: КУПИТЬ? │
          └──────────────────┘
                    ▲
[ Поведенческий ] ──┼── [ Ценовой ]

Каждый слой уточняет смысл — или спорит с остальными.
Фрейм экрана складывается из пяти слоёв, поэтому проверять только цвет или текст недостаточно.

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

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

Этическая граница: помощь или давление

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

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

Я использую четыре теста.

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

Метод ревью в Figma

Фрейминг проще проверять до полировки, пока команда ещё готова менять структуру. Шаги 1–5 занимают один короткий проход по макету. Шаг 6 — отдельный быстрый тест понимания на прототипе.

  1. Запишите факт без интерфейса. Что объективно произойдёт: «с карты спишется 7 200 ₽ за год», «20 файлов не загружены», «доступ можно отменить».
  2. Назовите решение. Какой выбор сейчас делает человек и какие альтернативы реальны? Если ответов несколько, возможно, на экране смешаны задачи.
  3. Снимите пять слоёв. Отдельно выпишите визуальные акценты, формулировки, сравнение цены, ближайший путь действия и эмоциональный тон.
  4. Сделайте контрфрейм. Перепишите приобретение как потерю, покажите абсолютное число рядом с процентом, поменяйте порядок вариантов, уберите цвет. Если фактический смысл резко меняется, найдите скрытую точку отсчёта.
  5. Пройдите четыре этических теста. Раскрытие, обратимость, соразмерность, польза. Для рискованного решения сохраните ответы в комментарии к макету.
  6. Проверьте понимание. Дайте прототип нескольким людям и попросите до клика назвать цену, последствия, обратимость и причину рекомендации. Это не полноценное исследование, но хороший ранний фильтр.

Компактный чек-лист для дизайн-критики:

Практический вывод

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

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

Ссылки

Дмитрий Полухин — продуктовый дизайнер. Пишу про разработку, AI и дизайн интерфейсов. Обо мне, контакты и профили.

Что почитать дальше