UX-фидбек бос күйде

1) Бос жағдай дегеніміз не және олар не үшін қажет

Бос күй - бұл экран/виджет, онда негізгі мазмұн уақытша жоқ: бірінші әрекетке дейін, тазалаудан кейін, нөлдік нәтиже кезінде, жүктеу қатесі кезінде, рұқсаттар/қатынас болмаған кезде.

• «мұнда неге бос екенін» түсіндіру;
• бөлімнің құндылығын көрсету;
• келесі нақты қадамды (немесе таңдауға бірнеше қадамды) ұсыну;
• алаңдаушылықты азайту және күтімді болдырмау.

Жақсы бос жағдай = контекст + пайда + әрекет.

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

1. Бастапқы нөл (first-time empty): пайдаланушы әлі ештеңе жасамаған/теңшемеген.
2. Нөлдік іздеу/сүзгі: сұрау нәтиже бермеді.
3. Уақытша бос орын: деректер тиеледі немесе кезек орындалады.
4. Шектеу/құқық: Қатынас жоқ, тексеру деңгейі жеткіліксіз.
5. Пайдаланушымен тазаланды: өшірілім/тарих тазаланды.
6. Техникалық ақау: желі/сервис ақауы, ретрай.

3) Дизайн қағидаттары

Түпмәтінділік: бос тұрудың нақты себебі туралы айтамыз.
Құндылық → әрекет: алдымен бұл бөлім не үшін, содан кейін не істеу керек.
Бір басты CTA: қажет болған жағдайда - қайталама (learn more/FAQ).
Қысқалығы және нақтылығы: 1-2 сөйлем + нақты түйме.
Визуалды тірек: иконка/иллюстрация мағынаны қолдайды, алаңдатпайды.
Тұйықтарды болдырмау: әрқашан алға жол бар.
Тон үйлесімділігі: достық және тыныш; сыни қадамдарда әзілсіз (төлемдер, қауіпсіздік).
A11y және локализация: скринридер арқылы оқылады, дұрыс бейімделеді, жолдардың ұзындығын ескереді.

4) Бос күйдің қаңқасы (шаблон)

Тақырып (қосымша, 1 жол) - құндылықты немесе себептерді бекіту.
Мәтін (1-2 сөйлем) - «неліктен бос» + «одан әрі не».
Бастапқы CTA - басты мақсатты әрекет.
Қайталама СТА/сілтеме - көмек/ережелер/құжаттама.
Визуал (міндетті емес) - жеңіл иллюстрация 24-96 px, артық жүктемеңіз.

5) Сценарийлер бойынша паттерндер

5. 1 Онбординг/бірінші нөл

Мақсаты: алғашқы табысты әрекетке әкелу.

Мәтін: «Жеке ұсыныстарды көру үшін профильді толтырыңыз және мүдделерді таңдаңыз.»

CTA: «Профилді толтыру »/« Мүдделерді таңдау».
Кеңес: күш/уақыт микро-индикаторын қосыңыз: «Бұл 1 минуттан ~ уақыт алады».

5. 2 Іздеу/сүзгілер = нөлдік нәтиже

Мақсаты: сұрауды түзетуге көмектесу.

Мәтін: «Live blackjack» бағдарламасынан ештеңе табылмады. "blackjack" әрекетін жасаңыз немесе "Провайдер: X "сүзгісін алып тастаңыз"

CTA: Қайталама сүзгілерді жою: Каталогты ашу.

5. 3 Төлемдер/әмиян бос

Мақсаты: әдісті қосуды/бірінші толықтыруды ынталандыру.

Мәтін: «Төлем тәсілін сақтаңыз - толтыру және қорытындылар тезірек өтеді.»

CTA: «Төлем тәсілін қосу» қайталама: «Ережелер мен комиссиялар».

5. 4 Верификация/кіру

Мақсаты: шектеу мен алып тастау жолын ашық түсіндіру.

Мәтін: "Бұл бөлім жеке басын растағаннан кейін қол жетімді. Әдетте бұл 2 минутқа дейін созылады"

CTA: «Екінші тексеруден өту»: «Бұл не үшін қажет?»

5. 5 Жолдағы деректер/уақытша бос орын

Мақсаты: күту алаңдаушылығын төмендету.

Мәтін: "Деректеріңізді жинаймыз. Бұл әдетте 30 секундқа дейін созылады. Бетті қалдырсаңыз, бәрі дайын болғанда хабарлаймыз"

CTA: «Түсінікті» екінші: «Бұдан әрі не болады?»

5. 6 Тазартқаннан/жойғаннан кейін

Мақсаты: әрекетті растау және келесі қадамды ұсыну.

Мәтін: "Тарих тазаланды. Жаңа операциялар келесі толықтырудан кейін пайда болады"

CTA: «Шотты толтыру».

5. 7 Қате/Ретрай

Мақсаты: қалпына келтірудің нақты жолы.

Мәтін: "Деректер қотарылмады. Желіні тексеріңіз немесе әрекетті қайталаңыз"

CTA: «Қайталау»: «Жүйенің мәртебесі».

6) Микротекстер: дайын үлгілер

• "Біріншісін қосқанда таңдаулы ойындар пайда болады. [Таңдаулыларға қосу"

• «{query}» сұрауы бойынша ештеңе табылмады. Сұрауды нақтылаңыз немесе сүзгілерді ысырып тастаңыз. [Сүзгілерді жою]"

• "Сізде әлі сақталған әдістер жоқ. Төлемдерді жылдамдату үшін карта немесе әмиян қосыңыз. [Әдісті қосу]"

• "функциясы жасын растамай қол жетімді емес. Бұл ~ 2 минутқа созылады. [Жасын растау] [Бұл не үшін қажет?]"

• "Соңғы 24 сағаттағы статистиканы есептейміз... Бұл әдетте 30 секундқа дейін. Бәрі дайын болғанда хабарландыруды көрсетеміз"

• "Қызмет қол жетімді емес. Біз жөндеп жатырмыз. Әрекетті кейінірек жасаңыз немесе күйін тексеріңіз. [Қайталау] [Жүйе мәртебесі]"

7) Көрнекі тіл және иллюстрациялар

CTA-мен келіспеу үшін жеңіл монохромды/екі түсті иллюстрацияларды пайдаланыңыз.
Өлшемдері мен шегіністері - контент карточкасындағы сияқты (көрнекі үйлесімділік).
Стресстік сценарийлерде (төлем/қауіпсіздік) әзіл көріністерін көрсетпеңіз.

8) Оқшаулау және қол жетімділік

Қор жолдар ұзындығына қойыңыз (DE/TR ұзын).
Сандық пішімдерді, валютаны, күндерді жергілікті түрде аударыңыз.
Скринридерлер үшін: role = «status», aria-live = динамика үшін «polite/assertive».
Тек суретке мән қоймаңыз: мәтінді қайталаңыз.
320 px және WCAG қарама-қарсылығын тексеріңіз.

9) Өлшемдер және эксперименттер

• Бос күйдегі басты CTA бойынша CTR;
• «алғашқы табысқа» конверсия (activation event);
• бірінші әрекетке дейінгі уақыт;
• прогрессіз экранға қайту жиілігі;
• іздестірудің нөлдік нәтижелерінің үлесі;
• сценарий бойынша қолдау көрсету.

• нақты vs жалпы тақырып;
• CTA-әрекет етуі vs бейтарап;
• уақыт бағасын қосу;
• қайталама CTA (FAQ) болуы және батырмалар тәртібі;
• иллюстрация vs икона vs визуалды емес.

10) Қарсы үлгілер

«Бұл жерде ешбір түсіндірмесіз және қадамсыз».
Сыни қадамдардағы әзілдер (төлем, қауіпсіздік).
Мәтінмәнді байланыстырмай бір CTA «Толығырақ білу».
Пассив кепіл: «қосылуы тиіс». Белсенді жазыңыз: «Қосу»...
Ұзын абзацтар: 1-2 сөйлем максимум.
Плейсхолдер лейблдің орнына пішінде - A11y мен түсінікті нашарлатады.
Жасырын шектеулер (кідіріс болғанымен, «дереу»).

11) Шығарылым алдындағы чек-парақ

• Неге бос екенін түсінесіз бе?
• Бір сөйлемде бөлімнің құндылығы бар ма?
• Бір басты CTA және қажет болса, қайталама бар ма?
• Мәтін қысқа (140 таңбадан ≤) және нақты?
• Уақыт/күш бағасы қосылды ма?
• Тон сценарийге сәйкес келеді ме (тыныш/қолдау)?
• Локализация мен A11y тексерілді ме?
• Сурет CTA үстем емес пе?

12) «дейін/кейін» мысалдары

Ойындар каталогы (бірінші нөл)

Дейін: «Бұл жерде әзірге ештеңе жоқ»

Кейін: "Таспаңызды жинаңыз. Сүйікті 3 жанрды таңдаңыз - ұсынуды бастаймыз. [Жанрларды таңдау]"

Нөлдік іздеу

«Ештеңе табылмады» дегенге дейін

«high-limit roulette» бойынша нәтиже жоқ. «High-limit» сүзгісін алып тастаңыз немесе «roulette» әрекетін жасаңыз. [Сүзгілерді жою]"

Төлемдер

Дейін: «Төлеу тәсілі жоқ»

Кейін: "Картаны немесе әмиянды сақтаңыз - толтыру мен қорытындылар жылдам болады. [Әдісті қосу] [Комиссиялар және мерзімдер]"

Верификациялау

Дейін: «Қатынас жоқ»

Кейін: "Бөлім жеке басын растағаннан кейін қол жетімді. Бұл ~ 2 минутқа созылады. [Тексеруден өту] [Неліктен маңызды]"

13) Дизайн-жүйеге кіріктіру

• 'title' (жол, қосымша)
• 'body' (1-2 сөйлемнің қысқа мәтіні)
• `primaryAction { label, onClick }`
• `secondaryAction { label, href/onClick }`
• 'icon/illustration' (қосымша)

Мәтіндерді компоненттің жанында i18n файлдарында сақтаңыз, кілттер мен сипаттамаларды қолдаңыз, tone-map (жағдай бойынша тон және лексика) қосыңыз.

14) Жылдам құрастырушы (көшіру және пайдалану)

• Тақырып: «Бірінші қадамнан бастаңыз»
• Мәтін: «Бұл жерде сіз мүдделерді таңдағаннан кейін ұсыныстар болады.»
• CTA: «Мүдделерді таңдау»
• Екіншілік: «Бұл қалай жұмыс істейді?»

• Мәтін: «{query}» бойынша ештеңе табылмады. Сүзгілерді ысырып тастаңыз немесе сұрауды нақтылаңыз"
• CTA: «Сүзгілерді жою»
• Қайталама: «Каталог»

• Мәтін: "Функция жасын растағаннан кейін қол жетімді. Әдетте бұл 2 минутқа дейін"
• CTA: «Жасын растау»
• Екінші: «Бұл не үшін қажет?»

• Мәтін: "Тәулік ішінде деректер жинаймыз. Бұл әдетте 30 секундқа дейін. Бәрі дайын болғанда хабарлаймыз"
• CTA: «Жақсы»

Қорытынды шпаргалка

Контекст + құндылық + әрекет - бір «стопкада».
Бір басты CTA көрнекі салмағы бойынша бәсекелестіксіз.
Қысқаша және нақты: 1-2 ұсыныс.
Әрқашан тұйықтан шығу жолы: тұйық экрандар жоқ.
Оқшаулау және A11y компонент деңгейінде салынған.