Empty states and UX hints

1) Why empty states are needed

• explains why empty,
• shows what to do next,
• offers a safe first step,
• reduces anxiety and saves support time.

2) Typology of empty states

1. First-time - the user has not done anything yet.
2. Zero data - Entities are not created or the list is empty.
3. Filters/search (no results) - conditions excluded all.
4. Error/temporary unavailability - network/server, but the data is in principle.
5. No rights/restriction - access denied, QAS/role/limit required.
6. Maintenance - planned work, waiting.

3) Empty card structure

Icon/illustration (do not overload; contrast ≥ AA).

One-line headline: "Here is still empty."

Reason/context: "You haven't added yet... "/" The filter found no matches."

1-2 actions (CTA): primary (main scenario), secondary (alternative).
Link to the rescue (optional).
Page level: keep the usual navigation and filters - do not turn the screen into a dead end.

html
<section class="empty" role="region" aria-labelledby="empty-title">
<svg aria-hidden="true" class="empty__icon"><!-- … --></svg>
<h2 id = "empty-title "> It's empty for now </h2>
<p> Create the first campaign or change the filters. </p>
<div class="actions">
<button class =" btn btn--primary "> Create campaign </button>
<button class =" btn btn--ghost "> Reset Filters </button>
</div>
<a class =" help" href = "/help/campaigns "> How it works </a>
</section>

4) Tone and text (UX copywriting)

Clearly and kindly. Avoid "Error 0x...."

Reason → action. "The VIP filter excluded all entries. Do you want to reset the filter?
No guilt. Don't blame the user for emptiness.
One thought, one sentence.
Localization: Avoid cultural metaphors; bookmark + 20-30% of the text length.

5) Illustrations and visual

Neutral, unobtrusive; in the dark theme, increase the lightness of the illustrations.
Do not use illustrations as the only medium of meaning.
The scale is fixed; Do not break the grid or baseline.

6) CTA and alternatives

The primary CTA is the main next step (create/deposit/subscribe).

Secondary - "see demo," "import," "reset filters."

Selection limit: up to 2 CTA; the rest is in "More."

With risks/payments - transparent text about the consequences and cancellation.

7) Empty states by scenario

7. 1 First run

Hyde checklist of 3-5 steps: "Add a payment method," "Choose a provider."

Skip button + guide link.

7. 2 No data

A short explanation of why is empty + CTA Create/Import.
Hint: "You can load CSV" (link to template).

7. 3 Filters/search

Show which filters are active and the "Reset" button.
Suggest close matches or alternative queries.

7. 4 Error/unavailability

"We faced a problem. Try again later" + "Retry "/" System Status."