הערות ממשק ועוזרים

1) מדוע הם נחוצים

• להופיע בהקשר כאשר הם באמת נחוצים,
• קצר וספציפי, ללא שיווק,
• לא לחסום את התרחיש העיקרי ולכבד את הזמינות.

2) מפת כלים ומתי להשתמש בהם

כלל: תוכן קריטי - בתחום הראייה ובטקסט הממשק, לא רק ברמז.

3) דפוסי מיקום ומעוררים

לפני הפעולה: Seleper text/inline-hind (”סיסמה 8 תווים”).
ברגע הפעולה: tooltip/cachmark עם פוקוס/hover/long-press.
לאחר הפעולה: טוסט/באנר עם הסבר של התוצאה והקישור ”More”.
מתוך כוונה: הצגה על ידי '?', 'i', 'פרטים', 'Ctrl +/' (לוח פקודה).

4) קופירייטינג

מחשבה אחת, משפט אחד. התחל עם פועל (”בחר...”, ”מלא”...).
"המסנן כלל את כל הרשומות. אתה רוצה לאפס את המסנן?
מספרים ועובדות במקום הערכות: "ועדה 1. 5–2%».
אל תבטיח זמן מדויק אלא אם זה מובטח.

5) זמינות (A11y)

Tooltip: 'תפקיד =' tooltip ', תקשורת באמצעות' אריה-מתאר 'עם טריגר; זמין באמצעות מקלדת.
יודיע בלוקים: 'תפקיד =' סטטוס '(מנומס), שגיאות -' תפקיד = ”התראה”.
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 פעמים בכל הפעלה.
בקרת תדר: התקררות 24 h עבור cachmark/tour; למשתמש יש ”נא לא להזכיר”.
כלים אינם מתחרים: אל תפתח ערכת כלים על פני סימן עגלון ולהיפך.
זכרון הקידמה: השלבים המושלמים של הסיור אינם מוצעים עוד.

7) טקסטים מסייעים לצורות

כתוב ”איך להעביר” את הכלל, לא ”מה עשית לא בסדר”.
דוגמה לפורמט ליד: 'DD. M.M. YYYY ',' user @ domain. till'.
עבור שדות מורכבים - כפתור ”דוגמה” (פותח קטע קטן/מסכה).
אימות ועוזר אינם מתנגשים: עם טעות, עוזר הופך ל ”איך לתקן” קצר.

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) אל עוזר/טייס משנה

רמזים צורה/מונח ("מהי כוס? "), טיוטה-מילוי שדות עם רשימה של שינויים לפני הגשת בקשה.
עבור תרחישים רגישים (תשלום/תעריף) - רק הסברים ורשימות צ 'קים, ההחלטה נשארת אצל המשתמש.
ללמד במסמכים שלך/FAQ; יומן שאלות כדי לשפר את הסטטיקה.

10) הפרטים של iGaming

חוקים ומגבלות: עוזרים בולטים ליד הכפתורים ”הימר”, ”קאשאוט”, ”קבע גבול”. "שפה ברורה ודוגמאות.
KYC/AML: טיפים צעד אחר צעד (מסמכים, תאריכי בדיקה, מה יקרה בהמשך).
טורנירים: בכרטיס - ”כיצד מוענקות נקודות” (tooltip/inline-rink), קישור ”Rules”.
תשלומים: עוזר לגבי עמלות/מועדים ו ”מדוע יש צורך באימות”.
משחק אחראי: ”קבע מגבלה יומית” (ניגוד AAA, ללא הבהוב).

11) ביצועים ומיקום

אפיון/טרנספורמציה של אנימציית אור, 180ms, החוצה מהר יותר.
מיקום למקור, משמרת 4-8 px, אוטומטי להעיף בקצוות.
אל תיצור עץ DOM ממאות דואר - עצלות על ידי מיקוד/ריחוף.
תחשבו על ”מעדיף תנועה מופחתת”: פולטים סטטיים במקום נצנצים.

12) מטריצות וניסויים

טיפים של CTR (התרשמות = לחיצות על STA/” More”).
הפחתת שגיאות/כשלים בצורות עם עוזר נגד בקרה.
הגיע הזמן להצלחה ראשונה אחרי סיבוב הופעות ריק.
הסתתרות/סירוב פקודה (אות שלילי - לכתוב את הטקסט/רגע התצוגה).
יומנים של שאילתות פופולריות בפקודה Palette/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
.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 או מיקוד חפיפה.
מידע קריטי רק בכלים/ריחוף.
סיבוב הופעות 10 + צעד בלי סקיפ מאוחר יותר.
ניצוץ/קפיצה רמזים, במיוחד במצב אפל.
”בדיחות” ומטאפורות תרבותיות בטעויות ובגבולות.
צבעים אגרסיביים וצליל למשחק אחראי.

16) רשימת QA

זמינות

[ ] סימון כלים/סימון כלים זמין במקלדת, 'Esc' נסגר, הפוקוס חוזר.

[ ] AA, הטקסטים אינם תלויים בצבע בלבד.

התנהגות

[ ] רמזים אינם חופפים אלמנטים חשובים, מוצבים למקור.

[ ] יש שכפול רושם ואל תזכיר.

[ ] Animations צומצם 180ms, החוצה מהר יותר.

משמעות

[ ] הטקסט הוא ספציפי וקצר, CTA מתאים.

[ דוגמאות ] ניתנות בנוסחאות/הגבלות.

Metrics

[ ] CTRs, זמן להצלחה, פרופורציה של עורות מוסרים.

17) תיעוד במערכת התכנון

”HelperText',” InlperText', ”Tooltip”, ”Coachmark”, ”Coachmark Tour”, ”DocsLink”, ”GoyPalette”, ”ElyHelper”.
אסימונים בגודל/זמן/טון, מדריך ARIA ודוגמאות לקופירייטינג.
תבניות לתרחישים תכופים (KYC, גבולות, תשלומים, טורנירים, הימורים).
לעשות/לא גלריה עם מסכים אמיתיים.

תקציר

עוזרים טובים בזמן, בהקשר ובלי דרמה מיותרת. תן רמזים קצרים, נגישים וניתנים לאימות, תכבד את המיקוד ואת תדירות ההתרשמות, תקן אסימונים ותבניות במערכת העיצוב. לכן פחות סביר שהמשתמשים יעשו טעויות ויגיעו לתוצאה מהר יותר - במיוחד בתרחישי iGaming רגישים.