UI мазмун иерархиясы

1) Эмне үчүн иерархия керек

• 3-5 секунданын ичинде үч суроого жооп берет: бул эмне? → эмне маанилүү? → эмне кылуу керек?;
• интерфейсти алдын ала айтууга жана оңой сканерлөөгө мүмкүндүк берет;
• каталарды азайтат жана конверсияны жогорулатат.

Принциптер: сигналдар> ызы-чуу, ырааттуулук> ар түрдүүлүк, контекст> абсолюттук эрежелер.

2) Маанилүүлүк деңгээли жана түзүлүшү

1. Навигациялык контекст (бренд, бөлүм, күкүмдөр/нан күкүмдөрү).

2. H1 - экрандын максаты (мүмкүн болушунча кыска, керек болсо этиш).

3. Lead/субтитр (пайда же статус бир сапта).

4. Primary actions (1-2 негизги CTA).

5. Негизги маалыматтар (негизги KPI, карталар "биринчи линия").

6. Secondary data (тетиктер, чыпкалар, көмөкчү таблицалар).

7. Meta/Help (кеңештер, эскертүүлөр, юридикалык текст).

Эреже: бир экранда - бир H1, эки негизги CTA ашык эмес.

3) Типография жана ритм

Шрифттердин шкаласы: H1 28-32, H2 22-24, H3 18-20, body 14-16, micro 12 (веб-сайттагы px/pt эквиваленти).
Жол аралык интервалдар: 1. 3–1. body үчүн 5, 1. 2–1. 3 аталыштары үчүн.
Чегинүү ыргагы: базалык бирдиктин эселенген (4/8 px). Аталышы, блок: 16-24; абзацтар: 8-12.
Контраст: минималдуу WCAG AA; баш ар дайым кол/meta караганда карама-каршы келет.
Түсү vs салмагы: түсү - акценти, ордуна "балдак" өлчөмү/майлуулугу.

4) тор жана макети

Сетка 12 колонка (desktop )/4-6 (мобилдик) белгиленген гуттар менен.
Visually first = first in DOM: скринингдерди жана SEO жардам берет.
Окуу огу: солдон оңго (LTR) же оңдон солго (RTL) - сигналдардын тартибин чагылдырыңыз.
"Көңүл буруу зоналары": жогорку сол/борбору - аталышы жана лидер; "иш-аракеттер тилкеси" - анын жанында/астында.

5) Visual артыкчылыктуу сигналдар

Өлчөмү жана салмагы (типографиясы) - негизги сигнал.
Позиция (жогору/сол = LTR боюнча маанилүү).
Түс (CTA үчүн басым, статустар - белгиленген палитра боюнча).
Иконография (текстти колдоо катары гана).
Чегинүүлөр/рамкалар (чоң "аба" менен карточка маанилүүрөөк кабыл алынат).
Динамика (кыжырдануусуз көңүл буруу үчүн 200 ms ≤ анимация).

6) прогрессивдүү ачуу

• Above the fold - бул контекст, максат жана негизги аракет.
• Бөлүмдөр-аккордеондор/табалар - экинчилик маалыматтар.
• Клик боюнча деталдаштыруу (drill-down): карта → панель → модал.
• Ашыкча жүктөлгөн "хелптердин" ордуна инлайн кеңештери.
• Скелеттер/плейсхолдерлер жүктөө учурунда структурасын сактап калат.

7) Типтүү экрандардагы иерархия

7. 1 Дашборд

H1 + жогорку убакыт чыпкасы.
KPI тилкеси (3-5 карта) - биринчи линия.
Графиктер/таблицалар - экинчи линия, сорттоо/чыпкалар жакын.
Аномалиялар/алерталар - өзүнчө тилке/лента, KPI менен аралаштырбоо.

7. 2 Каталог/лобби

H1 + тез чыпкалар/чиптер.
Сорттоо аталышы жакын, CTA "Play/сатып алуу" карта.
Этикеткалар (жаңы/жогорку/джекпот) - аталышына салыштырмалуу визуалдык экинчилик.

7. 3 Маңыз картасы (оюн/товар)

Hero зонасы: аты (H1), негизги фактылар (RTP/туруксуздук/рейтинг), негизги CTA.
Маалыматтар: "Description/мүнөздөмөлөрү/сын-пикирлер".
Метадеректер: белгилер жана юридикалык текст - төмөнкү.

7. 4 Формалар/мастерлер

Кадамдын аталышы + кыска жол ("2 мүнөт, карта эсептен чыгарылбайт").
Жыштык/милдеттүүлүк боюнча талаалардын тартиби.
CTA оң/төмөнкү, көмөкчү иш-аракеттер - төмөнкү/сол шилтемелер.
Каталар - талаанын жанында, кыскача жана иш боюнча.

8) Шарттарды артыкчылыкташтыруу

• Норма → Жүктөө → Ийгилик/Бош → Ката.
• Жүктөөдө - каркасты (скелеттерди) сактаңыз, CTA секирбейт.
• Ката - H1 өзгөрөт "эмне болду", CTA - "кайталап/байланыш".

9) Мазмун жана дизайн системасы

• `font. heading. xl`, `font. body. md`, `space. 200`, `radius. md`, `elevation. sm`.
• Текст ролдору: 'text. title`, `text. lead`, `text. secondary`, `text. meta`, `text. helper`.
• Түстөрдүн ролдору: 'accent/neutral/success/warn/danger' + "деңгээл" (100-900).
• Компоненттери: 'KPI. Card/Section. Title/Inline. Help/Meta. Line`.

10) өлчөө жана сапаты

• Scan Time (биринчи маанилүү чыкылдатуу/иш-аракет чейин медиа).
• Focus Order Errors (канча жолу колдонуучу карап "сагынып").
• CTA Visibility% (CTA vs чыкылдатуу көргөн канча).
• INP/CLS (иерархия жүктөп жатканда "секирип" керек эмес).
• A/B: ири H1 vs күчтүү карама-каршы; чип чыпкалар каптал панелинде жогору vs.

• `first_focus_target`, `primary_cta_exposed/clicked`, `section_collapse_toggle`, `help_shown`.

11) iGaming үчүн тажрыйба (мисал)

Казино лобби: H1 "Лобби", чиптер "New/Live/Джекпот/Сүйүктүү", андан кийин плиткалар. Ар бир картада - аты, провайдердин сөлөкөтү, CTA "Play"; "жаңы/джекпот" - экинчи жолу.
Dashboard оператору: биринчи сап - NGR/GGR/DAU/CR, экинчи - тренддер жана аномалиялар, үчүнчү - столдор.
Төлөм кадамы: H1 "Толуктоо", lead "Комиссиясыз, заматта", конверсия ыкмаларынын тизмеси, үстүнкү метатекстин минимуму.

12) Антипаттерндер

Экрандагы он бирдей басым ("визуалдык кыйкырык").
Текстсиз сүрөттөр/иконалар сыяктуу аталыштар (жеткиликтүүлүктү жана издөөнү бузат).
"Жыйынтык майда шрифт менен", ал эми билдирүүлөр алп баннерлер менен.
Жардамчы шилтемелер негизги CTA ошол эле визуалдык салмагы жанында.
макулдашылбаган тартиби: бүгүн "жогору чыпкалар", эртең "сол".

13) Киргизүү чек-тизмеси

1. экран максатын аныктоо (H1 + 1-2 негизги иш-аракет).
2. Белгилөө деңгээл: primary/secondary/meta; DS белгилерин бекитүү.
3. Типографиялык шкаланы жана негизги чегинүү ыргагын чогултуңуз.
4. Статустарды (жүктөө/бош/ката) STA/аталыштары жок.
5. 3-5 адам менен 5-мүнөттүк "сканердик тест" өткөрүңүз: эмнени байкадыңыз, кайда чыкылдатыңыз.
6. Телеметрияны туташтырыңыз (exposure CTA, scan time, focus order).
7. Үлгүнү "чейин/кийин" мисалдары менен гайдлайндарга жазыңыз.

14) Жыйынтык

Мазмундун иерархиясы "негизги үчүн чоң шрифт" эмес, чечим системасы: типография, тор, түс, чегинүү ыргагы, DOM тартиби жана ар кандай абалдагы жүрүм-турум. Ар бир деңгээл өз ролун жана салмагын ээ болгондо - Interface түшүнүктүү болуп, тез жана алдын ала, жана колдонуучулар - алардын иш-аракеттерине ишенимдүү.