UX feedback in empty states

1) What are empty states and why they are needed

A blank state is a screen/widget where the main content is temporarily absent: before the first action, after cleaning, with a zero result, with a download error, with no rights/access.

• explain "why is it empty here";
• show the value of the section;
• Suggest a clear next step (or more to choose from)
• reduce anxiety and prevent grooming.

Good empty state = context + benefit + action.

2) Empty state typology

1. first-time empty-The user has not created/configured anything yet.
2. Zero Search/Filter: The query returned no results.
3. Temporary void: Data is being loaded or queue is running.
4. Restriction/right: no access, insufficient verification level.
5. User Cleared: Recycle Bin/History Cleared.
6. Technical problem: network/service failure, retray.

3) Design principles

Contextuality: we are talking about a specific reason for emptiness.
Value → action: first why this section, then what to do.
One main CTA: if necessary - secondary (learn more/FAQ).
Brevity and specificity: 1-2 sentences + clear button.
Visual support: the icon/illustration supports meaning, does not distract.
Avoiding dead ends: There's always a way forward.
Tone consistency: friendly and calm; no joke in critical steps (payments, security).
A11y and localization: readable by the screen reader, correctly inclined, takes into account the length of the lines.

4) Empty state frame (template)

Title (optional, 1 line) - Claim value or reason.

Text (1-2 sentences) - "why is empty" + "what's next."

Primary CTA is the main target action.
Secondary ACS/link - help/rules/documentation.
Visual (optional) - easy illustration of 24-96 px, do not overload.

5) Scripted patterns

5. 1 Onboarding/first zero

Goal: lead to the first successful action.

Text: "To see personalized recommendations, fill out a profile and select leads."

CTA: Populate Profile/Select Leads.

Tip: Add a micro force/time indicator: "It will take ~ 1 minute."

5. 2 Search/filters = zero result

Purpose: Help adjust the request.

Text: "Nothing found on "live blackjack." Try "blackjack" or remove the "Provider: X "filter"

CTA: "Reset Filters" secondary: "Open Directory."

5. 3 Payments/wallet empty

Objective: to stimulate method addition/first replenishment.

Text: "Save your payment method - refills and withdrawals will go faster."

CTA: "Add Payment Method" secondary: "Rules and Fees."

5. 4 Verification/access

Purpose: transparently explain the restriction and the withdrawal route.

Text: "This section is available after identity confirmation. It usually takes up to 2 minutes"

CTA: "Get Verified" secondary: "Why is it necessary?"

5. 5 Data in transit/temporary void

The goal: to reduce anxiety waiting.

Text: "Collecting your data. This usually takes up to 30 seconds. You can leave a page - we will notify you when everything is ready"

CTA: "Understandable" secondary: "What happens next?"

5. 6 After cleaning/removal

The goal is to confirm the action and suggest the next step.

Text: "History cleared. New transactions will appear after the next refill"

CTA: "Top Up."

5. 7 Error/Retray

The goal: a clear path of recovery.

Text: "Failed to load data. Check your network or try again"

CTA: "Repeat" secondary: "System status."

6) Microtexts: ready-made templates

• "Selected games will appear here when you add the first one. [Add to Favorites"

• "Nothing was found for "{query}." Refine the request or reset the filters. [Reset Filters]"

• "You do not have any saved methods yet. Add a card or wallet to speed up your payments. [Add Method]"

• "The feature is not available without age confirmation. It will take ~ 2 minutes. [Confirm age] [Why?]"

• "We are counting the statistics for the last 24 hours... This is usually up to 30 seconds. We'll show you a notification when you're done"

• "The service is unavailable. We are already repairing. Please try later or check the status. [Repeat] [System Status]"

7) Visual language and illustrations

Use light monochrome/two-tone illustrations to avoid arguing with the CTA.
Dimensions and indents - like a content card (visual consistency).
Do not depict humorous scenes in stressful scenarios (payment/security).

8) Localization and availability

Put stock for the length of the lines (DE/TR longer).
Translate numeric formats, currency, dates locally.
For screen readers: role = "status," aria-live = "polite/assertive" for dynamics.
Do not put meaning only in the image: duplicate with text.
Check for 320 px readability and WCAG contrast.

9) Metrics and experiments

• CTR on the main empty CTA;
• conversion to the "first success" (activation event);
• Time to first action
• frequency of return to the screen without progress;
• Percentage of zero search results
• calls for scenario support.

• a specific vs common header;
• CTA action verb vs neutral;
• Adding a time estimate
• the presence of a secondary CTA (FAQ) and the order of the buttons;
• illustration vs icon vs without visual.

10) Anti-patterns

"Here is empty" without explanation or step.
Jokes in critical steps (payment, security).
One Learn More CTA without context.

Passive lien: "must be added." Write actively: "Add...."

Long paragraphs: 1-2 sentences maximum.
Placeholder instead of label in forms - worsens A11y and understanding.
Hidden constraints ("instantaneous," although delay is possible).

11) Pre-release checklist

• It is clear why it is empty?
• Is there value to the section in one sentence?
• Is there one main CTA and, if necessary, a secondary one?
• Is the text short (≤ 140 characters) and specific?
• Added time/effort estimate if appropriate?
• Tone matches script (calm/supportive)?
• Localization and A11y checked (aria attributes, contrast)?
• Image does not dominate CTA?

12) Before/after examples

Games Catalog (First Zero)

Before: "There is nothing here yet"

After: "Collect your tape. Choose 3 favorite genres - let's start recommending. [Choose Genres]"

Zero Search

Before: "Nothing found"

After: "By "high-limit roulette" there are no results. Remove the "High-limit" filter or try "roulette." [Reset Filters]"

Payments

Before: "No payment methods"

After: "Save your card or wallet - replenishment and withdrawal will become faster. [Add method] [Fees and terms]"

Verification

Before: "No access"

After: "The section is available after identity confirmation. It takes ~ 2 minutes. [Get Verified] [Why it Matters]"

13) Embedding in a design system

• 'title '(string, optional)
• 'body '(short text 1-2 sentences)
• `primaryAction { label, onClick }`
• `secondaryAction { label, href/onClick }`
• 'icon/illustration '(optional)

Store texts in i18n files next to the component, maintain keys and descriptions, connect tone-map (tone and lexicon for situations).

14) Quick constructor (copy and use)

• Headline: "Start With the First Step"
• Text: "There will be recommendations here as soon as you choose interests."
• CTA: "Select Leads"
• Secondary: "How does it work?"

• Text: "Nothing was found by "{query}." Reset the filters or refine the query"
• CTA: "Reset Filters"
• Secondary: "Catalogue"

• Text: "Feature available after age confirmation. It's usually up to 2 minutes"
• CTA: 'Confirm age'
• Secondary: "Why is it necessary?"

• Text: "We collect data for the day. This is usually up to 30 seconds. We'll let you know when it's done"
• CTA: "Good"

Final cheat sheet

Context + value + action - in one "stack."

One main CTA with no competition in visual weight.
Short and specific: 1-2 sentences.
Always the way out of the impasse: no dead-end screens.
Localization and A11y are at the component level.