В прошлом уроке экран стал пространством действия. Теперь разберём вторую половину системы — человека: почему он замечает не всё, ищет информацию через задачу и опыт, привыкает к повторяющимся действиям и строит собственное объяснение того, как продукт работает.
В предыдущем уроке мы дошли от пакетной обработки до графических и сенсорных интерфейсов. Компьютер научился показывать объекты, принимать действие прямо на экране и быстро отвечать на него. Это создало новую дизайнерскую проблему: одного наличия информации и действий стало недостаточно. Человек должен ещё заметить нужное, понять увиденное, предположить результат действия и вернуться к задаче после отвлечения.
Если смотреть на макет только как на набор блоков, легко сделать ошибочный вывод: «кнопка есть — значит пользователь её увидит», «состояние изменилось — значит пользователь понял изменение», «иконка стандартная — значит все знают её смысл». Этот урок нужен, чтобы разорвать такую прямую связь. Между тем, что дизайнер положил на экран, и тем, что человек в итоге понял, находится восприятие, внимание, предыдущий опыт и текущая задача.
В прошлом уроке мы обещали вернуться к вопросу, почему действие должно быть обнаружимо глазами и почему привычные интерфейсные решения вообще работают. Сейчас закроем человеческую основу этого долга: сначала разберём, как внимание, прошлый опыт и ожидания влияют на действие. Профессиональные названия конкретных механизмов появятся позже, когда у них уже будет понятная опора.
Откройте знакомое приложение и попробуйте честно вспомнить весь экран после одной секунды взгляда: точный текст каждой строки, все иконки, счётчики, вторичные подписи, состояние системной панели. Обычно субъективно кажется, что «я всё видел», но подробности быстро распадаются. Для дизайнера это важнее любой метафоры про «визуальный шум»: визуальная система человека не ведёт себя как камера, сохраняющая полный снимок сцены для последующего чтения.
Классическое исследование Дэниела Саймонса и Кристофера Шабри показало невнимательную слепоту (inattentional blindness): участники, сосредоточенные на подсчёте передач мяча, нередко не замечали неожиданное, но крупное событие в той же сцене. Авторы связывают вероятность замечания неожиданного объекта с распределением внимания и сложностью основной задачи.[1] Другой известный экспериментальный ряд Рональда Ренсинка, Кевина О’Ригана и Джеймса Кларка показал, что даже заметное изменение сцены может долго оставаться необнаруженным, если между состояниями есть краткий визуальный разрыв: внимание необходимо для обнаружения изменения.[2]
Для интерфейса это означает неприятную вещь: геометрическое присутствие элемента не гарантирует психологического присутствия в задаче пользователя. Крупный блок может проиграть маленькой строке, если строка соответствует тому, что человек сейчас ищет. И наоборот, яркий элемент способен перехватить внимание, хотя к задаче не относится.
«Мы сделали сообщение большим и ярким, поэтому пользователь точно его увидит».
«Что пользователь пытается сделать в этот момент и будет ли сообщение связано с фокусом его внимания?»
Здесь не нужно делать вывод «всё важное должно мигать». Это как раз обратная ошибка: если каждый элемент пытается стать самым заметным, экран перестаёт помогать выбирать. Как управлять акцентами композиционно, мы разберём в уроке про композицию, сетку и визуальную иерархию. Пока зафиксируйте только принцип наблюдения: внимание выбирает, а не равномерно освещает весь интерфейс.
Представьте таблицу заказов. Вы нажали «Обновить», одна строка поменяла статус, рядом увеличился счётчик, а в правой панели появилась новая информация. С точки зрения программы всё сработало. С точки зрения человека остаётся вопрос: какое именно изменение он связал со своим действием.
Исследования изменения сцены называют соответствующий эффект слепотой к изменениям (change blindness). В работе Ренсинка и коллег участники могли пропускать крупные повторяющиеся изменения, когда локальные визуальные сигналы изменения были нарушены краткими пустыми кадрами; обнаружение ускорялось, когда внимание направляли к значимой области.[2] Саймонс и Шабри в обзоре связанных работ также подчёркивают, что детальное восприятие и запоминание сцены сильно зависят от сфокусированного внимания.[1]
Практический смысл не в том, чтобы анимировать каждое обновление. Сначала нужно определить, какое изменение отвечает на текущий вопрос человека. Если он нажал «Сохранить», его следующий вопрос обычно не «какой пиксель поменялся?», а «сохранение произошло и могу ли я продолжать?». Формальные способы показывать состояние системы и подтверждать действие разберём позже в UX-блоке; здесь достаточно научиться искать связь между действием, ожидаемым результатом и заметностью именно этого результата.
Дизайнер часто смотрит на экран без конкретной задачи: оценивает баланс, замечает детали, сравнивает оттенки и читает подписи. Пользователь обычно приходит иначе. Он хочет проверить статус доставки, найти цену, отправить письмо, выбрать файл или понять, почему что-то не работает. Эта задача становится фильтром того, что вообще имеет шанс попасть в его внимание.
Исследовательская организация Nielsen Norman Group, которая много лет изучает удобство цифровых интерфейсов, с помощью отслеживания взгляда показывает несколько разных способов просмотра текстовых страниц — среди них F-образное сканирование, просмотр по заголовкам, поиск отдельных характерных слов и более последовательное чтение. Какой режим возникает, зависит от задачи, прошлого опыта, структуры страницы и типа контента.[3] Поэтому знаменитая «F-схема» — не природный закон, по которому нужно раскладывать любой экран. Это один наблюдаемый паттерн, особенно характерный для плотного текста без достаточных ориентиров.
Ещё выразительнее работает баннерная слепота: многолетние наблюдения NN/g показывают, что люди учатся пропускать области и визуальные формы, похожие на рекламу, причём вместе с рекламой иногда игнорируют и полезный контент, который выглядит похоже или расположен рядом.[4] Это хороший пример того, как внимание и опыт объединяются: человек не анализирует каждый прямоугольник заново, а использует накопленное ожидание «это, вероятно, не относится к моей задаче».
Баннерная слепота особенно полезна для начинающего дизайнера тем, что ломает простую формулу «больше и контрастнее = заметнее». В исследовании NN/g участники иногда пропускали рекламный блок в верхней части результатов Google, хотя он не выглядел как классический графический баннер.[4] Здесь сработал не только внешний вид: люди уже знали, что верхняя область результатов может содержать продвижение, и часть участников научилась перескакивать её в поиске обычного, не рекламного результата.
Для продуктовой работы это важный тип ошибки: команда может поместить полезную подсказку в область, которую аудитория исторически считает рекламной или второстепенной. В макете такая подсказка может выглядеть прекрасно — дизайнер видит её специально и знает, зачем она там. Пользователь может классифицировать область раньше, чем прочтёт содержание: «промо», «баннер», «не сейчас». После этой быстрой классификации дальнейшее усиление размера не обязательно решит проблему.
Обратная сторона тоже важна. Если попытаться «обмануть фильтр» и замаскировать рекламу под основной контент, мы уже перейдём к отдельной теме этики и манипулятивных интерфейсов. Сейчас вывод уже достаточно сильный: внимание зависит не только от физических свойств элемента, но и от того, к какой категории человек успел его отнести.
«Пользователи сканируют» не означает «пользователи никогда не читают». «Люди игнорируют баннеры» не означает «нужно замаскировать рекламу под контент». Исследование описывает поведение в условиях задачи; дизайнер должен понять причину, а не механически копировать следствие.
Именно поэтому хорошие продуктовые команды наблюдают не только клики, но и контекст задачи. Один и тот же элемент может быть замечен мгновенно при поиске конкретной функции и полностью проигнорирован при другой цели. Методы исследования этого поведения будут отдельной темой; сейчас нам достаточно перестать считать собственный дизайнерский взгляд моделью пользовательского.
Допустим, вы впервые открыли сервис облачного хранения. Никто не объясняет вам внутреннюю архитектуру серверов, таблиц базы данных и прав доступа. Но вы уже предполагаете, что «папка» содержит файлы, удалённый объект можно найти в «корзине», ссылка может дать другому человеку доступ, а строка поиска ищет по хранилищу. Вы действуете не по реальному устройству системы, а по удобной внутренней версии того, как она устроена.
Nielsen Norman Group определяет ментальную модель через то, что пользователь считает верным о системе: эти представления помогают прогнозировать её поведение и влияют на взаимодействие. Разные люди могут строить разные модели одного продукта, а разработчики и дизайнеры обычно знают систему намного подробнее пользователей.[5] Отсюда возникает типичная ошибка команды: «это же очевидно, потому что мы знаем, как функция устроена внутри».
Важно не путать ментальную модель с метафорой интерфейса. Корзина, папка или рабочий стол — это способы помочь построить модель через знакомый образ, но модель живёт шире отдельной иконки. Пользователь может не знать, как технически устроена синхронизация между устройствами, но иметь рабочую модель: «если я изменю файл здесь, через некоторое время новая версия появится на другом устройстве». Для выполнения задачи этого может быть достаточно.
Несовпадение обычно начинается не с «глупости пользователя», а с разумного переноса прошлого опыта в новую ситуацию. Если почти все редакторы сохраняли документ отдельной командой, человек может продолжать искать «Сохранить» в продукте с автоматическим сохранением. Если физическая корзина хранит выброшенное отдельно от исходного места, пользователь может ожидать похожего поведения от цифровой «Корзины». Если ссылка раньше означала просмотр, он может не ожидать, что по ней разрешено редактирование. Каждое из этих ожиданий логично внутри старой модели, даже если новый продукт устроен иначе.
| Источник ожидания | Что делает человек | Где возникает риск |
|---|---|---|
| Другие цифровые продукты | Переносит знакомое расположение и поведение | Ваш продукт использует знакомый образ с другим результатом |
| Физический мир | Применяет бытовую причинность: положить, взять, выбросить, вернуть | Метафора похожа внешне, но ведёт себя иначе |
| Предыдущий опыт в вашем продукте | Повторяет уже выученную стратегию | Редизайн меняет правило без заметного объяснения |
| Внутренняя логика команды | Пользователь её не знает | Название и структура отражают архитектуру сервиса, а не пользовательскую задачу |
Именно поэтому формулировка «это логично» сама по себе слабая. Нужно уточнять: логично внутри чьей модели? Для команды функция может естественно жить в служебном разделе, потому что так устроены данные и функции внутри системы. Пользователь может искать её в «Настройках», потому что воспринимает действие как изменение собственного режима работы. В этом уроке нам не нужно решать, кто «прав». Нужно научиться замечать сам разрыв. Способы исследовать реальные ментальные модели аудитории появятся позже в уроке про пользовательские исследования.
Здесь проходит тонкая граница. Полезно использовать существующие ожидания, но нельзя считать их универсальными. Человек, выросший на настольных файловых системах, и человек, который в основном работал с мобильными приложениями, могут по-разному понимать «где лежит файл», что значит «сохранить» и где искать настройки. Ментальная модель складывается из предыдущего опыта, а опыт у аудитории неодинаков.
Полезно увидеть, как эта теория проявляется не в учебном макете, а внутри продуктовой команды. В 2025 году Google опубликовал результаты исследований Material 3 Expressive — направления развития своей дизайн-системы Material, то есть набора принципов и готовых решений для интерфейсов. Команда проверяла варианты с помощью отслеживания взгляда, опросов, экспериментов и тестов использования.[6] В ряде вариантов более заметные ключевые действия находились быстрее, но один контрпример особенно важен для нашей темы.
В экспериментальном дизайне музыкального плейлиста привычный вертикальный список песен заменили свободно расположенными изображениями обложек. По отчёту Google, вариант воспринимался как современный и выразительный, но показатели удобства использования ухудшились; неструктурированные изображения не распознавались участниками как плейлист. Отдельно команда отмечает ухудшение при удалении текстовых подписей у действий в почтовом интерфейсе.[6]
«Список выглядит слишком обычно. Разложим обложки свободно — интерфейс станет эмоциональнее и уникальнее».
«Новый визуальный язык допустим, пока человек всё ещё распознаёт объект как плейлист и понимает, как с ним действовать».
Этот кейс не доказывает, что вертикальный список всегда лучший способ представить музыку. Он показывает более важную вещь: эстетическое предпочтение и способность построить рабочую модель интерфейса — разные результаты. Визуально интересный вариант может проиграть, если человек перестаёт понимать, что перед ним за объект и как им пользоваться.
По той же причине крупные платформы явно фиксируют знакомство с интерфейсом как дизайн-принцип. В Human Interface Guidelines — официальных рекомендациях Apple для проектирования интерфейсов — советуют опираться на знакомые людям понятия и сохранять последовательность поведения элементов, чтобы новый опыт быстрее становился понятным.[7] Дизайн-система Microsoft Fluent формулирует близкую мысль: опыт должен строиться на знакомом и ожидаемом для конкретной платформы, а визуальный шум не должен мешать человеку удерживать фокус.[8]
Смотрите не только на форму компонентов. Смотрите, какие ожидания компания считает слишком ценными, чтобы ломать их без причины. Это намного полезнее, чем коллекционировать скриншоты «красивых решений». Конкретные платформенные конвенции и UX/UI-паттерны мы разберём позже.
В первый день в новой программе вы ищете нужную кнопку глазами. Через месяц рука может тянуться к ней почти без размышления. Если расположение стабильно и действие повторяется в похожем контексте, часть взаимодействия перестаёт каждый раз требовать сознательного выбора. Так появляется ещё один слой между человеком и интерфейсом — привычка.
В обзоре психологии привычек Венди Вуд и Деннис Рюнгер описывают привычки как результат повторения действий в повторяющемся контексте: со временем контекст начинает сам запускать выученную реакцию.[9] Для цифровых интерфейсов это не только теория. Исследование Диего Гарайальде и коллег специально изучало интерфейсные привычки: в лабораторном и полевом экспериментах участники становились быстрее и точнее при стабильном расположении вариантов, а после нарушения выученного расположения выигрыш исчезал.[10]
Это объясняет знакомый конфликт редизайна. Новичок может смотреть на обновлённый интерфейс и не видеть проблемы: «всё же подписано». Опытный пользователь ошибается именно потому, что раньше ему не приходилось читать подпись — он уже выучил действие. Поэтому оценивать изменение нужно не только вопросом «понятен ли новый экран сам по себе?», но и вопросом «какое выученное поведение мы сейчас ломаем?».
Существующая привычка может быть построена вокруг плохого, опасного или устаревшего решения. Иногда её нужно ломать. Но это должно быть осознанной ценой изменения, а не побочным эффектом перестановки элементов «для свежести».
Детальные правила консистентности и платформенных паттернов будут позже. На этом этапе вам достаточно научиться видеть различие между понятностью нового действия и стоимостью переучивания старого.
До сих пор мы условно представляли человека сидящим перед одним экраном и спокойно выполняющим одну задачу. В реальности интерфейс часто используется между другими действиями: сообщение приходит во время разговора, банковское подтверждение — во время покупки на другом устройстве, карта — на улице, почта — между встречами. Поэтому «взаимодействие с цифровой средой» шире одного экрана.
Даже сигнал, который не требует действия, может вмешаться в текущую задачу. В эксперименте Кэри Стотхарт, Эйнсли Митчум и Кортни Йенерт уведомления телефона ухудшали выполнение задачи, требующей внимания, даже когда участники не брали устройство и не отвечали на сообщение.[11] Это не означает, что любое уведомление вредно или что дизайнер должен запретить их все. Оно показывает стоимость самого переключения внимания.
Для продуктового дизайнера отсюда следует более широкий вопрос: в каком состоянии человек вернётся в интерфейс? Может пройти пять секунд или пять часов. Экран может быть тем же, а память о промежуточных шагах — уже нет. Пользователь может помнить цель («оплатить счёт»), но не помнить, какой фильтр включил или почему оказался на конкретном шаге.
| Что происходит | Что может потеряться | Что должен заметить дизайнер |
|---|---|---|
| Человек отвлёкся и вернулся | Память о промежуточном шаге | Понятно ли текущее состояние без восстановления всей цепочки в голове? |
| Пришло системное или продуктовое уведомление | Фокус на основной задаче | Заслуживает ли событие немедленного внимания? |
| Задача продолжается на другом устройстве | Ожидание одинакового поведения | Что пользователь ожидает перенести между контекстами, а что закономерно меняется? |
| Человек работает на ходу или параллельно с внешней задачей | Время и точность внимания | Требует ли интерфейс спокойного чтения там, где его почти наверняка не будет? |
Конкретные состояния экранов, ошибки, загрузка, восстановление после сбоев и проектирование сложных процессов будут отдельными уроками. Здесь мы не проектируем эти решения. Мы меняем исходную модель: пользователь — не процессор, выделенный вашему продукту на сто процентов времени.
Мы начали с того, что интерфейс — это не только пиксели, а взаимодействие. Теперь можно собрать материал урока в одну рабочую рамку. Она не заменяет будущие UX-методы и не является формальным стандартом. Это способ не потерять человеческую сторону, когда вы открываете макет и начинаете обсуждать решения.
| Слой | Главный вопрос | Типичная ошибка дизайнера |
|---|---|---|
| Восприятие | Что вообще имеет шанс быть замеченным в текущей сцене? | Считать наличие элемента доказательством его видимости. |
| Внимание | Что связано с текущей задачей человека? | Проектировать экран под спокойный обзор вместо реального поиска. |
| Ментальная модель | Что человек ожидает увидеть и что, по его мнению, произойдёт? | Подменять пользовательское объяснение технической логикой команды. |
| Привычка и контекст | Что уже автоматизировано и что произойдёт после отвлечения или смены устройства? | Считать переучивание бесплатным и внимание непрерывным. |
Эта рамка хорошо отделяет текущий урок от следующих. Она не отвечает, как именно построить визуальную иерархию, какой цвет выбрать, какой UX-паттерн применить или как провести исследование. Она объясняет, зачем всё это понадобится: потому что человек отбирает сигналы, интерпретирует их через опыт и действует в условиях ограниченного внимания.
Выберите один экран или короткий сценарий знакомого продукта: почта, мессенджер, банк, музыка, редактор, магазин или системные настройки. Цель — разобрать собственное взаимодействие по четырём слоям этого урока, не уходя пока в формальные UX-законы и визуальную композицию.
Не оценивайте пока размеры кнопок, контраст, сетку, цветовые роли, конкретные UX-паттерны или доступность — этому посвящены отдельные уроки. Здесь достаточно формулировок вроде «я не заметил изменение, потому что смотрел на другой объект», «я ожидал найти действие там же, где в других приложениях» или «после возвращения я забыл, какой фильтр включал».
C. Исследования невнимательной слепоты показывают, что видимый объект может быть пропущен при сосредоточенности на другой задаче. Размер сам по себе не закрывает вопрос внимания.
B. Ментальная модель может быть технически неполной или ошибочной, но она используется человеком для прогнозирования поведения системы.
B. Исследование интерфейсных привычек показывает выигрыш скорости и точности при стабильных сигналах и потерю этого выигрыша после нарушения выученного расположения.
B. Исследования отслеживания взгляда описывают несколько паттернов сканирования, а конкретный маршрут зависит от задачи, опыта и типа страницы.