מיקרו אינטראקציות ומשוב

1) מהי אינטראקציה זעירה

מיקרו אינטראקציות הן מחזורי תגובה קצרים ↔ אותות המאשרים שהמערכת שמעה את המשתמש ומתקדמת לעבר התוצאה.

1. הדק (לחיצה, סחרור, מיקוד, אירוע מערכת).

2. חוקים (אילו שינויים וכיצד).

3. פידבק (ויזואלי/צליל/טקסט).

4. לולאה/מטא-כללים (חוזר, תפוגה, ביטול/רידו).

המטרה: להפחית את חוסר הוודאות והעומס הקוגניטיבי מבלי להסיח את הדעת מהמשימה.

2) עקרונות עיצוב

כלומר> אפקט. האפקט מסביר ”מה קרה” ו ”מה הלאה”.
מידית. התגובה הראשונה כוללת 100 ms (כפתורים/מתגים).
חוסר בהירות. מצבים מובחנים: ריחוף/מיקוד/לחץ/נכה/טעינה.
חסכונות. נכסים מינימליים, משך זמן קצר, אין זיקוקים.
עקביות. אותן פעולות הן אותם אותות.
נגישות. פידבק נראה, נשמע ונקרא על ידי קורא מסך; יש אלטרנטיבה לתנועה/קול.

3) עיתוי ועקומות

Hover/פוקוס: 120-180ms

לחץ/טוגל: 80-120

טוסט/טיפ: קלט 180-240ms, פלט 120-160ms

אימות קו: 100 ms לאחר אובדן מיקוד שדה

עקומת ברירת המחדל היא cubic-bezier (0. 2, 0, 0. 2, 1)`; עבור לחץ - מואץ 'cubic-bezier (0. 4, 0, 1, 1)`.

4) קטלוג מיקרו ־ אינטראקציה

4. 1 כפתורים ומתגים

תגובה מיידית: לחץ ויזואלי/אינדנטי + מצב עמוס כאשר נבדק על ידי הרשת.
עדכון אופטימי: שינוי UI באופן מיידי, רול חזרה על שגיאה (עם ביטול).
דיון בלחיצה כפולה: החזרה על הבלוק עד/פסק זמן נענית.

4. 2 אימות מקוון של הטפסים

אימות על שדות מטושטשים; המסרים קצרים וקונסטרוקטיביים (”לפחות 8 תווים”).
סמל מצב + צבע + טקסט (לא צבע אחד).
לסיסמאות - סימן מיידי ל ”כוח” (אינו מפריע לקלט).

4. 3 טוסט/באנרים/חטיפים

השתמש באישורים ללא חסימה.
משך 2-5 אס, הפסקה בריחוף/מיקוד, ביטול כפתור במקום המתאים.
אל תכבה תוכן חשוב וסי-טי-איי.

4. 4 התקדמות ושלדים

אם אורך התהליך ידוע, סרגל ההתקדמות; אם לא, שלד במקום ספינר.
אין קפיצות פריסה: לתקן. חסום גבהים.

4. 5 תגים/דלפקים

ניגודיות ספרה 4. 5:1; מקסימום 99/999 עם '99 +'.
הגדלת אנימציות - צעדים קצרים של 40-60 ms חבורות, ללא ”רועד” פריסת.

4. 6 ערכת כלים/עזרה

הופעה על ידי ריחוף/מיקוד; נגישות באמצעות 'אריה-תיאור'.
אוסר על מידע קריטי רק בטיפ כלים.

5) שגיאות, מצבים ריקים, ביטול

שגיאה: טקסט כנה, הסבר של הסיבה והפעולה (”חוזר”, ”כרטיס שינוי”).
מצב ריק: מה זה ואיך להתחיל; איור מעוות, טקסט ניגוד AA/AAA.
חלון ביטול: 5-10 ש 'לפעולות הפיכות (הסרה, ביטול ההימור לפני הקליע).

6) משוב מולטימודלי

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

7) זמינות (A11y)

': פוקוס-נראה' עבור מקלדת; טבעת מיקוד ללא טשטוש.
שומר המסך: 'תפקיד = ”סטטוס ”/” התראה ”עבור טוסט; אזורים חיים 'אריה-לחיות = ”מנומס/אסרטיבי”.
חלופה לצליל/תנועה; 'מעדיף-מופחת תנועה: להפחית'.
טקסט וסמל ניגודיות - WCAG (רגיל בין 4. 5:1).

8) ביצועים

הגיבו 100 מ "מ: תגובה ויזואלית לרשת.
אנימציה ”שינוי צורה/אפיון”; הימנע מ ”גובה/שמאל/תיבה-צל” על אלמנטים מרובים.
השפעות רשת - עם טרום fetch ואופטימיות; רטריי הם אידיוטים.

9) אסימוני מיקרו אינטראקציה (מערכת עיצוב)

json
{
"micro": {
"duration": { "hover": 160, "focus": 160, "press": 90, "toastIn": 220, "toastOut": 140 },
"easing":  { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"toast":  { "timeoutMs": 3500, "pauseOnHover": true },
"badge":  { "max": 99, "emphasisStepMs": 50 }
}
}

10) קטעי יישום

html
<div id="toast" role="status" aria-live="polite" hidden></div>
<script>
const toast = (msg, {undo, timeout=3500}={})=>{
const el = document. getElementById('toast');
el. innerHTML = undo? '$ {msg} <button> Undo </button>': msg;
el. hidden = false;
let t = setTimeout(close, timeout);
el. onmouseenter = () => clearTimeout(t);
el. onmouseleave = () => t = setTimeout(close, timeout);
if (undo) el. querySelector('button'). onclick = ()=>{ undo(); close(); };
function close(){ el. hidden = true; el. innerHTML=''; }
};
</script>

js const rules = { password: v => v.length>=8         "Minimum 8 characters"};
document. querySelectorAll('[data-validate]'). forEach(i=>{
i.addEventListener('blur', e=>{
const rule = rules[e. target. name]; if (!rule) return;
const ok = rule(e. target. value);
e. target. dataset. state = ok===true? 'ok': 'err';
e. target. nextElementSibling. textContent = ok===true? '': ok;
});
});

js export const haptic = type => {
if (!('vibrate' in navigator)) return;
if (type==='success') navigator. vibrate(10);
if (type==='error') navigator. vibrate([20,40,20]);
};

css
.button{ transition: transform. 09s cubic-bezier(.4,0,1,1), box-shadow. 16s cubic-bezier(.2,0,.2,1); }
.button:active{ transform: scale(.98); }
.input[data-state="err"]{ outline: 2px solid var(--role-danger); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ { animation:none! important; transition-duration:.01ms! important; } }

11) מדדים ובקרת איכות

INP p75 <200 ms, Long Tasks לחלוק <5%.

משוב המשתמש הראשון klik * vizualnyy lade 100ms

הפרופורציה של פעולות אופטימיות עם גלגול של <3% (אחרת - חוסר אמון).
סקרי UX: בהירות של הודעות שגיאה, ראות של אימות.

רשימת QA

[ ] כל אינטראקטיבי 'לחץ/עמוס/נכה'.

[ שגיאות ] מלוות בטקסט ובמעשים (Retry/Undo).

[ ] טוסט זמינים על SR ולא חופפים תוכן מפתח.

[ אימות ] אינו מפריע לקלט; הודעות הן ספציפיות.

[ ] 'מעדיף-מופחת תנועה' נתמך; צליל/רטט כבויים.

[ ] אין פריסה וקפיצות בבטן; אנימציות על ”טרנספורמציה/אפיון”.

12) הפרטים של iGaming

הימור/רכישה: instant 'lacked action', טוסט ”מקובל” עם Undo (אם התקנות מאפשרות), מפתחות אידמפוטנטים; בעיכוב> 1 s - ”מחכה לאישור...”

ספין/לחשוף: משוב עיתונות קצר, התחלה/עצירה חלקה ללא מצמוץ אינסופי; win-פרץ 500 ms + טקסט קריא (AAA).
מקדמים חיים: עדכונים עם חבורות, דיפ ויזואלי (חץ/עובי) ללא ”קפיצות”.
תשלומים/מסקנות: התקדמות צעד אחר צעד (KUS # Proverka # Vyplata), טקסטים שקופים של הסיבות לסירוב.
משחק אחראי: הודעות ללא אפקטים מסיחים; ניגוד גבוה יותר, CTAs ”קבע הגבלה” מפורשת.

13) אנטי דפוסים

חכו לתגובת רשת לפני שתראו תגובה ללחיצה.
”צבע ללא צורה”: המדינה שונה רק בצל.
פעימות/מצמוצים אינסופיים, צלילים חדים ללא מתג.
ערכת כלים עם תוכן קריטי לא נגישה מהמקלדת.
ספינר בריק> 1-2 S ללא התקדמות/שלד.
צללים דקים/טשטוש על מאות יסודות (פיגור במכשירים חלשים).

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

”מיקרו-אסימונים”: ”משך/הקלות”, מראש של טוסט/תגים/מאשרים.
”תבניות”: כפתורים, צורות, טוסט, התקדמות, שגיאות קו, לבטל.
”A11y & תנועה”: כללים עבור SR/HC/תנועה מופחתת; דוגמאות ARIA.
”Do/Don 't”: קטעים קצרים עם תזמון, מספרי INP/First Feedback.

תקציר

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