GH GambleHub

Interfeysin naviqasiya arxitekturası

1) Naviqasiya arxitekturası nədir və niyə lazımdır

Naviqasiya arxitekturası (NA) məhsulda istifadəçini istiqamətləndirmək üçün sistemli bir yoldur: harada olduğunu, hara gedə biləcəyini və necə geri dönəcəyini necə başa düşür. Yaxşı NA:
  • İstifadəçi məqsədlərini məzmun/fich strukturu ilə əlaqələndirir.
  • Proqnozlaşdırıla bilən nümunələrlə bilişsel yükü azaldır.
  • Nəticənin əldə edilməsini sürətləndirir (daha az klik/atlama).
  • Məhsul böyüdükcə ölçülür.

Prinsiplər: ardıcıllıq> yaradıcı, açıq işarələr> gizli jestlər, 3-4 hərəkətdən daha qısa yol əsas məqsədə.

2) Naviqasiya layları (IA səviyyələri)

1. Qlobal səviyyə - məhsul bölmələri (məsələn: Lobbi, Live, Promosyonlar, Cüzdan, Profil).
2. Bölmə/kateqoriya - alt bölmə və əsas funksiyalar (kataloqlar, hesabatlar, parametrlər).
3. Səhifə/görünüş - konkret mahiyyətlər (oyun, hesabat, forma).
4. Lokal/kontekst - tablar, lövhələr, «daha çox göstərmək», paginasiya.
5. Tarix və dönüş yolu - çörək qırıntıları, back, «sonuncuya».

Qayda: Hər səviyyədə aydın olmalıdır «mən haradayam?» (aktiv nöqtənin, H1/qırıntıların ayrılması) və «bundan sonra nə olacaq?» (STA/referanslar/tövsiyələr).

3) naviqasiya modelləri və onları seçmək zaman

Üst menyu (top-nav): üst səviyyəli 5-7 bölmə. İstehlak interfeysləri və mobaillər üçün yaxşıdır (alt tablara çevrilir).
Aşağı tablar (mobile): 5 bəndədək, sabit, nişan + etiket. Əsas hərəkətlər həmişə baş barmağın altındadır.
Sol sidbar: 2-3 səviyyəli dərinlik, məhsullarda və adminklərdə işləyir. Tez-tez nöqtələr üçün çökmə/pin.
Mega menyu: böyük kataloqlar (mağazalar, məzmun hovuzları). Mövzulara görə qruplaşdırır, ipuçları və sürətli bağlantılar əlavə edir.
Çörək qırıntıları: dərin yollar və SEO məzmunu üçün; H1 və top naviqasiya əvəz etmir.
Kontekst naviqasiya: tabalar, çip filtrləri, «related», longrids içindəkilər (TOC).
Komanda palitrası/Global search ( K): varlıqların adlarına və hərəkətlərinə görə sürətli keçidlər.
Qısa və jestlər: power-users (qaynar düymələr, sviplər) - lakin həmişə UI ekvivalenti ilə.

Seçim: bölmələrin sayından, dərinliyindən, istifadə tezliyindən və cihazlardan asılıdır.

4) Routing və URL strategiyası

Oxunan URL: '/games/slot/[ slug] ', '/reports/ngr? period=Q3`.
Sabitlik: redaktorlar olmadan URL-ni dəyişdirməyin; əks uyğunluq saxlayın.
Status parametrləri ilə marşrutlar: filtrlər/çeşidləmə - query; ID - yolda.
Növün saxlanması: «Cari filter/lövbər bağlantısını kopyalayın».
Dərin linklər (deep links): top/poçt - təhlükəsiz avtorizasiya ilə birbaşa hədəfə.
Offline və bərpa: geri dönərkən - mövqeyi/filtrləri bərpa edin.

5) Məlumat göstəriciləri və nişanları

Nöqtənin aktiv vəziyyəti (rəng/zolaq, nişan).
H1 və lead - səhifə kontekstini danışın.
Bölmə lokatoru - qırıntılar, sidbardakı markerlər, lövhənin işıqlandırılması.
Boş hallar - hara gedəcəyinizi söyləyin (CTA, kömək linkləri).
Sabit lüğət - bütün yerlərdə eyni elementlərin adları.

6) Axtarış və komanda palitrası

Global search: mahiyyət indeksi (oyunlar, provayderlər, hesabatlar) + sürətli hərəkətlər («/deposit », «/kyc»).
Avtomatik tamamlama: son və populyar sorğular, dar ipuçları.
Semantika: nəticələrin ayrı-ayrı «növləri» (mahiyyətlər, məlumat səhifələri, parametrlər).
Komanda palitrası ( K): adlar və hotkeylər üzrə marşrutlaşdırma, rus/ingilis/sinonim adlarına dəstək.

7) Hallar, rollar və giriş

RBAC: yalnız mövcud bölmələri göstərin; boz «kilidlər» - qənaətlə və izahla.
Qonaq rejimi: məhdud menyu nöqtələri, CTA qeydiyyat/giriş aparır.
Tenantlıq: brendlər/operatorlar üzrə boşluqlar - qlobal selektorda ayrılması.
Hüquqların eskalasiyası: KYC/2FA sonra - yeni marşrutlar açılır.

8) Mobil xüsusiyyətlər

Aşağı naviqasiya (≤ 5): Lobbi, Canlı, Promosyonlar, Cüzdan, Profil.
Kürəklərdən diplinklər: istədiyiniz tab/sekmə/lövbərə aparın; geri - əvvəlki vəziyyətə.
Geri jestlər: qıvrım karuselləri (oxlu lok) ilə ziddiyyət təşkil etmir.
Sticky elementləri: mini player/cari oyun, «Depozit» - üzən CTA.

9) Mövcudluq və lokalizasiya

Fokus qaydası vizual iyerarxiyaya uyğundur.
Menyu/qırıntılar/tablar üçün ARIA atributları. Nişanların imzaları məcburidir.
Klaviatura naviqasiyası: oxlar/Tab/Enter; görünən fokus.
RTL/Dillər: grid və maddə sırasını əks etdirin, mikro kopyanı lokallaşdırın.
Kontrast və ölçüləri: WCAG AA minimum; 44px ≥ tap hədəfləri.

10) Performans və sabitlik

Proqressiv naviqasiya yükləmə: sidbar/menyu üçün skeletlər.
Menyu/lüğət caching: daha az şəbəkə çəkmək, ani naviqasiya.
Ən yaxın marşrutların əvvəlcədən yüklənməsi: hover/fokus; ağlabatan büdcələr.
Sabitlik: Yükləmə zamanı sıçramayın (sabit ölçülər).
404/403 qorunması: dost səhifələr və sürətli «geri».

11) Telemetriya və metrika

Hadisələr:
  • 'nav _ click' (mənbə, nöqtə, mövqe), 'route _ change', 'search _ query/select',
  • `breadcrumb_click`, `deeplink_open`, `back_used`, `not_found_view`.
KPI:
  • Time-to-Target (hədəf ekran/fəaliyyət qədər).
  • Nav Error Rate (404/403/səhv hüquqları).
  • Return Rate (back dərhal geri nə qədər - qeyri-aydın yol əlaməti).
  • Search Success% (2 klik ≤ nəticə).
  • Komanda paleti və qaynar düymələri Adoption.
A/B:
  • Seidbar vs mega menyu; yuxarıdan tabalar vs çip filtrləri; «axtarış həmişə görünür» vs kliklə.

12) iGaming üçün nümunələr (nümunələr)

Operator Web Casino (B2C):
  • Qlobal: Lobbi/Canlı/Promosyonlar/Turnirlər/Cüzdan/Profil.
  • Lobbidə: çip filtrləri (Yeni, Jackpotlar, Provayderlər, Buy-Bonus), axtarış.
  • Qırıntılar - provayderlərin/məqalələrin səhifələrində, lobbidə deyil.
B2B-provayder admin:
  • Saydbar: Daşbordlar/Məzmun/Tərəfdaşlar/Hesabatlar/Uyğunluq/Parametrlər.
  • Bölmələr daxilində tablar (Siyahı/Buraxılışlar/Sertifikatlaşdırma).
  • Komanda palitrası: «ID ilə oyun açmaq», «Buraxılış yaratmaq», «Hesabat ixracı».

13) Antipattern

Qruplaşdırılmadan 20 + bəndlik menyu (vizual səs-küy).
Müxtəlif yerlərdə eyni bölmənin fərqli adları.
Gizli kritik naviqasiya yalnız burger menyusunda (masaüstü).
Tabların filtr kimi yenidən istifadəsi (müxtəlif mənalar - bir növ).
Vəziyyəti pozan keçidlər («geri» zamanı filtrlərin atılması).
«Yapışqan» panellər məzmun və CTA üst-üstə.

14) Giriş çek siyahısı (sprintlər üzrə)

Sprint 1 - Xəritə: bölmələrin inventarlaşdırılması, hədəf yolları (top-tasks), terminlər lüğəti.
Sprint 2 - IA: qruplaşdırma, səviyyələr, model seçimi (top-nav/side/mega/tabs). Prototip.
Sprint 3 - Routing/URL: oxunan yollar, filtrlərin qorunması, diplinkalar, 404/403.
Sprint 4 - Axtarış/ K: varlıqların indeksi, avtomatik tamamlama, sürətli hərəkətlər.
Sprint 5 - Mövcudluq/lokal: klaviatura, ARIA, RTL, kontrast.
Sprint 6 - Telemetriya/A-B: Time-to-Target, Search Success, back-bounces; model testi.
Sprint 7 - Performans: lüğət/menyu önbelləyi, qonşu marşrutların prefetch, skeletonlar.

15) Sözlük

IA (Information Architecture) - bölmələrin/məzmunun məntiqi quruluşu.
Top-nav/Side-nav/Tabs/Mega-menu - naviqasiya modelləri.
Breadcrumbs - dərin iyerarxiya üçün «çörək qırıntıları».
Dərin link - müəyyən bir vəziyyətə/bölməyə dərin link.
Command Palette - hotkey üzrə qlobal axtarış/fəaliyyət.
Time-to-Target - hədəf ekran/fəaliyyət nail olmaq üçün vaxt.

16) Yekun

Naviqasiya arxitekturası istifadəçi yolunu qısa və proqnozlaşdırıla bilən bir məhsul xəritəsidir. Uğur verir:

1. aydın çox səviyyəli IA,

2. sabit oxunan URL-lər və vəziyyətin qorunması,

3. kombinə naviqasiya modelləri (menyu + tablar + axtarış/ K),

4. əlçatanlıq və lokalizasiya,

5. daimi cilalama üçün metrik və A/B.

Beləliklə, funksionallıq artdıqda belə interfeys aydın və sürətli qalır.

Contact

Bizimlə əlaqə

Hər hansı sualınız və ya dəstək ehtiyacınız varsa — bizimlə əlaqə saxlayın.Həmişə köməyə hazırıq!

Telegram
@Gamble_GC
İnteqrasiyaya başla

Email — məcburidir. Telegram və ya WhatsApp — istəyə bağlıdır.

Adınız istəyə bağlı
Email istəyə bağlı
Mövzu istəyə bağlı
Mesaj istəyə bağlı
Telegram istəyə bağlı
@
Əgər Telegram daxil etsəniz — Email ilə yanaşı orada da cavab verəcəyik.
WhatsApp istəyə bağlı
Format: ölkə kodu + nömrə (məsələn, +994XXXXXXXXX).

Düyməyə basmaqla məlumatların işlənməsinə razılıq vermiş olursunuz.