Web Guide모바일 폼입력 편의폼 최적화
모바일 폼 입력 경험 개선
휴대폰으로 긴 폼을 채우는 것은 생각보다 고통스러운 일입니다.
PC에서 1분이면 끝나는 폼이 모바일에서는 5분이 걸리고, 그 사이에 이탈합니다.
01키보드 타입을 지정한다
전화번호 칸에서 문자 키보드가 뜨면 숫자로 전환하는 동작이 한 번 더 필요합니다. 항목마다 적절한 키보드가 뜨게 지정하면 이 수고가 사라집니다.
설정이 어렵지 않은데 빠뜨리는 경우가 많습니다.
전화번호
숫자 키패드. 하이픈 입력 여부도 정해 둡니다.
이메일
@ 기호가 바로 보이는 키보드.
숫자
수량, 금액 등. 숫자 키패드.
우편번호
숫자 키패드.
일반 텍스트
기본 키보드. 한글 입력이 기본이 되게.
URL
.com 같은 입력이 쉬운 키보드.
02입력을 대신해 준다
타이핑을 줄이는 것이 핵심입니다. 브라우저가 저장한 정보를 쓸 수 있게 하고, 선택지로 대체할 수 있는 것은 선택지로 만듭니다.
주소처럼 긴 입력은 검색 기능으로 대체하면 훨씬 빠릅니다.
자동완성 허용브라우저가 저장한 이름·연락처를 쓸 수 있게 속성을 지정합니다.
주소 검색직접 타이핑하지 않고 검색해서 고르게 합니다.
선택지로 대체자유 입력 대신 버튼이나 목록에서 고르게 합니다.
날짜 선택기날짜를 직접 쓰게 하지 않습니다.
자동 포맷전화번호에 하이픈을 자동으로 넣습니다.
이전 입력 기억여러 단계 폼에서 앞 단계 값을 유지합니다.
03화면 가림 문제
모바일에서 입력칸을 누르면 키보드가 올라와 화면의 절반을 가립니다. 입력 중인 칸이 키보드에 가려지면 무엇을 쓰는지 안 보입니다.
또 제출 버튼이 키보드에 가려 누를 수 없는 경우도 있습니다.
점검 항목
입력칸 자동 스크롤
키보드가 올라오면 입력 중인 칸이 보이게 화면을 올립니다.
제출 버튼 위치
키보드에 가리지 않게 합니다. 폼 하단에 충분한 여백을.
오류 메시지
키보드에 가려지지 않는 위치에 표시합니다.
실제 기기 확인
PC 브라우저에서는 이 문제가 드러나지 않습니다.
04단계를 나눈다
항목이 많으면 한 화면에 다 넣지 말고 단계로 나누세요. 모바일에서는 스크롤이 길어질수록 부담이 커집니다.
진행 표시가 있으면 끝이 보여 완료율이 올라갑니다.
한 화면에 전부
스크롤이 길어짐 · 끝이 안 보임 · 부담감 · 중간에 포기 · 오류가 나면 어디인지 찾기 어려움
단계로 나눔
한 화면에 2~4개 항목 · 진행 표시로 끝이 보임 · 단계별 검증 · 완료율 상승 · 3단계를 넘기지 않습니다
CHECK POINT
□ 항목마다 적절한 키보드 타입이 지정되어 있는가
□ 브라우저 자동완성이 동작하는가
□ 주소를 검색으로 입력할 수 있는가
□ 자유 입력을 선택지로 대체할 수 있는 항목이 있는가
□ 키보드가 올라와도 입력 중인 칸이 보이는가
□ 제출 버튼이 키보드에 가리지 않는가
□ 항목이 많다면 단계로 나눴는가
□ 실제 휴대폰에서 끝까지 입력해 봤는가
#모바일 폼#입력 편의#폼 최적화#키보드 타입#자동완성#주소 검색#전환율#홈페이지 디자인#웹비스타#홈페이지 제작