지불 및 주소 양식 모범 사례
사용자가 가능한 한 빠르고 쉽게 주소 및 지불 양식을 작성할 수 있도록 하여 전환을 극대화하십시오.
효과적으로 설계된 양식은 사용자를 돕고 전환율을 높입니다. 약간만 수정하더라도 큰 차이를 만들 수 있습니다!
다음은 모든 모범 사례를 보여주는 간단한 지불 양식의 예입니다.
다음은 모든 모범 사례를 보여주는 간단한 주소 양식의 예입니다.
체크리스트 #
<form>,<input>,<label>및<button>과 같은 의미 있는 HTML 요소를 사용하세요.<label>이 있는 각 양식 필드에 레이블 지정하세요.- HTML 요소 속성을 사용하여 기본 제공 브라우저 기능 특히 적절한 값이 있는
type및autocomplete에 액세스하세요. - 지불 카드 번호와 같이 증가하도록 의도되지 않은 번호에
type="number"를 사용하지 않도록 하세요. 대신type="text"및inputmode="numeric"을 사용하세요. input,select또는textarea에 적절한 자동 완성 값을 사용할 수 있으면 이를 사용해야 합니다.- 브라우저가 양식을 자동으로 채우는 데 도움이 되도록 페이지 로드 또는 웹사이트 배치 사이에서 변하지 않는
name및id속성 안정 값을 입력하세요. - 탭하거나 클릭하면 제출 버튼이 비활성화됩니다.
- 입력하는 동안 양식을 제출할 뿐만 아니라 데이터를 유효성 검사하세요.
- 결제가 완료되면 게스트 결제를 기본값으로 설정하고 계정 생성을 간단하게 만들 수 있습니다.
- 명확한 단계에서 명확한 실행 호출과 함께 결제 프로세스 진행 과정을 표시합니다.
- 클러터와 방해 요소를 제거하여 잠재적 결제 출구 지점을 제한합니다.
- 결제 시 전체 주문 세부 정보를 표시하고 주문을 쉽게 조정할 수 있습니다.
- 필요하지 않은 데이터를 요구하지 마십시오 .
- 합당한 이유가 없는 한 단일 입력으로 이름을 요청하세요.
- 이름과 사용자 이름에 라틴어 전용 문자를 강제로 사용하지 마세요.
- 다양한 주소 형식을 허용합니다.
- 주소에 하나의
textarea를 사용하는 것을 고려하세요. - 청구서 수신 주소 자동 완성 기능을 사용하세요.
- 필요한 경우 국제화 및 현지화합니다.
- 우편번호 주소를 조회하는 것을 피하세요.
- 적절한 지불 카드 값 자동 채우기 기능을 사용하세요.
- 결제 카드 번호에 하나의 입력 값만 사용하세요.
- 자동 채우기 경험을 방해하는 사용자 지정 요소를 사용하는 것을 피하세요.
- 현장 및 실험실 테스트: 페이지 분석, 상호 작용 분석 및 실제 사용자 성능 측정.
- 다양한 브라우저, 장치 및 플랫폼에서 테스트합니다.
의미 있는 HTML 사용하기 #
작업을 위해 빌드된 요소와 속성을 사용합니다.
<form>,<input>,<label>및<button>type,autocomplete및inputmode
이를 통해 기본 제공 브라우저 기능을 활성화하고 접근성을 개선하며 마크업에 의미를 추가할 수 있습니다.
의도한 대로 HTML 요소 사용하기 #
양식을 <form>에 넣기 #
<input> 요소를 <form>에 래핑하지 않고 순수하게 JavaScript로 데이터 제출을 처리하고 싶을 수 있습니다.
그렇게 하지 마세요!
HTML <form>을 사용하면 모든 최신 브라우저에서 강력한 기본 제공 기능 모음에 액세스할 수 있으며 화면 리더 및 기타 보조 장치에서 사이트에 액세스할 수 있습니다. 또한 <form>을 사용하면 JavaScript 지원이 제한된 기존 브라우저를 위한 기본 기능을 구축하고 코드에 결함이 있는 경우라도 양식 제출을 활성화하고 실제로 JavaScript를 비활성화하는 소수의 사용자를 위해 더 간단하게 만들 수 있습니다.
사용자 입력 항목을 위한 두 개 이상의 페이지 구성 요소가 있는 경우 각각 고유한 <form> 요소에 넣어야 합니다. 예를 들어, 동일한 페이지에서 로그인하고 검색하는 경우 각각을 고유한 <form>에 넣으십시오.
<label>을 사용하여 요소 레이블 지정하기 #
<input>, <select> 또는 <textarea>에 대한 레이블을 지정하려면 <label>을 사용하세요.
입력의 id와 값이 동일한 레이블의 for 속성을 제공하여 입력을 레이블과 연관시킵니다.
<label for="address-line1">Address line 1</label>
<input id="address-line1" …>단일 입력에 단일 레이블을 사용합니다. 하나의 레이블로 여러 입력에 대한 레이블을 지정하지 마십시오. 이것은 브라우저에서 가장 잘 작동하고 스크린 리더에서 가장 효과적입니다. 레이블을 탭하거나 클릭하면 연관된 입력으로 포커스가 이동하고 레이블 또는 레이블의 입력이 포커스를 받으면 스크린 디더가 레이블 텍스트를 공개합니다.
유용한 버튼 {: #html-button} 만들기 #
버튼에는 <button>을 사용하세요! <input type="submit">을 사용할 수도 있지만 div 또는 버튼 역할을 하는 다른 임의 요소를 사용하지 마십시오. 버튼 요소는 액세스 가능한 동작, 기본 제공 양식 제출 기능을 제공하며 쉽게 스타일을 지정할 수 있습니다.
각 양식 제출 버튼에 기능을 설명하는 값을 지정하십시오. 체크아웃에 대한 각 단계에서 진행 상황을 보여주고 다음 단계를 명확하게 보여주는 설명적 동작 호출 기능을 사용하세요. 예를 들어, 배송 주소 양식의 제출 버튼에 계속 또는 저장이 아닌 결제 진행이라는 레이블을 지정합니다.
사용자가 제출 버튼을 탭하거나 클릭하면, 특히 사용자가 결제를 하거나 주문할 때 제출 버튼을 비활성화하는 것이 좋습니다. 제대로 작동하는 경우에도 많은 사용자가 버튼을 반복적으로 클릭하기 때문입니다. 이로 인해 결제가 이루어지지 않고 서버에 부하가 발생할 수 있습니다.
반면에 완전하고 유효한 사용자 입력을 기다리는 제출 버튼을 비활성화하지 마십시오. 예를 들어, 무언가가 누락되었거나 유효하지 않다고 해서 주소 저장 버튼을 비활성화된 상태로 두지 마십시오. 이는 사용자에게 도움이 되지 않습니다. 사용자는 계속해서 버튼을 탭하거나 클릭하고 버튼이 고장난 것으로 생각할 수 있습니다. 대신 사용자가 유효하지 않은 데이터가 포함된 양식을 제출하려고 하면 무엇이 잘못되었으며 수정하려면 어떻게 해야 하는지 알려주세요. 이는 데이터 입력이 더 어렵고 양식 제출을 시도할 때 사용자의 화면에 누락되거나 잘못된 양식 데이터가 표시되지 않을 수 있는 모바일에서 특히 중요합니다.
HTML 속성 {: #html-attributes} 최대한 활용하기 #
사용자가 데이터를 쉽게 입력할 수 있도록 합니다 #
적절한 입력 type 속성을 사용하여 모바일에서 올바른 키보드를 제공하고 브라우저에서 기본 제공 유효성 검사 기능을 활성화하세요.
예를 들어 이메일 주소에 type="email"을 사용하고 전화번호에는 type="tel"을 사용하세요.
날짜의 경우 사용자 지정 select 요소를 사용하지 마십시오. 제대로 구현되지 않고 기존 브라우저에서 작동하지 않으면 자동 채우기 경험이 방해를 받습니다. 생년월일과 같은 숫자의 경우, 특히 모바일에서 긴 드롭다운 목록에서 선택하는 것보다 수동으로 숫자를 입력하는 것이 더 쉽고 오류가 덜 발생할 수 있으므로 select을 사용하기 보다 input을 사용하는 것을 고려하세요. inputmode="numeric"을 사용하여 모바일에서 올바른 키보드를 확인하고, 텍스트 또는 자리 표시자와 함께 유효성 검사 및 형식 힌트를 추가하여 사용자가 적절한 형식으로 데이터를 입력할 수 있도록 합니다.
자동 완성을 사용하여 접근성을 개선하고 사용자가 데이터를 다시 입력하지 않도록 돕습니다 #
적절한 autocomplete 값을 사용하면 브라우저에서 데이터를 안전하게 저장하고 input, select 및 textarea 값을 자동으로 완성하여 사용자를 지원할 수 있습니다. 이는 모바일에서 특히 중요하며 높은 양식 이탈률을 방지하는 데 중요합니다. 자동 완성 기능은 또한 여러 접근성 이점도 제공합니다.
양식 필드에 적절한 자동 완성 값을 사용할 수 있는 경우 이를 사용해야 합니다. MDN 웹 문서에는 값의 전체 목록과 이를 올바르게 사용하는 방법에 대한 설명이 있습니다.
기본적으로 청구서 수신 주소를 배송 주소와 동일하게 설정합니다. 청구서 수신 주소를 양식에 표시하는 대신 청구서 수신 주소를 편집할 수 있는 링크를 제공(또는 summary 및 details 요소 사용)하여 시각적 혼란을 줄입니다.
배송 주소와 마찬가지로 청구서 수신 주소에 적절한 자동 완성 값을 사용하면 사용자가 데이터를 두 번 이상 입력할 필요가 없습니다. 다른 섹션에 동일한 이름이 있는 입력에 대한 값이 다를 경우 접두어를 추가하여 속성을 자동으로 완성합니다.
<input autocomplete="shipping address-line-1" ...>
...
<input autocomplete="billing address-line-1" ...>사용자가 올바른 데이터를 입력할 수 있도록 지원 #
고객이 "잘못을 저질렀다고" 해서 "비방"하지 마십시오. 대신 문제가 발생하는 즉시 사용자가 수정할 수 있도록 도와줌으로써 양식을 더 빠르고 쉽게 완료할 수 있도록 돕습니다. 고객은 결제 프로세스를 통해 회사에 제품이나 서비스에 대한 비용을 지불하려는 것입니다. 고객을 처벌하는 대신 도와주십시오!
min, max 및 pattern을 포함하여 허용되는 값을 지정하기 위해 양식 요소에 제약 조건 속성을 추가할 수 있습니다. 요소의 유효성 상태는 요소의 값이 유효한지 여부에 따라 자동으로 설정되며, 유효하거나 유효하지 않은 값으로 요소의 스타일을 지정하는 데 사용할 수 있는 :valid 및 :invalid CSS 의사 클래스도 마찬가지입니다.
예를 들어, 다음 HTML은 1900년에서 2020년 사이의 출생 연도에 대한 입력 항목을 지정합니다. type="number"를 사용하면 입력 값이 min 및 max에 의해 지정된 범위 내의 숫자로만 제한됩니다. 범위를 벗어난 숫자를 입력하려고 하면 입력 항목이 유효하지 않은 상태로 설정됩니다.
다음 예에서는 pattern="[\d ]{10,30}"을 사용하여 공백을 허용하면서 유효한 결제 카드 번호를 확인합니다.
최신 브라우저는 email 또는 url 유형의 입력에 대한 기본 유효성 검사도 수행합니다.
양식 제출 시 브라우저는 문제가 있거나 필수 값이 누락된 필드에 자동으로 초점을 맞춥니다. JavaScript가 필요하지 않습니다!
제출 버튼을 클릭할 때 오류 목록을 제공하는 대신 인라인으로 유효성을 검사하고 사용자가 데이터를 입력할 때 피드백을 제공합니다. 양식 제출 후 서버의 데이터를 유효성 검사해야 하는 경우 발견된 모든 문제를 나열하고 유효하지 않은 값이 있는 모든 양식 필드를 명확하게 강조 표시하고 문제가 있는 각 필드 옆에 수정해야 할 항목을 설명하는 메시지를 인라인으로 표시합니다. 서버 로그 및 분석 데이터에서 일반적인 오류를 확인하십시오. 양식을 다시 디자인해야 할 수도 있습니다.
또한 사용자가 데이터를 입력하고 양식을 제출하는 동안 더 강력한 유효성 검사를 수행하려면 JavaScript를 사용해야 합니다. 포커스를 설정하고 프롬프트 메시지를 표시하는 기본 제공 브라우저 UI를 사용하여 사용자 지정 유효성 검사 기능을 추가하려면 제약 조건 유효성 검사 API(이는 폭넓게 지원됨)를 사용하십시오.
보다 복잡한 실시간 유효성 검사를 위해 JavaScript 사용에서 자세히 알아보세요.
사용자가 필수 데이터를 누락하지 않도록 지원 #
필수 값에 대한 입력에 required 속성을 사용합니다.
양식이 제출되면 최신 브라우저는 자동으로 메시지를 표시하고 누락된 데이터가 있는 required 필드에 초점을 맞출 때 :required pseudo-class를 사용하여 필수 필드를 강조 표시할 수 있습니다. JavaScript가 필요하지 않습니다!
모든 필수 필드의 레이블에 별표를 추가하고 양식의 시작 부분에 별표가 의미하는 바를 설명하는 메모를 추가합니다.
결제 간소화 #
모바일 상거래 격차를 염두에 두십시오! #
사용자가 사이트 이용 과정에서 번거로움을 느낀다고 상상해 보세요. 사이트를 이용하는 것이 번거로우면 사용자가 사이트를 떠납니다.
특히 모바일에서는 마찰을 줄이고 초점을 유지해야 합니다. 많은 사이트에서 모바일에서 더 많은 트래픽이 발생하지만 데스크톱에서는 더 많은 전환이 발생합니다. 이러한 현상을 모바일 상거래 격차라고 합니다. 고객은 단순히 데스크탑에서 구매를 완료하는 것을 선호할 수 있지만 낮은 모바일 전환율도 좋지 않은 사용자 경험의 결과입니다. 모바일에서 손실된 전환율을 최소화하고 데스크탑에서 전환율을 극대화하는 것입니다. 연구에 따르면 더 나은 모바일 양식 경험을 제공하는 것은 엄청난 기회가 있습니다.
무엇보다 사용자는 길고 복잡하며 방향 감각을 잃어버리기 쉬운 양식을 포기할 가능성이 더 큽니다. 이것은 사용자가 더 작은 화면에 있거나 주의가 산만하거나 서두를 때 특히 그렇습니다. 가능한 한 적은 양의 데이터를 요청하세요.
게스트 체크아웃을 기본으로 설정하기 #
온라인 상점의 경우 양식 마찰을 줄이는 가장 간단한 방법은 게스트 결제를 기본값으로 설정하는 것입니다. 사용자가 구매하기 전에 계정을 만들도록 강요하지 마십시오. 고객 결제를 허용하지 않는 것이 장바구니 포기의 주요 원인입니다.
결제 후 계정 가입을 제안할 수 있습니다. 이 시점에서 계정을 설정하는 데 필요한 대부분의 데이터가 이미 있으므로 사용자를 위해 계정을 빠르고 쉽게 만들 수 있습니다.
결제 진행률 표시 #
진행 상황을 표시하고 다음에 수행해야 할 작업을 명확히 하여 결제 프로세스를 더 쉽게 만들 수 있습니다. 아래 동영상은 영국 소매업체인 johnlewis.com이 이를 달성하는 방법을 보여줍니다.
모멘텀을 유지해야 합니다! 결제를 위한 각 단계마다 페이지 제목과 설명 버튼 값을 사용하여 지금 수행해야 할 작업과 결제 후 단계를 명확히 합니다.
모바일 키보드 입력 키 레이블을 설정하려면 양식 입력에 enterkeyhint 속성을 사용하십시오. 예를 들어, 다중 페이지 양식 내에서는 enterkeyhint="previous" 및 enterkeyhint="next"를 사용하고, 양식의 최종 입력에 대해서는 enterkeyhint="done", 그리고 검색 입력에 대해서는 enterkeyhint="search"를 사용하십시오.
enterkeyhint 속성은 Android 및 iOS에서 지원됩니다. enterkeyhint 설명자에서 자세한 내용을 확인할 수 있습니다.
사용자가 결제 프로세스 내에서 쉽게 이동하고 심지어 최종 결제 단계에서도 주문 내역을 쉽게 조정할 수 있도록 합니다. 간략한 예약 정보뿐만 아니라 주문에 대한 전체적인 세부 정보를 표시합니다. 사용자가 결제 페이지에서 항목 수량을 쉽게 조정할 수 있도록 합니다. 결제 프로세스에서 가장 우선시해야 하는 것은 전환 진행 과정을 방해하지 않는 데 있습니다.
주의 산만 요소 제거 #
제품 프로모션과 같은 시각적 혼란과 주의를 산만하게 하는 요소를 제거하여 잠재적 출구 지점을 제한합니다. 많은 성공적인 소매업체는 결제에서 탐색 및 검색을 제거하기도 합니다.
여정에 집중하세요. 지금은 사용자가 다른 일을 하도록 유혹할 때가 아닙니다!
재방문 사용자의 경우 볼 필요가 없는 데이터를 숨겨 결제 흐름을 더욱 간순화할 수 있습니다. 예를 들어, 배송 주소를 양식이 아닌 일반 텍스트로 표시하여 사용자가 링크를 통해 배송 주소를 변경할 수 있도록 합니다.
이름과 주소를 쉽게 입력할 수 있도록 합니다. #
필요한 데이터만 요청하세요. #
이름 및 주소 양식 코딩을 시작하기 전에 어떤 데이터가 필요한지 이해해야 합니다. 필요하지 않은 데이터를 요청하지 마세요! 양식 복잡성을 줄이는 가장 간단한 방법은 불필요한 필드를 제거하는 것입니다. 이는 고객 개인정보 보호에도 유용하고 백엔드 데이터 비용과 책임을 줄일 수 있습니다.
단일 이름 입력 사용 #
이름, 성, 존칭 또는 기타 이름 부분을 별도로 저장해야 하는 합당한 이유가 없는 한 사용자가 단일 입력을 사용하여 이름을 입력할 수 있도록 허용하세요. 단일 이름 입력을 사용하면 양식이 덜 복잡해지고 잘라서 붙여넣기가 가능하며 자동 채우기 기능이 더 간단해집니다.
특히, 합당한 이유가 없는 한 접두사 또는 타이틀(예: Mrs, Dr 또는 Lord)에 대해 별도의 입력을 추가하지 않도록 하십시오. 사용자가 원할 경우 이름을 입력할 수 있도록 해야 합니다. 또한 honorific-prefix 자동 완성 기능은 현재 대부분의 브라우저에서 작동하지 않으므로 이름 접두사 또는 타이틀 필드를 추가하면 대부분의 사용자들은 주소 양식 자동 채우기 경험이 방해를 받습니다.
이름 자동 작성 기능 사용 #
전체 이름에 대해 name을 사용하세요:
<input autocomplete="name" ...>이름 부분을 분할해야 하는 합당한 이유가 있다면 다음과 같은 적절한 자동 완성 값을 사용해야 합니다.
honorific-prefixgiven-namenicknameadditional-name-initialadditional-namefamily-namehonorific-suffix
국제 이름 허용 #
이름 입력을 확인하거나 이름 데이터에 허용되는 문자를 제한할 수 있습니다. 그러나 가능한 한 알파벳에 제한을 두지 않아야 합니다. 고객에게 이름이 "유효하지 않다"고 말하는 것은 실례입니다!
유효성 검사를 위해 라틴 문자와만 일치하는 정규식을 사용하지 않도록 하십시오. 라틴 전용은 라틴 알파벳에 없는 문자를 포함하는 이름이나 주소를 가진 사용자를 배제시킵니다. 대신 유니코드 문자와 일치하는 정규식을 허용하고 백엔드가 입력과 출력 모두에서 유니코드를 안전하게 지원하도록 하십시오. 정규식의 유니코드는 최신 브라우저에서 효과적으로 지원됩니다.
금지
<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
<input pattern="[\w \-]+" ...>허용
<!-- Accepts Unicode letters. -->
<input pattern="[\p{L} \-]+" ...>다양한 주소 형식 허용 #
주소 양식을 디자인할 때 단일 국가 내에서도 당혹해할 정도로 다양한 주소 형식을 염두에 두십시오. "정상" 주소에 대해 가정하지 않도록 주의하세요. (확실하지 않다면 UK Address Oddities!를 살펴보세요!)
주소 양식을 유연하게 만들기 #
사용자가 맞지 않는 양식 필드에 자신의 주소를 입력하도록 강요하지 마세요.
예를 들어, 많은 주소가 해당 형식을 사용하지 않고 불완전한 데이터로 인해 브라우저 자동 채우기 기능이 중단될 수 있으므로 별도의 입력에서 집 번호와 거리 이름을 고집하지 마십시오.
required 주소 필드에 특히 주의하세요. 예를 들어 영국의 대도시 주소에는 카운티가 없지만 많은 사이트에서는 여전히 사용자가 카운티를 입력하도록 강요합니다.
두 개의 유연한 주소 입력란을 사용하면 다양한 주소 형식에 대해 충분히 효과적일 수 있습니다.
<input autocomplete="address-line-1" id="address-line1" ...>
<input autocomplete="address-line-2" id="address-line2" ...>일치하는 레이블 추가:
<label for="address-line-1">
Address line 1 (or company name)
</label>
<input autocomplete="address-line-1" id="address-line1" ...>
<label for="address-line-2">
Address line 2 (optional)
</label>
<input autocomplete="address-line-2" id="address-line2" ...>아래에 포함된 데모를 리믹스하고 편집하여 이를 시도할 수 있습니다.
주소에 단일 텍스트 영역을 사용하는 것을 고려하십시오. #
주소에 대한 가장 유연한 옵션은 단일 textarea 을 제공하는 것입니다.
textarea 접근 방식은 모든 주소 형식에 적합하며 잘라내기 및 붙여넣기에 적합하지만 데이터 요구 사항에 부합하지 않을 수 있으며 address-line1 및 address-line2가 있는 양식만 이전에 사용한 경우 사용자의 자동 채우기 기능이 방해 받을 수 있습니다.
텍스트 영역의 경우 자동 완성 값으로 street-address를 사용하세요.
다음은 주소에 textarea를 사용하는 방법을 보여주는 양식의 예입니다.
주소 양식의 국제화 및 현지화 #
주소 양식은 사용자의 위치에 따라 국제화 및 현지화를 고려하는 것이 특히 중요합니다.
주소 부분의 이름은 주소 형식과 함께 동일한 언어 내에서도 다양합니다.
ZIP code: US
Postal code: Canada
Postcode: UK
Eircode: Ireland
PIN: India주소에 맞지 않거나 기대하는 단어를 사용하지 않는 형식으로 제시되는 것은 짜증스럽거나 당혹스러울 수 있습니다.
여러 로케일에 대한 주소 양식을 사용자 정의하는 것이 귀하의 사이트에 필요할 수 있지만 위에서 설명한 대로 양식 유연성을 극대화하는 기술을 사용하는 것이 적절할 수 있습니다. 주소 형식을 현지화하지 않는 경우 다양한 주소 형식에 대처하기 위한 주요 우선 순위를 이해해야 합니다.
- 거리 이름이나 집 번호를 요구하는 것과 같이 주소 부분에 대해 지나치게 구체적으로 요청하지 마십시오.
- 가능하면 필드를
required로 만드는 것을 피하십시오. 예를 들어, 많은 국가의 주소에는 우편번호가 없으며 시골 주소에는 거리 또는 도로 이름이 없을 수 있습니다. - '국가'가 아닌 '국가/지역' 'ZIP'이 아닌 'ZIP/우편번호' 등 포괄적인 이름을 사용하세요.
유연하게 유지하세요! 많은 로케일에서 '충분히 효과적으로' 사용되도록 위의 간단한 주소 형식 예제를 채택할 수 있습니다.
우편번호 주소 조회를 피하는 것을 고려하십시오. #
일부 웹사이트는 우편번호 또는 ZIP을 기반으로 주소를 조회하는 서비스를 사용합니다. 이는 일부 사용 사례에서는 합리적일 수 있지만 잠재적인 단점을 알고 있어야 합니다.
우편번호 주소 제안은 모든 국가에서 효과적이지 않으며 일부 지역에서는 우편번호에 상당히 많은 잠재적 주소가 될 수 있습니다.
사용자가 긴 주소 목록에서 선택하기가 어렵습니다. 특히 사용자가 서두르거나 스트레스를 받는 모바일에서는 더욱 그렇습니다. 사용자가 자동 채우기 기능을 활용하고 한 번의 탭이나 클릭으로 채워진 전체 주소를 입력하도록 하는 것이 더 쉽고 오류가 덜 발생할 수 있습니다.
결제 양식 간소화 #
지불 양식은 결제 프로세스에서 가장 중요한 부분입니다. 잘못된 지불 양식 디자인은 장바구니 포기의 일반적인 원인입니다. 문제는 세부 사항에 있습니다. 작은 결함만으로 특히 모바일에서 사용자가 구매를 포기하도록 유도할 수 있습니다. 사용자가 데이터를 가능한 한 쉽게 입력할 수 있도록 양식을 디자인해야 합니다.
사용자가 지불 데이터를 다시 입력하지 않도록 지원하세요. #
지불 카드 번호, 카드 이름, 만료 월 및 연도를 포함하여 지불 카드 양식에 autocomplete 값을 추가해야 합니다.
cc-numbercc-namecc-exp-monthcc-exp-year
이를 통해 브라우저는 지불 카드 세부 정보를 안전하게 저장하고 양식 데이터를 올바르게 입력하여 사용자를 지원할 수 있습니다. 자동 완성 기능이 없으면 사용자는 지불 카드 세부 정보의 물리적 기록을 유지하거나 지불 카드 데이터를 장치에 안전하지 않게 저장할 가능성이 더 큽니다.
지불 카드 날짜에 사용자 정의 요소를 사용하지 마세요 #
적절히 디자인되지 않은 경우 사용자 정의 요소는 자동 채우기를 중단하여 결제 흐름을 방해할 수 있으며 이전 브라우저에서는 효과적이지 않을 수 있습니다. 자동 완성 기능에서 다른 모든 지불 카드 세부 정보를 사용할 수 있지만 자동 채우기가 사용자 지정 요소에 효과적이지 않았기 때문에 사용자는 만료 날짜를 찾기 위해 자신의 실제 지불 카드를 찾아야 합니다. 따라서 구매하지 않고 사이트를 떠날 수 있습니다. 대신 표준 HTML 요소를 사용하고 그에 따라 스타일을 지정하는 것을 고려하십시오.
지불 카드 및 전화번호 숫자에 단일 입력 사용 #
지불 카드 및 전화번호의 경우 단일 입력을 사용합니다. 번호를 여러 부분으로 나누지 마십시오. 그러면 사용자가 데이터를 더 쉽게 입력할 수 있고 유효성 검사가 더 간단해지며 브라우저에서 자동 채우기 기능을 사용할 수 있습니다. PIN 및 은행 코드와 같은 다른 숫자 데이터에 대해서도 동일한 작업을 수행하는 것을 고려하십시오.
신중하게 유효성 검사 #
실시간으로 그리고 양식을 제출하기 전에 데이터 입력 항목에 대한 유효성을 검사해야 합니다. 유효성 검사를 수행하는 한 가지 방법은 지불 카드 입력에 pattern 속성을 추가하는 것입니다. 사용자가 잘못된 값으로 지불 양식을 제출하려고 하면 브라우저는 경고 메시지를 표시하고 입력에 초점을 맞춥니다. JavaScript는 필요하지 않습니다!
그러나 pattern 정규식은 14자리(또는 그 이하)에서 20(또는 그 이상)까지의 지불 카드 번호 길이 범위를 처리할 수 있을 만큼 충분히 유연해야 합니다. 결제 카드 번호 구조화에 대한 자세한 내용은 LDAPwiki에서 확인할 수 있습니다.
사용자가 새 지불 카드 번호를 입력할 때 공백을 포함할 수 있도록 허용하세요. 실제 카드에 숫자가 표시되는 방식이기 때문입니다. 이는 사용자에게 더 친숙하고("뭔가 잘못했습니다"라고 말할 필요가 없음) 변환 흐름을 방해할 가능성이 적으며 처리하기 전에 숫자에서 공백을 쉽게 제거할 수 있습니다.
다양한 기기, 플랫폼, 브라우저 및 버전에서 테스트하기 #
양식 요소의 기능과 모양이 다를 수 있고 표시 영역 크기의 차이로 인해 위치 문제가 발생할 수 있으므로 사용자에게 가장 일반적인 플랫폼에서 주소 및 지불 양식을 테스트하는 것이 특히 중요합니다. BrowserStack을 사용하면 다양한 장치와 브라우저에서 오픈 소스 프로젝트를 무료로 테스트할 수 있습니다.
지불 완료 버튼이 숨겨지지 않도록 더 작은 모바일 표시 영역의 패딩을 줄이십시오.
분석 및 RUM 구현 #
사용 가능성 및 성능을 로컬에서 테스트하는 것이 유용할 수 있지만 사용자가 지불 및 주소 양식을 경험하는 방식을 올바르게 이해하려면 실제 데이터가 필요합니다.
이를 위해서는 결제 페이지를 로드하는 데 소요되는 시간 또는 결제를 완료하는 데 소요되는 시간과 같은 실제 사용자 경험에 대한 데이터인 분석 및 실제 사용자 모니터링이 필요합니다.
- 페이지 분석: 양식이 있는 모든 페이지에 대한 페이지 조회수, 이탈률 및 종료율.
- 상호 작용 분석: 목표 유입 경로 및 이벤트는 사용자가 결제 흐름을 포기한 위치와 양식과 상호 작용할 때 취하는 작업을 나타냅니다.
- 웹사이트 성능: 사용자 중심 매트릭을 통해 결제 페이지가 느리게 로드되는지 알려줄 수 있고 만약 느리게 로드될 경우 그 원인이 무엇인지 알려줄 수 있습니다.
페이지 분석, 상호 작용 분석 및 실제 사용자 성능 측정은 서버 로그, 전환 데이터 및 A/B 테스트와 결합될 때 특히 유용하므로 할인 코드가 수익을 늘리는지 또는 양식 레이아웃의 변경이 전환을 개선하는지 여부와 같은 질문에 답할 수 있습니다.
이는 결과적으로 노력의 우선순위를 정하고, 변화를 일으키며, 성공에 대한 보상을 제공할 수 있는 견고한 기반을 제공합니다.
학습 계속 #
- 로그인 양식 모범 사례
- 가입 양식 모범 사례
- WebOTP API로 웹에서 전화번호 확인
- 놀라운 양식 만들기
- 모바일 양식 디자인 모범 사례
- 더 많은 기능을 갖춘 양식 컨트롤
- 액세스 가능한 양식 만들기
- Credential Management API를 사용하여 가입 흐름 간소화
- Frank의 우편 주소에 대한 필수 가이드(Frank's Compulsive Guide to Postal Addresses)는 200개가 넘는 국가의 주소 형식에 대한 유용한 링크와 광범위한 지침을 제공합니다.
- 국가 목록에는 국가 코드와 이름을 여러 언어로, 그리고 여러 형식으로 다운로드할 수 있는 도구가 있습니다.