Σχεδιασμός εντύπων UX

1) Αρχές

1. Πρώτα το έργο, μετά τα πεδία. Τα έντυπα αποτελούν συνέχεια του σεναρίου χρήστη και όχι κατάλογο βάσεων δεδομένων.
2. Μία οθόνη είναι ένας στόχος. Αφαίρεση οτιδήποτε δεν ολοκληρώνει την εργασία.
3. Ποτέ μην χάνετε δεδομένα. Αυτόματη αποθήκευση, αποκατάσταση σχεδίων, ασφαλείς επαναλήψεις.
4. Εμφάνιση "πώς να. "Κανόνες και παραδείγματα πριν από το σφάλμα· επικύρωση προσεκτικά.
5. Προκαθορισμένη διαθεσιμότητα. Ετικέτες, εστίαση, αντίθεση, πλοήγηση πληκτρολογίου.
6. Προβλέψιμη ταχύτητα. Η πρώτη απάντηση ≤ 100 εκατομμύρια, αποστέλλοντας με ρητό καθεστώς και πρόοδο.

2) Αρχιτεκτονική πληροφοριών εντύπου

Σκοπός → βήματα → πεδία. Ξεκινήστε με το αποτέλεσμα (για παράδειγμα, «εκταμίευση») και επιλέξτε το ελάχιστο σύνολο πεδίων.
Ομαδοποίηση κατά την έννοια: "Προσωπικά δεδομένα", "Πληρωμή", "Επιβεβαίωση. "Κάθε ομάδα ≤ 6 πεδία.
Προοδευτική γνωστοποίηση: εμφάνιση πρόσθετων πεδίων ανά όρο (εναλλαγή/επιλογή χώρας).
Η σειρά των πεδίων είναι όπως στο κεφάλι του χρήστη: από το γνωστό στο σύμπλεγμα.

3) Διάταξη και κάνναβος

Μια στήλη για κινητά και οι περισσότερες εργασίες είναι πιο γρήγορες στην εμφάνιση και την καρτέλα.
Δύο στήλες είναι κατάλληλες για σύντομα διασυνδεδεμένα πεδία (ημερομηνία/ώρα, όνομα/επώνυμο).
Το ύψος της γραμμής είναι 40-48 px, η απόσταση μεταξύ των πεδίων είναι 8-12 px (σχετικό )/16-24 px (ομάδες).
ευθυγράμμιση της ετικέτας στην κορυφή του πεδίου· δεξιά - να μην χρησιμοποιείται για στενές μορφές.

4) Ετικέτες, κάτοχοι θέσεων, βοηθοί

Η ετικέτα είναι υποχρεωτική. Ο κάτοχος της τοποθεσίας αποτελεί παράδειγμα, όχι αντικατάσταση.
Τοποθετήστε το κείμενο βοηθού κάτω από το πεδίο: κανόνες, μορφότυπος, αναφορά σε ένα παράδειγμα.
Τα προαιρετικά πεδία περιλαμβάνουν «(προαιρετικά)» αντί «» σε απαιτούμενα πεδία.

html
<label for = "iban"> IBAN <span class = "muted"> (optional) </span> </label>
<input id="iban" aria-describedby="iban-help">
<small id = "iban-help "> Format A-Z, 0-9; example: DE89 3704 0044 0532 0130 00 </small>

5) Βήματα και πρόοδος

Έντυπα πολλαπλών σταδίων (ASC/πληρωμές): 3-5 στάδια, σαφής πρόοδος «Στάδιο 2 του 4».
Αποθήκευση ολοκληρωμένων σταδίων. Επιτρέψτε την επιστροφή χωρίς απώλεια δεδομένων.
Πλήκτρα πλοήγησης: «Πίσω», «Επόμενο», το τελικό «Επιβεβαίωση» - πάντα σε ένα μέρος.

6) Έλεγχος εισόδου

Πληκτρολόγια και χαρακτηριστικά: 'type', 'inputmode', 'autocplete' για τον τύπο δεδομένων.
Χρησιμοποιήστε τις μάσκες εισόδου απαλά (τηλέφωνο, IBAN, PAN, ημερομηνία), αποθηκεύστε κανονικοποιημένες τιμές.
Μην σπάσετε το αυτόματο συμπλήρωμα: το σωστό' autoccomplete =» δεδομένο όνομα »\« cc-number »\« one-time-code»', κλπ.
Προκαθορισμένες ποσότητες/συντομεύσεις: «+ 50/+ 100/All» δίπλα στο πεδίο ποσότητας.

7) Επικύρωση και σφάλματα

Στρατηγική: πριν από την είσοδο (βοηθός), κατά τη διάρκεια (μαλακά κίνητρα), μετά (σε θολό/υποβαλλόμενο).
Ασύγχρονοι έλεγχοι (μοναδικότητα της σύνδεσης, όρια, κίνδυνος) - με χρέωση 250-400 ms.
Σφάλμα κειμένου: αιτία → πώς να διορθώσετε → εναλλακτική λύση.
Συνοπτική ομάδα πάνω από το έντυπο για διάφορα σφάλματα + εστίαση στο πρώτο σφάλμα.
Idempotency-Κλειδί για κρίσιμες δράσεις (προσφορά/πληρωμή) και ασφαλή retrays.

8) Κουμπιά και υποβολή

Το πρωτογενές CTA τονίζεται σε χρώμα/μέγεθος, διαθέσιμο από το Enter.
'Busy' state and click retry block? σε καθυστέρηση> 3-5 s - «Αναμονή για επιβεβαίωση»....
Μετά την επιτυχία - ρητή κατάσταση (τοστ/έτοιμη οθόνη) + τι θα συμβεί στη συνέχεια.

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

Σωστοί σύνδεσμοι «ετικέτα εισόδου», σφάλματα μέσω 'aria-designedby', κρίσιμος - 'ρόλος = «συναγερμός»'.
Ορατή ': εστίαση ορατή', η σειρά καρτέλας αντιστοιχεί σε οπτική.
Αντίθεση κειμένου/εικονιδίου ≥ AA; Το νόημα δεν είναι μόνο το χρώμα.
Υποστήριξη «προτίμησης-μειωμένης κίνησης»: ελάχιστες εικονογραφήσεις.
Για τις ομάδες ραδιοσυχνοτήτων - 'fieldset/legend', 'role = "status' '.

10) Εντοπισμός και διεθνής μορφότυπος

Ημερομηνίες/νομίσματα/αριθμοί - τοπικά κατά την είσοδο, αποθήκευση - ISO/μονάδες ήσσονος σημασίας.
Επιτρέπουν διαφορετικά αλφάβητα σε ονόματα/διευθύνσεις. δεν περιορίζουν τις παύλες/αποστροφές.
Κρατήστε το τηλέφωνο στο E.164. χώρα που επιλέγεται ρητά ή από το «+ CC» κατά την εισαγωγή.

11) Επιδόσεις και σταθερότητα

Η πρώτη οπτική απόκριση ≤ 100 ms. ασύγχρονοι έλεγχοι - μην κλειδώνετε την οθόνη.
Σκελετός αντί για «κρεμαστό» spinner, σταθερά ύψη, αποφυγή CLS.
Εικονίστε μακριές λίστες (π.χ. χώρες/τράπεζες).
Ζωγράφισε μόνο 'transform/αδιαφάνεια', χωρίς θολερότητα/σκιές χύδην.

12) Ασφάλεια και ιδιωτικότητα

Δεν υπάρχει καταγραφή PAN/CVC/διαβατηρίου. δεν αποστέλλονται σε RUM/κονσόλα.
Μάσκα ευαίσθητων πεδίων, μην τα αποθηκεύσετε σε αυτόματη αποθήκευση.
Μην αποκαλύψετε αν ο λογαριασμός υπάρχει: «Εάν το email είναι καταχωρημένο, θα στείλουμε ένα email».
Αποθήκευση - ελάχιστη απαιτούμενη· Δείξτε γιατί απαιτείται KYC.

13) Τυπικά σενάρια

13. 1 Πληρωμή/κατάθεση

Πεδίο ποσού με προκαθορισμένες τιμές, νόμισμα που ορίζεται ρητά.
PAN με μαλακή μάσκα, έλεγχος Luhn· Το CVC είναι κρυμμένο. ημερομηνία 'MM/YY' με αυτόματο '/'.
Κείμενο σχετικά με τις προμήθειες/προθεσμίες σε κοντινή απόσταση, όχι σε εργαλειοθήκη.

13. 2 Ανάκληση

Βαθμίδες Ποσό → Μέθοδος → Επιβεβαίωση

Πρόοδος και «Συνήθως μέχρι Ν λεπτά/ώρες» (καμία σκληρή υπόσχεση).
παραλλαγές μεθόδων ανά χώρα· περιορίζουν τις προειδοποιήσεις.

13. 3 KYC

Βήμα προς βήμα φορτωτής αρχείων: απαιτήσεις μορφής/βάρους, προεπισκόπηση, ιδιωτικότητα.
Ημερομηνίες ελέγχου και δίαυλος κατάστασης (ταχυδρομείο/κοινοποίηση).

13. 4 Όρια και υπεύθυνη δράση

Καθαρές μονάδες (ημέρα/εβδομάδα/μήνα), προκαθορισμοί, επιβεβαίωση αλλαγών, «Θα τεθεί σε ισχύ σε»....

14) Αντιπατερίδια

Ο κάτοχος της θέσης αντί της ετικέτας.
Σφάλματα «ανά χαρακτήρα» χωρίς απομυθοποίηση.
Επαναφορά του εντύπου στο σφάλμα.
Η κρίσιμη εντολή είναι κρυμμένη μόνο στην εργαλειοθήκη.
Σκληρές μάσκες που απαγορεύουν έγκυρους χαρακτήρες/εισαγωγή.
Κλείδωμα ολόκληρης της σελίδας για την επικύρωση ενός πεδίου.
Αποστολή χωρίς ρητή εργασία/πρόοδο.

15) Αποσπάσματα υλοποίησης

Περίληψη σφαλμάτων + εστίαση στο πρώτο θέμα

js function focusFirstError() {
const el = document. querySelector('[aria-invalid="true"]');
if (el) el. focus({ preventScroll:false });
}

Κουμπί με στιγμιαία απασχολημένη και ευφυΐα

js btn. addEventListener('click', async () => {
btn. classList. add('is-busy');
try {
const r = await fetch('/api/submit', {
method: 'POST',
headers: { 'Idempotency-Key': crypto. randomUUID() },
body: new FormData(document. querySelector('form'))
});
if (!r.ok) throw new Error();
// success UI
} catch {
// show retry
} finally {
btn. classList. remove('is-busy');
}
});

Πλαίσιο HTML της διαθέσιμης ομάδας ραδιοσυχνοτήτων

html
<fieldset>
<legend> How to get </legend>
<label><input type="radio" name="method" value="sepa"> SEPA</label>
<label><input type="radio" name="method" value="swift"> SWIFT</label>
</fieldset>

16) Μάρκες συστήματος σχεδιασμού (παράδειγμα)

json
{
"form": {
"gap": 12,
"groupGap": 20,
"labelSize": 14,
"fieldHeight": 44,
"radius": 10
},
"motion": {
"pressMs": 90,
"hoverMs": 160,
"overlayInMs": 240
},
"validation": {
"debounceMs": 300,
"blurFeedbackMs": 100
},
"a11y": {
"focusRing": { "width": 2, "offset": 2 },
"contrastAA": true
}
}

προεπιλογές CSS

css
.form { display:grid; gap:12px; }
.form__group { display:grid; gap:20px; }
label { font-size:14px; }
.input { height:44px; padding:0 12px; border-radius:10px; }
.input:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.field-error { color: var(--role-danger); font-size:.875rem; margin-top:6px; }

17) Μετρήσεις και πειράματα

Ποσοστό ολοκλήρωσης, χρόνος ολοκλήρωσης, ποσοστό σφάλματος ανά πεδίο.
Ποσοστό επιτυχίας Retry, ποσοστό των μορφών που ρίχτηκαν, βάθος βήματος.
CTR των υποδείξεων/παραδειγμάτων, αναλογία των αυτοκόλλητων.
A/B: σειρά πεδίου, προκαθορισμένα ποσά, κείμενα σφαλμάτων, διαίρεση σε βήματα.

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

Σημασία και ροή

• Τα πεδία αντιστοιχούν στον στόχο. όχι επιπλέον.
• Οι ομάδες είναι λογικές. το πολύ 6 πεδία ανά ομάδα.

Είσοδος

• Διορθώστε τον «τύπο/inputmode/αυτόματο συμπλήρωμα».
• Οι μάσκες είναι μαλακές, το ένθετο δεν σπάει, η φροντίδα είναι προβλέψιμη.

Επικύρωση

• Βοηθός πριν από την είσοδο. σφάλματα σε θολερότητα/υποβολή· debouns 250-400 ms.
• Συνοπτική ομάδα για πολλαπλά σφάλματα. εστίαση στην πρώτη.

Διαθεσιμότητα

• Οι ετικέτες είναι συνδεδεμένες. αντίθεση ≥ ΑΑ· ': ορατή εστίαση'
• Πλοήγηση πληκτρολογίου. ραδιοφωνικές ομάδες με "fieldset/legen .

Απόδοση

• Πρώτη απάντηση ≤ 100 ms. όχι «κρεμάστρες».
• Δεν υπάρχει CLS· Οι μεγάλοι κατάλογοι είναι εικονικοί.

Τίτλος

• Δεν υπάρχουν ευαίσθητα αρχεία καταγραφής πεδίων· Το PAN/CVC δεν βρίσκεται σε αυτοσαύρωση.
• Περιλαμβάνονται η ευελιξία και οι ασφαλείς υποχωρήσεις.

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

Στοιχήματα: ποσοτικό πεδίο + προκαθορισμένα, στιγμιαία «απασχολημένα», αισιόδοξη επιβεβαίωση με δυνατότητα αναίρεσης (εάν το επιτρέπουν οι κανονισμοί).

Πληρωμές/αναλήψεις: ρητά τέλη και προθεσμίες κοντά σε πεδία, όχι μόνο σε φιλοδωρήματα· Όρια ελέγχου και κατάσταση KYC

Τουρνουά: μια μορφή εγγραφής με ένα ελάχιστο σύνολο δεδομένων, κανόνων και συμφωνημένων κουτιών ελέγχου χωρίς «σκοτεινά μοτίβα».
Υπεύθυνο παιχνίδι: μορφές καθορισμού ορίων σε σαφή χρονικά διαστήματα και προεπισκόπηση του αποτελέσματος («Το ημερήσιο όριο σας θα είναι 2.000 ευρώ από αύριο»).

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

Μια καλή μορφή είναι ένας σαφής στόχος, ένα ελάχιστο σύνολο πεδίων, σαφείς κανόνες πριν από ένα σφάλμα, άμεση απόκριση και αποθηκευμένα δεδομένα. Σχεδιάστε τη δομή από το αλφάβητο, σεβαστείτε την προσβασιμότητα και τις τοποθεσίες, συμπεριλαμβάνετε ασφαλείς ρετιρέ και ταυτότητα. Έτσι αισθάνονται οι μορφές γρήγορες και αξιόπιστες - ιδίως σε κρίσιμα σενάρια iGaming.