Web Guide폼 디자인입력 폼라벨
폼 UI 디자인: 라벨, 플레이스홀더, 오류 메시지
문의 폼은 홈페이지에서 돈이 만들어지는 유일한 화면입니다.
여기서 막히면 앞의 모든 노력이 무의미해집니다. 작은 설계 차이가 완료율을 크게 바꿉니다.
01라벨은 밖에 둔다
입력칸 안에 회색 글씨로 항목명을 쓰는 방식이 깔끔해 보이지만, 입력을 시작하면 그 글씨가 사라집니다. 무엇을 쓰고 있었는지 확인할 수 없게 됩니다.
항목이 많을수록 문제가 커집니다. 라벨은 입력칸 위에 두는 것이 원칙입니다.
플레이스홀더를 라벨로 사용
깔끔해 보임 · 입력 시작하면 사라짐 · 검토할 때 무슨 칸인지 모름 · 스크린리더가 못 읽음 · 오류 수정이 어려움
라벨을 밖에 배치
항상 보임 · 검토 가능 · 접근성 확보 · 플레이스홀더는 입력 예시로 활용
02플레이스홀더는 예시로 쓴다
플레이스홀더의 제대로 된 용도는 입력 형식을 알려주는 것입니다. '010-1234-5678'처럼 예시를 보여주면 입력 오류가 줄어듭니다.
라벨 대신 쓰는 것이 아니라, 라벨과 함께 보조적으로 쓰는 것입니다.
연락처
예: 010-1234-5678. 하이픈 포함 여부를 알려줍니다.
이메일
예: name@company.com
사업자번호
예: 123-45-67890
자유 입력
'문의 내용을 자세히 적어 주세요' 같은 안내.
선택 입력
'(선택)'을 라벨에 표기. 플레이스홀더에 넣지 않습니다.
03오류는 그 자리에서 알려준다
제출 버튼을 누른 뒤에야 '이메일 형식이 잘못됐습니다'가 나오면, 방문자는 위로 올라가 찾아야 합니다. 항목이 많으면 짜증이 납니다.
입력을 마치고 다음 칸으로 넘어갈 때 바로 확인해 주는 편이 낫습니다.
실시간 검증칸을 벗어날 때 확인합니다. 입력 중에 계속 경고하면 방해가 됩니다.
해당 칸 아래 표시오류 메시지를 그 칸 바로 아래에 둡니다.
색만으로 표시하지 않기빨간 테두리만으로는 색 구분이 어려운 사람이 알 수 없습니다.
제출 시 첫 오류로 이동오류가 있으면 그 위치로 화면을 옮깁니다.
입력값 유지오류가 나도 입력한 내용이 사라지지 않게 합니다.
04제출 후 무슨 일이 생기는지 알린다
제출 버튼을 눌렀는데 아무 반응이 없으면 방문자는 다시 누릅니다. 중복 접수가 생기고, 접수됐는지도 알 수 없습니다.
처리 중 표시, 완료 안내, 다음 절차 설명이 모두 필요합니다.
STEP 01
제출
버튼 비활성화
STEP 02
처리 중
표시 변경
STEP 03
완료 안내
접수 확인
STEP 04
다음 절차
언제 회신되는지
CHECK POINT
□ 라벨이 입력칸 밖에 있는가
□ 플레이스홀더를 라벨 대신 쓰지 않았는가
□ 필수 항목이 글자로도 표시되어 있는가
□ 오류를 해당 칸 아래에 표시하는가
□ 색만으로 오류를 표시하지 않는가
□ 오류가 나도 입력값이 유지되는가
□ 제출 후 처리 중 표시가 있는가
□ 완료 화면에 다음 절차가 안내되어 있는가
#폼 디자인#입력 폼#라벨#플레이스홀더#오류 메시지#접근성#전환율#홈페이지 디자인#웹비스타#홈페이지 제작