Kullanıcı Arayüzünü Kişiselleştirme

1) İlkeler

1. Önce fayda, sonra "sihir. Herhangi bir değişiklik, sadece "sürpriz'değil, hedefe giden yolu (bahis/para yatırma/oyun/kurulum) kısaltmalıdır

2. Şeffaflık ve kontrol. Kullanıcı neyin kişiselleştirilmiş olduğunu görür ve kolayca kontrol eder. Bir "akıllı kişiselleştirme" geçiş anahtarı var.
3. Yumuşak adaptasyon. Önerin, empoze etmeyin: göze batmayan öneriler, manuel seçimler tutmak.
4. Güvenlik ve gizlilik. Minimum veri, yalnızca tutarlı sinyaller, anlaşılabilir depolama politikaları.
5. Tahmin yerine A/B. Her hipotez bir deney ve regresyon kontrolünden geçer.

2) Kişiselleştirme alanları

Gezinme: bölüm sırası, hızlı kısayollar, yakın zamanda ziyaret edilen ekranlar.
Leyout ve yoğunluk: kart boyutu, hoparlör sayısı, güç kullanıcıları için "yoğun" mod.
İçerik: önerilen oyunlar/pazarlar, ilgi etiketleri, özellikli sağlayıcılar.
Promosyonlar ve afişler: ilgili promosyonlar, turnuvalar, bonuslar (frekans kontrolü ile).
Arama ve filtreler: geçmiş otomatik tamamlama, kaydedilmiş hazır ayarlar.
Bildirimler: "Fırtına'ya karşı akıllı sindirimler, geceleri sessizlik, türe göre önem.
Tema/kontrast/yazı tipleri: görsel tercihleri hatırlama.
Alan biçimleri: katsayılar (ondalık/kesirli/Amerikan), görüntüleme para birimi, dil.

3) Kişiselleştirme modelleri

3. 1 Manuel ayarlar (açık)

Panel "Tercihler": kullanıcının kendisi widget'ları açar/kapatır, sırayı ayarlar, katsayıların/para biriminin/temanın biçimini ayarlar.

3. 2 Bağlam farkındalığı

Cihaza, günün saatine, ağa güvenir: geceleri - varsayılan olarak karanlık bir tema, zayıf bir bağlantıda - basitleştirilmiş medya, mobil - kısaltılmış karusellerde.

3. 3 Davranışsal segmentler

Kümeler "slot oyuncusu", "spor bahisleri", "canlı oyunlar", "başlangıç. "Bölüm sırasını, önerileri ve ipuçlarını etkiler. Her zaman yolu "varsayılan'olarak bırakın.

4) Mimari: sinyaller - çözümler - UI

Sinyaller: olaylar (görünümler/tıklamalar/bahisler), profil ayarları, bağlam (saat dilimi, cihaz), kısıtlamalar (sınırlar/yargı yetkisi).
Kurallar/modeller katmanı: phicheflags, segmenter, öneri hizmeti.
UI oluşturucu: bileşen semantik belirteçleri ve yapılandırmaları kabul eder (içinde ML mantığı olmadan).
Yerel profiller: Tercihlerin bazıları, hesaba senkronizasyon ile istemcide (örneğin, widget'ların sırası) saklanır.

5) Kullanıcı kontrolü ve şeffaflık

Kişiselleştirme, "Eylemlerinize göre blokların sırasını değiştirme" araç ipucuyla "Akıllı Kurulum" rozetiyle işaretlenir.
Ayarlar: Açık/kapalı kişiselleştirme, "Önerileri sıfırla", "Standart evi göster".
Değişikliklerin geçmişi (mikro-log): "Sık sık açtığınız için "Sık Kullanılanlar" bloğu eklendi"....

6) Etkileşimler ve desenler

Sürükle-n-bırak widget'ları + Olduğu Gibi Dön düğmesi.
Kart menüsünden bloğu gizle/göster.
Arama/dizinlere kaydedilmiş filtreler/kümeler.
Otomatik tamamlama, en son aramaları ve sabit ligleri/oyunları dikkate alır.
"Noktadan devam et": son kupon/oyun/turnuva - ilk ekran.
"Sizin için" bölümü ne ilk ne de müdahalecidir; Her zaman her şeyi göster ve gösterme vardır.

7) iGaming'in özellikleri

Sorumlu oyun: sınırların ve zaman aşımlarının kişisel hatırlatıcıları - öncelikli promosyon. Aktif kısıtlamaları olan oyuncular üzerinde baskı yok.
Oranlar ve Pazarlar: Önce favori liglerinizi ve pazarlarınızı gösterin; Dürüstçe "yakın zamanda değiştirilmiş katsayıyı" belirtir.
Oyun önerileri: sağlayıcıya/konuya göre çeşitlilik, bir sağlayıcının tekrarlarını sınırlamak; "Bunu 3 × oynadın - benzer bir şey dene".
Nakit: Seçilen mevduat/çıktı yöntemini ezberlemek, para birimini görüntülemek; ETA ve komisyonlar ülkeyle ilgilidir.
Günün saati: geceleri - daha sessiz bildirimler ve yumuşak vurgular.

8) Kullanılabilirlik ve yerelleştirme

Tüm kişiselleştirilmiş bloklar, drag-n-drop için 'aria-grapped' odaklı kulplara sahiptir.
Tek "sizin için" göstergesi olarak renge güvenmeyin - bir metin etiketi ekleyin.
Anahtarların/istemlerin yerelleştirilmesi; Sayısal formatlar ve para birimleri - yerel ayarlara göre.
RTL modu: sıra yansıtılır, sürükleme yönleri doğrudur.

9) Performans ve sürdürülebilirlik

Yapılandırmalar ve öneriler - istemciyi TTL (örneğin, 15-30 dakika) ve artımlı güncellemelerle önbelleğe alın.
UI geri kalanını engellemeden "kahramanlar" (ilk ekran) hidrasyon.
Öneri hizmetinin düşmesi ≠ kullanıcı arayüzünün düşmesi: varsayılan listeleri gösteriyoruz.
Blokların "jitter'ini sınırlıyoruz: permütasyonlar N saat/oturumdan daha sık değil.

10) Gizlilik ve uyumluluk

Pazarlamayı kişiselleştirmek için açık onay alın.
Son teslim tarihlerini otomatik olarak silerek yalnızca gerekli sinyalleri depolayın.
Tercih profilini dışa aktaralım/sıfırlayalım.
Hedefleme için hassas kategoriler kullanmayın; Yerel gereksinimlere uyun.

11) Metrikler

Görev Başarısı/Eylem Zamanı: Kullanıcı hedefe daha hızlı ulaşıyor mu?
Kişisel birimlerin CTR vs kontrol.
Kişiselleştirmeyi etkinleştirenler için Tutma/Oturum derinliği.
Dismit/Hide oranı widget'ları ('bu ilginç değil ").
Karışıklık ile destek oranı ("neden bunu gösteriyorsunuz? ”).
Pişmanlık oranı.

12) Anti-desenler

"Kişisel bir vitrin" uğruna navigasyonu gizleyin.
Kullanıcının önündeki öğelerin rızası olmadan "ışınlanması".
Kişiselleştirme kisvesi altında promosyonun agresif frekans gösterimi.
Şeffaflık olmadan kritik akışlarda kişiselleştirme (cash desk, KYC).
Her oturum açtığınızda öngörülemeyen değişiklikler.
Algoritma uğruna manuel ayarlar için "Kilitler".

13) Tasarım sistemi belirteçleri ve yapılandırmaları (örnek)

json
{
"personalization": {
"enabledDefault": true,
"showBadge": true,
"maxReorderPerWeek": 2,
"widgetVariants": ["default","compact","dense"],
"cooldownHours": 24
},
"recommendations": {
"fallback": "trending",
"diversity": { "provider": true, "category": true },
"ttlMinutes": 30
},
"notifications": {
"digestHour": 9,
"quietHours": [22, 8]
}
}

14) Snippet'lar

Ficheflag + Segment (React)

tsx type Segment = 'slots'    'sports'    'live'    'newbie';
type Flags = { personalizeHome:boolean };

function useSegments (): Segment [] {/return from profile/dimensions/return ['sports', 'live'];}
function useFlags(): Flags { return { personalizeHome: true }; }

function Home() {
const segs = useSegments();
const { personalizeHome } = useFlags();
const blocks = [
{id: 'continue', title: 'Continue', fixed: true},
{id: 'sportsTop', title: 'Top Events', seg: 'sports'},
{id: 'slotsRec', title: 'Recommended slots', seg: 'slots'},
{id: 'liveRooms', title: 'Live rooms', seg: 'live'}
];
const ordered = personalizeHome
? [...blocks. filter(b=>b. fixed),...blocks. filter(b=>!b.fixed). sort((a,b)=> Number((segs. includes(b. seg as Segment)))-(segs. includes(a. seg as Segment)))]
: blocks;
return <Main blocks={ordered}/>;
}

Sürükle-n-bırak yeniden sıralama (basitleştirilmiş)

js const list = document. querySelector('[data-widgets]');
let dragId = null;
list. addEventListener('dragstart', e => dragId = e. target. id);
list. addEventListener('drop', e => {
e. preventDefault();
const to = e. target. closest('[draggable]'). id;
if (dragId & & to & dragId! = = to) reorderWidgets (dragId, to) ;//save in profile
});
list. addEventListener('dragover', e => e. preventDefault());

Kişiselleştirme kontrolü

html
<label>
<input type="checkbox" id="pToggle" checked>
Smart personalization
</label>
<button id = "reset "> Reset recommendations </button>
<script>
pToggle. onchange = () => setPersonalization(pToggle. checked);
reset. onclick = () => resetRecommendations () ;//clear profile/cache
</script>

15) Boş/hatalar/durumlar

Kişiselleştirme için veri yok: eğilimleri/yenilikleri gösterin, "Hala eylemlerinizden öğreniyoruz" deyin.
Öneri hizmeti hatası: geri dönüş blokları; Tost "Popüler gösteriliyor".
Çok dar profil: çeşitliliği artırın (sağlayıcılar/kategoriler).

16) KG kontrol listesi

Saydamlık

• Akıllı Kurulum Rozeti ve açık araç ipucu.
• Kişiselleştirme geçişi açma/kapama; "Önerileri sıfırla".

UX

• Blokları sürüklemek/gizlemek klavyeden kullanılabilir.
• Kişisel bloklar kritik içerikle örtüşmez.
• Promosyon frekansı sınırlıdır; "İlgilenmiyorum'diye bir şey var.

А11у/Localization

• sürükle-n-bırak için 'arya', sekme sırasını düzelt.
• Yerelleştirilmiş metinler/formatlar/para birimleri; RTL doğrudur.

Performans/Güvenilirlik

• UI öneriler düştüğünde çalışır (geri dönüş).
• Bir oturum içindeki bloklar sırasında titreme yoktur.
• Yapılandırmalar önbelleğe alınır; TTL ve reconnect backoff ile karşılaşılır.

Uyumluluk

• Pazarlama kişiselleştirmesine onay.
• Sinyal tutma ve silme/verme mekanizması.

17) Tasarım sistemindeki belgeler

Компоненты: 'PersonalizedHome', 'ForYouRail', 'WidgetContainer', 'ReorderHandle', 'PrefsPanel'.
Belirteçler/yapılandırmalar: frekans limitleri, TTL, "sabit" blokların işaretleri, çeşitlilik kuralları.
Kılavuzlar: "Ne zaman kişiselleştirilir", "Kontrol nasıl gösterilir", "Geri dönüş davranışı".
Yapma/Yapma: gizli gezinme, agresif afişler, oturum sırasında sık permütasyonlar.

Kısa Özet

Kişiselleştirme, şeffaf, geri dönüşümlü olduğunda çalışır ve hedefe giden yolu gerçekten keser. Kullanıcı kontrolünü sağlayın, tutarlı sinyallere güvenin, ML/kuralları bileşenlerden uzak tutun ve her zaman güvenli bir varsayılan ayarlayın. Bu, iGaming'de güven ve katılımı artırır: "pazarlarınızı've oyunlarınızı daha hızlı bulun, ilgili sınırları ve ipuçlarını görün - saplantı ve sürprizler olmadan.