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`.
- 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.
- 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.
- 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.