UX пішінін жобалау
1) Қағидаттар
1. Алдымен тапсырма, содан кейін өрістер. Пішіндер - ДҚ тізімі емес, пайдаланушылық сценарийдің жалғасы.
2. Бір экран - бір мақсат. Тапсырманы аяқтамайтындардың бәрін жойыңыз.
3. Деректерді ешқашан жоғалтпаңыз. Автосервис, жоба жобасын қалпына келтіру, қауіпсіз қайталау.
4. «Қалай дұрыс» екенін көрсетіңіз. Қатеге дейінгі ережелер мен мысалдар; мұқият валидациялаңыз.
5. Әдепкі қол жетімділік. Лейблдер, фокус, контраст, клавиатуралық навигация.
6. Болжамды жылдамдық. Бірінші жауап ≤ 100 мс, анық мәртебесі мен ілгерілеуімен жөнелту.
2) Пішіннің ақпараттық сәулеті
Мақсат → қадамдар → өрістер. Нәтижеден бастаңыз (мысалы, «қаражат төлеу») және өрістердің ең аз жиынын таңдаңыз.
Мәні бойынша топтау: «Жеке деректер», «Төлем», «Растау». Әрбір топ 6 өрісті ≤.
Прогрессивті ашу: қосымша өрістерді шарт бойынша көрсетіңіз (toggle/ел таңдауы).
Өрістердің тәртібі - пайдаланушының басындағы сияқты: белгіден күрделіге.
3) Орналасу және тор
Мобильдік және көптеген тапсырмалар үшін бір баған - көрінісі мен таб-тәртібі бойынша жылдам.
Екі баған өзара байланысты қысқа жолақтар үшін орынды (күні/уақыты, аты/тегі).
40-48 px жолының биіктігі, 8-12 px (байланысты )/16-24 px (топтар) жолдарының арасындағы қашықтық.
Лейблдерді өрістің үстінен түзету; оң жақта - тар пішіндер үшін пайдалануға болмайды.
4) Лейблдер, плейсхольдерлер, хелперлер
Лейбл міндетті. Плейсхолдер - алмастыру емес, үлгі.
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 қадам, айқын прогресс «4 қадамнан 2 қадам».
Аяқталған қадамдарды сақтаңыз; деректерді жоғалтпай қайтуға рұқсат етіңіз.
Навигация түймелері: «Артқа», «Келесі», соңғы «Растау» - әрқашан бір орында.
6) Кірісті басқару
Пернетақталар мен төлсипаттар: 'type', 'inputmode', 'autocomplete' деректер түріне арналған.
Енгізу бетпердесін жұмсақ қолданыңыз (телефон, IBAN, PAN, күні), қалыпты мәндерді сақтаңыз.
Автотолтыруды бұзбаңыз: 'autocomplete =' given-name '| «cc-number» | «one-time-code»' және т.б.
Сома пресеттері/шорткаттар: сома жолының жанындағы «+ 50/+ 100/Барлығы».
7) Валидация және қателер
Стратегия: енгізгенге дейін (helper), кезінде (жұмсақ кеңестер), кейін (blur/submit).
Асинхронды тексерулер (логиннің бірегейлігі, лимиттер, тәуекел) - 250-400 мс.
Қате мәтіні: себебі → қалай түзетуге болады → балама.
Бірнеше қателер үшін пішіннің үстіндегі Summary панелі + бірінші қатеге назар аударыңыз.
Сыни әрекеттер үшін Idempotency-Key (мөлшерлеме/төлем) және қауіпсіз ретра.
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) Перформанс және тұрақтылық
Бірінші визуалды жауап беру ≤ 100 мс; асинхрондық тексерулер - экранды бұғаттамайды.
Skeleton «аспалы» спиннердің орнына биіктікті белгілеңіз, CLS-тен аулақ болыңыз.
Ұзын тізімдерді виртуалдандырыңыз (мысалы, елдер/банктер).
Тек 'transform/opacity' анимациясын, жаппай blur/көлеңкелерсіз.
12) Қауіпсіздік және құпиялылық
PAN/CVC/төлқұжат жазбаңыз; RUM/консольге жібермеңіз.
Сезімтал өрістерді жасырып, оларды автосейвте сақтамаңыз.
«Егер email тіркелсе, біз хат жібереміз» аккаунтының бар-жоғын ашпаңыз.
Сақтау - ең аз қажетті; KYC не үшін қажет екенін көрсетіңіз.
13) Үлгілік сценарийлер бойынша паттерндер
13. 1 Төлем/депозит
Соманың пресеттері бар жолы, валюта анық көрсетілген.
жұмсақ бетпердесі бар PAN, Luhn-тексеру; CVC жасырын; күні 'MM/YY' авто- '/'.
Қатар тұрған комиссиялар/мерзімдер туралы мәтін tooltip бағдарламасында емес.
13. 2 Қаражатты шығару
Қадамдар: «Сомасы → Әдісі → Растау».
Прогресс және «Әдетте N минут/сағатқа дейін» (қатаң уәдесіз).
Ел бойынша әдістің нұсқалары; лимиттер туралы ескертулер.
13. 3 KYC
Файлдарды қадамдық жүктеуші: пішімге/салмаққа қойылатын талаптар, алдын ала қарау, жекелік.
Тексеру мерзімі және мәртебе арнасы (пошта/хабарлама).
13. 4 Лимиттер және жауапты ойын
Түсінікті бірліктер (күні/аптасы/айы), алдын ала құрылымдар, өзгерістерді растау, «Арқылы күшіне енеді»....
14) Антипаттерндер
Лейбл орнына Placeholder.
Әрбір таңбаға "қателері дебаунсыз.
Қате кезінде пішінді ысыру.
Сыни нұсқаулық тек tooltip ішінде жасырылған.
Валидті символдарды қоюға тыйым салатын қатты бетперде.
Бір өрісті тексеру үшін бүкіл бетті құрсаулау.
Анық busy/прогрессіз жіберу.
15) Сату сниппеттері
Қателер жиынтығы + бірінші проблемаға назар аудару
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 пресеттері
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'.
- Маскалар жұмсақ, ендірме сынбайды, болжауға болады.
Валидация
- Helper енгізгенге дейін; blur/submit қателері; дебаунс 250-400 мс.
- Көптеген қателер үшін Summary панелі; біріншіге назар аударыңыз.
Қол жетімділік
- Лейблдер байланған; ≥ AA; ': focus-visible' қарама-қарсылығы көрінеді.
- Пернетақта навигациясы; с 'fieldset/legend'.
Көрініс
- Бірінші жауап ≤ 100 мс; «аспалы» спиннерлер жоқ.
- Жоқ CLS; ұзын тізімдер виртуалдандырылған.
Қауіпсіздік
- Сезімтал өрістер жоқ; PAN/CVC автосейвте жоқ.
- Теңсіздік және қауіпсіз ретрациялар қосылған.
19) iGaming ерекшелігі
Ставкалар: сома өрісі + пресеттер, жедел 'busy', undo мүмкіндігімен оптимистік растау (егер регламент рұқсат берсе).
Төлемдер/қорытындылар: анық комиссиялар және жолдардың жанындағы мерзімдер, тек кеңестер ғана емес; KYC лимиттері мен мәртебесін тексеру.
Турнирлер: ең аз деректер жинағы бар тіркеу нысаны, ереже және «қара паттерндерсіз» келісілетін чек бокстары.
Жауапты ойын: түсінікті аралықтармен және нәтиженің алдын ала көрсетілуімен лимиттерді белгілеу нысандары («Сіздің күндік лимитіңіз ертеңнен бастап 2 000 болады»).
Қысқаша түйіндеме
Жақсы пішін - бұл айқын мақсат, ең аз өрістер жиынтығы, қатеге дейін түсінікті ережелер, жылдам жауап беру және сақталған деректер. Сценарийден құрылымды жобалаңыз, қол жетімділік пен локальдарды құрметтеңіз, қауіпсіз ретрациялар мен іспеттілікті қосыңыз. Формалар тез және сенімді сезіледі - әсіресе iGaming сценарийлерінде.