UX-fidbek boş vəziyyətdə

1) Boş hallar nədir və niyə lazımdır

Boş vəziyyət, əsas məzmunun müvəqqəti olaraq olmadığı ekran/widgetdır: ilk hərəkətdən əvvəl, təmizləndikdən sonra, sıfır nəticədə, yükləmə səhvində, heç bir hüquq/giriş olmadıqda.

• izah «niyə burada boş»;
• bölmənin dəyərini göstərmək;
• aydın növbəti addım təklif (və ya seçim üçün bir neçə);
• narahatlığı azaltmaq və qayğı qarşısını almaq.

Yaxşı boş vəziyyət = kontekst + istifadə + hərəkət.

2) Boş halların tipologiyası

1. Birincil sıfır (ilk dəfə empty): istifadəçi hələ bir şey yaratmadı/qurmadı.
2. Sıfır axtarış/filter: sorğu heç bir nəticə vermədi.
3. Zaman boşluğu: verilənlər yüklənir və ya növbə yerinə yetirilir.
4. Məhdudiyyət/hüquq: giriş yoxdur, kifayət qədər yoxlama səviyyəsi yoxdur.
5. İstifadəçi tərəfindən təmizləndi: səbət/tarix təmizləndi.
6. Texniki nasazlıq: şəbəkə/xidmət nasazlığı, retraj.

3) Dizayn prinsipləri

Kontekstlik: boşluğun konkret səbəbi haqqında danışırıq.
Dəyər → hərəkət: əvvəlcə bu bölmə niyə, sonra nə etmək lazımdır.
Bir əsas CTA: lazım olduqda - ikinci dərəcəli (learn more/FAQ).
Qısa və spesifiklik: 1-2 təklif + aydın düymə.
Vizual dəstək: ikona/illüstrasiya mənanı dəstəkləyir, diqqəti yayındırmır.
Maneələrin qarşısının alınması: hər zaman irəli bir yol var.
Ton uyğunluğu: mehriban və sakit; kritik addımlarda zarafat etmədən (ödənişlər, təhlükəsizlik).
A11y və lokalizasiya: Ekran tərəfindən oxunur, düzgün əyilir, sətirlərin uzunluğunu nəzərə alır.

4) Boş vəziyyətdə çərçivə (şablon)

Başlıq (opsiyonel, 1 sətir) - dəyər və ya səbəbin təsdiqi.
Mətn (1-2 cümlə) - «niyə boşdur» + «bundan sonra nə var».
Birincil CTA - əsas hədəf fəaliyyət.
İkincil STA/link - yardım/qaydalar/sənədləşmə.
Vizual (isteğe bağlı) - 24-96 px yüngül illüstrasiya, həddindən artıq yükləməyin.

5) Ssenari nümunələri

5. 1 Bağlama/Birinci Sıfır

Məqsəd: ilk uğurlu hərəkətə gətirmək.

Mətn: «Şəxsi tövsiyələri görmək üçün profili doldurun və maraqları seçin.»

CTA: «Profili doldurun »/« Maraqları seçin».
Məsləhət: Səy/vaxt mikro göstərici əlavə edin: «Bu ~ 1 dəqiqə çəkəcək».

5. 2 Axtarış/filtrələr = sıfır nəticə

Məqsəd: sorğunu düzəltməyə kömək etmək.

Mətn: "Heç bir şey tapılmadı "live blackjack". «Blackjack 'i sınayın və ya» Provider: X «filtrini silin»

CTA: «Filtrələri sıfırla» ikincili: «Kataloqu aç».

5. 3 Ödənişlər/cüzdan boş

Məqsəd: metodun əlavə edilməsini/ilk doldurulmasını stimullaşdırmaq.

Mətn: «Ödəniş üsulunu saxlayın - doldurmalar və nəticələr daha sürətli olacaq.»

CTA: «Ödəniş metodu əlavə edin» ikincili: «Qaydalar və komissiyalar».

5. 4 Yoxlama/Giriş

Məqsəd: məhdudiyyəti və çıxarılma yolunu şəffaf şəkildə izah etmək.

Mətn: "Bu bölmə şəxsiyyət təsdiq sonra mövcuddur. Adətən 2 dəqiqə çəkir"

CTA: «Yoxlamadan keçmək» ikincidir: «Niyə lazımdır?»

5. 5 Yolda məlumat/vaxt boşluğu

Məqsəd: gözləmə narahatlığını azaltmaq.

Mətn: "Məlumatlarınızı toplayırıq. Adətən 30 saniyə çəkir. Səhifəni tərk edə bilərsiniz - hər şey hazır olduqda bildirəcəyik"

CTA: «Aydındır» ikinci: «Bundan sonra nə olacaq?»

5. 6 Təmizləndikdən/çıxarıldıqdan sonra

Məqsəd: hərəkəti təsdiqləmək və növbəti addımı təklif etmək.

Mətn: "Tarix təmizləndi. Yeni əməliyyatlar növbəti əlavədən sonra olacaq"

CTA: «Hesabı doldurun».

5. 7 Səhv/retraj

Məqsəd: aydın bərpa yolu.

Mətn: "Verilənlər yüklənə bilmədi. Şəbəkəni yoxlayın və ya yenidən cəhd edin"

CTA: «Təkrar» ikincili: «Sistem statusu».

6) Mikro mətnlər: hazır şablonlar

• "Burada birinci əlavə etdiyiniz zaman seçilmiş oyunlar olacaq. [Favoritlərə əlavə et]"

• «{query}» sorğusuna görə heç nə tapılmadı. Sorğunu dəqiqləşdirin və ya filtrləri sıfırlayın. [Filtrləri sıfırla]"

• "Hələ saxlanmış metodlarınız yoxdur. Ödənişləri sürətləndirmək üçün kart və ya cüzdan əlavə edin. [Yol əlavə edin]"

• "Funksiya yaş təsdiqi olmadan mövcud deyil. Bu ~ 2 dəqiqə çəkəcək. [Yaşını təsdiqlə] [Niyə lazımdır?]"

• "Son 24 saat ərzində statistikanı hesab edirik... Adətən 30 saniyəyə qədərdir. Hər şey hazır olduqda bildiriş göstərəcəyik"

• "Xidmət mövcud deyil. Biz artıq təmir edirik. Daha sonra cəhd edin və ya statusunuzu yoxlayın. [Təkrarla] [Sistem statusu]"

7) Vizual dil və illüstrasiyalar

CTA ilə mübahisə etməmək üçün yüngül monoxrom/iki rəngli illüstrasiyalardan istifadə edin.
Ölçüləri və girintiləri - məzmun kartı kimi (vizual uyğunluq).
Stress ssenarilərində yumoristik səhnələri təsvir etməyin (ödəniş/təhlükəsizlik).

8) Lokalizasiya və əlçatanlıq

(DE/TR daha uzun) sətir uzunluğu üçün ehtiyat qoyun.
Rəqəmsal formatları, valyutanı, tarixləri yerli olaraq tərcümə edin.
Ekran üçün: role = «status», aria-live = dinamika üçün «polite/assertive».
Yalnız şəkilə məna qoymayın: mətnlə təkrarlayın.
320 px oxuculuğunu və WCAG kontrastını yoxlayın.

9) Metriklər və təcrübələr

• Boş vəziyyətin əsas CTA CTR;
• «ilk müvəffəqiyyətə» çevrilməsi (activation event);
• ilk hərəkətə qədər vaxt;
• tərəqqi olmadan ekrana qayıtma tezliyi;
• sıfır axtarış nəticələrinin payı;
• ssenari dəstək müraciət.

• konkret vs ümumi başlıq;
• CTA-feil fəaliyyət vs neytral;
• vaxt təxmini əlavə;
• İkincil CTA (FAQ) olması və düymələrin qaydası;
• vizual olmadan illüstrasiya vs ikona vs.

10) Anti-nümunələr

«Burada boş» heç bir izahat və addım olmadan.
Kritik addımlarda zarafatlar (ödəniş, təhlükəsizlik).
Bir CTA «Daha çox öyrənin» kontekstə bağlanmadan.
Passiv girov: «əlavə edilməlidir». Aktiv yazın: «Əlavə edin»....
Uzun paragraflar: 1-2 təklif maksimum.
Pleysholder formalarda etiket əvəzinə - A11y və anlayışı pisləşdirir.
Gizli məhdudiyyətlər («dərhal», baxmayaraq ki, gecikmə mümkündür).

11) Buraxılışdan əvvəl çek siyahısı

• Niyə boşdur?
• Bir cümlədə bölmənin dəyəri varmı?
• Bir əsas CTA var və lazım olduqda ikinci dərəcəli?
• Mətn qısa (≤ 140 işarə) və konkret?
• Uyğun olarsa, vaxt/səy qiymətləndirilməsi əlavə edildi?
• Ton ssenariyə uyğundur (sakit/dəstəkləyici)?
• Lokalizasiya və A11y (aria atributları, kontrast) yoxlanıldı?
• Şəkil CTA üzərində hakim deyil?

12) Nümunələr «əvvəl/sonra»

Oyunlar kataloqu (birinci sıfır)

Əvvəl: «Burada hələ heç bir şey yoxdur»

Sonra: "Lentinizi yığın. Ən sevdiyiniz 3 janrı seçin - tövsiyə etməyə başlayaq. [Janrları seçin]"

Sıfır axtarış

Əvvəlki: «Heç bir şey tapılmadı»

Sonra: "ilə "high-limit roulette" heç bir nəticə. «High-limit» filtrini çıxarın və ya «roulette» sınayın. [Filtrləri sıfırla]"

Ödənişlər

Qədər: «Heç bir ödəniş yolu»

Sonra: "Kartı və ya cüzdanı saxlayın - doldurmalar və nəticələr daha sürətli olacaq. [Yol əlavə edin] [Komissiyalar və şərtlər]"

Yoxlama

Qədər: «Giriş yoxdur»

Sonra: "Bölmə şəxsiyyət təsdiq sonra mövcuddur. Bu ~ 2 dəqiqə çəkir. [Yoxlanılması] [Niyə vacibdir]"

13) Dizayn sisteminə inteqrasiya

• 'title' (sətir, isteğe bağlı)
• 'body' (1-2 cümlənin qısa mətni)
• `primaryAction { label, onClick }`
• `secondaryAction { label, href/onClick }`
• 'icon/illustration' (isteğe bağlıdır)

Komponentin yanında olan i18n fayllarında mətnləri saxlayın, açarları və təsvirləri dəstəkləyin, tone-map-ı bağlayın (vəziyyət tonu və lüğəti).

14) Sürətli konstruktor (kopyalayın və istifadə edin)

• Başlıq: «Birinci addımdan başlayın»
• Mətn: «Maraqları seçən kimi tövsiyələr olacaq.»
• CTA: «Maraqları seçin»
• İkinci: «Bu necə işləyir?»

• Mətn: «{query}» üçün heç bir şey tapılmadı. Filtrləri sıfırlayın və ya sorğunu dəqiqləşdirin"
• CTA: «Filtrləri sıfırla»
• İkincili: «Kataloq»

• Mətn: "Funksiya yaş təsdiq sonra mövcuddur. Adətən 2 dəqiqəyə qədər"
• CTA: «Yaşını təsdiqlə»
• İkinci: «Niyə lazımdır?»

• Mətn: "Gündə məlumat toplayırıq. Adətən 30 saniyəyə qədərdir. Hər şey hazır olduqda xəbər verəcəyik"
• CTA: «Yaxşı»

Yekun şparqalka

Kontekst + dəyər + hərəkət - bir «yığın».
vizual çəki rəqabət olmadan bir əsas CTA.
Qısa və konkret: 1-2 təklif.
Həmişə çıxılmaz çıxış yolu: çıxılmaz ekranlar yoxdur.
Lokalizasiya və A11y komponent səviyyəsində qoyulmuşdur.