Как проектировать пустые состояния и поиск без результатов

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

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

Отсутствие результатов — одна из разновидностей пустого состояния. Полезно различать пустую коллекцию и запрос, который не нашёл совпадений: в первом случае ситуация меняется с появлением контента, во втором — с изменением запроса.

Спросите, что привело бы к появлению контента

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

Если ответ — «создал первый проект», экран может объяснить содержимое проекта и предложить создание. Если «убрал фильтр Архивные», помогите изменить фильтр. Если «дождался завершения запроса», интерфейс ещё загружается. Если «восстановил доступ», кнопка создания может быть бесполезной или недоступной.

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

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

Power BI объясняет появление контента; NexTag показывает важность иерархии

В статье NN/G приведён экран последних объектов Microsoft Power BI. Он объясняет механизм появления контента: открытые материалы становятся доступны в Recents. Важно указание причины. Экран не заявляет, что весь аккаунт пуст или обязательно нужно создать новый объект.

Контрастный случай есть в исследовании NN/G страниц без результатов. На исторической странице NexTag участник не заметил маленькое сообщение об отсутствии совпадений и смотрел более заметный контент ниже. Запись взгляда не показала фиксаций на сообщении. Рекомендации для продолжения были, но человек пропустил причину, по которой они понадобились.

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

Выбирайте состояние по фактам, не по пустому массиву

Ответа с нулём элементов недостаточно для выбора интерфейса. Запрос может ожидать завершения, завершиться ошибкой, быть ограничен доступом или успешно вернуть пустой результат. В реализации сообщение должно учитывать статус и область запроса, а не только видимое число записей.

Таблица особенно полезна при проверке переходов. Введите один запрос и сразу замените его другим, а затем смоделируйте ситуацию, в которой ответы приходят в обратном порядке. Интерфейс должен показывать состояние текущего активного запроса. Старый ответ без результатов не должен стирать более новый успешный результат. Это дефект в управлении потоком данных; дополнительная иллюстрация его не исправит.

Практический вопрос проверки: «Что вы сделаете сейчас?» Покажите экран, не называя состояние заранее. Если человек выбирает создание, потому что не видит сохранённый запрос, доработайте восстановление. Если ждёт, считая экран незавершённым, проясните окончание обработки. Записывайте интерпретацию, не только правильный клик: случайное попадание способно скрыть неверное понимание.

Пишите о причине пустоты

Первое использование: правдоподобное начало

Первое пустое представление должно объяснять объект, который предстоит создать. «Здесь пока ничего нет» признаёт пустоту, но не назначение раздела. «Храните брифы, ссылки и заметки проверок вместе» даёт новичку более конкретный повод начать.

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

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

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

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

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

Для нашего примера ясный заголовок — «Нет проектов по запросу „осенний запуск“». Если возможное ограничение — даты, можно пояснить: «Текущий период — 1–7 октября». Это полезно, даже если приложение не знает, что именно привело к отсутствию совпадений: текст или период.

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

Рекомендации Nielsen Norman Group для поиска без результатов советуют ясно обозначить исход, оставить путь вперёд и избегать насмешливого тона. Применяйте принципы к конкретной задаче. Поиску проектов, товарному каталогу и библиотеке юридических документов не нужны одинаковые советы и картинки.

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

Говорите только то, что система может установить

«Проектов не существует» — широкое заявление. «Нет проектов с такими фильтрами» — уже. «В этом пространстве вам не видны проекты» — другая граница. Выбирайте по доступным данным, а не удобству строки.

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

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

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

Сохраните структуру, облегчающую следующий шаг

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

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

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

Не рассчитывайте размеры по одному короткому английскому предложению. Проверьте длинные названия, переводы и фильтры с переносом на две строки. Пустые экраны часто рисуют на удобном компьютере, затем втискивают в боковые панели. Решение только для «No items» не готово к реалистичному контенту.

Выберите полезное действие с наименьшими лишними потерями

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

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

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

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

Пройдите одну страницу во времени

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

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

Теперь перейдите в новое пространство без проектов. Та же область объясняет назначение проектов и предлагает создание. Фильтры убирать незачем: они не активны, а коллекция пуста. Экран может разделять типографику и отступы с первым состоянием, не разделяя сообщение.

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

Подбирайте тон по ситуации

Пустой личный список избранного допускает лёгкость и приветливость. Пустой журнал аудита во время разбора инцидента требует спокойствия и точности. Одна улыбающаяся картинка с «Начнём!» не подходит обоим случаям.

Определите вероятный вопрос человека. Новичок спросит: «Что сюда помещают?» Ищущий известный файл: «Я потерял доступ, выбрал не то место или ошибся в названии?» Проверяющему завершённую работу нужно лишь подтверждение, что ничего не осталось. Тон легче выбрать после ясного вопроса.

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

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

Иллюстрации должны оправдывать место

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

Для пространства сдержанный рисунок карточки проекта покажет виды сведений. Поиску без результатов может хватить маленького символа поиска: запрос и фильтры уже дают контекст. Состояния могут принадлежать одной визуальной семье без одинаковой большой картинки.

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

Проверьте различие в OpenDesign

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

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

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

Небольшое решение предотвращает большое недоразумение

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