Почему быстрый интерфейс начинается не с анимации

Пользователь измеряет время иначе

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

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

Три состояния вместо одной кнопки

У действия должны быть начало, выполнение и результат. После отправки формы сразу покажите, что запрос принят. Заблокируйте повторную отправку, но оставьте человеку возможность прочитать введённый текст. При ошибке сохраните поля и объясните, что можно сделать.

async function saveDraft(payload) {
  setState('saving');
  try {
    await api.save(payload);
    setState('saved');
  } catch (error) {
    setState('retry');
  }
}

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

Зарезервируйте место заранее

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

• Измеряйте сдвиги на настоящей странице с контентом.
• Проверяйте длинные заголовки и отсутствие фотографии.
• Показывайте ошибку рядом с полем, не сдвигая всю форму.
• Оставляйте место под статус загрузки.

Где анимация помогает

Плавное раскрытие комментариев объясняет структуру разговора. Подсветка закладки подтверждает сохранение. Движение кнопки может показать отклик. Но эффект не должен задерживать переход, скрывать текст до исполнения JavaScript или мешать пользователю со снижением движения.

Сначала человек должен понять, что произошло. Потом — заметить, насколько это красиво.

Что проверить перед выпуском

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

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