Микровзаимодействия: тайминги, которые ощущаются правильно

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

Восприятие скорости

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

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

Длительности

Слишком быстрая анимация не читается, слишком медленная раздражает при повторном использовании. Рабочий диапазон для интерфейсных переходов — 150–400 мс.

Правило масштаба: чем больше перемещается элемент, тем дольше анимация. Маленький переключатель — 150 мс, полноэкранная панель — 350–400 мс.

Кривые

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

Практический набор: ease-out для появления, ease-in для исчезновения, ease-in-out для перемещения внутри экрана.

Анимация должна что-то сообщать

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

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

Зачем интерфейсу отвечать на каждое действие

Микровзаимодействие — это ответ системы на действие человека: подсветка при наведении, изменение состояния кнопки, лёгкое движение при добавлении элемента. Его задача не украсить, а подтвердить, что действие принято. Интерфейс без такого подтверждения ощущается сломанным, даже когда работает: человек нажимает повторно, потому что не уверен.

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

Длительности, которые ощущаются правильными

Всё, что дольше 400 миллисекунд, начинает восприниматься как ожидание. И отдельно: анимация обязана отключаться при системной настройке уменьшения движения — для части людей это не предпочтение, а условие пользоваться интерфейсом без тошноты.

Анимация и те, кому она мешает

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

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

Когда анимация не помогает, а врёт

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

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

Что в итоге

Отзывчивость создаётся мгновенным откликом, а не быстрой работой: подтвердите действие за 100 мс, и остальное можно грузить.

Держите переходы в 150–400 мс, используйте ease-out для появления и убирайте анимации, которые ничего не объясняют.