Көрнекі иерархия және басымдық

1) Визуалды иерархия дегеніміз не?

Визуалды иерархия - бұл пайдаланушының назарын бөлетін және мақсатты әрекетке (signup, депозит, ойын іздеу, сүзу, шығару) жылдам және шиеленіссіз жол беретін интерфейстегі екпіндерді орналастыру жүйесі. Иерархия қарама-қарсылық, масштаб, позиция, түс, ақпарат тығыздығы, қозғалыс және ақ кеңістік арқылы құрылады.

Мақсат: «когнитивтік шығындарды» қысқарту және қажетті элементтерге First Meaningful Click үлесін ұлғайту.

2) Бизнес-тиімділік және KPI

• Мақсатты CTA конверсиясы (тіркеу, депозит, таңдаулыларға қосу)
• Тапсырманы аяқтау жылдамдығы (Time to Value)
• Шатасу көрсеткішін төмендету (Confusion Rate)
• Істен шығуды азайту (Bounce), скролл тереңдігінің өсуі және ұстап тұру

• FMC (First Meaningful Click): негізгі CTA бойынша басқан пайдаланушылар% ≤ жүктелгеннен кейін N секунд.
• TTV (Time to Value): кіруден бастап негізгі құндылыққа жетуге дейінгі уақыт (мысалы, слотты табу және іске қосу).
• Экрандағы негізгі CTA CTR: үй, каталог, ойын беті, касса.
• Бірінші/екінші кликтердің қатынасы (назар аудару тәртібі).
• Scroll Depth оффері/турнирі бар блокқа дейін.

3) Көрнекі иерархия қағидаттары (ядро)

1. Қарама-қарсылық пен масштаб: маңыздырақ - үлкен және қарама-қайшы.
2. Орын және оқу тәртібі: жоғары/сол және «бірінші экран» басымдыққа ие болады.
3. Ақ кеңістік: ауа = маңыздылығы. Тым тығыз - басымдық жоғалады.
4. Түсі мен қанықтығы: түстік екпін - «назар аудару валютасы»; үнемдейміз.
5. Форма және иконография: түймелердің, маркерлердің, мәртебе белгілерінің нысаны айырмашылықты күшейтеді.
6. Қозғалыс және микроанимация: сирек, қысқа, тұтас акценттер; «жәрмеңкеден» қашу.
7. Топтау (гештальт): жақындығы, ұқсастығы, тұйықталуы, тегістелуі, жалпы аумағы.
8. Ақпарат тығыздығы: сыни жолда - тек қажеттісі, қалғаны «әлсіз» қабаттарда.

4) Басымдықтар матрицасы (P1-P4)

P1 (Күрделі-бастапқы): 1-2 СТА/экранға элемент. Ірі өлшем, айқын қарама-қарсылық, бекітілген позиция.
P2 (Маңызды қолдау): сүзгілер, жылдам тегтер, қайталама CTA. P1 жанында орташа контраст.
P3 (Көмекші/контекст): кеңестер, рейтингтер, шағын карточкалар. Тыныш стиль, ықшам.
P4 (Өңдік/референс): анықтама, футер, заңды сілтемелер. Шағын қарама-қарсылық пен өлшем.

Ереже: бір экранда бір Р1 аспайды. Егер P1 бәсекелесе, олар P1 емес.

5) Иерархия қабаттары

Жаһандық: жоғарғы деңгейлі навигация, жаһандық іздеу, хабарламалар.
Беттік: батыр-блок, H1/H2, негізгі баннерлер/офферлер.
Компоненттік: ойын карточкалары, касса нысандары, турнирлік кестелер.
Компонент ішіндегі: өріс тәртібі, қолтаңбалар, мәртебелер, микро-кеңестер.

6) Типтік сценарийлер (iGaming-өлшеу)

• P1: «Аккаунт құру «/» Кіру »(ірі түйме, бекітілген позиция).
• P2: Әлеуметтік логиндер, «Құпия сөзді көрсету», құпия сөз саясаты.
• P3: "Құпия сөзді ұмыттыңыз ба? ", қауіпсіздік кеңестері.

• P1: «Толтыру «/» Шығару »+ таңдалған әдіс.
• P2: Сома, жылдам пресеттер, комиссия/лимиттер қатар.
• P3: Әдістің жасырылған егжей-тегжейлі сипаттамасы, мерзімдері.

• P1: Іздеу + негізгі сүзгілер (Провайдер, Құбылмалылық, RTP, Жаңа/Хит).
• P2: Сегменттер/тегтер (Megaways, Jackpot, Buy Feature).
• P3: Қайталама сұрыптау, карточкалық бейдждер (жаңалық, хит, турнирлер).

• P1: Қосылу/Сыйлықтың егжей-тегжейі.
• P2: Көшбасшылар кестесі (алғашқы 5), кері есептеу таймері.
• P3: Басу/кері бұрылу бойынша толық ережелер.

7) Типографика және тор

Модульдік шкала: 12-14 (мәтін), 16 (негіз), 20-24 (тақырыпшалар), 28-40 (H1/Hero).
Базис сызығы: 4/8px қадамдар; тік ырғақ = оқылушылық.
Жол ұзындығы: мәтін үшін 45-75 символ; Карточкаларды сипаттау үшін 20-40.
Жоларалық: мәтін үшін 120-150%, тақырыптар үшін 110-120%.

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

Мәтіннің қарама-қайшылығы: негізгі жолдардағы мәтіндер үшін AA деңгейінен төмен емес.
Түстік рөлдер: Primary (CTA), Accent (назар аударыңыз), Info/Success/Warning/Danger (мәртебелер).
Дарк тақырыбы: шекаралар мен мәтіндердің қарама-қайшылықтарын күшейту, кең түсті жазықтықтардың қанықтығын азайту; «неон-аурудан» аулақ болу керек.
Элементтердің күйі: default/hover/focus/active/disabled - ажыратылады.

9) Акценттер мен түймешіктер

Primary CTA: экранда біреу, көрінетін түс/масштаб, жеткілікті өрістер (min-tap 44 × 44px).
Secondary/tertiary: тегіс реңктер, контурлық стильдер.
Спиннер ≠ иерархия: прогресс кері байланыс береді, бірақ P1-ді үзбеуі керек.

10) Назар аудару механикасы және жылдамдық

F-/Z үлгілері: P1-ді көрініс күтілетін жерге орналастырыңыз.
Хик заңы: азырақ - тезірек - бірінші қадамның нұсқаларын қысқартыңыз.
Фитц заңы: үлкен және жақын - басу оңай; маңызды hit area.
Сериялық кеңестер: «мәтін қабырғасы» емес, қадамдар бойынша оқытыңыз.

11) Үй экраны/лендингтер

Батыр-блок: қысқаша оффер + бірыңғай P1.
Көрнекі «рейкалар»: 3-4 секция ең көп бірінші скроллға дейін (санаттар, жаңалықтар, турнир).
Әлеуметтік дәлел: провайдерлердің бейдждері, «аптаның хиттері» - P2, Р1-ді үзбейді.

12) Дашбордтар мен кестелер

Бірінші экран: 1-2 негізгі KPI ірі, спарклайндар + тренд бейдждер.
Кесте: бағандарды маңыздылығы бойынша түзету, негізгі бағандарды «қатыру», density қосқышын (компакт/стандарт) пайдалану.
Бос күй: келесі қадамды түсіндіру (P1-түймешік + кеңес).

13) Мобильді vs Desktop

Мобайл: бір P1 қатаң скролл сызығынан жоғары, таб-бар ≤ 5 пункт, floating CTA касса/ойын үшін жарамды.
Десктоп: контейнердің ені 1200-1440px; жолдардың ұзындығын шектеңіз; P1 «созылудан» аулақ болыңыз.

14) Оқшаулау, сандар, RTL

Жолдардың ұзындығын (неміс/түрік), әртүрлі валюталар мен разрядтарды ескеру.
RTL: тор мен екпін тәртібін көрсету, бірақ P1 үстемдігін сақтау.

15) A/B және иерархия метрикасы

• P1 өлшемін/контрастын 12-16% -ға ұлғайту → FMC және CTR өсуі.
• Сүзгілерді (P2) іздеуге жақындату → TTV ойын іздеуді төмендету.
• Кассаның бірінші қадамындағы параметрлерді қысқарту → жоғарыдағы аяқтау.

Бақылау: FMC (N секунд), CTR P1, Scroll Depth нысаналы блокқа дейін, TTV, Confusion Rate (қателер/қайтарымдар), Rage Clicks.

16) Аудит рәсімі (чек-парақ)

1. Әрбір негізгі экранда Р1 деп атаңыз - олар дәл біреу ме?
2. P2 элементтері P1 қолдайды, онымен түсі/қарама-қайшылығы бойынша дауласпайды ма?
3. Көрініс жолы: P1 алғашқы 3 фокусқа түседі ме?
4. Мәтіннің/СТА қарама-қайшылығы ашық/қараңғы тақырыптарда жеткілікті ме?
5. Минималды hit areas сақталды ма?
6. Шу: элементтердің 20% -ын конверсиясыз жоюға бола ма?
7. Бос күйлер әрекет ете ме?
8. Жай-күйлер (hover/focus/active) ажыратылатын және қол жетімді?
9. P1 мобайлында скролл жоқ көрінеді ме?
10. Метриктер құйғышқа қосылған және оқылатын ба?

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

Бір экранда екі немесе одан көп Primary.
Р1 жабатын «айқайлайтын» баннерлер.
Сұр түсті (жеткіліксіз контраст).
Сыни жолдағы мәтінсіз иконалар.
Артық жүктелген карточкалар: 6 + бейдждер, сипаттаманың 4-жолы.
Мақсатсыз анимациялар (жыпылықтайтын/шексіз).

18) Дизайн-жүйе: басымдықтардың ерекшелігі

'color. primary`, `color. accent`, `elevation. p1`, `radius. lg`, `space. 8/12/16`.
Өлшемдік рөлдер: 'btn. p1. lg`, `btn. p2. md`, `text. h1/h2/body`, `badge. status`.
Қабаттар/Z-index: P1 мазмұн модульдерінің үстінен, бірақ жүйелік модульдерден төмен.
Жай-күйлер: мысалдары бар жай-күйлер кестесі (скрин-гайд).

19) Басымдылық алгоритмі (жалған)

1. Экранның мақсатын анықтаңыз (бір сөйлем).
2. P1 (бір элемент) таңдаңыз, ең көрінетін ретінде рәсімдеңіз.
3. P1-мен қатар/кейін P2 (2-5 элемент) жасаңыз.
4. P3-P4 жасырыңыз/бүктеңіз.
5. Қолжетімділік пен ұтқырлық чек-парағынан өтіңіз.
6. Көру және time-to-P1 жолын тексеріңіз (3 секунд ≤ басыңыз).
7. A/B бағдарламасын іске қосыңыз, FMC/TTV/CTR бағдарламасын қадағалаңыз.

20) Микрокопия және мәтіндер

H1 тақырыптары - қысқаша, етіс/құндылық: «10 секундта ойнауды бастаңыз».
CTA - әрекет және нәтиже: «Бір минутта толтыру», «Қазір ойнау».
Кеңестер - іс бойынша, ең көбі бір жол, жаргонсыз.

21) Иерархия бойынша тапсырмалар үшін Acceptance Criteria

Экранда жалғыз Р1 анықталған; скроллсыз көреміз (мобайл/десктоп).
P1 контрасты гайдлайнға сәйкес келеді; hit area өлшемдері ≥ 44 × 44px.
P2 визуалды түрде P1-ден әлсіз (контраст/масштабтың 1-2 сатысына).
Элементтердің жай-күйі ерекшеленеді; пернетақта фокус-стильдері бар.
FMC/TTV/CTR/Scroll Depth үшін талдау оқиғалары қосылған.

22) Қысқа түйіндеме (TL; DR)

Иерархия - бұл назар аудару тәртібі. Экранға бір анық P1, P2 арқылы қолдау, шудан аз, жеткілікті контраст және оқылатын типография. Өзіңізді чек парағымен тексеріңіз, FMC/TTV/CTR өлшеңіз және гипотезаларды A/B-тесттерімен растаңыз.