UX-гайдлайн және интерфейс стандарттары

1) Қағидаттар

Сұлулықтан бұрын айқындылық. Мәні мен әрекеті 1-2 секундта анық.
Экранға бір мақсат. Қалғандарының бәрі - екінші рет немесе жасырын.
Бірізділік. Сол үлгілер = сол күту.
Әдепкі қол жетімділік. Контраст, фокус, пернетақта, дыбыс шығару.
Контекстілік. Кеңестер мен мәтіндер - қажет жерде.
Локализация-first. Жолдардың ұзындығы, пішімдері, мәдениеті - бастапқыда дизайнда.
Қайтарымдылық. Кез келген қауіпті әрекетті болдырмауға/растауға болады.
Өлшенуі. Әрбір ереже - метрикамен (қадамды конверсиялау, уақыт, қателер).

2) Тор, шегініс және ырғақ

Тор: 4/8-pt қадамы; бағандар: 12 (desktop), 6 (tablet), 4 (mobile).
Компоненттердің ішкі шегіністері: 4 есе; сыртқы - 8/ 12/16/24.
Тік ырғақ: тақырып → тақырыпша → мазмұн → әрекеттер (CTA).
Шекаралар мен бөлгіштер: үнемді; «ауаны» және баспахананың иерархиясын артық көреді.

3) Баспаханалар

Кегель шкаласы: 12/14/ 16/20/24/32/40 (body 16).
Жол биіктігі: 1. 4–1. 6 мәтін үшін: 1. 2–1. 3 тақырыптар үшін.
Жол ұзындығы: 45-75 таңба (desktop), 35-55 (mobile).
Бөліп алу: мағыналық екпін үшін майлы; капс - тек белгімен.
Оқылушылық: мәтіндер табиғи түрде естілуі тиіс.

4) Түсі мен қарама-қарсылығы

Семантика: 'success/info/warning/error/neutral'.
Контраст: минимум WCAG 2. 1 АА (мәтін/фон ≥ 4. 5:1; ірі ≥ 3:1).
Түсі ≠ жалғыз белгі. Белгішені/мәтінді/пішінді қосыңыз.
Фокус сақинасы: әрқашан көрінетін (CSS ішінде өшірілмесін).

5) Навигация және ақпараттық сәулет

Пайдаланушы жолы: "Мен қайда? Мұнда не бар? Ары қарай не" - деп жауап берді.
Мәзір иерархиясы: Негізгі навигациядағы 2 деңгейді ≤.
Нан үгінділері: терең бөлімдер үшін.
Іздеу: күрделі каталогтарда жаһандық қол жетімді; '/' ыстық пернесі.
Шарлау күйі: белсенді қойындысы/беті белгілермен боялған.

6) Компоненттер мен паттерндер

Дизайн-жүйенің компоненттерін пайдаланамыз («қолдан жасалған»).
Экранға бір primary-CTA; қалғандары - secondary/tertiary.
Жай-күйлер: default/hover/focus/active/disabled/loading - әрбір интерактивте міндетті.
Бос күйі: контексті + құндылығы + CTA (+ қайталама сілтеме).
Ортақ алерттер: экранға бір page-alert + жергілікті inline-кеңестер.

7) Нысандар, валидация және қателер

Лейбл міндетті. Placeholder - алмастыру емес, пішім үлгісі.
blur-ға inline-валидация, submit-ке summary-қателер.
Қате туралы хабар: не дұрыс емес + қалай түзету керек + шектеу/пішім.
Автоскролл және бірінші қатеге назар аудару; 'aria-invalid', 'aria-describedby'.
Маскалар мен пішімдер: енгізуді ұсынады, бірақ бұзбайды (пэйст болуы мүмкін).
Деректердің сақталуы: қайта жүктеу/қате кезінде ештеңе жоғалтпаймыз.

8) Жай-күй және фидбек

Табыс: тост 2-4 с, бейтарап-позитивті тон, CTA «не істеу керек».
Info/notice: жұмсақ баннер/тултип, ағынды бөгемейді.
Warning/Error/Critical: көрнекі/семантикалық иерархия; сыни - айқын әсері бар модалка/баннер.
Жүктеу: skeleton> spinner; күту уақытын бағалау> 3 с.

9) Контент және microcopy

Үш жауаптың ережесі: не болып жатыр → не үшін → одан әрі не істеу керек.
CTA: әрекет етістігі + нысан («Өзгерістерді сақтау», «Тексеру»).
Сандар/күндер/валюталар: жергілікті пішімдер.
Тон: достық; стрестік қадамдарда (төлем/қауіпсіздік) - бейтарап.

10) Қол жетімділік (A11y)

Пернетақтадан толық навигация; таблардың қисынды тәртібі.
Интерактивтер үшін және 'aria-' рөлдері, тосттар/мәртебелер үшін лайв-аймақтар.
Контрасттар, фокус-сақиналар, интерактивтердің өлшемдері ≥ 44 × 44 px.
Иконкалардағы/суреттердегі мәтіндік баламалар; 'th '/' scope' кестелері.
Тексерулер: автоматты (линтер/сканер) + қолмен скринридер сценарийлері.

11) Оқшаулау және интернационалдандыру

Барлық жолдар i18n-кілттерінде.
«Ұзын тілдер» тесті (DE/TR), RTL-режимдер.
Сандар/валюталар/уақыттар - пішімдеу утилиттері.
Tone-map: сценарийлер бойынша формальдылық/эмоция дәрежесі (онбординг/төлемдер/қауіпсіздік).

12) Респонсивтілік және бейімделу

Брейкпоинттер: 360 / 768 / 1024/1280 +.
Mobile-first: сындарлы жол бір қолмен қол жетімді, бас саусақ аймағында CTA.
Гесттер мен пернетақталар: қимылдар түймешіктермен қайталанады; desktop - хоткейлер.
Тығыздығы: desktop - «ауа», mobile - кликабельділікке нұқсан келтірмей тігінен үнемдеу.

13) Қараңғы тақырып

WCAG бойынша қарама-қарсылық сақталады; фон үшін «таза қара» (қою сұр) болудан аулақ болуға тиіс.
Жарық/көлеңке - әлсіреген; фокус-сақина қарама-қарсы.
Суреттер мен логотиптер - инвертацияланған нұсқаларымен.
Өту саясаты: пайдаланушының таңдауын сақтаймыз (system/light/dark).

14) Анимациялар және қозғалыс

Ұзақтығы: 120-200 мс (шағын), 200-300 мс (өтпелер).
Жеделдету функциялары - табиғи (cubic-bezier жеңіл баяулау).
Анимациялар ағынды бұғаттамауы және оқылуды нашарлатпауы керек.
'prefers-reduced-motion' дегенді құрметтеу.

15) Спектакль

LCP ≤ 2. 5 с. TTI/TBT жасыл аймақта; код-сплитинг; ленталы медиа жүктеу.
Ұзын тізімдерді виртуалдандыру; деректерді кэштеу.
Skeleton жылдамдықты қабылдау үшін; «джанк» орналасуын азайту.

16) Қауіпсіздік және UI-дегі құпиялылық

Сұрау салулардың себептерін нақты түсіндіру (камера, KYC, гео).
Ашық мерзімдер/комиссиялар/лимиттер; егер кідірістер мүмкін болса, «дереу».
Құпия деректер - бүркемелеу, анық «көрсету/жасыру».
Қайтарылмайтын іс-қимылдар үшін растаулар; кіру туралы әрекеттер/хабарламалар журналы.

17) Сапа өлшемдері UX

Қадамды конверсиялау және аяқтау уақыты.
Error rate өрістер/қадамдар бойынша және Time-to-Fix.
CTR бойынша CTA және сценарийлердің қайталануы.
Қатеден кейін/жүктеуден кейін Drop-off> N секунд.
Тақырыптар бойынша қолдау сұраулары (өзгерістерге дейін/кейін).
A11y-босату ақаулары (мақсаты - 0 сыни).

18) Чек парақтары

Шығару алдындағы экран

• Бір басты мақсат және бір primary-CTA.
• Навигация және «мен қайда» мәртебесі анық.
• Мазмұн қысқаша: 1-2 ұсыныс.
• Күйі: loading/empty/error/success жабылған.
• A11y: AA қарама-қарсылығы, фокус көрінеді, 'aria-' интерактивтерде.
• Локализация: жол ұзындығы/пішімі/RTL тексерілді.
• Спектакль: қажетсіз «ауыр» блоктар жоқ.

Шығару алдындағы пішін

• Таңбалар мен пішім мысалдары бар.
• Inline-валидация + summary submit.
• Бірінші қатеге Скролл, өріске назар аударыңыз.
• Хабарламалар: не/қалай/неліктен; пайдаланушы үшін 500/400 кодтарсыз.
• Қателер/қайта қотару кезінде деректер жоғалмайды.

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

«ОК» мағыналық қадамдарда CTA ретінде.
Лейблдің орнына плейсхолдер.
Түс - жалғыз мәртебе белгісі.
Уақытты бағалаусыз және баламасыз спиннерлер.
Фокус-трэп және ESC-жабусыз модальды терезелер.
Стильдерді/иконаларды араластыру, дизайн-жүйеден тыс компоненттерді қайталау.
Сыни сценарийлердегі юмор/эмодзи (төлем/қауіпсіздік).

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

Пішін қатесі

Дейін: «Қате 400»

Кейін: "Күннің пішімі дұрыс емес. КД пайдаланыңыз. ММ. ЖЖЖЖ"

Бос күйі

Дейін: «Бұл бос»

Кейін: "Мұнда алғашқы толықтырудан кейінгі операциялардың тарихы пайда болады. [Шотты толтыру]"

Табыс хабары

Дейін: «Дайын»

"Төлем қабылданды. Теңгерім жаңартылды. [Тарихты көру]"

Навигация

Дейін: пайдаланушының қайда екені белгісіз

Кейін: белсенді қойындысы + нан ұнтақтары + анық бет тақырыбы

21) Дизайн-ревю үлгілері

Экран қаңқасы

Тақырып → қысқаша сипаттама → мазмұн/тізім → фидбек/статустар → әрекеттер.

Пішін қаңқасы

Тақырып → кеңестер → өрістер (лейбл + көмекші + қате) → CTA → қайталама әрекеттер → ескертулер (комиссиялар/мерзімдер).

Microcopy үлгісі

Тақырып (опц.)

1-2 сөйлем: контексті + келесі қадам

CTA: әрекет + нысан

Қайталама сілтеме: көмек/ережелер

22) Процестер және стандарттарды қолдау

Definition of Done (UX): макет + мәтін + жай-күй + A11y + i18n + метрика.
PR-дағы UX-ревью: 18-21-бөлімдердегі чек-парақ.
Құжаттама: әрбір сап wiki/Storybook бағдарламасына гайд қосады/жаңартады.
Тоқсанына бір рет аудит: контент, A11y, перформанс, консистенттілік.

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

Бір мақсат, бір басты CTA.
Жағдай мен фидбек алдын ала жобаланған.
A11y және оқшаулау - «кейін» емес, нөлден бастап.
Түсі аз - семантикасы мен ырғағы көп.
Өлшеңіз: конверсия, қателер, уақыт, айналым.
Барлық дизайн жүйесі арқылы: сол ережелер → сол күту → болжамды UX.

Бұл нұсқаулықты сіздің негізгі сценарийлеріңіз үшін дайын үлгілермен толықтыра аламын (тіркеу/АҚЖ, депозит/шығару, бонустар/турнирлер) және сіздің процестеріңіздің астында чек парақтарын жинай аламын.