모바일앱 거래 완료 화면의 UX/UI

지난 글에서는 거래 내역 UI의 구성을 살펴보았습니다.

이번 글에서는 거래와 거래 내역 사이에 낀 단계, [거래 완료] 화면의 구성에 대해 알아보겠습니다.

 
[거래 완료] 화면은 사용자가 서비스를 신청, 구매, 송금 등의 거래를 마친 뒤 그 결과를 보여주는 단계로, 어떤 일이 어떻게 마무리되었는지, 그 다음 단계는 무엇인지를 명확하게 전달하는 역할을 합니다.

이 화면에 따라 전체 거래 경험에 대한 만족도와 신뢰도가 종지부를 찍는 셈입니다.

오늘은 거래 완료 화면을 디자인하는 데 필요한 요소들을 살펴보고, 이를 기반으로 거래 완료 화면을 직접 만들어보도록 하겠습니다.

---

User Experience

거래 완료 화면에서 사용자는 자신의 행동에 대한 명확한 피드백을 원합니다.

예) 성공적인 결제 확인 메시지, 구매한 상품의 요약 정보, 거래 날짜 및 시간 등

거래에 실패한 경우에도 그 사유와 해결 방법을 명확히 안내함으로써 당혹감을 줄여줄 수 있습니다.
 

---

Information

이러한 사용자 니즈를 바탕으로 거래 완료 화면에 포함되어야 할 필수 정보를 추려보겠습니다.

• 결제 확인 메시지 : 거래가 성공 또는 실패했음을 명확하게 알려주는 메시지
  
• 거래 세부 정보 : 거래한 상품의 가격, 거래 날짜, 시간 등의 정보
  
• 다음 단계 안내 : 사용자가 할 수 있는 다음 행동(예: 홈으로 돌아가기, 추가 구매하기, 주문 상세 보기 등)을 안내하는 버튼

 

---

User Interface

이를 바탕으로 만든 거래 완료 화면의 예시는 다음과 같습니다.

 
케이스를 성공, 실패로 나누어 두 가지 화면을 만들어 보았는데요, 각각의 경우 보여주어야 할 정보가 조금씩 다릅니다.

성공	실패
- 거래 내역 중 중요한 정보 요약하여 제공 - 거래 후 취할 수 있는 추가 행동 제안	- 실패 사유 안내 - 실패 사유를 해결하기 위한 추가 행동 제안

 

---

더 생각해 봅시다

 
각 케이스에서 하단에 고정된 CTA 버튼 (확인/다시시도)을 선택하는 경우, 어떤 화면으로 이동하는 것이 좋을까요?
 
성공의 경우, 거래 내역 페이지로 넘어가게 하는 것이 가장 자연스러운 흐름이 될 것 같습니다.
 
실패한 경우 일시적인 네트워크, 서버 통신 오류가 그 원인이라면 '다시 시도' 버튼을 통해 거래 과정에서 입력했던 정보를 재입력할 필요 없이 빠르게 거래를 재시도할 수 있습니다.
 
하지만 거래 실패 사유가 잔액 부족, 재고 부족 등 주문을 할 수 없는 크리티컬한 사유 때문이라면 '다시 시도' 버튼은 어울리지 않겠죠?
 
이런 경우 실패하는 이유에 대한 케이스를 살펴보고, 각 경우에 맞는 버튼 이름과 이동 경로까지 설계해 주어야겠습니다.
 

거래 완료 화면의 UI 구성은 쇼핑, 뱅킹, 신청 등 다양한 사용자 경험에서 마무리를 담당하는 중요한 단계입니다.
 
이때의 인상에 따라 고객이 다시 거래를 하러 올 수도, 영영 떠나버릴 수도 있겠죠?
 
이렇게 간단하지만 중요한 거래 완료 화면 UX/UI를 살펴봤습니다.
 
그럼 오늘도 나를 위해 일하는 하루 되시길 바랍니다!