Vizual iyerarxiya və prioritet

1) Vizual iyerarxiya nədir

Vizual iyerarxiya - istifadəçinin diqqətini paylayan və məqsədli hərəkətin yolunu (siqnap, depozit, oyun axtarışı, filtr, çıxış) sürətli və münaqişəsiz edən interfeysdə vurğu yerləşdirmə sistemidir. Hiyerarxiya kontrast, miqyas, mövqe, rəng, informasiya sıxlığı, hərəkət və ağ məkan vasitəsilə qurulur.

Məqsəd: «Bilişsel xərcləri» azaltmaq və tələb olunan elementlərə ilk Meaningful Click payını artırmaq.

2) Biznes effekti və KPI

• Hədəf CTA konvertasiyası (qeydiyyat, depozit, favoritlərə əlavə)
• Tapşırıqların tamamlanma sürəti (Time to Value)
• Qarışıqlığın azalması (Confusion Rate)
• Arızaların azaldılması (Bounce), scroll dərinliyinin artması və saxlanması

• FMC (First Meaningful Click): Yükləndikdən sonra əsas CTA ≤ N saniyəyə basan istifadəçilərin% -i.
• TTV (Time to Value): giriş vaxtından əsas dəyərə çatmağa qədər (məsələn, slot tapmaq və işə salmaq).
• Ekranlarda CTR əsas CTA: ev, kataloq, oyun səhifəsi, kassa.
• Birincili/ikincili kliklərin nisbəti (diqqət intizamı).
• offer/turnir ilə blok Scroll Depth.

3) Vizual iyerarxiya prinsipləri (nüvə)

1. Kontrast və miqyaslı: daha böyük və daha ziddiyyətli.
2. Oxu mövqeyi və qaydası: yuxarı/sol və 'ilk ekran "üstünlük əldə edir.
3. Ağ məkan: hava = əhəmiyyət. Çox sıx - prioritet itirilir.
4. Rəng və doyma: rəng vurğusu - «diqqət valyutası»; biz onu saxlayırıq.
5. Forma və ikonoqrafiya: düymələrin forması, markerlər, status nişanları fərqliliyi artırır.
6. Hərəkət və mikroanimasiya: nadir, qısa, bütöv vurğular; «yarmarka» qaçmaq.
7. Qruplaşdırma (gestalt): yaxınlıq, oxşarlıq, qapalı, bərabərləşdirmə, ümumi sahə.
8. Məlumat sıxlığı: kritik yolda - yalnız lazımlı, qalanları «zəif» təbəqələrdə.

4) Prioritet matrisi (P1-P4)

P1 (Kritik-birincil): ekranda 1-2 STA/element. Böyük ölçü, parlaq kontrast, sabit mövqe.
P2 (Mühüm dəstəkləyici): filtrlər, sürətli etiketlər, ikincil CTA. Orta kontrast, P1 yanında.
P3 (Kömək/Kontekst): İpuçları, reytinqlər, mini kartlar. Sakit üslub, kompakt.
P4 (Fon/istinad): istinad, futer, hüquqi istinadlar. Kiçik kontrast və ölçüsü.

Qayda: bir ekranda bir P1-dən çox deyil. P1 rəqabət varsa, onlar artıq P1 deyil.

5) İerarxiya təbəqələri

Qlobal: üst səviyyəli naviqasiya, qlobal axtarış, bildirişlər.
Səhifə: qəhrəman bloku, H1/H2, əsas bannerlər/offerlər.
Komponent: oyun kartları, kassa formaları, turnir cədvəlləri.
Komponentdaxili: sahələrin sırası, imzalar, statuslar, mikro-ipuçları.

6) Tipik ssenarilər (iGaming-test)

• P1: «Hesab yarat «/» Giriş »(böyük düymə, sabit mövqe).
• P2: Sosial giriş, «Parolu göstər», parol siyasəti.
• P3: Links "Şifrəni unutmusunuz? ", təhlükəsizlik ipuçları.

• P1: «Doldurmaq «/» Çıxarmaq »+ seçilmiş üsul.
• P2: Məbləğ, sürətli presets, komissiya/limitlər yaxındır.
• P3: Gizli metodu ətraflı təsviri, vaxt.

• P1: Axtarış + əsas filtrlər (Provayder, Volatility, RTP, New/Hit).
• P2: Seqmentlər/etiketlər (Megaways, Jackpot, Buy Feature).
• P3: Təkrar çeşidləmə, kart nişanları (yenilik, hit, turnirlər).

• P1: Qoşulmaq/Mükafatın təfərrüatları.
• P2: Liderlər cədvəli (ilk 5), geri sayım zamanlayıcısı.
• P3: Tam klik/dönüş qaydaları.

7) Mətbəə və şəbəkə

Modul şkalası: 12-14 (mətn), 16 (əsas), 20-24 (alt başlıqlar), 28-40 (H1/Hero).
Bazis xətti: 4/8px addımlar; şaquli ritm = oxunabilirlik.
Sətir uzunluğu: mətn üçün 45-75 simvol; Kartların təsviri üçün 20-40.
Sətirlərarası: 120-150% mətn üçün, 110-120% başlıqlar üçün.

8) Rəng və kontrast

Mətn kontrastı: açar yollarda mətnlər üçün AA səviyyəsi göstəricilərindən aşağı deyil.
Rəng rolları: Primary (CTA), Accent (diqqət), Info/Success/Warning/Danger (statuslar).
Dark mövzu: sərhədlərin və mətnlərin təzadlarını gücləndirmək, geniş rəngli müstəvilərin doymasını azaltmaq; «neon-ağrı» qarşısını almaq.
Elementlərin vəziyyətləri: default/hover/focus/active/disabled - fərqlidir.

9) Aksentlər və düymələr

Primary CTA: ekranda bir, nəzərə çarpan rəng/miqyaslı, kifayət qədər sahələr (min-tap 44 × 44px).
Secondary/tertiary: hamar tonları, kontur üslubları.
Spinner ≠ iyerarxiya: tərəqqi rəy verir, lakin P1-i kəsməməlidir.

10) Diqqət mexanikası və sürəti

F-/Z nümunələri: P1-i gözdən gözlənilən yerə yerləşdirin.
Hick qanunu: Daha az bərabər daha sürətli - ilk addım variantları qısaldır.
Fitts qanunu: daha böyük və daha yaxın - daha asan klik; mühüm hit area artırın.
Serial ipuçları: «mətn divarı» ilə deyil, addımlarla öyrənin.

11) Ev ekranı/lendinqlər

Qəhrəman blok: qısa offer + vahid P1.
Vizual «reyklər»: 3-4 bölmə maksimum birinci skrolla (kateqoriyalar, yeni məhsullar, turnir).
Sosial sübut: provayderlərin nişanları, «həftənin hitləri» - P2, P1 kəsilmir.

12) Daşbordlar və cədvəllər

İlk ekran: 1-2 əsas KPI böyük, sparkline + trend nişanlar.
Cədvəl: vacib sütunları hizalayın, əsas sütunları «dondurun», density açarını istifadə edin (kompakt/standart).
Boş hallar: növbəti addımı izah edin (P1 düyməsi + ipucu).

13) Mobil vs Masaüstü

Mobile: Bir P1 qat-qat üst xətt scroll, tab bar ≤ 5 bal, CTA floating kassa/oyun üçün icazə verilir.
Masaüstü: konteyner eni 1200-1440px; sətirlərin uzunluğunu məhdudlaşdırın; P1-in «uzanmasından» çəkinin.

14) Lokalizasiya, rəqəmlər, RTL

Sətirlərin uzunluğunu (Alman/Türk), müxtəlif valyutaları və boşalmaları nəzərə alın.
RTL: grid güzgü və vurğu qaydası, lakin P1 üstünlük saxlamaq.

15) A/B və iyerarxiya metrikası

• P1 ölçüsü/kontrastını 12-16% artırın → FMC və CTR artımı.
• Filter transferi (P2) axtarışa yaxındır → TTV axtarış oyununun azaldılması.
• Kassanın ilk addımındakı variantların azaldılması → yuxarıda tamamlanması.

İzləmək: FMC (N saniyə), CTR P1, Scroll Depth, TTV, Confusion Rate (səhvlər/geri qaytarmalar), Rage Clicks.

16) Audit proseduru (çek siyahısı)

1. Hər bir əsas ekranda P1 adını verin - düz bir?
2. P2 elementləri P1 dəstəkləyir, rəng/kontrast baxımından onunla mübahisə etmir?
3. Baxış yolu: P1 ilk 3 fokusa düşür?
4. Açıq/qaranlıq mövzularda mətn/STA kontrastı kifayətdir?
5. Minimum hit areas riayət olunur?
6. Səs-küy: konvertasiya itkisi olmadan elementlərin 20% -i çıxarıla bilərmi?
7. Boş hallar fəaliyyət göstərir?
8. Hallar (hover/focus/active) fərqlidir və mövcuddur?
9. Mobil faylda P1 bir scroll olmadan görünür?
10. Metriklər hunidə qoşulur və oxunur?

17) Anti-nümunələr

Bir ekranda iki və daha çox Primary.
P1 bağlayan «qışqıran» bannerler.
Boz boz (kifayət qədər kontrast).
Kritik yolda mətnsiz nişanlar.
Həddindən artıq yüklənmiş kartlar: 6 + nişanlar, 4 sətir təsviri.
Məqsədsiz animasiyalar (yanıb-sönən/sonsuz).

18) Dizayn sistemi: prioritetlərin spesifikasiyası

Tokenlər: 'color. primary`, `color. accent`, `elevation. p1`, `radius. lg`, `space. 8/12/16`.
Ölçü rolları: 'btn. p1. lg`, `btn. p2. md`, `text. h1/h2/body`, `badge. status`.
Qatlar/Z-index: P1 məzmun modullarının üstündə, lakin sistem modullarının altında.
Hallar: nümunələri olan hallar cədvəli (ekran-bələdçi).

19) Prioritetləşdirmə alqoritmi (psevdo)

1. Ekranın məqsədini təyin edin (bir cümlə).
2. P1 (bir element) təyin edin, ən nəzərə çarpan kimi tərtib edin.
3. P1-in yanında/sonra P2 (2-5 element) formalaşdırın.
4. Gizləyin/ P3-P4.
5. Əlçatanlıq və mobillik çek siyahısını keçin.
6. Baxış və time-to-P1 yolunu yoxlayın (3 saniyə ≤ basın).
7. A/B başlatın, FMC/TTV/CTR izləyin.

20) Mikrokopiya və mətnlər

H1 başlıqları - qısa, feil/dəyər: «10 saniyədə oynamağa başlayın».
CTA - hərəkət və nəticə: «Bir dəqiqədə doldurun», «İndi oyna».
İpuçları - iş üzrə, maksimum bir sətir, jarqon olmadan.

21) Hiyerarxiya tapşırıqları üçün Acceptance Criteria

Ekranda yalnız P1 müəyyən edilmişdir; biz skrollsuz görürük (mobil/masaüstü).
P1 kontrastı bələdçilərə uyğundur; hit area ölçüləri ≥ 44 × 44px.
P2 vizual olaraq P1-dən zəifdir (kontrast/miqyasın 1-2 mərhələsində).
Elementlərin vəziyyəti fərqlidir; klaviatura fokus üslubları var.
FMC/TTV/CTR/Scroll Depth üçün analitik hadisələr qoşuldu.

22) Qısa xülasə (TL; DR)

İyerarxiya diqqət intizamıdır. Ekranda bir açıq P1, P2 vasitəsilə dəstək, daha az səs-küy, kifayət qədər kontrast və oxunan tipoqrafiya. Özünüzü yoxlama vərəqi ilə yoxlayın, FMC/TTV/CTR ölçün və A/B testləri ilə hipotezləri təsdiqləyin.