Этот модуль про то, как интерфейс ведёт себя во времени: прототипы для проверки идей и мелкие взаимодействия, из которых складывается ощущение качества.
Детализация прототипа
Детализация выбирается от вопроса, на который отвечает прототип:
- Бумага и вайрфреймы: структура и порядок шагов. Быстро и не жалко выбросить.
- Кликабельный прототип средней детализации: навигация и сценарий.
- Детальный прототип или код: анимации, жесты, ввод, реальные данные.
Правило: минимальная детализация, достаточная для ответа.
Микровзаимодействия
По Дэну Сафферу у микровзаимодействия четыре части:
- Триггер: что запускает (нажатие, событие системы).
- Правила: что происходит.
- Обратная связь: что видит и слышит пользователь.
- Циклы и режимы: как поведение меняется со временем и в особых случаях.
Пример: лайк. Триггер нажатие, правило «отметить», обратная связь заливка и счётчик, режим «нет сети» с откатом и сообщением.
Обратная связь и время отклика
Первая эвристика Нильсена: видимость состояния системы. Пределы времени отклика:
- до 0.1 с ощущается мгновенным;
- до 1 с поток мысли не рвётся;
- до 10 с внимание ещё держится, дальше нужен прогресс и отмена.
Порог Доэрти: продуктивность растёт, когда система отвечает быстрее примерно 400 мс.
Паттерны ожидания:
- меньше 100 мс: без индикатора, иначе мигание;
- загрузка контента с известной структурой: скелетон;
- отправка формы: индикатор на кнопке и защита от двойного нажатия;
- долгий процесс: прогресс с процентами или этапами и отмена;
- минуты: фоновая задача и уведомление о готовности.
Оптимистичный интерфейс показывает результат до ответа сервера и откатывает при ошибке. Хорош для лайков и закладок, опасен для денег и необратимых действий.
Анимация
Анимация нужна, чтобы связать состояния, дать обратную связь, привлечь внимание к изменению и объяснить пространство. Если она ничего из этого не делает, её можно убрать.
- Длительность: обычно 100-300 мс. Больше 400-500 мс для частых действий ощущается как задержка.
- Кривые: ease-out для появления (быстрый старт, мягкое приземление), ease-in для ухода, linear для вращения и прогресса.
- Reduced motion: при системной настройке «Уменьшить движение» крупные перемещения и параллакс заменяют на мгновенные смены или изменение прозрачности. В вебе это медиазапрос prefers-reduced-motion.
Частые ошибки
- Нет реакции на нажатие, человек жмёт трижды и создаёт дубли.
- Ошибки молча: ничего не произошло.
- Необратимое действие без подтверждения или «Отменить».
- Контент сдвигается под пальцем при подгрузке.
- Анимация на секунду там, где действие частое.
Что спросят на собесе
- Какой прототип вы сделаете для проверки сценария, а какой для анимации?
- Из чего состоит микровзаимодействие?
- Как спроектировать ожидание долгой операции?
- Когда оптимистичный интерфейс опасен?
- Какие длительности и кривые вы используете и почему?