ინტერფეისის მინიშნებები და ჰელპერები

1) რატომ არის საჭირო

• გამოჩნდება კონტექსტში, როდესაც ნამდვილად საჭიროა
• მოკლე და სპეციფიკური, მარკეტინგის გარეშე,
• არ ბლოკავს მთავარ სცენარს და პატივს სცემს ხელმისაწვდომობას.

2) ინსტრუმენტების რუკა და როდის უნდა გამოვიყენოთ ისინი

წესი: კრიტიკული შინაარსი - ხედვის სფეროში და ინტერფეისის ტექსტში, არა მხოლოდ მითითებაში.

3) განლაგების და გამომწვევი ნიმუშები

მოქმედებამდე: helper text/inline-hint („პაროლი 8 სიმბოლო“).
მოქმედების დროს: tooltip/coachmark ყურადღების ცენტრში/hover/long-press.
მოქმედების შემდეგ: სადღეგრძელო/ბანერი შედეგის ახსნით და მითითებით „დამატებითი“.
განზრახვის თანახმად: შოუ '?', 'i', „დამატებითი“, 'Ctrl +/' (command palette).

4) საავტორო უფლებები

ერთი აზრი ერთი წინადადებაა. დაიწყეთ ზმნიდან („შეარჩიეთ“..., „შეავსეთ“...).

დანაშაულის გარეშე: "ფილტრი გამორიცხავს ყველა ჩანაწერს. ჩამოიბანეთ ფილტრი?"

რიცხვები და ფაქტები შეფასების ნაცვლად: "კომისია 1. 5–2%».
მნიშვნელოვანია: ნუ დაჰპირდებით ზუსტ დროს, თუ ის გარანტირებული არ არის.

5) წვდომა (A11y)

Tooltip: 'role = „tooltip“ „, კავშირი' aria-describedby- ით“ ტრიგერთან; კლავიატურაზე ხელმისაწვდომია.
ინფორმის ბლოკები: 'role = "status"' (პოლიტი), შეცდომები - 'role = "alert" ".
Coachmark/Tour: ფოკუსი წესრიგში, 'Esc' დახურავს, ფოკუსის დაბრუნებას წყაროზე.
ტექსტის კონტრასტი AA; მინიშნება არ არის მნიშვნელობის ერთადერთი გადამზიდავი.

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`.
რთული ველებისთვის - ღილაკი „მაგალითი“ (იხსნება პატარა ნაპერწკალი/ნიღაბი).
ვალიდაცია და ჰელპერი არ ეწინააღმდეგება: შეცდომით, ჰელპერი გადაიქცევა მოკლე „როგორ გამოსწორდეს“.

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/კოპილოტი

მინიშნებები ფორმის/ტერმინების შესახებ ("რა არის ვაგერი? "), მინდვრის შევსება გამოყენებამდე ცვლილებების ჩამონათვალით.
მგრძნობიარე სცენარებისთვის (გადახდა/განაკვეთი) - მხოლოდ ახსნა-განმარტებები და გადამოწმების შემოწმების ფურცლები, გამოსავალი რჩება მომხმარებლისთვის.
ასწავლეთ საკუთარი დოკუმენტაცია/FAQ; მოამზადეთ კითხვები სტატიკის გასაუმჯობესებლად.

10) iGaming სპეციფიკა

წესები და შეზღუდვები: შესამჩნევი ჰელპერები ღილაკების გვერდით „ფსონი დადეთ“, „კეშუტი“, „დააწესეთ ლიმიტი“. ნათელი ენა და მაგალითები.
KYC/AML: ეტაპობრივი რჩევები (დოკუმენტები, გადამოწმების დრო, რა მოხდება შემდეგ).
ტურნირები: ბარათში - „როგორ დარიცხულია ქულები“ (tooltip/inline-hint), ბმული „წესები“.
გადახდები: helper კომისიების/ვადების შესახებ და „რატომ არის საჭირო გადამოწმება“.
საპასუხისმგებლო თამაში: უყურადღებო, მაგრამ თვალსაჩინო მინიშნებები „დაადგინეთ დღის ლიმიტი“ (AAA კონტრასტი, ციმციმების გარეშე).

11) შესრულება და პოზიციონირება

მსუბუქი ანიმაციები 'opacity/transform' 180 ms, უფრო სწრაფად.
პოზიციონირება წყაროზე, ცვლა 4-8 px, ავტო-ფლიპი ზღვარზე.
არ შექმნათ DOM ხე ასობით რჩევისგან - ზარმაცი დამონტაჟება ფოკუსზე/ჰოვერზე.
გაითვალისწინეთ 'prefers-reduced-motion': სტატიკური რჩევები შიმერის ნაცვლად.

12) მეტრიკა და ექსპერიმენტები

CTR მინიშნება (შოუები - კლიშეები STA/„ მეტი “).
შეცდომების/უარის თქმის შემცირება ჰელპერებთან ერთად კონტროლის ქვეშ.
პირველი წარმატების დრო empty/ტურის შემდეგ.
დამალვა/მინიშნებების უარყოფა (უარყოფითი სიგნალია გადაწერა ტექსტი/შოუს მომენტი).
პოპულარული შეკითხვის ლოგოები ბრძანების პალიტრაში/AI-helpere.

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
.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) განხორციელება: 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) ანტი შაბლონები

მინიშნებები CTA- ს დახურვის ან ფოკუსის გადახურვის შესახებ.
კრიტიკული ინფორმაცია მხოლოდ tooltip/hover- ში.
ტური 10 + ნაბიჯით „გამოტოვეთ მოგვიანებით“.
მომაკვდინებელი/jumping მინიშნებები, განსაკუთრებით dark mode- ში.
„ხუმრობები“ და კულტურული მეტაფორები შეცდომებსა და ლიმიტებში.
აგრესიული ფერები და ხმა საპასუხისმგებლო თამაშისთვის.

16) QA ჩეკის სია

წვდომა

• tooltip/coachmark ხელმისაწვდომია კლავიატურაზე, 'Esc' დახურავს, ფოკუსი ბრუნდება.
• AA- ს კონტრასტი, ტექსტები არ არის დამოკიდებული მხოლოდ ფერზე.

ქცევა

• მინიშნებები არ ბლოკავს მნიშვნელოვან ელემენტებს, პოზიციონირებულია წყაროზე.
• არსებობს შოუს დედაპლაცია და „არ შეგახსენოთ“.

ანიმაცია 180 ms, უფრო სწრაფად.

მნიშვნელობა

ტექსტი კონკრეტული და მოკლეა, CTA შესაფერისია.

• მაგალითები მოცემულია ფორმულებში/შეზღუდვებში.

მეტრიკა

• CTR ამოღებულია, წარმატების დრო, დამალვის წილი.

17) დოკუმენტაცია დიზაინის სისტემაში

Компоненты: `HelperText`, `InlineHint`, `Tooltip`, `Coachmark`, `ProductTour`, `DocsLink`, `CommandPalette`, `AiHelper`.
ზომა/დრო/ტონები, ARIA ჰაიდი და საავტორო უფლებების მაგალითები.
შაბლონები ხშირი სცენარისთვის (KYC, ლიმიტები, გადახდები, ტურნირები, განაკვეთები).
Do/Don 't გალერეა ნამდვილი ეკრანებით.

მოკლე რეზიუმე

ჰელპერები კარგია, როდესაც დროულად, კონტექსტში და ზედმეტი დრამის გარეშე. მოდით, მოკლე, ხელმისაწვდომი და გამოცდილი რჩევები, პატივი სცეთ შოუს ფოკუსსა და სიხშირეს, ჩაწერეთ ნიშნები და ნიმუშები დიზაინის სისტემაში. ასე რომ, მომხმარებლები ნაკლებად ცდებიან და უფრო სწრაფად მიაღწევენ შედეგს - განსაკუთრებით iGaming- ის მგრძნობიარე სცენარებში.