Как оформить пустое состояние интерфейса: первый вход, нет данных и сбой

Пустое состояние должно объяснять, почему нет содержимого и что можно сделать дальше. Различайте первый вход, пустой результат, отсутствие доступа и сбой.

Что должно получиться

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

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

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

Из чего это складывается

Отделите известную причину от догадки

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

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

Как это сделать по шагам

1. Найдите места без содержимого. Просмотрите списки, таблицы, виджеты и боковые панели. Запишите, при каких условиях каждый из них бывает пустым.
2. Разделите причины. Отметьте первый вход, отсутствие совпадений, завершённое действие, ограничения и сбой. Состояние ожидания рассмотрите отдельно, пока результат ещё неизвестен.
3. Уточните возможности системы. Проверьте, можно ли создать запись, изменить фильтр, восстановить удалённое или повторить загрузку. Не обещайте действие, которого в продукте нет.
4. Напишите короткое объяснение. Назовите известную ситуацию понятными словами. Добавьте только те подробности, которые помогают выбрать следующий шаг.
5. Выберите доступный путь. Дайте одно основное действие по контексту, если оно нужно. Справку или другую альтернативу добавляйте, когда они помогают, а не конкурируют за внимание.
6. Проверьте переходы состояний. Посмотрите, как блок появляется после загрузки, фильтрации и удаления и как исчезает при появлении данных. Проверьте сохранность введённых условий.
7. Проверьте понимание и доступность. Попросите человека объяснить причину пустоты и следующий шаг. Повторите путь на узком экране и с клавиатуры, затем исправьте обнаруженные препятствия.

Первый вход: помогите начать работу

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

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

Учебный пример или стартовое содержимое может помочь понять устройство раздела, если ясно обозначено как демонстрация. Не смешивайте пример с реальными данными и не создавайте видимость выполненной работы. Человек должен различать обучение и результат собственных действий.

Не заставляйте проходить лишнее обучение

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

Если подсказку можно закрыть, продумайте возвращение к полезной инструкции. Не прячьте единственное объяснение так, что после первого отказа его невозможно найти. Согласуйте этот путь с существующей справкой продукта.

Нет результатов: сохраните условия поиска

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

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

Рекомендации могут быть отдельной помощью, если их назначение очевидно. Например, можно объяснить возможность ослабить ограничения или перейти к связанному разделу. Важно сохранить различие между найденными совпадениями и предложенными альтернативами.

Данных не удалось получить: не изображайте пустой список

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

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

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

Отсутствие доступа — другой сценарий

Если система знает о недостаточных правах, объясните ограничение и предусмотренный путь получения доступа. Не предлагайте повторную загрузку как единственное решение постоянного ограничения. Не обещайте автоматическое разрешение, если решение принимает другой участник процесса.

Не раскрывайте в подсказке закрытые данные, которые пользователь не должен видеть. Уточните, какое объяснение допустимо для этой роли. Иногда корректный ответ должен оставаться общим, сохраняя полезный путь к поддержке или владельцу доступа.

Как выбрать текст и оформление

Начните с короткого заголовка состояния, затем при необходимости добавьте пояснение. Человек должен быстро различить ситуацию и доступное действие. Длинный рассказ о достоинствах сервиса редко помогает понять, почему именно сейчас нет записей.

Иллюстрация необязательна. В маленьком блоке она может занимать место, нужное для объяснения. Если изображение декоративное, смысл состояния должен сохраняться без него; важные сведения передавайте текстом и доступным управлением.

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

Частые ошибки

• Одно сообщение для разных причин. Отсутствие данных, запрет доступа и сбой требуют разных объяснений.
• Недоступное основное действие. Подсказка не должна вести туда, где пользователь не может продолжить.
• Обещание восстановления без такой функции. Проверьте реальную возможность до подготовки текста.
• Пустой список вместо ожидания. Незавершённая загрузка ещё не подтверждает отсутствие записей.
• Случайные материалы вместо результата. Альтернативы следует явно отделять от совпадений.
• Иллюстрация без объяснения. Декор не сообщает причину и не заменяет доступный путь.

Как проверить

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

Подходы к таким состояниям описаны в Carbon Design System, помощь при первом использовании — в руководстве Fluent, помощь при отсутствии совпадений — в рекомендациях NN/G. Разберите состояние на прототипе сайта, согласуйте подписи и сообщения формы и проверьте клавиатурное управление. Задачу по интерфейсу можно разместить в разделе «Дизайн сайтов».

Вопросы и ответы

Пустое состояние нужно только при первом входе?

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

Нужно ли всегда показывать кнопку?

Нет. Действие полезно, если оно нужно и доступно человеку в этой ситуации. Иногда достаточно объяснить состояние. Не добавляйте неработающий или недоступный переход ради одинакового оформления всех блоков.

Можно ли написать, что записей нет, если загрузка не завершилась?

Не делайте такой вывод до получения результата. Пока данные загружаются, показывайте ожидание; при сбое объясните известную проблему. Иначе интерфейс сообщает пользователю то, чего система ещё не установила.

Обязательно ли рисовать иллюстрацию?

Нет. Она может поддержать тон и помочь заметить блок, но не заменяет объяснение. В небольшом пространстве текст и доступное действие нередко важнее. Смысл должен сохраняться без декоративного изображения.

Что делать с пустым результатом после фильтра?

Покажите связь с текущими условиями и дайте возможность их изменить. Сохраните необходимые введённые значения. Не выдавайте случайное содержимое за совпадения и не утверждайте, что материалов нет во всей системе.

Как проверить текст такого блока?

Покажите состояние без дополнительных объяснений и попросите человека рассказать, что произошло и что он может сделать. Если ответ расходится с реальным сценарием, уточните сообщение или сам доступный путь.

Когда считать состояние готовым?

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