Օգտագործողի ինտերֆեյսի կերպարը

1) Սկզբունքներ

1. Սկզբում օգուտ, հետո «մոգություն»։ Ցանկացած փոփոխություն պետք է նվազեցնի նպատակին հասնելու ճանապարհը (դրույքաչափը/դրույքաչափը/խաղ/կարգավորում), և ոչ թե պարզապես «զարմացնել»։

2. Թափանցիկություն և վերահսկողություն։ Օգտագործողը տեսնում է, որ անհատականացված է, և հեշտությամբ կառավարում է դա։ Կա խելացի կերպարի մառախուղ։

3. Փափուկ հարմարեցում։ Առաջարկեք, ոչ թե պարտադրեք 'ատելի առաջարկություններ, ձեռքերի ընտրության պահպանում։

4. Անվտանգությունը և գաղտնիությունը։ Նվազագույն տվյալները, միայն ազդանշաններ, հասկանալի պահեստային քաղաքականություններ։

5. A/B ենթադրությունների փոխարեն։ Յուրաքանչյուր վարկած անցնում է փորձարկումը և ռեգրեսիայի վերահսկումը։

2) Կերպարների ոլորտները

Միգրացիան 'բաժինների կարգը, արագ պիտակները, վերջին այցելած էկրանները։

Լեյաուտը և խտությունը 'քարտերի չափը, գաղութների քանակը, «խիտ» ռեժիմը ռուսական-users-ի համար։

Բովանդակություն 'չարտոնված խաղեր/շուկաներ, շահերի թեգեր, ընտրված պրովայդերներ։

Պրոմո և բաններ 'ռելեվանտային ակցիաներ, ռելիզներ, բոնուսներ (հաճախականության վերահսկմամբ)։

Որոնումը և ֆիլտրերը 'ինքնաբերությունը, հաշվի առնելով պատմությունը, պահպանված ճնշումները։

Ծանուցումներ ՝ խելացի diges.ru ընդդեմ «փոթորկի», գիշերը լռությունը, տիպերի կարևորությունը։

Թեման/հակադրություն/տառատեսակներ 'տեսողական նախընտրությունների հիշողություն։

Տիրույթի իրականացումը 'գործակիցները (տասանորդ/կոտորակային/ամերիկյան), ցուցադրման արժույթը, լեզուն։

3) Կերպարների մոդելներ

3. 1 Ձեռքը (medicit)

«Նախապատվություն» վահանակը, օգտագործողը ինքն է ներառում/անջատում է տեսիլքները, կարգավորում է կարգը, ստեղծում է գործակիցների/արժույթի/թեմայի ձևաչափը։

3. 2 Համատեքստային հարմարեցում (wwww.ext-a.ru)

Այն հիմնված է սարքի վրա, օրվա ժամանակը, ցանցը 'գիշերը, լռելյայն մութ թեման, թույլ միացումը պարզեցված լրատվամիջոցներն են, բջջային կարուսելները ՝ կրճատված կարուսելները։

3. 3 Վարքագծային հատվածներ (behavioral)

Կլաստերներ «սլոտ խաղացողը», «սպորտաձևերը», «խաղի», «նորեկ»։ Դրանք ազդում են բաժինների, առաջարկությունների և խորհուրդների ընթացքի վրա։ Միշտ թողեք ուղին դեպի «դեֆոլտ»։

4) Ճարտարապետություն ՝ ազդանշաններ www.UI լուծումների համար

Ազդանշաններ ՝ իրադարձություններ (դիտումներ/կլիկաներ/տոկոսադրույքներ), պարամետրեր (ժամացույցի գոտի, սարք), սահմանափակումներ (սահմաններ/միգրացիա)։

Կանոնների/մոդելների շերտը 'ֆիչեֆլագներ, սեկտոր, խորհրդատվական ծառայություն։

UI-ռենդերը 'բաղադրիչը վերցնում է սեմանտիկ հոսանքները և դելիգները (առանց ML տրամաբանության ներսում)։

Տեղական պրոֆիլները 'նախընտրությունների մի մասը պահպանվում է կլիենտում (օրինակ, վիջեթների կարգը) հաշիվների համաժամացման հետ։

5) Օգտագործողի վերահսկումը և թափանցիկությունը

Նիշալիզացիան նշված է «Խելացի տեղադրում» բայգով 'tooltip «Մենք փոխում ենք բլոկների կարգը ձեր գործողությունների հիմքում»։

Տե՛ ս ՝ համը/կերպարիզացիան, «Ուղղել առաջարկությունները», «Ցույց տալ ստանդարտ հիմնական»։

Փոփոխությունների պատմությունը (միկրո-լոգ) ․ «Ավելացված բլոկը «Ընտրված», այսինքն ՝ դուք հաճախ բացում եք...»

6) Փոխազդեցություն և փամփուշտներ

Vizhets (wwww.ag-n-drop) + կոճակը «Վերադարձնել ինչպես եղավ»։

Թաքցնել/ցույց տալ բլոկը քարտի ընտրացանկից։

Պահպանված ֆիլտրերը/ցանցերը որոնման/փաթեթներում։

Ինքնաձիգը հաշվի է առնում վերջին որոնումները և տեղադրված լիգաները/խաղերը։

«Շարունակել տեղից» 'վերջին կտրոնը/խաղը/մրցույթը առաջին էկրանն է։

«Ձեզ համար» հատվածը առաջինը չէ և պարտադրված չէ։ միշտ կա «Ցույց տալ ամեն ինչ» և «Չցուցադրել դա»։

7) iGaming հատկությունները

Պատասխանատու խաղը 'անձնական հիշեցումներ սահմանների և թայմ-աուտների մասին, ավելի գերակա է։ Ոչ մի ճնշում խաղացողների վրա ակտիվ սահմանափակումներով։

Գործակիցները և շուկաները 'ցույց տվեք ձեր սիրելի լիգաները և շուկաները առաջինը. անկեղծորեն նշեք «վերջերս փոփոխված գործակիցը»։

Խաղերի առաջարկությունները 'բազմազանություն պրովայդերների/գործընկերների, մեկ պրովայդերի կրկնօրինակների սահմանափակում։ "Դուք խաղացել եք դա 3-ը", փորձեք նույնը "։

Գանձապահը 'պահեստային/ելքային մեթոդի հիշողությունը, ցուցադրման արժույթը։ ETA-ն և ռուսական revant երկիրը։

Օրվա ժամանակը 'գիշերը' ավելի շատ ծանուցումներ և փափուկ շեշտադրումներ։

8) Հասանելիությունը և տեղայնացումը

Բոլոր անհատականացված բլոկները ունեն կենտրոնացված հենդլա, «aria-grabbed» -ի համար ag-n-drop-ի համար։

Մի ապավինեք գույնին որպես միակ ցուցիչ «ձեզ համար», ավելացրեք տեքստային նշանը։

Կոդավորման/հուշումների տեղայնացումը; Թվային բյուջեներն ու արժույթները 'լոկալներով։

RTL ռեժիմը 'հայելու կարգը, www.ag ուղղությունները ճիշտ են։

9) Պերֆորանսը և կայունությունը

Դելիգները և առաջարկությունները 'TTL-ի (օրինակ 15-30 րոպե) և ռուսական ռեմենտալ նորարարությունները։

«Հերոսների» հիդրատացիան (առաջին էկրանը) առանց մնացած UI-ի արգելափակման։

Խորհրդատվական ծառայության անկումը բացատրում է UI-ի անկումը 'դեֆոլտ ցուցակները։

Մենք սահմանափակում ենք բլոկների «խմորումը» 'փոխակերպումները ոչ ավելի, քան N/նստաշրջանները։

10) Գաղտնիությունը և կոմպլենսը

Ստացեք ակնհայտ համաձայնություն մարքեթինգի կերպարների համար։

Պահեք միայն անհրաժեշտ ազդանշաններ, որոնք ունեն մեքենայական գործիքներ։

Եկեք պարզ էքսպորտը/նվազեցնենք ռուսական նախընտրությունները։

Մի օգտագործեք զգայուն կատեգորիաներ թարթեգինգի համար։ հետևեք տեղական պահանջներին։

11) Մետրիկի

Task Success/Time-to-Action: Արդյո՞ ք օգտագործողը հասնում է նպատակին։

CTR անձնական բլոկները vs վերահսկում են։

Retention/Session depth-ը ներառում է կերպարներ։

Dismiss/Hide ride vijetes («դա հետաքրքիր չէ»)։

Suprate-ը խառնաշփոթ է ("Ինչու՞ եք ցույց տալիս դա։ ”).

Regret rate (արձագանքները անձնական առաջարկությունից հետո)։

12) Anti-patterna

Թաքցնել ռոտացիան «անձնական վիտրինի» համար։

Տարրերի «հեռուստացույցը» օգտագործողի առջև առանց համաձայնության։

Ագրեսիվ հաճախականության ցուցադրումը պրոմո է կերպարների տակ։

Հերոսացումը կրիտիկական հոսքերում առանց թափանցիկության (տոմսա, KYC)։

Յուրաքանչյուր մուտքի անկանխատեսելի փոփոխություններ։

«Ամրոցները» ձեռքերի վրա ալգորիթմի համար։

13) Տոկենները և դիզայնի համակարգի դելիգները (օրինակ)

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) Սնիպետներ

Ֆիչեֆլագ + սեգմենտը (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}/>;
}

Drag-n-drop reorder (պարզեցված)

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());

Կերպարի վերահսկումը

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) Դատարկ/սխալներ/վիճակ

Կերպարների համար տվյալներ չկան 'ցույց տալ միտումները/նորությունները, բացատրել «Մենք դեռ սովորում ենք ձեր հասցեներում»։

Պատահականության սխալը 'fallback բլոկներ; «Ցույց ենք տալիս հանրաճանաչ»։

Չափազանց նեղ պրոֆիլ 'մեծացնել բազմազանությունը (պրովայդերներ/կատեգորիաներ)։

16) QA-chek-թերթ

Թափանցիկություն

• Բեյջը «Խելացի կարգավորում» և հասկանալի tooltip։
• Թումբլերը համ/կերպարի արտանետումը; «Նետել առաջարկությունները»։

UX

• Անջատումը/բլոկների թաքցնելը հասանելի է ստեղնաշարից։
• Անձնական բլոկները չեն արգելափակում կրիտիկական բովանդակությունը։
• Պրոմո հաճախությունը սահմանափակ է. «Չի հետաքրքրում»։

A1u/Տեղայնացում

• «aria» -ի համար 'ag-n-drop, ճիշտ ընթացակարգ։
• Տեքստերը/105/արժույթը տեղայնացված են; RTL-ն ճիշտ է։

Պերֆորանսը/Lenta.ru

• UI-ն աշխատում է նվազման ժամանակ (fallback)։
• Նստաշրջանում բլոկների «դողացող» չկա։
• Ջորջները քաշում են; TTL-ը և becoff rexonnekt-ը պահպանված են։

Complaens

• Համաձայն մարքեթինգային կերպարին։
• Ազդանշանների պահպանման ժամանակը և ինտեգրման/էքսպորտի մեխանիզմը։

17) Մոսկվա դիզայնի համակարգում

Компоненты: `PersonalizedHome`, `ForYouRail`, `WidgetContainer`, `ReorderHandle`, `PrefsPanel`.

Tokens/wings: Հաճախականության սահմանափակումներ, TTL, «fixed» բլոկների նշաններ, diversity կանոնները։

Դելդներ ՝ «Երբ անհատականացնել», «Ինչպես ցույց տալ վերահսկողությունը», «Fallback վարքագիծը»։

Do/Don 't: Թաքնված ռոտացիա, ագրեսիվ բանկերներ, հաճախակի փոխարկումներ նստաշրջանի ընթացքում։

Live ռեզյումե

Կերպարիզացիան աշխատում է, երբ այն թափանցիկ է, և իսկապես նվազեցնում է նպատակին հասնելու ճանապարհը։ Թույլ տվեք օգտագործողին վերահսկել, հենվել ազդանշանների վրա, պահել ML/կանոնները բաղադրիչներից դուրս և միշտ ունենալ անվտանգ դեֆոլտ։ IGaming-ում դա մեծացնում է վստահությունն ու ներգրավվածությունը 'ավելի արագ գտնել "սեփական շուկաներ և խաղեր, տեսնել ռելեվանտային լիմիտներ և հուշումներ' առանց պարտադրողականության և անակնկալների։