Projektowanie formularzy UX
1) Zasady
1. Najpierw zadanie, potem pola. Formularze są kontynuacją skryptu użytkownika, a nie listą baz danych.
2. Jeden ekran to jeden cel. Usuń wszystko, co nie wykonuje zadania.
3. Nigdy nie trać danych. Autosave, przywróć projekt, bezpieczne powtórki.
4. Pokaż "jak to zrobić. "Zasady i przykłady błędów przed wystąpieniem błędu; starannie zatwierdzać.
5. Domyślna dostępność. Etykiety, skupienie, kontrast, nawigacja klawiatura.
6. Przewidywalna prędkość. Pierwsza odpowiedź ≤ 100 ms, wysyłając z wyraźnym statusem i postępem.
2) Architektura formy informacji
Cel → kroki → pola. Zacznij od wyniku (na przykład „wypłata”) i wybierz minimalny zestaw pól.
Grupowanie według znaczenia: "Dane osobowe", "Płatność", "Potwierdzenie. "Każda grupa ≤ 6 pól.
Progresywne ujawnianie: pokaż dodatkowe pola według stanu (wybór przełącznika/kraju).
Kolejność pól jest jak w głowie użytkownika: od znanego do kompleksu.
3) Układ i siatka
Jedna kolumna dla telefonów komórkowych i większości zadań jest szybsza w wygląd i kolejność kart.
Dwie kolumny są odpowiednie dla krótkich połączonych pól (data/godzina, nazwa/nazwisko).
Wysokość linii wynosi 40-48 px, odległość między polami wynosi 8-12 px (powiązane )/16-24 px (grupy).
Ustawienie etykiety w górnej części pola; po prawej - nie używać do wąskich formularzy.
4) Etykiety, pośrednicy, pomocnicy
Etykieta jest obowiązkowa. Pośrednik jest przykładem, a nie wymianą.
Umieść tekst pomocnika w polu: zasady, format, odniesienie do przykładu.
Opcjonalne pola obejmują „(opcjonalne)” zamiast „” na wymaganych polach.
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) Kroki i postępy
Formularze wieloetapowe (ASC/Payouts): 3-5 kroków, jasny postęp „Krok 2 z 4”.
Zapisz wykonane kroki; Umożliwia powrót bez utraty danych.
Przyciski nawigacji: „Back”, „Next”, finał „Confirm” - zawsze w jednym miejscu.
6) Kontrola wejściowa
Klawiatury i atrybuty: 'type', 'inputmode', 'autocomplete' dla typu danych.
Miękko używać masek wejściowych (telefon, IBAN, PAN, data), przechowywać znormalizowane wartości.
Nie łamać autocomplete: correct 'autocomplete =' given-name '|' cc-number '|' one-time-code 'itp.
Ustawienia wstępne/skróty: „+ 50/+ 100/All” obok pola kwot.
7) Walidacja i błędy
Strategia: przed wejściem (pomocnik), podczas (miękkie wiersze), po (na rozmycie/przesłanie).
Asynchroniczne kontrole (wyjątkowość logowania, limity, ryzyko) - z obciążeniem 250-400 ms.
Tekst błędu: spowodować → jak naprawić → alternatywa.
Panel podsumowania powyżej formularza dla kilku błędów + skupić się na pierwszym błędzie.
Idempotency-Key dla działań krytycznych (oferta/płatność) i bezpiecznych przekładów.
8) Przyciski i zgłoszenie
Podstawowa CTA jest podświetlona w kolorze/rozmiarze, dostępna przez Enter.
'Zajęty' i kliknij ponownie blok; z opóźnieniem> 3-5 s - „Czekanie na potwierdzenie”....
Po sukcesie - wyraźny status (toast/gotowy ekran) + co dzieje się dalej.
9) Dostępność (A11y)
Poprawne linki 'label → input', błędy przez 'aria-described by', critical - 'role =' alert '.
Visible ': focus-visible', Order tab odpowiada visual.
Kontrast tekstu/ikony ≥ AA; znaczenie to nie tylko kolor.
Obsługa „woli zredukowany ruch”: minimalne animacje.
Dla grup przycisków radiowych - 'field dset/legend', dla prompts - 'role =' status '.
10) Lokalizacja i formaty międzynarodowe
Daty/waluty/numery - lokalne przy wejściu, przechowywanie - ISO/jednostki niewielkie.
Zezwala na różne alfabety w nazwach/adresach; nie ograniczają hiphenów/apostrofów.
Trzymaj telefon w E.164; kraj wybrany wprost lub z '+ CC' przy wstawianiu.
11) Wydajność i stabilność
Pierwsza odpowiedź wzrokowa ≤ 100 ms; asynchroniczne kontrole - nie blokuj ekranu.
Szkielet zamiast „wiszącego” spinnera, naprawić wysokości, unikać CLS.
Wirtualizacja długich list (np. kraje/banki).
Animować tylko „przekształcić/nieprzezroczystość”, nie masowe rozmycie/cienie.
12) Bezpieczeństwo i prywatność
Nie loguj PAN/CVC/paszportu; nie wysyłać do RUM/konsoli.
Maska wrażliwe pola, nie zapisywać ich w autosave.
Nie ujawniaj, czy konto istnieje: „Jeśli e-mail jest zarejestrowany, wyślemy e-mail”.
Przechowywanie - minimum wymagane; pokaż dlaczego KYC jest wymagane.
13) Typowe wzory scenariuszy
13. 1 Płatność/depozyt
Pole kwoty z ustawieniami wstępnymi, waluta wyraźnie określona.
PAN z miękką maską, Luhn sprawdzić; CVC jest ukryte; data 'MM/YY' z auto- '/'.
Tekst o prowizjach/terminach w pobliżu, nie w podpowiedzi.
13. 2 Wycofanie
Kroki Kwota → Metoda → Potwierdzenie
Postęp i „Zwykle do N minut/godziny” (bez twardych obietnic).
warianty metody według krajów; ograniczyć ostrzeżenia.
13. 3 KYC
Ładowarka plików krok po kroku: format/wymagania wagi, podgląd, prywatność.
Sprawdź daty i kanał statusu (poczta/powiadomienie).
13. 4 Granice i odpowiedzialna gra
Wyczyść jednostki (dzień/tydzień/miesiąc), wstępne ustawienia, potwierdzenie zmian, „wejdzie w życie w”....
14) Antypattery
Odtwórca zamiast etykiety.
Błędy „na znak” bez debunkingu.
Resetuje formularz na błędzie.
Instrukcja krytyczna jest ukryta tylko w końcówce narzędzi.
Maski twarde zabraniające prawidłowych znaków/wstawiania.
Zablokuj całą stronę, aby zatwierdzić jedno pole.
Wyślij bez wyraźnego zajęcia/postępu.
15) Snippety wdrożeniowe
Podsumowanie błędów + skupienie się na pierwszej emisji
js function focusFirstError() {
const el = document. querySelector('[aria-invalid="true"]');
if (el) el. focus({ preventScroll:false });
}Przycisk z natychmiastowym zajęciem i idempotencją
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');
}
});Ramy HTML dostępnej grupy przycisków radiowych
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) Żetony systemu projektowania (przykład)
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
}
}Ustawienia wstępne 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) Metryki i eksperymenty
Wskaźnik ukończenia, czas do końca, wskaźnik błędów według pola.
Retry Success Rate, odsetek rzuconych form, głębokość kroku.
CTR wskazówek/przykładów, odsetek autokompletów.
A/B: polecenie pola, ustawienia wstępne kwoty, teksty błędów, podział na kroki.
18) Lista kontrolna QA
Znaczenie i przepływ
- Pola odpowiadają celowi; żadnych dodatkowych.
- Grupy są logiczne; maksymalnie 6 pól na grupę.
Dane wejściowe
- Poprawne 'typ/moda inputmode/autocomplete'.
- Maski są miękkie, wkładka nie łamie się, caret jest przewidywalny.
Walidacja
- Pomocnik przed wejściem; błędy dotyczące zacierania/zgłaszania; debili 250-400 ms.
- Panel podsumowujący dla wielu błędów; Skup się na pierwszym.
Dostępność
- Etykiety są powiązane; kontrast ≥ AA; „: widoczne w ostrości”.
- Nawigacja klawiatura; grupy radiowe z „field dset/legend”.
Wydajność
- Pierwsza odpowiedź ≤ 100 ms; żadnych „wiszących” spinnerów.
- Brak CLS; długie listy są wirtualizowane.
Bezpieczeństwo
- Brak delikatnych dzienników pola; PAN/CVC nie jest w autosave.
- Uwzględniono idempotencję i bezpieczne rekolekcje.
19) Specyfika iGaming
Zakłady: pole kwoty + ustawienia wstępne, natychmiastowe „zajęte”, optymistyczne potwierdzenie z możliwością cofnięcia (jeśli pozwalają na to przepisy).
Płatności/wypłaty: wyraźne opłaty i terminy w pobliżu pól, nie tylko w poradach; Sprawdź limity i status KYC
Turnieje: forma rejestracji z minimalnym zestawem danych, zasad i uzgodnionych skrzynek kontrolnych bez „ciemnych wzorów”.
Odpowiedzialna gra: formy ustalania limitów w jasnych odstępach czasu i podglądu wyniku („Twój dzienny limit będzie wynosił 2000 ° od jutra”).
Krótkie podsumowanie
Dobra forma to jasny cel, minimalny zestaw pól, jasne zasady przed błędem, natychmiastowa odpowiedź i zapisane dane. Zaprojektuj strukturę ze skryptu, szanuj dostępność i lokalizacje, obejmują bezpieczne przekaźniki i idempotencję. W ten sposób formy czują się szybkie i zaufane - zwłaszcza w krytycznych scenariuszach iGaming.