Arayüz navigasyon mimarisi

1) Navigasyon mimarisi nedir ve neden gereklidir?

• Kullanıcı hedeflerini içerik yapısı/özelliği ile ilişkilendirir.
• Öngörülebilir kalıplarla bilişsel yükü azaltır.
• Sonucu hızlandırır (daha az tıklama/atlama).
• Ürün büyüdükçe büyür.

İlkeler: tutarlılık> yaratıcılık, açık yönergeler> gizli jestler, yol anahtar hedefe 3-4 eylemden daha kısadır.

2) Gezinme katmanları (IA seviyeleri)

1. Global seviye - ürün bölümleri (örneğin: Lobi, Canlı, Promosyonlar, Cüzdan, Profil).
2. Bölüm/kategori - alt bölümler ve temel işlevler (kataloglar, raporlar, ayarlar).
3. Sayfa/görünüm - belirli varlıklar (oyun, rapor, form).
4. Yerel/bağlamsal - sekmeler, çapalar,'daha fazla göster ", sayfalama.
5. Tarih ve geri dönüş yolu - ekmek kırıntıları, geri, "sonuna kadar".

Kural: Her seviyede açık bir'ben neredeyim? "Olmalıdır (aktif madde tahsisi, H1/crumbs) ve "sırada ne var?" (CTA/referanslar/öneriler).

3) Navigasyon modelleri ve ne zaman seçileceği

Top-nav: 5-7 üst düzey bölümler. Tüketici arayüzleri ve mobil cihazlar için iyidir (daha düşük sekmelere dönüşür).
Alt sekmeler (mobil): 5 öğeye kadar, sabit, simge + etiket. Ana eylemler her zaman başparmağın altındadır.
Sol kenar çubuğu: derinlik 2-3 seviyeleri, ürünlerde ve yöneticilerde çalışır. Sık kullanılan öğeler için daraltma/pimler.
Mega menüler: büyük kataloglar (mağazalar, içerik havuzları). Konuya göre gruplar, ipuçları ve hızlı bağlantılar ekler.
Ekmek kırıntıları: derin yollar ve SEO içeriği için; H1 ve üst navigasyon değiştirmeyin.
Bağlamsal gezinme: sekmeler, çip filtreleri, "ilgili", longrides içindekiler tablosu (TOC).
Komut Paleti/Genel arama (⌘K): varlık adlarına ve eylemlerine hızlı tıklamalar.
Kısayollar ve jestler: Güç kullanıcıları (kısayol tuşları, kaydırmalar) - ancak her zaman bir UI eşdeğeri ile.

Seçim bağlıdır: bölümlerin sayısı, derinlik, kullanım sıklığı ve cihazlar.

4) URL yönlendirme ve strateji

Okunabilir URL'ler:'/games/slot/[ slug] ','/reports/ngr? Periyot = Q3 '.
Kararlılık: yönlendirmeler olmadan URL'leri değiştirmeyin; Geriye dönük uyumluluk sağlayın.
Durum parametreli yollar: filtreler/sıralama - sorguda; Kimlik yolda.
Görünümü kaydetmek için Geçerli Filtre/Bağlantı Referansını Kopyala'yı tıklatın.
Derin bağlantılar: kabartmadan/postadan - doğrudan hedefe, güvenli yetkilendirme ile.
Çevrimdışı ve kurtarma: dönüşte - konum/filtreleri geri yükleyin.

5) Bilgi yer işaretleri ve etiketleri

Öğenin etkin durumu (renk/çubuk, simge).
H1 ve kurşun - sayfanın bağlamını konuşun.
Bölüm bulucu - kırıntılar, kenar çubuğundaki işaretleyiciler, sekme vurgulaması.
Boş durumlar - nereye gideceğinizi önerin (CTA, yardım bağlantıları).
Kararlı sözlük - her yerde aynı eleman isimleri.

6) Arama ve komut paleti

Küresel arama: varlıkların endeksi (oyunlar, sağlayıcılar, raporlar) + hızlı eylemler ("/deposit ", "/kyc ").
Otomatik tamamlama: son ve popüler sorgular, dar ipuçları.
Semantik: sonuçların bireysel "türleri" (varlıklar, yardım sayfaları, ayarlar).
Komut paleti (⌘K): isimlere ve kısayol tuşlarına göre yönlendirme, Rusça/İngilizce/eşanlamlılar için destek.

7) Devletler, roller ve erişim

RBAC: Sadece kullanılabilir bölümleri göster; Gri "kilitler" - ekonomik ve bir açıklama ile.
Konuk modu: Sınırlı menü öğeleri, CTA'lar kayıt/oturum açmaya yol açar.
Kiracılık: markaya/operatöre göre alanlar - global seçicide tahsis.
Hakların tırmanması: KYC/2FA sonra - yeni yollar açık.

8) Mobil özellikler

Alt gezinme (≤5): Lobi, Canlı, Promosyonlar, Cüzdan, Profil.
Kabartmalardan Diplolinks: istenen sekme/sekme/çapa yol açar; Önceki duruma dönüş.
Geri hareketler: kaydırma karuselleri (eksenel kilit) ile çakışmaz.
Yapışkan unsurlar: Mini oyuncu/mevcut oyun, "Mevduat" - yüzen CTA.

9) Kullanılabilirlik ve yerelleştirme

Odak sırası görsel hiyerarşiye karşılık gelir.
Menüler/kırıntılar/sekmeler için ARIA nitelikleri. Simgeler için imzalar gereklidir.
Klavye gezinme: oklar/Sekme/Enter; görünür odak.
RTL/diller: ayna ızgarası ve nokta düzeni, mikro telif hakkını yerelleştirir.
Kontrast ve boyutlar: WCAG AA minimum; Hedefleri 44px ≥ vurun.

10) Performans ve istikrar

Aşamalı navigasyon yükleme: kenar çubuğu/menü için iskeletler.
Menü/sözlük önbelleğe alma: daha az sıklıkla ağı çeker, anında gezinme.
En yakın rotaların önceden yüklenmesi: hover/focus ile; makul bütçeler.
Kararlılık: yeniden yükleme sırasında atlamayın (sabit boyutlar).
404/403'ten koruma: kolay sayfalar ve hızlı "geri".

11) Telemetri ve Metrikler

• 'tav _ click' (kaynak, öğe, konum), 'route _ change', 'search _ query/select',
• 'breadcrumb _ click', 'deeplink _ open', 'back _ used','değil _ found _ view '.

• Hedef zamanı.
• Nav Hata Oranı (404/403/rights errors).
• Geri Dönüş Oranı (kaç tanesinin hemen geri döndüğü, açık olmayan bir yolun işaretidir).
• Arama Başarısı % (≤2 tıklamayla sonuçlanır).
• Benimseme komut paleti ve klavye kısayolları.

• Kenar çubuğu vs mega menü; Yukarıdan sekmeler vs çip filtreleri; "Arama her zaman görülebilir" vs tıklama ile.

12) iGaming için desenler (örnekler)

• Global olarak: Lobi/Canlı/Aksiyon/Turnuvalar/Çanta/Profil.
• Lobi içinde: çip filtreleri (Yeni, Jackpotlar, Sağlayıcılar, Satın Alma Bonusu), arama.
• Kırıntılar - lobide değil, sağlayıcıların/makalelerin sayfalarında.

• Kenar Çubuğu: Panolar/İçerik/Ortaklar/Raporlar/Uyumluluk/Ayarlar.
• Bölümlerin içinde - sekmeler (Liste/Bültenler/Sertifikasyon).
• Komut paleti: "ID'ye göre oyun aç", "Sürüm oluştur", "Raporu dışa aktar".

13) Antipatterns

Gruplama olmadan 20'den fazla öğe için menü (görsel gürültü).
Farklı yerlerde aynı bölümün farklı isimleri.
Gizli kritik gezinme yalnızca burger menüsünde (masaüstünde).
Sekmelerin filtre olarak yeniden kullanılması (farklı anlamlar - tek tür).
Durumu bozan geçişler ("geri" geldiğinde filtreleri sıfırlama).
İçerik ve CTA ile örtüşen yapışkan paneller.

14) Uygulama kontrol listesi (sprintlerle)

Sprint 1 - Harita: bölümlerin envanteri, hedef yolları (üst görevler), terimler sözlüğü.
Sprint 2 - IA: gruplama, seviyeler, model seçimi (top-nav/side/mega/tabs). Prototip.
Sprint 3 - Yönlendirme/URL: okunabilir yollar, filtreleri kaydetme, diplinks, 404/403.
Sprint 4 - Poisk/⌘K: varlık endeksi, otomatik tamamlama, hızlı eylemler.
Sprint 5 - Erişilebilirlik/Yerel: Klavye, ARIA, RTL, Kontrast.
Sprint 6 - Telemetri/A-B: Hedefe Ulaşma Süresi, Arama Başarısı, geri sıçramalar; test modelleri.
Sprint 7 - Performans: sözlük/menü önbelleği, bitişik rotaların önbelleği, iskeletler.

15) Sözlük

IA (Bilgi Mimarisi) - bölümlerin/içeriğin mantıksal yapısı.
Top-nav/Side-nav/Tabs/Mega-menu - navigasyon modelleri.
Breadcrumbs - derin bir hiyerarşi için "breadcrumbs".
Derin bağlantı - belirli bir duruma/bölüme derin bağlantı.
Command Palette - kısayol tuşu ile genel arama/eylem.
Hedefe Ulaşma Süresi - hedef ekrana/eyleme ulaşma zamanı.

16) Alt satır

1. açık katmanlı IA,

2. Kararlı okunabilir URL'ler ve kalıcılık,

3. Kombine navigasyon modelleri (menü + sekmeler + poisk/⌘K),

4. kullanılabilirlik ve yerelleştirme,

5. Sürekli taşlama için metrikler ve A/B.

Böylece arayüz, işlevsellik arttıkça bile net ve hızlı kalır.