결제 버튼 디자인 고려사항

 

결제 버튼은 모든 전자상거래에서 중요한 요소 중 하나입니다. 단순한 기능적 요소를 넘어 사용자 여정에서 거래의 성패를 좌우할 수 있는 중요한 접점입니다.

잘 디자인된 결제 버튼은 직관적이고 접근성이 뛰어나며 시각적으로도 매력적입니다. 효과적인 결제 버튼을 디자인하는 데 도움이 되는 7가지 사항을 살펴볼께요.

 

 

1. 작업에 명확한 레이블 지정

결제 처리를 트리거하는 버튼에 '제출' 또는 '계속'과 같은 일반적인 레이블을 사용하지 마세요. 대신 '결제' 또는 '지금 결제'와 같은 실행 가능한 레이블을 사용하여 사용자가 클릭/탭할 때 어떤 일이 일어날지 알려주세요.

 

명확한 레이블이 있는 버튼입니다.

 

2. 버튼을 구별할 수 있는 시각적 스타일 사용

사용자가 페이지나 화면에서 버튼을 쉽게 찾을 수 있어야 합니다. 사용자가 버튼을 볼 것으로 예상되는 레이아웃에 버튼을 배치하고 대비되는 색상을 사용하여 더 많은 관심을 끌 수 있도록 하세요.

 

3. 결제 처리 중 시각적 피드백 통합

버튼을 클릭하거나 탭하면 프로세스가 시작되었음을 반영하여 버튼이 시각적으로 변경되어야 합니다. 이렇게 하면 사용자가 시스템이 지금 결제를 처리하고 있음을 이해하고 버튼을 다시 탭하지 않도록 방지할 수 있습니다.

 

• 진행 중인 처리를 표시하는 스피너 또는 펄스 애니메이션을 통합합니다.

결제 처리 상태의 버튼입니다.

 

 

• 결제 결과에 대한 성공 및 실패 표시기를 사용합니다. 프로세스가 완료되면 성공 아이콘(녹색 체크 표시, 녹색 틱)을 표시합니다. 결제가 처리되지 않은 경우 빨간색 십자가 오류와 함께 문제점에 대한 메시지를 표시합니다.

 

결제 성공 상태입니다.

 

부드러운 애니메이션을 사용하여 이지 인 및 이지 아웃과 같은 상태 간에 전환합니다. 애니메이션을 짧게(약 1초) 유지하여 반응성을 유지하세요.

 

4. 결제가 처리되는 동안 버튼 비활성화

결제 처리에 대한 시각적 피드백만으로는 충분하지 않습니다. 불필요한 클릭/탭을 방지하려면 결제 처리 중에 버튼을 비활성화해야 합니다.

 

5. 대기 시간 보기

결제 처리는 5초 이상 걸리지 않아야 합니다. 결제 작업에 10초 이상 걸리면 사용자의 불만이 커질 수 있습니다.

 

6. 오류를 우아하게 처리하기

프로세스가 실패하면 버튼 상태를 오류 표시기로 변경하고 무엇이 잘못되었는지 설명하는 메시지를 표시하세요.

7. 접근성 우선 순위 지정

데스크톱

- 키보드 초점

키보드로 버튼을 활성화할 수 있고 상태 전환 중에 초점 변경이 관리되는지 확인합니다.

 

- ARIA 레이블

ARIA 라이브 영역을 사용하여 버튼의 상태 변경 사항(예: “처리 중...” 또는 “제출 성공”)을 전달합니다.

 

 

모바일

- '스와이프하여 결제' 패턴에 주의하세요.

스와이프는 단순한 '탭하여 결제' 버튼에 비해 더 많은 시간과 노력이 필요하며 불완전한 스와이프, 의도치 않게 손을 놓거나 실수로 방향을 변경하는 등의 오류가 발생할 가능성이 높습니다.

 

스와이프하여 결제 패턴. Michael Wang 이미지.

 

 

---

 

출처:

https://medium.com/ux-planet/payment-button-design-best-practices-57a9022645ca