UX формаларын долбоорлоо
1) Принциптер
1. Биринчи милдет, андан кийин талаалар. Формалар - колдонуучунун сценарийинин уландысы, DD тизмеси эмес.
2. Бир экран - бир максат. Тапшырманы аягына чыгарбаган нерселердин баарын алып салыңыз.
3. Эч качан маалыматтарды жоготпогула. Autoseive, долбоор калыбына келтирүү, коопсуз кайталоо.
4. Көрсөтүү "туура". ката чейин эрежелер жана мисалдар; кылдаттык менен validayut.
5. демейки жеткиликтүүлүгү. Лейблдер, фокус, контраст, клавиатура багыттоо.
6. Алдын ала ылдамдыгы. Биринчи жооп ≤ 100 мс, ачык статус жана прогресс менен жөнөтүү.
2) Форманын маалыматтык архитектурасы
Максат → кадамдар → талаа. Жыйынтыктан баштаңыз (мисалы, "акча төлөө") жана талаалардын минималдуу топтомун бөлүңүз.
Мааниси боюнча топтоо: "Жеке маалыматтар", "Төлөм", "Ырастоо". Ар бир топ 6 талааны ≤.
Прогрессивдүү ачыкка чыгаруу: Кошумча талааларды шарт боюнча көрсөтүү (toggle/өлкө тандоо).
Талаалардын тартиби - колдонуучунун башындагыдай: таанымалдан татаалдыкка чейин.
3) макети жана тор
мобилдик жана көпчүлүк милдеттери үчүн бир тилке - көз карашы жана таб-тартиби боюнча тезирээк.
Эки тилке кыска өз ара байланышкан талаалар үчүн ылайыктуу (датасы/убактысы, аты/фамилиясы).
Саптын бийиктиги 40-48 px, 8-12 px (байланыштуу )/16-24 px (топтор) ортосундагы аралык.
Талаанын үстүндөгү этикеткаларды тегиздөө; туура - тар формалар үчүн колдонулбайт.
4) Лейблдер, Playsholders, Helpers
Лейбл милдеттүү болуп саналат. Playsholder - үлгү эмес, алмаштыруу.
Helper текстти талаанын астына жайгаштырыңыз: эрежелер, формат, мисал шилтемеси.
Кошумча талаалар "(милдеттүү эмес)" ордуна "" милдеттүү.
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) кадамдар жана прогресс
Көп баскычтуу формалар (КТК/төлөмдөр): 3-5 кадам, ачык прогресс "2-кадам 4".
Аягына чыккан кадамдарды сактаңыз; маалыматтарды жоготпостон кайтып келүүгө уруксат бериңиз.
Навигация баскычтары: "Артка", "Кийинки", акыркы "Ырастоо" - дайыма бир жерде.
6) киргизүү башкаруу
Клавиатуралар жана атрибуттар: 'type', 'inputmode', 'autocomplete' маалыматтардын түрүнө ылайык.
Киргизүү маскалар жумшак колдонуу (тел, IBAN, PAN, датасы), нормалдаштырылган баалуулуктарды сактоо.
autocomplete =" given-name" | "cc-number" | "one-time-code" ж.б.
Суммалар/Шорткаттар: "+ 50/+ 100/Бардыгы" суммалар талаасына жакын.
7) Валидация жана каталар
Стратегия: киргенге чейин (жардам), учурунда (жумшак кеңештер), кийин (blur/submit).
Асинхрондук текшерүүлөр (логиндин уникалдуулугу, лимиттер, тобокелдик) - 250-400 мс дебаунсу менен.
Текст каталар: себеби → туура → альтернатива.
Summary-панелдин бир нече каталар үчүн форманын үстүнөн + биринчи катага басым.
Idempotency-Key үчүн критикалык иш-аракеттер (коюм/төлөм) жана коопсуз retra.
8) Баскычтар жана жөнөтүү
Баштапкы CTA Enter боюнча жеткиликтүү, түсү/өлчөмү менен белгиленген.
'Busy' -кликти кайталоо абалы жана бөгөт коюу; кечигүү менен> 3-5 с - "Биз ырастоо күтүп жатабыз"....
Ийгиликтен кийин - ачык статус (тост/экран "Даяр") + мындан ары эмне болот.
9) Жеткиликтүүлүк (A11y)
Туура байланыштар 'label → input', каталар аркылуу 'aria-describedby', критикалык - 'role =' alert '.
Көрүнгөн ': focus-visible', Tab тартиби визуалдык ылайык келет.
Контраст текст/иконалар ≥ AA; мааниси бир гана түс эмес.
Колдоо 'prefers-reduced-motion': минималдуу анимация.
'fieldset/legend', 'role =' status '.
10) Локализация жана эл аралык форматтар
Даталар/валюталар/номерлер - киргенде жергиликтүү, сактоо - ISO/чакан бирдиктер.
Аттарда/даректерде ар кандай алфавиттерге жол бериңиз; дефис/апострофторду чектебеңиз.
Телефонду E.164 сактаңыз; өлкө ачык же '+ CC' чейин тандалып алынат.
11) Аткаруу жана туруктуулук
Биринчи көрүү жооп ≤ 100ms; асинхрондук текшерүүлөр - экранды бөгөттөбөйт.
Skeleton ордуна "илинип" spinner, бийиктиктерди чечүү CLS качуу.
Узак тизмелерди виртуалдаштыруу (мисалы, өлкөлөр/банктар).
бир гана 'transform/opacity', массалык blur/көлөкөлөр жок жандандыруу.
12) Коопсуздук жана купуялык
PAN/CVC/паспорт жазууга болбойт; RUM/консолго жибербеңиз.
Сезгич талааларды жаап, аларды унаа сактоого болбойт.
Эсеп бар же жок экенин ачыкка чыгарбаңыз: "Эгер электрондук почта катталса, биз кат жөнөтөбүз".
Сактоо - минималдуу зарыл; эмне үчүн KYC керек экенин көрсөтүңүз.
13) Типтүү сценарийлер боюнча үлгүлөр
13. 1 Төлөм/депозит
Преференциялар менен сумманын талаасы, валюта так көрсөтүлгөн.
жумшак маска менен PAN, Luhn-текшерүү; CVC жашыруун; датасы 'MM/YY' менен auto- '/'.
Кийинки комиссиялар/мөөнөттөр жөнүндө текст, tooltip эмес.
13. 2 Акча каражаттарын чыгаруу
Кадамдар: "Сумма → Ыкма → Ырастоо".
Прогресс жана "Адатта N мүнөт/саат" (катуу убада жок).
Өлкө боюнча ыкманын варианттары; лимиттер жөнүндө эскертүүлөр.
13. 3 KYC
Кадам-кадам файлдарды жүктөгүч: формат/салмак талаптары, алдын ала кароо, купуялык.
Текшерүү мөөнөтү жана статус каналы (почта/билдирүү).
13. 4 Лимиттер жана жоопкерчиликтүү оюн
Түшүнүктүү бирдиктер (күн/жума/ай), алдын ала түзүлүштөр, өзгөртүүлөрдү ырастоо, "аркылуу күчүнө кирет"....
14) Антипаттерндер
Placeholder ордуна лейбл.
Каталар "ар бир белгиге" дебаунсуз.
Ката болгондо форманы кайра жүктөө.
Критикалык көрсөтмө гана tooltip катылган.
Катуу маскалар валиддик белгилерди/киргизүү тыюу салат.
Бир талааны текшерүү үчүн бүт баракты бөгөттөө.
ачык busy/прогресс жок жөнөтүү.
15) ишке ашыруу Snippets
Каталардын кыскача баяндамасы + биринчи көйгөйгө көңүл буруу
js function focusFirstError() {
const el = document. querySelector('[aria-invalid="true"]');
if (el) el. focus({ preventScroll:false });
}Тез busy жана ыктымалдуулук менен баскычы
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 Presets
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) Метрика жана эксперименттер
Completion Rate, Time-to-Complete, талаалар боюнча Error Rate.
Retry Success Rate, ыргытылган формалардын үлүшү, кадамдын тереңдиги.
CTR учтары/мисалдар, авто толуктоолордун үлүшү.
A/B: талаа тартиби, суммалар, ката тексттер, кадамдарга бөлүү.
18) QA-чек тизмеси
Мааниси жана агымы
- Талаалар максатка туура келет; эч кандай ашыкча.
- Топтор логикалык; топко эң көп дегенде 6 талаа.
Киргизүү
- Туура 'type/inputmode/autocomplete'.
- Жумшак маскалар, киргизүү сынбайт, caret алдын ала айтууга болот.
Валидация
- Helper киргенге чейин; blur/submit каталар; дебаунс 250-400 ms.
- Summary-Panel бир нече каталар үчүн; биринчисине көңүл бурат.
Жеткиликтүүлүк
- Лейблдер байланыштуу; контраст ≥ AA; ': focus-visible' көрүнүп турат.
- Клавиатура менен багыттоо; менен радио топтор 'fieldset/legend'.
Аткаруу
- Биринчи жооп ≤ 100 мс; "илинип турган" спиннерлер жок.
- Жок CLS; узун тизмелер виртуалдаштырылган.
Коопсуздук
- эч кандай сезгич талаалар; PAN/CVC унаа сактагычта эмес.
- Idempotentity жана коопсуз Retray кирет.
19) iGaming өзгөчөлүктөрү
Коюмдар: сумма талаасы + presets, заматта 'busy', undo мүмкүнчүлүгү менен оптимисттик ырастоо (эгерде регламент жол берсе).
Тёлёмдёр/корутундулар: ачык тёлёмдёр жана тёлёмдёрдън жанындагы мёёнёттёр гана эмес; чектөөлөрдү жана KYC статусун текшерүү.
Турнирлер: маалыматтардын минималдуу топтому менен каттоо формасы, эрежелер жана "кара үлгүлөрсүз" макулдашылган чекбокстар.
Жоопкерчиликтүү оюн: түшүнүктүү интервалдар жана жыйынтыкты алдын ала көрсөтүү менен лимиттерди белгилөө формалары ("Сиздин күндүк лимитиңиз эртеңден баштап 2 000 болот").
Кыскача резюме
Жакшы форма - бул так максат, талаалардын минималдуу жыйындысы, катага чейин түшүнүктүү эрежелер, дароо жооп жана сакталган маалыматтар. Сценарийден структураны долбоорлоо, жеткиликтүүлүктү жана жергиликтүү жерлерди сыйлоо, коопсуз ретрацияны жана демпотенттикти киргизүү. Ошентип, формалар тез жана ишенимдүү сезилет - өзгөчө iGaming сценарийлеринде.