Ինտերֆեյսի հուշումներ և հելպերներ

1) Ինչո՞ ւ են դրանք անհրաժեշտ

Հուշումները և հելպերները նվազեցնում են ճանաչողական բեռը և սխալների արագությունը, եթե

հայտնվում են համատեքստում, երբ դրանք իսկապես անհրաժեշտ են,

կարճ և կոնկրետ, առանց մարքեթինգի,

չեն արգելափակում հիմնական սցենարը և հարգում են հասանելիությունը։

2) Գործիքների քարտեզը և երբ դրանք կիրառվեն

Կանոն 'կրիտիկական բովանդակությունը տեսողական դաշտում և ինտերֆեյսի տեքստում, ոչ միայն։

3) Տեղաբաշխման և ձգման պատրանքները

Մինչ գործողությունը 'helper no/inme-hint («Գաղտնաբառ 368 նիշ»)։

Գործողության պահին 'tooltip/coachmark ֆոկուսով/hover/long-press։

Գործողությունից հետո 'tost/banner, որը բացատրում է արդյունքը և հղում է «Ավելին»։

Մտադրությամբ 'ցուցադրություն' "," i "," Ավելին "," Ctrl +/" (comand palette)։

4) Կոպիրաիտինգը

Մի միտք մի առաջարկ է։ Սկսեք բայից («Ընտրեք»..., «Լցրեք»...)։

Առանց մեղքի. <<Ֆիլտրը բացառեց բոլոր գրառումները։ Գցե՞ լ ֆիլտրը"։

Թվերը և փաստերը գնահատականների փոխարեն. <<Հանձնաժողովը 1։ 5–2%».

Կարևոր է 'մի խոստացեք ճշգրիտ ժամանակը, եթե այն երաշխավորված չէ։

5) Հասանելիություն (A11y)

Tooltip: 'role = «tooltip», կապը' aria-describedby-ի հետ։ հասանելի է ստեղնաշարով։

Ինֆորմ բլոկները ՝ "role =" status "" (polite), սխալները '"role =" alment "։

Coachmark/Tour: Ֆոկուսը կարգադրությամբ, «Esc» -ը փակում է, մեջբերում է կիզակետը աղբյուրին։

Տեքստի հակադրություն AA; ասացվածքը միակ իմաստը չէ։

Exctooltip։

html
<button id="kpi" aria-describedby="kpi-tip">RTP</button>
<div id = "kpi-tip" role = "tooltip" hidden> Return to Player - the share of bets returned to players in the long term. </div>
<script>
const b = document. getElementById('kpi'), t = document. getElementById('kpi-tip');
b. addEventListener('focus', ()=>t. hidden=false); b. addEventListener('blur', ()=>t. hidden=true);
b. addEventListener('mouseenter', ()=>t. hidden=false); b. addEventListener('mouseleave', ()=>t. hidden=true);
</script>

6) Ապաստարանների և հիգիենայի կառավարումը

Դեդուպլիկացիա 'նույն հաղորդագրությունը չցուցադրել ավելի հաճախ N-ը մեկ անգամ։

Հաճախականության վերահսկումը 'cool-down 24 ժամ coachmark/tour; Օգտագործողը ունի «Մի հիշեցրեք»։

Գործիքները չեն մրցակցում 'չբացեք tooltip-ը coachmark-ի վերևում և հակառակը։

Առաջընթացի հիշողությունը 'շրջագայության ավարտված քայլերը այլևս չեն առաջարկվում։

7) Հելպեր տեքստերը ձևերի համար

Գրեք «ինչպես անցնել» կանոն, ոչ թե «ինչ եք արել սխալ»։

Ձևաչափի օրինակը մոտակայքում '"DD. MM. YYYY`, `user@domain. tld`.

Բարդ դաշտերի համար '«Օրինակ» կոճակը (բացում է փոքրիկ սնունդ/դիմակ)։

Վալիդացիան և հելպերը չեն հակամարտվում, երբ helper-ը սխալմամբ վերածվում է հակիրճ «ինչպես շտկել»։

html
<label for="iban">IBAN</label>
<input id="iban" aria-describedby="iban-help">
<small id = "iban-help "> Format: 22-34 characters, Latin letters and numbers only. </small>

8) Թիմային պալիտրա և գործողությունների որոնում

Տրիգեր ՝ "Ctrl +/"," Ctrl + K "կամ կոճակը"։

Պալիտրայում 'իկոնիկների և տաք խառնուրդների հետ գործողություններ ("Կատարել դրույքաչափը... — ⏎»).

Սթեյթ մեքենան 'գործողության ընտրության ժամանակ ակնթարթային ռոտացիա/կատարումը, «Վերացումը»' «Esc»։

9) AI-helper/կոպիլոտ

Արտահայտությունները ձևի/տերմինների միջոցով ("Ի՞ նչ է վեյջերը։ "), պլանավորվում է դաշտերի լրացում, որոնք ունեն փոփոխությունների ցուցակով մինչև կիրառումը։

Զգայուն պարամետրերի համար (108/դրույքաչափը) միայն բացատրություններ և ստուգման թերթեր, լուծումը մնում է օգտագործողի համար։

Սովորեք սեփական փաստաթղթերի վրա/FAQ; հարցեր տվեք ստատիկայի բարելավման համար։

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

Կանոնները և լիմիթները 'նկատելի հելպերներ, որոնք գտնվում են «Քայլ անել», «Քեշաութ» կոճակների կողքին, «Տեղադրել սահմանը»։ Պարզ լեզու և օրինակներ։

KYC/AML: Հիբրիդային հուշումներ (փաստաթղթեր, ստուգման ժամկետներ, թե ինչ կլինի հետո)։

Քարթրիջները '«Ինչպե՞ ս են հաշվարկվում ակնոցները» (tooltip/inter-hint), հղում «Կանոնները»։

Վճարումները 'helper կոմիսարների/ժամկետների մասին և «Ինչու՞ պետք է հավատալ»։

Պատասխանատու խաղը 'ատելություն, բայց տեսանելի «International Limit» (AAA հակադրություն, առանց չափման)։

11) Պերֆորանսը և դիրքը

Թեթև անիմացիաները 'opacity/transform' 38180 ms, out ավելի արագ։

Դիրքը աղբյուրի, 4-8 px-ի, avto-flip-ի վրա։

Մի ստեղծեք DFC-ծառը հարյուրավոր հուշերից, ծույլ տեղադրեք կիզակետով/hover։

Հաշվի առեք 'wwww.fers-reduced-motion': ստատիկ հուշումներ shimer-ի փոխարեն։

12) Մետրիկի և փորձարկումների

CTR-ը հուշում է (ռուսական տեսահոլովակների ցուցադրություններ STA/« Ավելին »)։

Սխալների/ձախողումների նվազումը հելպերների հետ vs վերահսկողությունը։

Ժամանակը մինչև առաջին հաջողությունը empty/tour-ից հետո։

(բացասական ազդանշանը վերաշարադրենք տեքստը/ցուցադրման պահը)։

Հայտնի հարցումների լոգները ռուսական պալիտրա/AI-helper-ում։

13) Դիզայնի համակարգերը (օրինակ)

json
{
"help": {
"maxWidth": 320,
"gap": 8,
"radius": 10,
"elev": 8,
"iconSize": 16,
"enterMs": 180,
"exitMs": 120,
"cooldownHours": 24
},
"tour": { "maxSteps": 5, "backdropOpacity": 0. 5, "escCloses": true },
"palette": { "hotkey": "Ctrl+K", "rowHeight": 40 },
"a11y": { "contrastAA": true, "useAriaLive": true }
}

CSS ճնշումները

css
.helper { display:flex; gap:8px; align-items:flex-start; max-width:320px; }
.helper__icon { width:16px; height:16px; opacity:.8; }
.tooltip { position:absolute; padding:8px 10px; border-radius:10px; box-shadow:var(--elev-2); }
.tooltip[data-show="true"] { animation: fadeIn. 18s cubic-bezier(.2,0,.2,1); }
@keyframes fadeIn { from { opacity:0; transform: translateY(4px) } to { opacity:1; transform:none } }

14) Lenta.coachmark և «մի հիշեցրեք»

html
<div id="cm1" class="coachmark" role="dialog" aria-labelledby="cm1-title" hidden>
<h3 id = "cm1-title "> New Fast Cashout </h3>
<p> Check out with one button directly from the coupon. </p>
<div class="row">
<button id = "cm1-ok "> Clear </button>
<button id = "cm1-skip"> Don't remind me </button>
</div>
</div>
<script>
const seen = localStorage. getItem('cm1-skip')==='1';
if(!seen) document. getElementById('cm1'). hidden=false;
document. getElementById('cm1-skip'). onclick=()=>{ localStorage. setItem('cm1-skip','1'); cm1. hidden=true; };
document. getElementById('cm1-ok'). onclick=()=> cm1. hidden=true;
</script>

15) Anti-patterna

CTA-ն փակող կամ փակող ֆոկուսը։

Քննադատական տեղեկատվությունը միայն tooltip/hover-ում։

Թուրը 10 + քայլով առանց «Բաց թողնելու ավելի ուշ»։

Չափիչ/ցատկող հուշումներ, հատկապես dark mode-ում։

«Կատակներ» և մշակութային փոխաբերություններ սխալների և սահմանների մեջ։

Ագրեսիվ գույներն ու ձայնը պատասխանատու խաղի համար։

16) QA-chek-թերթ

Հասանելիություն

• Tooltip/coachmark հասանելի է ստեղնաշարի վրա, «Esc» -ը փակում է, ֆոկուսը վերադառնում է։
• Հակադրություն AA, տեքստերը կախված չեն միայն գույներից։

Վարք

• Խորհուրդները չեն արգելափակում կարևոր տարրերը, դիրքավորվում են աղբյուրին։
• Գոյություն ունի ցուցադրությունների դեդուպլիկացիա և «Մի հիշեցրեք»։
• Անիմացիան 180 մզ է, out ավելի արագ։

Իմաստը

• Տեքստը կոնկրետ և կարճ է, CTA-ն տեղին է։
• Բանաձևերում/սահմանափակումներում օրինակներ են տրվում։

Metriki

• Նկարահանվում են CTR-ն, մինչև հաջողությունը, թաքնումների մասը։

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

Компоненты: `HelperText`, `InlineHint`, `Tooltip`, `Coachmark`, `ProductTour`, `DocsLink`, `CommandPalette`, `AiHelper`.

Tokens չափսեր/ժամանակներ/տոններ, ARIA-de-ը և կոպիրայթինգի օրինակները։

Հաճախակի կոմպոզիցիաների համար (KYC, լիմիտներ, վճարումներ, մրցույթներ, դրույքաչափեր)։

Do/Don 't-պատկերասրահը իրական էկրաններով։

Live ռեզյումե

Հելպերները լավ են, երբ ժամանակին, համատեքստում և առանց որևէ դրամայի։ Եկեք կարճ, մատչելի և ստուգված նշաններ, հարգեք ֆոկուսը և ցուցադրման հաճախությունը, գրանցեք հոսանքներն ու փամփուշտները դիզայնի համակարգում։ Այսպիսով, օգտագործողները ավելի քիչ սխալվում և ավելի արագ հասնում են արդյունքին, հատկապես iGaming-ի զգայուն սցենարներում։