UX 양식 설계
1) 원칙
1. 먼저 작업, 필드. 양식은 데이터베이스 목록이 아닌 사용자 스크립트의 연속입니다.
2. 하나의 화면은 하나의 목표입니다 작업을 완료하지 않은 항목을 제거하십시오.
3. 데이터를 잃지 마십시오 초안 복원, 안전한 재생.
4. "방법을 보여주십시오. "사전 오류 규칙 및 예; 조심스럽게 검증하십시오.
5. 기본 가용성. 레이블, 초점, 대비, 키보드 탐색.
6. 예측 가능한 속도. 첫 번째 응답은 100 ms이며 명시적인 상태와 진행 상황을 보냅니다.
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/Payouts): 3-5 단계, 명확한 진행 상황 "2 단계 중 4 단계".
완료된 단계를 저장하십 데이터 손실없이 반품 할 수 있습니다.
내비게이션 버튼: "뒤로", "다음", 마지막 "확인" -항상 한 곳에 있습니다.
6) 입력 제어
키보드 및 속성: 데이터 유형에 대한 '유형', '입력 모드', '자동 완료'.
정규화 된 값을 저장하는 입력 마스크 (전화, IBAN, PAN, 날짜) 를 부드럽게 사용하십시오.
자동 완성을 끊지 마십시오: 올바른 'autocomplete = "주어진 이름" | "cc 번호" | "일회성 코드"' 등
금액 사전 설정/바로 가기: 금액 필드 옆에 "+ 50/+ 100/All".
속성 테이블 (abbr.):7) 검증 및 오류
전략: 입력 전 (도우미), (소프트 프롬프트), 이후 (흐림/제출 중)
250-400ms의 직불 체크 (로그인의 고유성, 한계, 위험).
오류 텍스트: 원인 → 대안을 수정하는 방법.
첫 번째 오류에 대한 몇 가지 오류 + 초점에 대한 양식 위의 요약 패널.
중요한 행동 (입찰/지불) 및 보안 배상을위한 Idempotency-Key.
8) 단추 및 제출
기본 CTA는 Enter에서 사용할 수있는 색상/크기로 강조 표시됩니다.
'바쁜' 상태 및 클릭 재 시도 블록; 지연시> 3-5 초- "확인을 기다리는 중"...
성공 후-명시 적 상태 (토스트/준비된 화면) + 다음에 일어날 일.
9) 가용성 (A11y)
정확한 링크 '레이블 → 입력', 'aria-describedby' 를 통한 오류, 중요- 'role = "경고"'.
보이는 ': 초점 표시', 탭 순서는 비주얼에 해당합니다.
텍스트/아이콘 대비 AA; 의미는 단순한 색상이 아닙니다.
'선호 감소 모션' 지원: 최소 애니메이션.
라디오 버튼 그룹의 경우 'fieldset/legend', 프롬프트- 'role = "state"'.
10) 현지화 및 국제 형식
날짜/통화/번호-입장시 로컬, 스토리지-ISO/마이너 장치.
이름/주소로 다른 알파벳을 허용합니다. 하이픈/아포스트로피를 제한하지 마십시오.
전화를 E.164에 보관하십시오. 삽입시 명시 적으로 또는 '+ CC' 에서 선택한 국가.
11) 성능과 안정성
첫 번째 시각적 반응은 100 ms입니다. 비동기 검사-화면을 잠그지 마십시오.
"매달린" 스피너 대신 골격을 고정하고 CLS를 피하십시오.
긴 목록을 가상화하십시오 (예: 국가/은행).
벌크 블러/섀도우가없는 '변환/불투명도' 만 애니메이션합니다.
12) 보안 및 개인 정보 보호
PAN/CVC/여권을 기록하지 마십시오. RUM/콘솔로 보내지 마십시오.
마스크에 민감한 필드는 자동 저장하지 마십시오.
계정이 존재하는지 여부를 공개하지 마십시오. "이메일이 등록되면 이메일을 보냅니다".
저장 - 최소 필요; KYC가 필요한 이유를 보여줍니다.
13) 전형적인 시나리오 패턴
13. 1 지불/보증금
사전 설정이있는 아마운트 필드, 통화가 명시 적으로 지정
소프트 마스크가 달린 PAN, Luhn 확인; CVC는 숨겨져 있습니다. 날짜 'MM/YY' 자동- '/'.
툴팁이 아닌 근처의 커미션/마감일에 대한 텍스트.
13. 2 철수
단계 → 방법 → 확인
진행 및 "일반적으로 최대 N 분/시간" (어려운 약속 없음).
국가 별 방법 변형; 경고를 제한합니다.
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');
}
});사용 가능한 무선 버튼 그룹의 <> HTM 프레임 워크
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) 측정 및 실험
필드 별 완료 속도, 완료 시간, 오류 속도.
성공률, 던져진 양식의 비율, 단계 깊이.
힌트/예의 CTR, 자동 완성 비율.
A/B: 현장 순서, 양의 사전 설정, 오류 텍스트, 단계로 나눕니다.
18) QA 체크리스트
의미와 흐름
- 필드는 대상에 해당합니다. 여분의.
- 그룹은 논리적입니다. 그룹 당 최대 6 개의 필드.
입력
- 수정 '유형/입력 모드/자동 완료'.
- 마스크가 부드럽고 인서트가 끊어지지 않으며 캐럿이 예측 가능합니다.
검증
- 입력 전에 도우미; 흐림/제출에 대한 오류; 250-400ms를 떨어 뜨립니다.
- 여러 오류에 대한 요약 패널; 첫 번째에 집중하십시오.
가용성
- 라벨이 연결되어 있습니다. 대비 AA; ': 초점이 보이는' 보이는.
- 키보드 탐색; 'fieldset/legend' 가있는 라디오 그룹.
성능
- 첫 번째 응답은 100 ms입니다. "매달린" 스피너가 없습니다.
- CLS 없음; 긴 목록은 가상화됩니다.
보안
- 민감한 필드 로그가 없습니다. PAN/CVC는 자동 제공되지 않습니다.
- 이념과 안전한 퇴각이 포함되어 있습니다.
19) iGaming의 세부 사항
베팅: 양 필드 + 사전 설정, 즉각적인 '바쁜', 실행 취소 가능성에 대한 낙관적 확인 (규정이 허용하는 경우).
지불/인출: 팁뿐만 아니라 필드 근처의 명시 적 수수료 및 마감일; 한계 및 KYC 상태 확인
토너먼트: "어두운 패턴" 이없는 최소 데이터 세트, 규칙 및 합의 된 체크 박스가있는 등록 양식.
책임있는 게임: 명확한 간격으로 한계를 설정하고 결과를 미리 보는 형태 ("일일 한도는 내일부터 2,000 CD입니다").
간략한 요약
좋은 형태는 명확한 목표, 최소한의 필드 세트, 오류 이전의 명확한 규칙, 즉각적인 응답 및 저장된 데이터입니다. 스크립트의 구조를 설계하고 접근성 및 로케일을 존중하며 안전한 배상과 demmpotence를 포함합니다. 이것이 특히 중요한 iGaming 시나리오에서 형태가 빠르고 신뢰할 수있는 방식입니다.