Владельцы бизнеса чаще всего оценивают сайт по главной странице, каталогу и ценам. Но реальное отношение пользователя к продукту формируется в критических моментах: пока грузится страница, когда упал сервер или когда поиск ничего не нашёл. По данным Google, 53% мобильных пользователей закрывают сайт, если он не загрузился за 3 секунды, а исследования показывают, что ускорение отклика всего на 0,1 секунды повышает конверсию интернет-магазинов на 8,4%. Состояния интерфейса — загрузка, ошибки и пустые экраны — это не «мелочи для дизайнера», а точки, в которых бизнес напрямую теряет или сохраняет деньги.
Почему каждое лишнее «подождите» стоит денег
Скорость сайта измеряется не только в миллисекундах, но и в восприятии: пользователю важно видеть, что происходит, даже если данные ещё не пришли. Белый экран или кнопка без реакции воспринимаются как зависание, и человек уходит к конкуренту. Напротив, когда интерфейс показывает структуру будущей страницы и честно сообщает статус, ожидание субъективно становится короче. Поэтому задача дизайнера и разработчика — спроектировать не только «идеальный сценарий», но и все промежуточные состояния. Если подрядчик показал вам макет только успешной загрузки, это повод задать вопросы.Скелетоны вместо спиннеров: показать структуру заранее
Скелетон — это серые заглушки, повторяющие будущую раскладку страницы: блоки карточек, строки текста, места под изображения. Их используют YouTube, Facebook и почти все крупные маркетплейсы. Психологически это работает лучше крутящегося спиннера: мозг уже «видит» страницу и предвкушает контент, поэтому пауза ощущается короче. Есть и практический плюс: после появления данных страница не «прыгает», элементы встают на заранее отведённые места — меньше случайных кликов мимо нужной кнопки.Правила хорошего скелетона
Скелетон помогает, только если он сделан аккуратно. Проверьте свой сайт по этому списку:- Геометрия совпадает с финальной страницей — карточки, изображения и текстовые строки повторяют реальную раскладку.
- Анимация мягкая: лёгкая пульсация или «бегущая» подсветка, без резких движений и мигания.
- Заглушка показывается от 300 мс. Если данные приходят быстрее, скелетон не появляется вовсе — иначе страница будет «мигать».
- Есть таймаут. Если ответ не пришёл за 5–8 секунд, скелетон сменяется сообщением о проблеме и кнопкой «Повторить».
- Скелетон не используется для критичных действий: оплата и отправка форм требуют честного статуса («Отправляем…», «Оплата прошла»), а не декоративной заглушки.
Экраны ошибок: 404, 500 и потеря связи
Сбои случаются у всех: падает хостинг, зависает интеграция с 1С или CRM, у пользователя пропадает интернет. Отличить профессионально сделанный сайт от сырого проще всего именно здесь. Голое «Error 404» или «Не удалось выполнить запрос» без выхода — это тупик, из которого пользователь уходит с сайта целиком. Хороший экран ошибки говорит человеческим языком, успокаивает («ваши данные сохранены», «оплата не списалась») и подсказывает, что делать дальше. Для интернет-магазина критична зона оформления заказа: если клиент не понимает, прошёл платёж или нет, он не станет повторять попытку, а просто уйдёт.Что должно быть на любом экране ошибки
Минимальный набор элементов, который спасает конверсию даже при полном сбое:- Понятное объяснение простым языком: проблема на вашей стороне («мы уже знаем, чиним») или на стороне пользователя («проверьте подключение к интернету»).
- Кнопка повтора действия — рядом, а не в другом углу экрана.
- Альтернативный путь: ссылка в каталог, поиск, контакты, на предыдущий шаг.
- Сохранение введённых данных: форма после сбоя не должна очищаться, иначе пользователь не станет заполнять её второй раз.
- Для оплаты и заказа — понятный статус транзакции и телефон или мессенджер, чтобы клиент мог завершить покупку с менеджером.
Пустые экраны — это точка продаж, а не тупик
Пустая корзина, раздел «Избранное» без товаров и пустой результат поиска — состояния, которые чаще всего игнорируют при проектировании. Простое «Ничего не найдено» в каталоге — это прямая потеря выручки: пользователь всё ещё хочет купить, просто не угадал с формулировкой. Пустые экраны нужно делать как мини-лендинги с конкретной целью. Пустая корзина — показать хиты продаж и условия доставки. Пустой поиск — популярные запросы и исправление опечаток («Возможно, вы искали…»). Новый личный кабинет — онбординг из 2–3 шагов. Раздел без товаров — кнопка «Уведомить о поступлении», которая заодно собирает базу контактов.Антипаттерны, из-за которых уходят с сайта
Эти ошибки встречаются даже на платных проектах и почти всегда стоят покупок:- бесконечный спиннер без статуса и лимита ожидания;
- голый код ошибки («500 Internal Server Error») вместо человеческого текста;
- пустые состояния без подсказок — «Нет данных» и всё;
- очистка длинной формы после любой ошибки валидации;
- отсутствие состояния «нет сети»: пользователь не понимает, ушёл заказ или нет;
- в макетах подрядчика есть только «счастливый путь» — ни одной заглушки, ошибки или пустого экрана.
Быстрый аудит: проверьте свой сайт за 15 минут
Для проверки не нужно быть разработчиком. Откройте сайт в Chrome, нажмите F12, во вкладке Network выберите Slow 3G и откройте каталог — посмотрите, что вы видите вместо страницы, пока грузятся товары. Затем включите режим Offline, добавьте товар в корзину и попробуйте оформить заказ: интерфейс должен честно сообщить о потере связи и сохранить введённые данные. Введите в поиск заведомо бессмысленный запрос и перейдите по несуществующей ссылке — хорошая система предложит альтернативы и вернёт вас в каталог. Каждое место, где вы встретили белый экран, вечный спиннер или голый код ошибки, — это точка утечки конверсии, и её стоит показать вашему подрядчику.Состояния интерфейса — такая же часть продукта, как каталог, цены и скорость. Скелетоны сокращают субъективное ожидание, грамотные экраны ошибок сохраняют доверие в момент сбоя, а продуманные пустые состояния доводят пользователя до покупки вместо тупика. Требуйте от подрядчика, чтобы в макетах были отражены все состояния: загрузка, ошибка, пустой результат, офлайн. А если вы только выбираете студию — попросите показать, как команда проектирует эти сценарии. Это самый быстрый способ отличить сильную разработку от тех, кто рисует только красивую витрину.