ImagePlay.
← 목록보기
UI/UX

입력 폼에서 사람들이 떠나는 이유, 이탈을 줄이는 설계

입력 폼에서 사람들이 떠나는 이유, 이탈을 줄이는 설계

회원가입이나 상담 신청 폼에서 사람들이 중간에 떠나는 가장 큰 이유는 입력할 항목이 많고, 무엇을 어떻게 입력해야 하는지 헷갈리기 때문입니다. 꼭 필요한 항목만 남기고, 입력 방법을 분명히 알려 주고, 오류를 친절하게 안내하면 같은 폼이라도 완료율이 크게 달라집니다. 폼은 사용자가 서비스와 처음 약속을 맺는 자리라는 점을 기억하면 좋습니다.

항목은 얼마나 줄여야 하나요?

폼의 항목은 하나 늘어날 때마다 사용자의 부담도 늘어납니다. 지금 당장 꼭 필요한 정보가 무엇인지 다시 따져 보고, 나중에 받아도 되는 정보는 과감히 뺍니다. 예를 들어 상담 신청이라면 이름과 연락처, 문의 내용만으로 충분한 경우가 많습니다. 주소나 생년월일처럼 민감한 정보는 왜 필요한지 설명하지 않으면 사용자가 입력을 망설이게 됩니다.

개선 방법효과
필수 항목만 남기기입력 부담 감소
항목 이름을 위에 표시입력 중에도 무엇인지 보임
입력 예시 제공형식 혼란 감소
실시간 오류 안내제출 후 좌절 감소
단계 나누기긴 폼의 부담 분산

휴대폰 화면에 표시된 간단한 입력 폼

항목 이름은 어디에 두나요?

입력 칸 안에 회색 글씨로 항목 이름을 넣는 방식은 깔끔해 보이지만, 사용자가 입력을 시작하면 글씨가 사라져 무엇을 입력하던 중인지 잊기 쉽습니다. 그래서 항목 이름은 입력 칸 위에 따로 두는 것이 안전합니다. 입력 칸 안의 회색 글씨는 '010-1234-5678'처럼 형식을 보여 주는 예시로 쓰면 좋습니다. 필수 항목과 선택 항목도 분명히 표시해야 합니다.

오류는 어떻게 알려 주나요?

사용자가 모든 칸을 채우고 제출 버튼을 눌렀는데 그제야 여러 오류가 한꺼번에 뜨면 좌절감이 큽니다. 칸 하나를 다 입력하고 다음 칸으로 넘어갈 때 바로 확인해 알려 주는 것이 좋습니다. 오류 메시지는 '잘못된 입력입니다'처럼 막연한 말보다 '비밀번호는 8자 이상이어야 합니다'처럼 무엇을 고치면 되는지 구체적으로 알려 줘야 합니다. 오류가 난 칸은 색과 아이콘을 함께 써서 색을 구분하기 어려운 사용자도 알아볼 수 있게 합니다.

입력 칸 아래 오류 안내 문구가 표시된 폼 화면

모바일에서는 무엇을 더 신경 쓰나요?

모바일에서는 입력 자체가 번거롭기 때문에 작은 배려가 큰 차이를 만듭니다. 전화번호 칸에서는 숫자 키패드가, 이메일 칸에서는 @가 있는 키보드가 뜨도록 입력 유형을 지정합니다. 자동 완성 기능을 켜 두면 이름과 주소를 빠르게 채울 수 있습니다. 입력 칸과 버튼은 손가락으로 누르기 편한 크기로 만들고, 칸 사이에 충분한 간격을 둡니다.

긴 폼은 어떻게 나누나요?

보험 가입이나 견적 요청처럼 항목이 많을 수밖에 없는 폼은 여러 단계로 나누면 부담이 줄어듭니다. 상단에 진행 단계를 표시해 얼마나 남았는지 알려 주면 사용자가 끝까지 갈 가능성이 높아집니다. 앞 단계로 돌아가도 입력한 내용이 사라지지 않게 해야 합니다. 중간에 떠난 사용자가 다시 돌아왔을 때 이어서 입력할 수 있게 하면 더 좋습니다. UI/UX 설계 사례는 lexus lm chauffeur seoul 알아보기에서 볼 수 있습니다.

자주 묻는 질문

비밀번호 확인 칸은 꼭 필요한가요?

비밀번호 보기 기능을 제공하면 확인 칸을 줄이는 경우도 있습니다.

개인정보 동의는 어디에 두나요?

제출 버튼 가까이에 두고, 내용을 쉽게 펼쳐 볼 수 있게 하십시오.

소셜 로그인을 넣으면 도움이 되나요?

입력 부담이 줄어 가입률이 올라가는 경우가 많습니다.