상품결제를 원활하게 만드는 UX디자인 - DIGITAL iNSIGHT 디지털 인사이트
UX & Design

상품결제를 원활하게 만드는 UX디자인

베이마드 연구소(Baymard Institue)는 미국의 e커머스 사용자 경험을 전문으로 하는 연구소다. 최근 4,560명의 사용자를 대상으로 온라인 마켓에서 자신의 장바구니에 담은 제품을 구입하지 않는 비율을 조사한 결과 미국 온라인 쇼핑객의 69.57%의 소비자가 장바구니의 제품을 포기한 것으로 나타났다. 이들은 대부분 결제 창에 가기 전에 구매를 포기했다.

<그림 1> 출처. https://baymard.com/lists/cart-abandonment-rate

구매 포기 비율을 살펴보면 50%의 잠재 고객은 추가 비용 지출을 이유로 포기했다. 28% 고객은 새로운 계정을 만드는 것에 대한 부담을 느꼈고 21% 고객은 복잡한 결제 과정을 이유로 꼽았다.

많은 요소가 최종 구매까지 영향을 미친다. 위의 조사 결과를 보면 기술적인 문제가 소비자의 구매율에 영향을 미친다는 것을 알 수 있다. 하지만 이런 기술적인 문제를 UX 디자인 설계를 통해 고객에게 쉽게 접근한다면 구매율을 높일 수 있는 단서가 된다.

상품 결제를 원활하게 만드는 UX 디자인을 하기 위해선 어떤 노력을 기울여야 할까? 위의 연구 결과를 토대로 사용자 중심의 디자인을 하는 데 도움되는 디자인 요소 5가지를 정리했다.

1. 비회원 결제 시스템

회원가입은 상품 구매를 위한 첫 단계다. 기업 입장에서 고객의 회원가입은 또 다른 마케팅 용도로 사용할 데이터를 확보하는 것이다. 그래서 가능하다면 회원가입을 권장한다. 기업은 회원가입자들에게 광고 이메일을 보낼 수 있고 회원 연락처로 할인 쿠폰을 발송해 제품 구입을 유도할 수도 있다. 이런 과정을 통해 기업은 매출을 올릴 수 있기 때문에 회원가입률을 높이기 위해 다양한 방법을 시도한다.

과거 복잡한 회원가입 과정과 비교했을 때 오늘날 회원가입은 간편하다. 자주 사용하는 SNS로 회원가입을 유도해 몇 번의 터치만으로 쉽게 가입이 가능하다. 입력해야 할 정보가 많을수록 회원 이탈률이 높아진다. 그렇기 때문에 기업 입장에선 한 번 온 고객은 놓치지 않는다는 마음으로 기본적인 정보만 받고 회원가입 절차를 진행하고 있다.

여기서 다음과 같은 질문이 발생한다.

“간편 가입조차 싫어하는 일회성 고객에게 어떻게 상품 구입을 유도할 것인가?”

사이트 취지에 따라 다르겠지만 일부 고객은 (최소한의 절차일지라도) 무분별한 회원가입을 싫어하는 사람도 많다. (제품의 단가가 높거나 일회성 구입일 경우, 그 비율은 높아진다.)

이런 고객들은 어떻게 잡아야 할까? 기업의 최종 목적이 결제를 통한 상품 판매라면 일회성 고객들을 위해서라도 비회원 구입창을 제공하는 것을 고려하는 것이 좋다.

필자 역시 동일한 가격의 제품을 A와 B 쇼핑몰에서 판매할 경우 비회원으로 구입 가능한 곳에서 결제한다. 인터넷 쇼핑 경력만 15년이 넘어가는 입장에서 너무 많은 사이트에 내 아이디가 노출돼 있다. 평생 1~2번 구입만 할 것 같은 사이트에서는 가급적 최소한의 정보라도 공개하고 싶지 않은 마음이 크다.

똑똑한 고객은 더 이상 기업에서 제공하는 할인 문자에 반응하지 않는다. 회원정보를 기반으로 제공하는 마케팅 수단에 집중하기보다는 양질의 제품과 결제 방식의 간소화에 집중하는 것이 실제 구매율을 높이는 방법이다.

100% 회원가입 제도와 비회원 회원가입 제도는 판매 상품에 따라서 달라질 수 있기 때문에 기업 입장에선 A/B 테스트를 통해 비회원 구입 가능 여부에 따른 구매율을 조사해보는 것도 필요하다.

<그림 2>나이키 웹사이트 결제창. 비회원을 위한 구입창을 식별하기 쉽게 구성했다.

2. 단순한 결제 과정

“네이버페이 안 되면 최저가라도 사지 않아요.”

인터넷 쇼핑할 때 가장 중요한 게 네이버페이로 결제할 수 있느냐에요. 다른 쇼핑몰보다 비싸더라도 네이버페이로 결제할 수 있는 곳이 있으면 거기서 구매해요. 최저가라고 해봤자 어차피 1,000~2,000원 차이인 경우가 많은데, 간편 결제가 되지 않는 곳에서 사려면 되게 귀찮거든요. 그리고 주문 내역을 한 번에 관리할 수 있어서 좋아요. 적립금도 여기저기서 찔끔찔끔 받으면 사실상 버리는 돈인데, 네이버페이로 사면 적립급도 한곳에 모이니까 개이득이에요.
-정은주(16세 중학생)  

MZ 세대를 타깃으로 마케팅을 하는 사람들을 위한 인사이트 사이트인 ‘캐릿’의 연구결과를 보면 10대는 간편결제(여기선 네이버페이)를 제공하지 않는 결제창은 고민도 하지 않고 닫아버린다고 답했다. 이로써 MZ 세대는 소소한 할인율 이벤트보다 간편 결제 시스템을 적용한 사이트를 선호하는 것을 알 수 있다.

단순한 결제 과정을 선호하는 것은 비단 MZ 세대뿐만 아니다. 베이먼드 연구소의 결과에도 나타났듯이 소비자 대부분이 복잡한 결제 과정을 선호하지 않았다.

최근 아마존은 결제 단계를 3단계에서 2단계로 축소시켰다. 상품 검색 후 ‘Buy Now’ 버튼을 터치하면 기존 앱 아래에서 결제할 수 있는 창이 바로 올라온다. 새 창으로 넘기지 않고 기존의 창에서 결제함으로써 사용자는 내가 사려는 물건을 정확히 인지할 수 있다. 사용자가 등록한 주소와 카드 정보가 노출되고 결제는 ‘탭’ 방식이 아닌 ‘스와이프(옆으로 밀기)’ 방식을 적용해 더 손쉽게 만들었다. 

온라인쇼핑 도중 실수로 스와이프해서 상품을 구매하는 일도 생길 수 있다. 하지만 취소와 환불이 쉬운 아마존 쇼핑몰에선 소비자의 구매 절차를 더 높이는 것에 집중한다.

3. 상품 정보 전달

상품 이미지
상품 이름
상품 상세 내용
상품 수량
상품 가격
최종 금액을 분명히 전달
필요한 정보는 확실히 전달

의외로 많은 e커머스 사이트에서 이 부분에 비중을 두지 않는다. 그저 필요한 정보 제공보다 제품 구입에 영향을 끼치는 요소를 어떻게 배치를 하느냐를 고민해야 한다.

이미지는 텍스트보다 뇌에서 빨리 인식하는 경향이 있다. 큰 이미지는 고객에게 제품을 더 직관적으로 나타낸다. 고객들은 점점 똑똑해지고 있다. 수차례의 온라인 쇼핑과 시행착오를 바탕으로 어떤 포즈로 사진을 찍어야 잘 나오는지 알아차린다. 눈속임으로 구매를 유도하는 시대는 지났다. 이미지는 최대한 크게 보여주는 것이 좋으며 잘못된 부분은 미리 언급하는 편이 좋다. 가격에 따른 옷의 퀄리티를 어느 정도 알기 때문에 내가 사려는 금액에서 터무니없이 퀄리티 좋은 제품을 기대하지 않는다.

소비자가 화가 나는 시점은 나에게 어울리지 않는 옷을 샀을 때보다 화면의 이미지와 실제 이미지와 다를 때, 언급되지 않은 상품을 받았을 때다.

영국의 온라인 쇼핑몰 AOSO은 모바일 화면 상단의 불필요한 요소를 제거하는 대신 이미지를 최대한 확대해서 보여주고 있다. 소비자가 이미지를 아래로 스크롤하면 하단의 내비게이션 바(bar)는 위 영국의 온라인 쇼핑몰 AOSO 사진 중 ‘이미지 2’에서 보는 것처럼 자동으로 사라진다. 또한 모든 이미지에 ‘video’를 제공한다. ‘video’를 터치하면 모델의 워킹샷에 따른 옷감의 핏을 살필 수 있다. 개인적으로 랜딩 페이지의 이미지가 gif 파일을 적용해 이미지가 움직이는 레이아웃보다 소비자가 원하는 이미지만 선택해 영상으로 볼 수 있게 하는 UX 디자인이 깔끔하고 상품 전달에 효과적이다.

‘이미지 3’에서 보는 것처럼 결제창의 경우 상품을 왼쪽으로 밀면 삭제할 수 있고 오른쪽으로 밀면 저장이 가능하다. 탭(bar) 방식 대신 스와이프(swipe) 방식을 사용하고 있다.

영국의 온라인 쇼핑몰인 Pull & Bear 역시 UX 디자인에 신경을 쓴 흔적을 발견할 수 있다. 검색창에서 제품 이미지를 최대한 크게 보여주며 스크롤을 내리지 않고도 옷 정보와 가격, 색상, 사이즈, 장바구니 담기가 모두 가능하도록 디자인했다. 결제창 역시 스와이프 방식을 적용해 장바구니 리스트를 삭제&저장할 수 있도록 해놓았다.

필요한 정보는 확실히 전달할 것! – 모바일 앱을 열었을 때 일시적으로 뜨는 팝업보다 시선을 방해하지 않는 선에서 지속적으로 노출되는 정보가 더 효과적이다.

<그림 13> 랜딩 페이지에 지속적으로 노출되는 ‘Free delivery on all your orders!’ 정보는 작은 글씨라도 매우 강력하다!

Pull & Bear 사이트의 경우 랜딩 페이지에서 지속적으로 무료 배송 이미지를 제공한다. 작은 폰트이지만 고객의 입장에서는 매우 강력한 메시지가 될 수 있다. 배송비 걱정 없이 제품을 구매할 수 있다는 확인 속에서 온라인 쇼핑을 지속할 수 있는 힘이 생긴다.

4. 단순하고 정확한 CTA(Click To Action, 행동 유도)

기업의 최종 목적은 소비자에게 상품을 파는 것이다. 소비자에게 희소성과 긴박함을 불러일으키는 클릭 유도 문안(CTA) 디자인은 중요하다.

CTA 버튼의 내용은 간결해야 하며 비슷한 단어들 중 상황에 가장 적합한 단어를 선택해야 한다. 배경화면과 대비되는 색상을 선택해서 사용자가 실제로 상품 구매를 할 수 있도록 유도해야 한다.

5. 빠른 고객 상담 서비스

고객이 실시간으로 질문할 수 있는 대화 상자를 디자인하는 것 역시 중요하다. 과거에는 일대일 게시판을 통해 질문을 올리는 시스템이 대부분이었다. 하지만 일대일 게시판은 담당자가 언제 확인을 하는지 알 수 없으며 구매의 관심사에서 고객이 이탈하기 쉽다.

카톡 일대일 채팅이나 인스타 DM, 로봇챗 등 사람이든 AI를 통한 상담이든 고객은 내가 실시간으로 확인하는 것을 중요하게 생각한다. 이런 경향은 어린 연령층일수록 더 심화된다. 10~20대 초반에서 페이스북 메신저를 선호하는 이유 중 하나도 대화창에 로그인한 사람을 볼 수 있기 때문에 실시간으로 채팅할 수 있다는 믿음에서 비롯된다. 

MZ 세대는 실시간 소통에 익숙하다. 대학내일 20대 연구소에서 진행한 ‘세대별 커뮤니케이션 비교 연구’에서는 Z세대의 67%가 ‘메시지 읽음 여부’ 정보가 필요하다고 응답했다.

하지만 고객의 질문을 실시간으로 상담할 수 있는 대화창 디자인이 튀어서 상품을 검색하는 데 방해하지 않도록 해야 한다. 상품을 쉽게 찾을 수 있는 디자인 내에서 필요할 땐 언제든 사용할 수 있는 곳에 배치해야 한다.

실시간 상담이 어렵다면 답변이 가능한 시간을 정확하게 명시해 두는 것도 좋다. 또한 접수된 질문은 최대 몇 시간 이내에 답변이 완료된다는 것을 알려준다.

UX디자인을 하는 것 = 건축 설계 도면을 그리는 것

지금까지 상품 결제를 원활하게 만드는 UX 디자인을 살펴봤다. 상품 구매의 가장 중요한 요소는 퀄리티 좋은 상품이겠지만 좋은 상품을 얼마나 효율적으로 전달하는지도 중요한 세상이 됐다. UX 디자인은 단순히 멋있어 보이고 화려한 애니메이션을 사용하는 디자인이 아니다. 

UX디자인(사용자 경험 디자인)은 제품이나 서비스의 각각의 기능 혹은 요소가 사용자에게 제공하는 다양한 감정의 총합이다. 그렇기 때문에 UX 디자인을 할 때는 디자인에 들어가는 모든 요소에 대한 합당한 이유를 설명할 수 있어야 한다.

Author
김현지

김현지

UX 리서처&디자이너. 여행과 글쓰기를 좋아해 3권의 책을 출간하였습니다. 시니어 세대를 위한 직관적인 UI 디자인과 사용자 중심 글쓰기(UX writing)를 좋아합니다. hailey.hjkim2@gmail.com

Comments
© DIGITAL iNSIGHT 디지털 인사이트. 무단전재 및 재배포 금지

뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다. 본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은 반드시 기사의 출처(로고)를 붙여주시기 바랍니다. 영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라 그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

Related Posts