У каждого экрана есть не одно, а минимум четыре состояния: загрузка, пусто, ошибка и норма — и макет обычно рисуют только для последнего. Продукт ощущается дорогим, когда ожидание показано честно (skeleton или прогресс), пустой экран подсказывает следующий шаг, ошибка объясняет, как её исправить, а опасные действия можно отменить. Эти состояния стоит заложить в макеты и задание с самого начала — потом они превращаются в белые экраны и «Что-то пошло не так».
После материала вы сможете
- перечислить четыре состояния экрана — загрузка, пусто, ошибка, норма — и описать каждое для своего ключевого экрана
- выбрать индикатор по времени ожидания: ничего, skeleton, спиннер в блоке или прогресс-бар
- написать сообщение об ошибке по схеме «что случилось — почему — что делать — ничего не потерять»
- решить, где нужна отмена вместо окна «Вы уверены?» и где уместен оптимистичный интерфейс
Что знать заранее
Содержание
Почему состояния важнее «идеального экрана»
На презентации макет выглядит безупречно: список заказов заполнен, фотографии загружены, интернет быстрый. В жизни пользователь открывает тот же экран в лифте с плохой связью, в первый день, когда заказов ещё нет, или в момент, когда сервер платёжной системы не ответил. Именно в такие минуты человек решает, доверять ли продукту.
Поэтому на проектах InterLAB для каждого ключевого экрана мы описываем не один вид, а набор состояний. Это дёшево на этапе дизайна и дорого, если вспоминать о них после запуска, когда жалобы уже пришли.
Загрузка: skeleton, спиннер или прогресс
Выбор индикатора зависит от того, сколько длится ожидание. Nielsen Norman Group много лет опирается на три порога восприятия времени отклика:
0,1 с0,1 с
реакция ощущается мгновенной — индикатор не нужен
1 с1 с
мысль не прерывается, но задержка уже заметна
10 с10 с
предел, после которого внимание уходит
Меньше 1 секунды
- Что показать
- Ничего или лёгкое изменение кнопки
- Почему
- Мелькнувший спиннер скорее тревожит, чем успокаивает
2–10 секунд, грузится весь экран
- Что показать
- Skeleton — серые блоки на месте будущего контента
- Почему
- Человек заранее видит структуру страницы
2–10 секунд, грузится один блок
- Что показать
- Спиннер внутри этого блока
- Почему
- Остальной экран остаётся рабочим
Больше 10 секунд
- Что показать
- Прогресс-бар с процентом или оценкой времени
- Почему
- Без ощущения движения вперёд терпение заканчивается
Skeleton (скелетон) — это каркас экрана из нейтральных плашек на месте заголовков, картинок и строк. Он работает, только если повторяет реальную раскладку: «скелет» из трёх одинаковых полосок ничем не лучше спиннера. А если загрузка длинная — выгрузка отчёта, импорт прайса, обработка видео — честнее показать прогресс по шагам: «Обработано 120 из 400 позиций».
Пустое состояние, которое учит
Empty state (пустое состояние) — экран, на котором пока нечего показать. Nielsen Norman Group называет его возможностью сообщить статус системы, научить пользоваться продуктом и дать прямой путь к ключевому действию. На практике это чаще всего пустая таблица с надписью «Нет данных».
Как обычно
- «Нет данных» серым текстом
- Пустая таблица с заголовками колонок
- Поиск без результатов и без подсказок
- Пользователь не понимает, сломалось что-то или так и должно быть
Как стоит
- Одна фраза: что здесь появится и зачем это нужно
- Главная кнопка: «Добавить первого клиента», «Импортировать из Excel»
- При пустом поиске — проверка опечаток, сброс фильтров, похожие варианты
- Пример заполненного экрана или короткая подсказка по шагам
- Первый запуск — объясняем ценность раздела и ведём к первому действию
- Ничего не найдено — помогаем изменить запрос, а не оставляем в тупике
- Всё сделано — например, все заявки обработаны: это хороший момент сказать об этом прямо
- Нет доступа — объясняем, у кого запросить права
Ошибка, из которой можно выйти
Ошибки неизбежны: обрывается связь, истекает сессия, сторонний сервис не отвечает. Разница между дешёвым и дорогим продуктом — в том, что происходит дальше. В рекомендациях Nielsen Norman Group по сообщениям об ошибках главное: сообщение заметно, написано человеческим языком, точно называет проблему, предлагает решение и сохраняет то, что пользователь уже ввёл.
Что случилось
Без кодов и жаргона: «Не удалось отправить заказ», а не «Error 502».
Почему
Если причина известна: «Нет соединения с интернетом» или «Карта отклонена банком».
Что делать
Конкретное действие: кнопка «Повторить», ссылка на поддержку, другой способ оплаты.
Ничего не потерять
Введённые данные остаются в полях, корзина — на месте. Повторно заполнять форму никто не будет.
Офлайн и оптимистичный интерфейс
Мобильный интернет пропадает в самый неподходящий момент. Браузер умеет сообщать приложению, что связь потеряна (свойство navigator.onLine и события online/offline описаны в MDN), — значит, интерфейс может честно сказать «Нет сети, покажем, как только появится» вместо бесконечного спиннера.
Оптимистичный интерфейс идёт дальше: результат действия показывается сразу, ещё до ответа сервера. Лайк закрашивается мгновенно, задача переезжает в колонку «Готово» без ожидания. Если сервер ответил ошибкой, изменение аккуратно откатывается и появляется понятное уведомление.
- 01Нажатие
- 02Экран обновлён сразу
- 03Запрос на сервер
- 04Подтверждение или откат с уведомлением
- Подходит для частых действий с почти гарантированным успехом: отметки, лайки, перетаскивание карточек
- Не подходит для оплаты, отправки заказа и всего, где ошибка стоит денег — там нужен честный индикатор
- Неотправленные изменения лучше сохранять локально и досылать, когда связь вернётся
Отмена вместо «Вы уверены?» и тосты
Окно подтверждения на каждое удаление быстро становится привычкой: человек жмёт «Да», не читая. Nielsen Norman Group советует не ставить подтверждения на рутинные действия и, где возможно, давать отмену. Удалили письмо — внизу появляется короткое сообщение «Письмо удалено» с кнопкой «Отменить». Подтверждение оставляем для действий, которые действительно нельзя откатить.
Toast (тост) — такое всплывающее на несколько секунд сообщение. Оно хорошо подходит для подтверждений «Сохранено», «Ссылка скопирована», «Отменить удаление». Правила простые:
- Не больше одного действия в тосте и не больше одного тоста одновременно
- Не исчезает, пока на нём курсор или фокус, — иначе кнопку «Отменить» не успеть нажать
- Критичные ошибки не прячем в тост — они остаются на экране до решения
- Сообщение должно зачитываться экранными дикторами: WCAG описывает это как требование к статусным сообщениям (4.1.3)
Лучшее подтверждение — то, которое не нужно, потому что ошибку можно отменить одним нажатием.
Чек-лист для заказчика
Пройдитесь по нему при приёмке макетов или первой версии продукта. Если на пункт нет ответа, его стоит обсудить с командой до разработки.
- Для каждого ключевого экрана нарисованы состояния: загрузка, пусто, ошибка, норма
- Skeleton повторяет реальную раскладку, а долгие операции показывают прогресс
- Пустые экраны объясняют, что здесь будет, и ведут к первому действию
- Сообщения об ошибках говорят, что делать, и не стирают введённые данные
- Продумано поведение без интернета
- Удаление и похожие действия можно отменить, а подтверждение стоит только на необратимых
- Тосты не исчезают из-под курсора и доступны экранным дикторам
Источники
- Nielsen Norman Group — Response Time Limits
- Nielsen Norman Group — Progress Indicators Make a Slow System Less Insufferable
- Nielsen Norman Group — Skeleton Screens 101
- Nielsen Norman Group — Designing Empty States in Complex Applications: 3 Guidelines
- Nielsen Norman Group — Error-Message Guidelines
- Nielsen Norman Group — Confirmation Dialogs Can Prevent User Errors
- MDN — Navigator: onLine property
- W3C WAI — Understanding SC 4.1.3: Status Messages