Состояния загрузки и ожидания на сайте
Сделаем ожидание на сайте понятным: добавим состояния загрузки, индикаторы прогресса, skeleton-экраны и сообщения для долгих операций. Пользователь будет видеть, что действие принято, сколько ещё ждать и что делать при ошибке, а повторный клик не создаст второй заказ или запрос.
Когда стоит обратиться
Обычно к нам обращаются в таких ситуациях:
- После отправки формы кнопка остаётся прежней, поэтому посетитель нажимает её несколько раз и создаёт дубли заявок.
- Поиск, фильтр или расчёт обновляет блок с задержкой, а пустое место выглядит как отсутствие результата.
- Большой файл загружается несколько минут, но интерфейс показывает только неподвижный spinner без процента, этапа или возможности продолжить после ошибки.
- После сбоя страница очищает введённые данные и выводит техническое сообщение, из которого непонятно, что исправить и как повторить действие.
Что именно мы сделаем
Выбираем пять операций, где ожидание вызывает повторные клики, уход со страницы или потерю данных.
Измеряем фактическое поведение и проектируем состояния начала, ожидания, успеха и ошибки.
Добавляем spinner, skeleton, прогресс или очередь в зависимости от доступных данных операции.
Настраиваем защиту повтора, сохранение ввода, retry и доступные статусные сообщения.
Проверяем быстрый, медленный, ошибочный и повторный сценарии на телефоне и компьютере.
Что входит в стоимость
18 900 ₽ за всю работу
Выбираем пять сценариев: форму, поиск, расчёт, загрузку файла, обновление кабинета или другую долгую операцию. Добавляем подходящие индикаторы, skeleton, доступные статусные сообщения, блокировку повтора, безопасный retry и контроль результата на телефоне и компьютере.
Что будет готово
Передадим вам
- Пять оформленных сценариев ожидания с началом, прогрессом, успехом и ошибкой.
- Компоненты spinner, skeleton или progress и правила их использования в выбранных операциях.
- Защита повторного действия, безопасный retry и сохранение введённых данных.
- Протокол проверки задержек, ошибок, мобильного интерфейса и доступных статусных сообщений.
Перед сдачей проверим
- Каждая выбранная операция сразу показывает, что действие принято, и завершает индикатор успехом либо предметной ошибкой.
- Повторное нажатие во время обработки сохраняет один запрос или использует выбранный идемпотентный сценарий.
- При исправимой ошибке пользователь сохраняет введённые данные и видит доступное действие для повторной отправки.
- Статус ожидания и результат программно доступны, а тест с экранным диктором подтверждает полезное сообщение без скачка фокуса.
Как это выглядит на практике
Отправка расчёта с понятным ожиданием
Форма расчёта обращается к нескольким источникам и обычно отвечает за несколько секунд. После отправки кнопка меняет подпись, повторный клик блокируется, а рядом появляется понятный статус. При временной ошибке заполненные параметры остаются на месте и пользователь запускает безопасный повтор. После получения данных статус сменяется готовым расчётом, а экранный диктор сообщает о результате без переноса фокуса.
- 01
Пользователь отправляет форму и сразу видит подтверждение начала расчёта.
- 02
Кнопка защищена от повторного клика, а блок показывает текущий этап.
- 03
При временной ошибке значения полей сохраняются и появляется действие повторить.
- 04
После успеха интерфейс показывает готовый результат и следующий шаг.
Что понадобится для работы
От вас
- Доступ к сайту и перечень операций, где пользователи замечают задержку или создают повторные действия.
- Тестовые данные для формы, поиска, расчёта, файла или другого выбранного сценария.
- Информация backend о доступном прогрессе, этапах очереди и безопасном повторе операции.
- Выбранные тексты успеха, ошибки и следующего шага для каждого сценария.
Если у вас немного другая ситуация
Небольшие уточнения, которые помогают довести согласованный результат до рабочего состояния, уже учитываем в цене. Если по ходу работы появится отдельный крупный блок или понадобится платная лицензия, сначала обсудим варианты и стоимость. Расскажите о своей ситуации — подстроим план под неё.
- 3 000 ₽после подписания договора через Диадок
- 15 900 ₽после выполнения, демонстрации и приёмки результата
Предоплата входит в общую стоимость. Оставшуюся сумму оплачиваете после демонстрации и приёмки готовой работы.
Часто спрашивают
Об этой услуге
Как правильно показать пользователю загрузку и ожидание результата?
Короткие операции получают ненавязчивый индикатор, загрузка содержимого — skeleton, а долгие процессы — этап или понятное сообщение о продолжении работы. На время отправки критичного действия кнопка защищается от повторного нажатия, при ошибке сохраняются введённые данные и появляется следующий шаг.
Можно показать точное оставшееся время?
Точное время выводим при надёжной оценке на стороне процесса. В остальных случаях полезнее показать текущий этап, время последнего обновления и понятное сообщение, что операция продолжается.
Эта работа ускорит сам сервер?
Интерфейс станет понятным сразу. Параллельно измерим выбранные операции и покажем отдельное узкое место, если задержку создают backend, база или внешний сервис. Его ускорение можно спланировать по фактическим данным.
Как учитывается доступность интерфейса?
Статусы получают программно определимую семантику и понятный текст. Проверяем live-region, aria-busy или progress по назначению и убеждаемся, что экранный диктор сообщает ожидание и результат без принудительного перемещения фокуса.
Что происходит, если пользователь закрыл страницу?
Для долгой серверной операции можно сохранить идентификатор и после возвращения восстановить актуальный статус. Возможность зависит от текущего API; для выбранного сценария согласуем обновление по ссылке, polling или уведомление внутри кабинета.
Цена и изменения по ходу работы
Цена на странице окончательная?
Да. Перед началом мы сверяем исходные данные и фиксируем результат в договоре. Указанная на странице сумма покрывает согласованную работу целиком, даже если её техническая реализация потребует больше времени, чем ожидалось при оценке.
Что означает резерв незапланированных работ?
Это уже включённый в цену запас времени на небольшие связанные уточнения заказчика, которые появляются после старта: например, добавить поле, изменить формат уведомления или учесть ещё одно условие обработки.
Резерв рассчитывается по формуле: стоимость услуги × 30% ÷ 1 500 ₽. Для услуги за 30 000 ₽ это 6 часов. Эти часы относятся только к дополнительным, заранее незапланированным уточнениям. Они не являются сроком проекта и не ограничивают время на основную работу: согласованный результат мы выполняем полностью.
Можно уточнять детали уже во время работы?
Да. Небольшие связанные изменения обычно помещаются во включённый резерв и не требуют доплаты. Если новая идея заметно меняет результат или превращается в самостоятельную задачу, сначала обсудим подход и стоимость. Любое решение согласуем до выполнения.
Начало работы и оплата
Как оформляются договор и оплата?
Подписываем договор через Диадок. Предоплата составляет 3 000 ₽ и входит в общую стоимость услуги. Остаток оплачивается после демонстрации и приёмки готового результата.
Когда начинается срок выполнения?
Срок отсчитывается после согласования задачи, получения необходимых доступов и материалов, подписания договора и поступления предоплаты. Конкретную дату старта и плановый день готовности подтверждаем перед началом.
Как учитываются платные лицензии и внешние сервисы?
До старта проверяем, нужны ли тарифы, лицензии, сертификаты или дополнительные ресурсы внешних систем. Если они потребуются, заранее покажем варианты и стоимость. По возможности аккаунты и лицензии оформляются сразу на заказчика.
Проверка результата и гарантия
Как принимается готовая работа?
Вместе проверяем согласованные сценарии на контрольных данных или тестовой копии, а затем демонстрируем результат. Для интеграций сверяем передачу данных и обработку ошибок, для сайта — работу нужных страниц и действий пользователя, для отчёта — расчёты и обновление данных.
Какая гарантия действует после сдачи?
На выполненные изменения действует гарантия 3 месяца. Если в изменённой нами части обнаружится ошибка нашей реализации, проверим и исправим её без дополнительной оплаты. Переданные материалы, настройки и код остаются у заказчика.