Interfeýsiň nawigasiýa arhitekturasy
1) Nawigasiýa arhitekturasy näme we näme üçin zerur?
Nawigasiýa arhitekturasy (NA) önümde ulanyjyny ugrukdyrmagyň ulgamlaýyn usulydyr: nirede ýerleşýändigine, nirä gidip biljekdigine we nädip dolanyp biljekdigine düşünýär. Gowy NA:- Ulanyjynyň maksatlaryny mazmun/surat gurluşy bilen baglanyşdyrýar.
- Öňünden aýdyp boljak nagyşlaryň hasabyna aň-düşünjäni peseldýär.
- Netijäniň gazanylmagyny çaltlaşdyrýar (az basmak/bökmek).
- Önüm ulalanda ulalýar.
Ýörelgeler: yzygiderlilik> döredijilik, aç-açan görkezmeler> gizlin yşaratlar, esasy maksada çenli 3-4 hereketden gysga ýol.
2) Nawigasiýa gatlaklary (IA derejeleri)
1. Global dereje - önüm bölümleri (mysal üçin: Lobbi, Live, Paýnamalar, Gapjyk, Profil).
2. Bölüm/kategoriýa - kiçi bölümler we esasy funksiýalar (kataloglar, hasabatlar, sazlamalar).
3. Sahypa/görnüş - anyk zatlar (oýun, hasabat, görnüş).
4. Lokal/kontekst - tablar, labyrlar, "has köp görkezmek", paginasiýa.
5. Taryh we gaýdyp gelmek - çörek bölekleri, "soňkusyna".
Düzgün: Her derejede aç-açan "Men nirede?" (işjeň nokat, H1/bölek) we "indiki näme?" (STA/salgylanmalar/teklipler).
3) Nawigasiýa modelleri we olary haçan saýlamaly
Ýokarky menýu (top-nav): 5-7 ýokary derejeli bölüm. Sarp ediş interfeýsleri we mobaýl üçin gowy (aşaky tablara öwrülýär).
Aşaky tagtalar (mobile): 5 nokada çenli, kesgitlenildi, nyşan + bellik. Esasy hereketler hemişe baş barmagyň aşagynda.
Çep saýdbar: çuňlugy 2-3 dereje, önümlerde we adminkalarda işleýär. Ýygy-ýygydan nokatlar üçin çökmek/pinler.
Mega menýu: uly kataloglar (dükanlar, mazmun howuzlary). Mowzuklar boýunça toparlaýar, maslahatlary we çalt baglanyşyklary goşýar.
Çörek bölekleri: çuňňur ýollar we SEO mazmuny üçin; H1 we top-nawigasiýa çalyşmaýar.
Kontekst nawigasiýasy: tablar, çip-süzgüçler, "related", longridlerde mazmuny (TOC).
Topar palitrasy/Global search ( K): tebigat atlaryna we hereketlerine görä çalt geçişler.
Gysga we yşaratlar: power-users (gyzgyn düwmeler, swipler) - ýöne hemişe UI-ekwiwalenti bilen.
Saýlamak: bölümleriň sanyna, çuňlugyna, ulanylyş ýygylygyna we enjamlara baglydyr.
4) Marşrut we URL strategiýasy
Okalýan URL: '/games/slot/[ slug] ', '/reports/ngr? period=Q3`.
Durnuklylyk: redaktirlemezden URL-ni üýtgetmäň; ters laýyklygy saklaň.
Ýagdaý parametrleri bolan ugurlar: süzgüçler/sortlar - query; ID - ýolda.
Görnüşi saklamak: "Baglanyşygy häzirki süzgüçden/labyrdan göçürmek".
Çuňňur baglanyşyklar: toplardan/poçtadan - nyşana, ygtybarly ygtyýarnama bilen.
Awtonom we dikeldiş: Yzyna gaýtarylanda - pozisiýany/süzgüçleri dikeldiň.
5) Maglumat görkezmeleri we bellikleri
Nokadyň işjeň ýagdaýy (reňk/zolak, nyşan).
H1 we lead - sahypanyň mazmunyny aýdýarlar.
Bölümiň ýerleşişi - döwükler, seýdbardaky bellikler, tabagyň yşyklandyrylyşy.
Boş ýagdaýlar - nirä gitmelidigini görkezýär (CTA, kömege salgylanmalar).
Durnukly sözlük - ähli ýerlerde elementleriň atlary birmeňzeş.
6) Gözleg we buýruk palitrasy
Global search: tebigat indeksi (oýunlar, üpjün edijiler, hasabatlar) + çalt hereketler ("/deposit ", "/kyc").
Awtomatiki doldurmak: soňky we meşhur haýyşlar, dar maslahatlar.
Semantika: netijeleriň aýry-aýry "görnüşleri" (mazmuny, salgylanma sahypalary, sazlamalar).
Topar palitrasy ( K): atlar we hotkeýler boýunça ugrukdyryş, rus/iňlis/sinonimlere goldaw.
7) Ýagdaýlar, rollar we elýeterlilik
RBAC: diňe bar bolan bölümleri görkeziň; çal "gulplar" - tygşytly we düşündirişli.
Myhman re modeimi: çäkli menýu nokatlary, CTA hasaba alynmaga/girişe eltýär.
Tenantlyk: markalar/operatorlar boýunça giňişlikler - global selektorda bölünişik.
Hukuklaryň güýçlenmegi: KYC/2FA soň - täze ugurlar açylýar.
8) Ykjam aýratynlyklary
Aşaky nawigasiýa (≤ 5): Lobbi, Live, Paýnamalar, Gapjyk, Profil.
Sütükden ýasalan diplinkler: zerur tab/goýma/labyra eltýär; yzyna gaýtarmak - öňki ýagdaýa.
Yza yşaratlar: aýlawly karuseller (okly lok) bilen gapma-garşy bolmaýar.
Sticky elementleri: Kiçi oýunçy/häzirki oýun, "Depozit" - ýüzýän CTA.
9) Elýeterlilik we lokalizasiýa
Fokus-tertip wizual iýerarhiýa laýyk gelýär.
Menýu/bölekler/tablar üçin ARIA atributlary. Nyşanlaryň gollary hökmanydyr.
Klawiatura nawigasiýasy: oklar/Tab/Enter; görünýän hile.
RTL/diller: tory we nokatlaryň tertibini görkeziň, mikro-göçürmäni lokallaşdyryň.
Kontrast we ölçegler: WCAG AA minimal; tap-nyşanlar ≥ 44px.
10) Öndürijilik we durnuklylyk
Progressiw nawigasiýa ýüklemek: Sydbar/menýu skeletleri.
Menýuny/sözlügini kesmek: tory az çekmek, derrew nawigasiýa.
Iň ýakyn ugurlary ýüklemek: hover/fokus boýunça; akylly býudjetler.
Durnuklylyk: goşmaça ýüklenende bökmezlik (kesgitlenen ölçegler).
404/403-den gorag: dostlukly sahypalar we çalt "yzyna".
11) Telemetriýa we metrika
Wakalar:- 'nav _ click' (çeşme, nokat, pozisiýa), 'route _ change', 'search _ query/select',
- `breadcrumb_click`, `deeplink_open`, `back_used`, `not_found_view`.
- Time-to-Target (maksatly ekrana/herekete çenli).
- Nav Error Rate (404/403/dogry ýalňyşlyklar).
- Return Rate (näçeräk yzyna gaýdyp gelendigi - düşnüksiz ýoluň alamaty).
- Search Success% (2 basmak ≤ netije).
- Buýruk palitrasyny we gyzgyn düwmeleri adoption.
- Sydbar vs mega menýu; ýokarky tablar vs çip-süzgüçler; "gözleg hemişe görünýär" vs basmak.
12) iGaming üçin patternler (mysallar)
Web-kazino operatory (B2C):- Global: Lobbi/Live/Mahabat/Ýaryşlar/Gapjyk/Profil.
- Lobbiniň içinde: çip-süzgüçler (Täze, Jekpotlar, Üpjün edijiler, Buy-Bonus), gözleg.
- Bölekler - lobbide däl-de, üpjün edijileriň/makalalaryň sahypalarynda.
- Saýdbar: Daşbordlar/Mazmun/Hyzmatdaşlar/Hasabatlar/Utgaşyk/Sazlamalar.
- Bölümleriň içinde - tablar (Sanaw/Relizler/Sertifikat).
- Buýruk palitrasy: "Oýny ID boýunça açyň", "Çykyşy dörediň", "Hasabaty eksport et".
13) Antipatternler
Toparlanmazdan 20 + bal üçin menýu (wizual ses).
Bir bölümiň dürli ýerlerdäki atlary.
Gizlin möhüm nawigasiýa diňe burger menýusynda (desktop).
Tagtalary süzgüç hökmünde gaýtadan ulanmak (dürli manylar - bir görnüş).
Ýagdaýy bozýan geçişler ("yza" süzgüçleri taşlamak).
Mazmuny we CTA-ny gurşap alýan "ýelmeşýän" paneller.
14) Giriş çek-sanawy (sprintlar boýunça)
Sprint 1 - Kart: bölümleri, maksatly ýollary (top-tasks), terminleriň sözlügi.
Sprint 2 - IA: toparlanma, derejeler, modeli saýlamak (top-nav/side/mega/tabs). Prototip.
Sprint 3 - Marşrut/URL: okalýan ýollar, süzgüçleri saklamak, diplinkalar, 404/403.
Sprint 4 - Gözleg/ K: jandarlaryň görkezijisi, awtomatiki doldurma, çalt hereket etmek.
Sprint 5 - Elýeterlilik/lokal: klawiatura, ARIA, RTL, kontrast.
Sprint 6 - Telemetriýa/A-B: Time-to-Target, Search Success, back-bounces; modelleriň synagy.
Sprint 7 - Öndürijilik: Sözlük/menýu keş, goňşy ugurlar prefetch, skeletler.
15) Sözlük
IA (Information Architecture) - bölümleriň/mazmunyň logiki gurluşy.
Top-nav/Side-nav/Tabs/Mega-menu - nawigasiýa modelleri.
Breadcrumbs - çuňňur iýerarhiýa üçin "çörek bölekleri".
Çuňňur baglanyşyk - belli bir ýagdaýa/bölüme çuňňur baglanyşyk.
Command Palette - hotkey boýunça global gözleg/hereket.
Time-to-Target - maksatly ekrana/herekete ýetmek üçin wagt.
16) Jemleýji
Nawigasiýa arhitekturasy, ulanyjynyň ýoluny gysga we öňünden aýdyp boljak önümiň kartasydyr. Üstünlik berýär:1. aç-açan köp derejeli IA,
2. durnukly okalýan URL-ler we ýagdaýy saklamak,
3. birleşdirilen nawigasiýa modelleri (menýu + tab + gözleg/ K),
4. elýeterlilik we lokalizasiýa,
5. metrikler we hemişelik ýalpyldawuk üçin A/B.
Şonuň üçin interfeýs funksionallyk ýokarlananda-da düşnükli we çalt bolup galýar.