Пустой результат: объяснение и следующий шаг
Пустое состояние интерфейса должно объяснять, почему элементов нет и что пользователь может сделать дальше.
Назначение
Пустое состояние интерфейса должно объяснять, почему элементов нет и что пользователь может сделать дальше.
Как это работает
Отсутствие совпадений, ещё не созданные записи и ошибка загрузки — разные состояния. Для каждого нужен свой текст; ошибка не должна маскироваться сообщением «ничего не найдено».
Пример
<section aria-labelledby="empty-title"><h2 id="empty-title">По этому запросу ничего нет</h2><p>Попробуйте короткое название свойства, например display.</p><a href="#query">Изменить запрос</a></section><label for="query">Поиск</label><input id="query" name="q" type="search">Что должно получиться
Читатель получает причину и ссылку к реальному полю. Это статический образец состояния; настоящий поиск должен отдельно различать успешный пустой ответ и сетевой отказ.
Граница применения и частая ошибка
Не оставляйте пустую рамку или один декоративный значок. Также не обещайте, что повторный поиск решит серверную ошибку, если приложение не получило корректного ответа.
Самостоятельная проверка
Напишите разные сообщения для пустого каталога и нулевого результата поиска. Проверьте, что действие действительно ведёт к форме поиска или созданию записи, а не является неработающей кнопкой.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.