Μικροεπιχειρήσεις και ανατροφοδότηση

1) Τι είναι η μικρο-αλληλεπίδραση

Οι μικροεπιδράσεις είναι σύντομοι κύκλοι σήματος ↔ απόκρισης που επιβεβαιώνουν ότι το σύστημα έχει ακούσει τον χρήστη και κινείται προς το αποτέλεσμα.

1. Ενεργοποίηση (κλικ, κλικ, εστίαση, συμβάν συστήματος).

2. Κανόνες (τι αλλάζει και πώς).

3. Fidbeck (οπτικό/ηχητικό/απτικό/κείμενο).

4. Βρόχος/μετα-κανόνες (επανάληψη, λήξη, αναίρεση/επανάληψη).

Ο στόχος: να μειωθεί η αβεβαιότητα και το γνωστικό φορτίο χωρίς να αποσπάται η προσοχή από την εργασία.

2) Αρχές σχεδιασμού

Νόημα> αποτέλεσμα. Το αποτέλεσμα εξηγεί «τι συνέβη» και «τι ακολουθεί».
Στιγμιότυπο. Η πρώτη απόκριση ≤ 100 ms (κουμπιά/διακόπτες).
Σαφήνεια. Διακριτές καταστάσεις: αιώρηση/εστίαση/πίεση/απενεργοποίηση/φόρτωση.
Εξοικονόμηση. Ελάχιστες ιδιότητες, βραχεία διάρκεια, χωρίς πυροτεχνήματα.
Συνέπεια. Οι ίδιες ενέργειες είναι τα ίδια σήματα.
Δυνατότητα πρόσβασης. Το Fidbek φαίνεται, ακούγεται και διαβάζεται από έναν αναγνώστη οθόνης. υπάρχει εναλλακτική λύση αντί κίνησης/ήχου.

3) Χρονοδιαγράμματα και καμπύλες

Hover/Εστίαση: 120-180ms

Πίεση/Εναλλαγή: 80-120 мс

Τοστ/Εργαλειοθήκη: είσοδος 180-240ms, έξοδος 120-160ms

Επικύρωση γραμμής: ≤ 100 ms μετά την απώλεια εστίασης πεδίου

Η προκαθορισμένη καμπύλη είναι 'κυβικό-bezier (0. 2, 0, 0. 2, 1)`; για πιεσμένο - επιταχυνόμενο "κυβικό-bezier (0. 4, 0, 1, 1)`.

4) Κατάλογος μικροεπιδράσεων

4. 1 Κουμπιά και διακόπτες

Άμεση απόκριση: οπτικό κλικ/παύλα + πολυάσχολη κατάσταση όταν ερωτάται από το δίκτυο.
Αισιόδοξη ενημέρωση: αλλαγή UI αμέσως, επαναφορά σφάλματος (με αναίρεση).
Συζήτηση διπλού κλικ: μπλοκάρετε την επανάληψη μέχρι να απαντηθεί/timeout.

4. 2 Inline-validation των εντύπων

επικύρωση σε θολά πεδία· τα μηνύματα είναι σύντομα και εποικοδομητικά («τουλάχιστον 8 χαρακτήρες»).
Εικονίδιο κατάστασης + χρώμα + κείμενο (όχι ένα χρώμα).
Για τους κωδικούς πρόσβασης - ένας στιγμιαίος δείκτης «αντοχής» (δεν παρεμβαίνει στην εισαγωγή).

4. 3 Τοστ/πανό/σνακ

Χρήση για μη ανασταλτικές επιβεβαιώσεις.
Διάρκεια 2-5 s, παύση σε hover/εστίαση, κουμπί Undo, κατά περίπτωση.
Μην κλείσετε σημαντικό περιεχόμενο και CTA.

4. Πρόοδος και σκελετοί

Εάν είναι γνωστή η διάρκεια της διαδικασίας, η ράβδος προόδου· εάν όχι, ο σκελετός αντί του spinner.
Χωρίς άλματα διάταξης: fix. ύψος μπλοκ.

4. 5 Σήματα/μετρητές

Ψηφιακή αντίθεση ≥ 4. 5:1; μέγιστο 99/999 με κατακρήμνιση '99 +'.
Επιπρόσθετα κινούμενα σχέδια - μικρά βήματα των παρτίδων των 40-60 ms, χωρίς τη διάταξη «τρέμουλο».

4. 6 Εργαλείο/Βοήθεια

Εμφάνιση κατά hover/εστίαση. προσβασιμότητα μέσω «aria-descripted by».
Απαγόρευση των κρίσιμων πληροφοριών μόνο στην εργαλειοθήκη.

5) Σφάλματα, κενές καταστάσεις, αναίρεση

Σφάλμα: έντιμο κείμενο, εξήγηση του λόγου και της δράσης («Επανάληψη», «Αλλαγή κάρτας»).
Κενή κατάσταση: τι είναι και πώς να ξεκινήσετε. εικονογράφηση μεταλλαγμένη, αντίθεση κειμένου AA/AAA.
Αναίρεση παραθύρου: 5-10 s για αναστρέψιμες ενέργειες (αφαίρεση, ακύρωση στοιχήματος πριν από τη σφαίρα).

6) Πολυτροπική ανάδραση

Ήχος: ήσυχο, σύντομο, ένα μοτίβο ανά τύπο γεγονότος (επιτυχία/σφάλμα/προσοχή)· απενεργοποίηση στις ρυθμίσεις.
Vibro/happtika: εύκολη αντίδραση τύπου/επιτυχία; να σέβονται τους περιορισμούς της «προεξοχής-μειωμένης κίνησης» και του συστήματος.
Οπτική: μόνο «μετασχηματισμός/αδιαφάνεια», χωρίς βαριά θολερότητα/σκιές σε συστοιχίες.

7) Διαθεσιμότητα (A11y)

': ορατή εστίαση' για το πληκτρολόγιο· δακτύλιος εστίασης χωρίς θολό.
Screensaver: 'role = «status «/» alert »'for toast? ζωντανές περιοχές «aria-live =» ευγενική/δυναμική «».
Εναλλακτική λύση έναντι ήχου/κίνησης. «μειωμένη κίνηση prefers: μείωση».
Αντίθεση κειμένου και εικονιδίου - WCAG (κανονική ≥ 4. 5:1).

8) Επιδόσεις

Απάντηση ≤ 100ms: οπτική απόκριση στο δίκτυο.
Κινούμενος «μετασχηματισμός/αδιαφάνεια», να αποφεύγεται το «ύψος/αριστερό/σκιώδες κουτί» σε πολλαπλά στοιχεία.
Αποτελέσματα δικτύου - με προκατάληψη και αισιοδοξία· ρετράι είναι idempotent.

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 share <5%.

Πρώτη ανατροφοδότηση χρήστη klik→vizualnyy ≤ 100ms

Το ποσοστό των αισιόδοξων δράσεων με ανατροπή <3% (διαφορετικά - δυσπιστία).
Έρευνες UX: σαφήνεια των μηνυμάτων σφάλματος, προβολή των επιβεβαιώσεων.

Κατάλογος ελέγχου QA

• Κάθε διαδραστικό έχει «πιεσμένο/απασχολημένο/ανάπηρο».
• Τα σφάλματα συνοδεύονται από κείμενο και ενέργειες (Retry/Undo).
• Οι φρυγανιές διατίθενται σε SR και δεν επικαλύπτουν βασικό περιεχόμενο.
• Η επικύρωση inline δεν επηρεάζει την είσοδο. τα μηνύματα είναι συγκεκριμένα.
• υποστηρίζεται η «προτιμώμενη-μειωμένη κίνηση»· ο ήχος/οι κραδασμοί απενεργοποιούνται.
• Δεν υπάρχει διάταξη και άλματα Strobe. κινουμένων σχεδίων για τον «μετασχηματισμό/αδιαφάνεια».

12) Οι ιδιαιτερότητες του iGaming

Στοίχημα/αγορά: στιγμιαία 'pressed→busy', πρόποση «αποδεκτή» με Undo (εάν το επιτρέπουν οι κανονισμοί), idempotent κλειδιά. σε καθυστέρηση> 1 s - «Αναμονή για επιβεβαίωση»....
Περιστροφή/Αποκάλυψη: σύντομη ανατροφοδότηση τύπου, ομαλή εκκίνηση/στάση χωρίς ατελείωτη αναβοσβήνει? νίκη - διάρρηξη ≤ 500 ms + αναγνώσιμο κείμενο (AAA).
Ζωντανοί συντελεστές: επικαιροποιήσεις με παρτίδες, οπτικό diff (βέλος/πάχος) χωρίς «άλματα».
Πληρωμές/συμπεράσματα: σταδιακή πρόοδος (KUS→Proverka→Vyplata), διαφανή κείμενα των λόγων απόρριψης.
Υπεύθυνο παιχνίδι: κοινοποιήσεις χωρίς αποσπασματικά αποτελέσματα. υψηλότερη αντίθεση, ρητή CTA «Set Limit».

13) Αντι-μοτίβα

Περιμένετε μια απόκριση δικτύου πριν εμφανίσετε μια απάντηση σε ένα κλικ.
«Χρώμα χωρίς σχήμα»: η κατάσταση διαφέρει μόνο στη σκιά.
Ατελείωτοι παλμοί/αναβοσβήνουν, αιχμηροί ήχοι χωρίς διακόπτη.
Εργαλείο με κρίσιμο περιεχόμενο μη προσβάσιμο από το πληκτρολόγιο.
Spinner στο κενό> 1-2 s χωρίς πρόοδο/σκελετό.
Λεπτές σκιές/θολώσεις σε εκατοντάδες στοιχεία (υστέρηση σε αδύναμες συσκευές).

14) Τεκμηρίωση στο σύστημα σχεδιασμού

«Μικροδευτερόλεπτα»: «διάρκεια/χαλάρωση», προκαθορισμένα τοστ/σήματα/επικυρωτές.
«Μοτίβα»: κουμπιά, σχήματα, φρυγανιές, πρόοδος, σφάλματα γραμμής, αναίρεση.
«A11y & Motion»: κανόνες για SR/HC/μειωμένη κίνηση· Παραδείγματα ARIA.
«Do/Don»: σύντομα κλιπ με συγχρονισμούς, αριθμούς INP/First Feedback.

Σύντομη Περίληψη

Οι μικρο-αλληλεπιδράσεις είναι μια γλώσσα εμπιστοσύνης. Δώστε μια απάντηση σε ≤ 100 ms, αιχμαλωτίστε κατανοητές καταστάσεις, χρησιμοποιήστε αισιόδοξες με ασφαλή ανατροπή, μην βασίζεστε μόνο στο χρώμα και ζωγράφισε ιδιότητες φωτός. Σεβασμός της διαθεσιμότητας και της απόδοσης - τότε το προϊόν αισθάνεται ζωντανό, έντιμο και αξιόπιστο, ιδίως σε σενάρια σε πραγματικό χρόνο.