Daily UI 002. 신용카드 결제 _Credit card Checkout

Credit card checkout을 그대로 직역하면 신용카드 결제 인데, 디자인이나 UX 아티클을 찾아보면 결제가 아니라 등록으로 해석하고 디자인 한 것도 많았다. 그런데 카드 등록의 경우에는 지금 휴대폰 카메라로 찍으면 자동으로 카드 번호와 유효기간까지 입력이 되는 시스템으로 기술이 발전했기 때문에 UX아티클들이 현실을 반영하고 있지 못한 경우가 많았다. 그래서 이번에는 생각보다 공부할 것이 많지는 않았다.

 

 

1. 2행 이상의 컬럼은 사용자가 볼 때 다양한 방식으로 해석할 여지가 있기 때문에 하나의 행으로 구성하는 것이 좋다.

 

다음과 같이 두 개의 행이 있을 때 사람들은 우리의 바람과 달리 각기 다양한 방식대로 읽는 방법을 선택한다. 그래서 우리는 되도록이면 하나의 정보에는 하나의 행으로 디자인 해주는 것이 사용자에게 좋다. 특히나 모바일 디자인은 화면이 작기 때문에 복잡하게 되는 것을 더욱 경계해야 한다.

2. 가장 쉬운 것부터 점점 어려운 것으로 양식 필드를 정렬하라

지금처럼 편리하게 카드번호를 카메라로 촬영하여 입력하는 방법이 없다고 가정했을 때, 우리는 어쩌면 카드 번호 보다는 유효기간을 먼저 적게 하는 것이 사람들이 카드 등록을 더 어렵지 않게 하는 방법일 수 있다. 카드번호는 대부분 8개, 유효기간은 4개이기 때문이다. 비밀번호도 4개로 적지만 대부분의 카드등록에서 가장 마지막에 등록하게 하는 이유는 비밀번호 숫자는 비록 적으나 우리는 카드를 쓸 때 비밀번호를 매번 입력하지 않을 뿐더러 

 

 

 

 

3. 긴 양식에는 어디까지 진행됐는지 여부를 알려주는 표시줄을 추가하라

앱을 사용하다보면 우리가 완료하려는 작업의 어디쯤 도달했는지 알려주는 여러가지 표시들을 만날 수 있다. 사용자가 입력해야 하는 페이지가 3페이지 이상이라면 표시줄을 꼭 추가해주자. 2페이지 까지는 사용자가 무난하게 받아들일 수 있다. 하지만 3페이지부터는 계속해서 다음버튼이 나온다면 사용자는 양식을 작성하는 것을 포기할지도 모른다. 진행률 표시줄은 구매 또는 입력을 완료하려는 사용자의 동기를 높인다. 

 

광역알뜰교통카드 회원가입 화면

 

 

 

4. 사용자들의 작업을 느리게 하는 모든 요소를 제거하라.

페이지 로딩 속도가 1초만 느려도 전환에 큰 영향을 미친다는 사실을 아는가?  Dynatrance 연구 중 하나에 따르면 온라인 사용자의 절반 이상이 페이지가 로드될 때까지 3초 이상 기다리지 않는 것으로 나타났다. 또한 제품 페이지에서 응답 시간이 평균 0-1초인 사람들은 페이지 속도가 10초 이상 걸릴 때 전환율이 10%인 것에 비해 25%의 비율로 전환되는 것으로 나타났다. Radware의 또 다른 연구에 따르면 트랜잭션 중 로드 시간이 2초 지연되면 장바구니 포기율이 무려 87% 에 달한다고 한다.

 

우리는 개발자가 아니기 때문에 기술적으로 페이지 로딩 속도를 빠르게 할 수는 없다.하지만 신용 카드 결제 페이지에서 관련되지 않은 광고 링크나 불필요한 그래픽 요소 등 주의를 산만하게 할 수 있는 것들을 제거할 수는 있다. 양식 필드의 수를 줄이고 필요한 정보만 요청하자.

예전의 신용카드 결제 페이지와 비슷한 것이 지금의 앱을 통한 결제인데, 지금 선택한 결제 방법을 나중에도 사용하기나 기본 결제수단으로 사용하기를 설정해놓기는 사용자의 구매를 상당히 빠른 속도로 향상시켜준다. 사용자는 이 선택옵션으로 인해 구매를 원할 때마다 새로 결제수단을 등록하거나 선택할 필요가 없다.

 

쿠팡 결제수단 선택화면

 

 

 

5. 명확한 CTA 를 사용해라

일단 CTA 는 Call To Action을 말한다.랜딩페이지나 웹사이트에 방문한 사람들에게 우리가 원하는 행동을 하도록 유도하는 장치 혹은 요소를 말한다. 쇼핑몰 앱에서는 찜하기나 장바구니 등을 하도록 CTA 버튼을 만든다. 사람들이 버튼을 클릭했을 때 어떤일이 일어날지 명확히 이해할 수 있는 버튼을 만들자. 예를 들어 버튼을 누르면 같은 제품을 재구매할 수 있는 버튼이라면 "재구매하기"라는 텍스트가 가장 좋을 수 있다. 무의식적으로 "확인" 또는"다음"과 같은 (사용자가 어떤 일이 일어날지 이해하기)어려운 버튼 텍스트를 만들지 말자.

 

 

 

 

 

출처

https://securionpay.com/blog/best-payment-form-ux-practices/