Проектирование взаимодействия
Что такое проектирование взаимодействия
Заголовок раздела «Что такое проектирование взаимодействия»Проектирование взаимодействия (interaction design, IxD) — проектирование поведения продукта: что происходит после действия пользователя, как меняется состояние, как система сообщает о результате и что можно сделать дальше. Если информационная архитектура отвечает на вопрос «где что находится», то IxD — «что произойдёт, если я это нажму».
Классическое определение Шарпа, Роджерса и Приса: проектирование интерактивных продуктов для поддержки того, как люди общаются и взаимодействуют в повседневной и рабочей жизни. В вебе это чаще всего выражается в трёх артефактах: потоке (последовательность шагов), наборе состояний экрана и спецификации обратной связи.
От UI-дизайна IxD отличается предметом: UI отвечает за то, как элемент выглядит, IxD — за то, как он ведёт себя и как выглядит в каждом состоянии. От юзабилити — уровнем: юзабилити оценивает результат, IxD его проектирует.
Дональд Норман описал базовый словарь поведения: возможности (affordance) — что объект позволяет сделать, сигнификаторы — подсказки, где это действие доступно, обратная связь — что произошло после действия, ограничения — что сделать нельзя, и концептуальная модель — как пользователь представляет себе систему. Большинство проблем взаимодействия сводится к разрыву между этими элементами.
Ключевые элементы
Заголовок раздела «Ключевые элементы»| Элемент | Что определяет | Пример решения |
|---|---|---|
| Поток | Последовательность шагов, точек решения и ветвлений | Разделение длинной формы на этапы с возможностью вернуться |
| Состояния | Как экран выглядит до, во время и после действия | Скелетон при загрузке вместо пустого экрана |
| Обратная связь | Что система сообщает о результате | Немедленное изменение кнопки, затем подтверждение |
| Тайминги | Как быстро должен появиться отклик | Локальный индикатор на действие дольше 100 мс |
| Переходы и анимация | Как объясняется изменение контекста | Плавное раскрытие панели вместо мгновенной подмены |
| Ограничения | Какие действия недоступны и почему | Неактивная кнопка с пояснением условия |
| Ввод и валидация | Как принимаются и проверяются данные | Проверка поля при уходе из него, а не на каждом символе |
Время отклика удобно держать в голове тремя порогами: до 0,1 с воспринимается как мгновенная реакция; до 1 с сохраняется ощущение непрерывного взаимодействия, хотя задержка заметна; 10 с — предел удержания внимания, после которого нужен явный прогресс и возможность прервать операцию.
Как проектировать
Заголовок раздела «Как проектировать»- Зафиксировать сценарий. Кто, зачем и в каких условиях выполняет задачу; что считается успехом.
- Нарисовать поток. Шаги, точки принятия решений, альтернативные ветки и выходы.
- Описать состояния. Для каждого экрана — что видно до действия, во время и после, включая ошибки.
- Задать обратную связь и тайминги. Что происходит мгновенно, что показывает прогресс, что можно отменить.
- Собрать прототип. Достаточно кликабельный, чтобы пройти сценарий целиком, а не отдельный экран.
- Проверить и упростить. Пройти сценарий с пользователем, убрать шаги, которые не влияют на результат.
Отдельно проектируют прерывания: возврат назад, обновление страницы, двойной клик, потеря сети, истечение сессии. Именно там чаще всего теряются данные и доверие.
Состояния: обязательный минимум
Заголовок раздела «Состояния: обязательный минимум»| Состояние | Что показать | Типичная ошибка |
|---|---|---|
| Пустое — данных ещё нет | Объяснение, как данные появятся, и первый шаг | Пустая таблица без подсказки |
| Пустое после фильтра | Что не найдено и как снять фильтры | «Ничего не найдено» без выхода |
| Загрузка | Локальный индикатор, скелетон, прогресс | Полноэкранный спиннер на каждое действие |
| Частичная загрузка | Постепенное появление данных | Прыжки вёрстки и потеря позиции |
| Успех | Подтверждение и следующий логичный шаг | Молчаливое исчезновение формы |
| Ошибка валидации | Причина, поле, как исправить | «Неверные данные» без указания места |
| Системная ошибка | Что случилось, что делать, куда обратиться | Технический код без объяснения |
| Нет прав | Почему недоступно и как получить доступ | Скрытие функции без пояснения |
| Потеря связи | Признак офлайна и сохранение ввода | Потеря заполненной формы |
| Долгая операция | Прогресс, оценка времени, отмена | Заблокированный экран без обратной связи |
| Занято или конфликт | Кто изменил объект и что делать | Молчаливая перезапись чужих данных |
| Отмена действия | Возможность вернуть состояние | Подтверждение, которое нельзя отменить |
Формы и ввод
Заголовок раздела «Формы и ввод»- Каждое поле — с видимой подписью; placeholder не заменяет label.
- Проверка — после ухода из поля или перед отправкой, а не на каждом символе.
- Введённые данные сохраняются при ошибке; пользователь не заполняет форму заново.
- Сообщение об ошибке стоит рядом с полем и говорит, что именно исправить.
- Повторный ввод тех же данных не требуется — это ещё и требование доступности (критерий 3.3.7 Redundant Entry).
- Вставка пароля и автозаполнение не блокируются (критерий 3.3.8 Accessible Authentication).
- Для длинных форм виден прогресс и есть возможность вернуться на шаг назад.
- Кнопка отправки блокируется один раз, чтобы двойной клик не создал два заказа.
Анимация и переходы
Заголовок раздела «Анимация и переходы»Анимация полезна, когда объясняет изменение: откуда появилась панель, куда уехал элемент, что обновилось. Вредна, когда задерживает действие или отвлекает.
- Для небольших изменений обычно достаточно 100–300 мс; длиннее — только для крупных переходов между экранами.
- Движение не должно блокировать ввод и не должно быть единственным сигналом о результате.
- Настройка
prefers-reduced-motionучитывается: резкие и длительные эффекты отключаются. - Анимированное изменение размера или позиции не должно приводить к потере фокуса и прыжкам прокрутки.
Антипаттерны
Заголовок раздела «Антипаттерны»- Модальное окно поверх модального окна — пользователь теряет контекст и кнопку выхода.
- Автоматический переход к следующему шагу без подтверждения, особенно в формах оплаты.
- Автосохранение без индикатора: человек не знает, сохранено ли.
- Необратимое действие без подтверждения и отмены.
- Скрытая отмена подписки или отказ от услуги — тёмный паттерн, который бьёт по доверию и репутации.
- Заблокированная кнопка без объяснения, какого условия не хватает.
- Всплывающие подсказки, доступные только по наведению мышью.
Как проверять
Заголовок раздела «Как проверять»- Прототип и юзабилити-тест — основной способ: смотреть, где участник останавливается и что ожидает увидеть.
- Когнитивный проход — проверить, поймёт ли новый пользователь каждый шаг без подсказок.
- Эвристики — видимость состояния системы, свобода действий, предотвращение ошибок, помощь в восстановлении.
- Аналитика потока — доля прохождений по шагам, повторы, отказы, время между шагами.
- Записи сессий — обнаружить неожиданные способы использования и «мёртвые» клики.
- A/B-тест — подтвердить, что изменение поведения улучшает измеримый результат.
Связь с другими практиками
Заголовок раздела «Связь с другими практиками»- UX-дизайн — IxD как одна из работ внутри UX-процесса.
- Юзабилити — метрики, по которым оценивается спроектированное поведение.
- Информационная архитектура — структура, внутри которой происходит взаимодействие.
- Доступность — состояния, фокус, клавиатура и альтернативы перетаскиванию.
- UI-дизайн — визуальные средства для состояний и переходов.
- Производительность — воспринимаемая скорость и её влияние на ощущение отклика.
- Каталог и checkout — пример длинного сценария с критичными состояниями.