UI ішіндегі мазмұн иерархиясы

1) Иерархия не үшін қажет

• 3-5 секундта үш сұраққа жауап береді: бұл не? → не маңызды? → не істеу керек?;
• интерфейсті болжамды және оңай сканерленетін етеді;
• қателерді азайтады және конверсияны арттырады.

Қағидаттар: сигналдар> шу, бірізділік> әртүрлілік, контекст> абсолюттік ережелер.

2) Маңыздылық деңгейлері және құрылымы

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

2. H1 - экранның мақсаты (барынша қысқа, қажет болған жағдайда етістікті).

3. Lead/тақырыпшасы (пайданың немесе мәртебенің бір жолы).

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

5. Primary data (негізгі KPI, «бірінші желі» карточкалары).

6. Secondary data (бөлшектер, сүзгілер, қосалқы кестелер).

7. Meta/Help (кеңестер, ескертулер, заңды мәтін).

Ереже: бір экранда - бір H1, екіден артық емес primary CTA.

3) Типографика және ырғақ

Қаріптер шкаласы: H1 28-32, H2 22-24, H3 18-20, body 14-16, micro 12 (веб-дегі px/pt баламасы).
Жоларалық аралықтар: 1. 3–1. 5 body үшін 1. 2–1. 3 тақырыптар үшін.
Шегініс ырғағы: базалық бірлікке еселік (4/8 px). Тақырып, блок: 16-24; абзацтар: 8-12.
Контраст: минимумы WCAG AA; тақырып әрқашан қолтаңбадан/метадан қарама-қайшы.
Түсі vs салмағы: түсі - өлшемі/майлылығы орнына «балдақ» емес, акцент.

4) Тор және орналасу

Тор 12 баған (desktop )/4-6 (mobile) тіркелген гуттері бар.
Visually first = first in DOM: скринридерлерге және SEO-ға көмектеседі.
Оқу білігі: солдан оңға (LTR) немесе оңнан солға (RTL) - сигналдардың ретін бейнелеңіз.
«Назар аудару аймақтары»: жоғарғы сол/орталық - тақырып және lead; «әрекеттер жолағы» - оның жанында/астында.

5) Басымдықтың көзбен шолу сигналдары

Өлшемі мен салмағы (типографиясы) - алғашқы сигнал.
Позиция (жоғары/солға = LTR кезінде маңыздырақ).
Түсі (CTA үшін екпін, мәртебелері - бекітілген палитра бойынша).
Иконография (тек мәтінді қолдау ретінде).
Шегіністер/жиектер (үлкен «ауасы» бар карточка маңыздырақ қабылданады).
Динамика (тітіркенусіз назар аудару үшін 200 мс ≤ анимация).

6) Прогрессивті ашу

• Above the fold - тек контекст, мақсат және бастапқы әрекет.
• Бөлім-аккордеондар/табалар - қайталама деректер.
• Нұқу бойынша нақтылау (drill-down): карточка → панель → модал.
• Артық жүктелген «хелп» орнына инлайн-кеңестер.
• Скелетондар/плейсхолдерлер жүктеу уақытында құрылымын сақтайды.

7) Үлгілік экрандардағы иерархия

7. 1 Дашборд

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

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

H1 + жылдам сүзгілер/чиптер.
Сұрыптау тақырып жақынырақ, CTA карточкасында «Play/Сатып алу».
Белгілер (жаңа/топ/джекпот) - атауына қатысты көзбен шолып қайталанады.

7. 3 Мәні бар карточка (ойын/тауар)

Батыр аймақ: атауы (H1), негізгі фактілер (RTP/құбылмалылық/рейтинг), primary CTA.
Егжей-тегжейлер: «Сипаттама/Сипаттамалар/Пікірлер» қосымша беттері.
Метадеректер: белгілер мен заңды мәтін - төменде.

7. 4 Пішіндер/шеберлер

Қадамның тақырыбы + қысқаша lead («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 «Лобби», «Жаңа/Live/Джекпот/Сүйікті» чиптері, содан кейін плиткалар. Әрбір карточкада - провайдердің атауы, белгісі, CTA «Ойнау»; «жаңа/джекпот» белгісі - екінші рет.
Оператордың дашборды: бірінші жол - NGR/GGR/DAU/CR, екіншісі - трендтер мен аномалиялар, үшіншісі - кестелер.
Төлем қадамы: H1 «Толықтыру», lead «Комиссиясыз, бірден», конверсия әдістерінің тізімі, жоғарыдан ең төменгі метатексті.

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

Экрандағы күші жағынан бірдей он екпін («көзбен шолып айқайлау»).
Мәтінсіз суреттер/иконалар сияқты тақырыптар (қол жетімділікті және іздеуді бұзады).
«Қорытындылар ұсақ қаріппен», ал хабарламалар алпауыт баннерлермен.
Бастапқы CTA-ның жанындағы көмекші сілтемелер.
Келісілмеген тәртіп: бүгін «үстіңгі сүзгілер», ертең «солдан».

13) Енгізу чек-парағы

1. Экранның мақсатын анықтаңыз (H1 + 1-2 бастапқы әрекеттер).
2. Деңгейлерді белгілеңіз: primary/secondary/meta; DS белгілеріне бекітіңіз.
3. Баспахананың шкаласын және шегіністердің негізгі ырғағын жинаңыз.
4. Күйді (жүктеу/бос/қате) АТҚ/тақырып секірулерінсіз жөндеңіз.
5. 3-5 адаммен 5 минут «скан-тест» өткізіңіз: нені байқадыңыз, қайда басадыңыз.
6. Телеметрияны қосыңыз (exposure CTA, scan time, focus order).
7. Паттернді «дейін/кейін» мысалдары бар гайдлайнға жазыңыз.

14) Қорытынды

Мазмұн иерархиясы - бұл «ең бастысы үшін ірі қаріп» емес, шешімдер жүйесі: типография, тор, түс, шегініс ырғағы, DOM тәртібі және түрлі жағдайлардағы мінез-құлық. Әрбір деңгейдің өз рөлі мен салмағы болғанда - интерфейс түсінікті, жылдам және болжамды болады, ал пайдаланушылар өз әрекеттеріне сенімді болады.