Empty states және UX кеңестер

1) Не үшін бос жай-күй қажет

• неге бос екенін түсіндіреді,
• бұдан былай не істеу керектігін көрсетеді,
• қауіпсіз бірінші қадамды ұсынады,
• дабылды азайтады және қолдау уақытын үнемдейді.

2) Empty-күй типологиясы

1. Бірінші іске қосу (first-time) - пайдаланушы әлі ештеңе істемеді.
2. Деректер жоқ (zero data) - мән құрылмаған немесе тізім бос.
3. Сүзгілер/іздеу (no results) - барлық шарттар алынып тасталды.
4. Қате/уақытша қолжетімсіздік - желі/сервер, бірақ деректер негізінде бар.
5. Құқықтар/шектеулер жоқ - кіруге тыйым салынған, КБК/рөл/лимит талап етіледі.
6. Техникалық қызмет көрсету - жоспарлы жұмыстар, күту.

3) empty карточкасының құрылымы

Белгі/иллюстрация (артық жүктемеңіз; контраст ≥ AA).
Бір жолға тақырып: «Мұнда әлі бос».
Себеп/контексті: «Сіз әлі қосылмаған» .../« Сүзгі сәйкес келмеді ».
1-2 әрекет (CTA): бастапқы (негізгі сценарий), екінші (балама).
Көмекке арналған линк (қосымша).
Бет деңгейі: қалыпты навигацияны және сүзгілерді сақтаңыз - экранды тұйыққа айналдырмаңыз.

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) Тон және мәтін (UX-копирайтинг)

Анық және ізгі ниетпен. 0x қатесінен аулақ болыңыз...

Себебі → әрекет. «VIP» сүзгісі барлық жазбаларды алып тастады. Сүзгіні ысыру керек пе?"

Кінәсіз. Пайдаланушыны бос тұр деп айыптамаңыз.
Бір ой - бір сөйлем.
Локализация: мәдени метафоралардан аулақ болыңыз; мәтін ұзындығының + 20-30% қойыңыз.

5) Иллюстрациялар және визуалды

Бейтарап, көзге көрінбейтін; dark тақырыбында иллюстрацияның жарықтығын арттырыңыз.
Иллюстрацияларды мағынаны жалғыз ұстаушы ретінде пайдаланбаңыз.
Масштабы белгіленген; тор мен негізгі сызықты бұзбаңыз.

6) CTA және баламалар

Бастапқы CTA - басты келесі қадам (құру/депозит/қол қою).
Екінші - «демоны көру», «импорт», «сүзгілерді жою».
Таңдау лимиті: 2 CTA-ға дейін; қалғаны - «Тағы да».
Тәуекелдер/төлемдер кезінде - салдары және күшін жою туралы айқын мәтін.

7) Сценарийлер бойынша бос жай-күй

7. 1 Бірінші іске қосу

3-5 қадамнан тұратын гайд-чеклист: «Төлем тәсілін қосыңыз», «Провайдерді таңдаңыз».
«Жіберу» түймешігі + гайдаға сілтеме.

7. 2 Деректер жоқ

«Неге бос» + «Құру »/« Импорттау» CTA қысқаша түсініктемесі.
Кеңес: «CSV жүктеуге болады» (үлгіге сілтеме).

7. 3 Сүзгілер/іздеу

Қандай сүзгілер белсенді екенін және «Ысыру» түймешігін көрсетіңіз.
Жақын сәйкестіктерді немесе балама сұрауларды ұсыныңыз.

7. 4 Қате/қол жетімділік

"Біз проблемаға тап болдық. Кейінірек" + "Қайталау "/" Жүйе күйі" әрекетін жасаңыз.