1.아내의식탁 – 우리의식탁은 왜 장바구니 UI를 개선했을까?

아내의식탁이 우리의식탁으로 이름을 변경함과 동시에 장바구니 UI를 개선했어요. 크게 두 가지 변화가 있었는데요.

  • [장바구니가 비어 있을 때] 행동의 끝이 아니라 연결이 될 수 있도록 버튼 추가
  • [장바구니에 상품이 있을 때] 화면 내 수량 변경이 바로 가능하도록 개선

🛒구매의 시작, 장바구니 어떻게 구성할까? 뉴스레터를 통해 장바구니 화면 구성 시 크게 네 가지를 고려해야 한다는 내용을 확인한 적 있어요.

  • 장바구니가 비어 있는 상태 고려하기
  • 장바구니에 담겼다는 것을 인지 할 수 있게 하기
  • 장바구니에 담긴 상품 쉽게 구매 할 수 있게 하기
  • 장바구니에 상품이 담겼다는 걸 알려주기

기존 아내의 식탁은 장바구니가 비어있을 때, 현재 상태에 대한 안내만 제공 되고 있었습니다. “장바구니에 담긴 상품이 없습니다.” (1)최신 버전에서는 디저트 일러스트레이션과 함께 기존 문구, 쇼핑하러 가기 버튼이 추가 되었어요. 장바구니는 비어있는 경우가 더 많기에 비어있을 때어떤 행동을 유도할 지, 고민이 꼭 필요하다는 사실을 다시 한 번 확인할 수 있는 사례입니다.

장바구니에 상품이 담겨있는 경우에도 변화가 생겼어요. 기존에도 주문 수정이 가능했지만, 버튼 탭 – 바텀 시트로 내용 확인 등 2단계에 걸쳐 진행이 됐어요. (2)변경 후에는 ‘수량’을 중심으로 상품 썸네일 하단에서 바로 수정이 가능합니다. (3)이는 마켓컬리, 오늘회, 헬로네이처 등에서도 사용하는 방법이에요. 화면 전환이나 별도 화면을 출력하는 것보다 훨씬 간편하게 수량 변경이 가능하니 사용자 입장에서 장바구니에 담을 때 잘못 입력한 값을 수정하거나 기존 수량에 1-2개를 쉽게 추가할 수 있습니다. 신선식품, 음료 등이라면 꼭 필요한 기능이기도 하고요.

1-1.함께 읽어보세요!

2.갤럭시 스토어는 왜 다운로드 중인 사람들의 수를 보여줄까?

요즘은 좀 덜(?)하지만 예전에 부킹닷컴 등의 서비스를 처음 접했을 때, 제가 가장 놀랐던 건 제가 보고 있는 숙소를 다른 사용자가 보고 있다는 안내 그리고 몇 개가 남았는지 계속 알려주는 등의 내용었어요. 여전히 이들 서비스는

  • (2)부킹닷컴 : 리스트에서 해당 조건의 객실이 몇 개 남았는지 안내
  • (3)부킹닷컴 : 상세 화면에서 지난 몇 시간 동안 예약된 횟수 안내
  • (4)아고다 : 상세 화면에서 판매 완료 임박 안내

등의 정보를 제공하고 있어요. 아무래도 사용자로 하여금 심리적-상대적으로 빠르게 결제를 하게끔 유도하는 대표적인 장치라고 할 수 있는데요. 홈쇼핑을 보며 살까 말까 고민하는 순간에 매진 임박! 이라는 메시지와 쇼호스트의 멘트가 나오는 순간 에잇 하면서 결제를 하던 경험이 한 번쯤은 있으실 것 같아요. (숙소 예약도 마찬가지)

이 둘의 공통점은 모두 정해진 수량이 존재한다는 점이에요. 객실도, 라이브커머스나 홈쇼핑에서 판매되는 상품도 그렇죠. 그런데 갤럭시 스토어에서 얼마전 재미있는 걸 발견했어요. 메타버스 스터디를 위해 오랜만에 포트나이트를 다운로드 받으러 들어갔는데 (포트나이트는 구글 스토어에서 발을 뺐어요 수수료에 대한 반발) (1)다른 사람 9,566명이 이 게임을 다운로드 하고 있어요 라는 메시지가 설치 버튼 위 노출되고 있었기 때문입니다.

앱을 기획하거나 운영해본 본둘이라면 스토어 상세페이지 진입 대비 전환율을 많이 보셨을거에요. 저도 스크린샷 A/B테스트를 국가별로 진행하는 등 유입된 사람들을 한 명이라도 더 설치로 이어지도록 노력했었는데요. 갤럭시 스토어는 서비스 운영 관점, 즉 개발사의 노력의 관점이 아니라 자신들이 직접 전환율을 높이기 위한 작업을 하고 있는 것입니다.

여러가지 이유가 있을 것 같아요. 양대 마켓 대비 갤럭시 스토어의 존재감은 미미하기에 자체적으로 다운로드 수 등을 높이기 위한 노력의 일환일 것 같기도 하고요. 제가 궁금했던 건, 저 메시지가 효과가 있을까? 에요. 친구들이, 야 이거 재밌어 한 번 해보자 라고 옆에서 말하는 것도 아니고 너가 최근에 설치한 게임과 가장 유사한 게임인데, 인기가 많아- 라는 메시지도 아니고. 이만큼이 하고 있어! 라는 메시지가 과연 사용자들에게 공감을 일으킬 수 있을까요? 앱은 상품처럼 재고의 영향을 받는 것도 아닌데 말이죠.

작년 5월, 원스토어/플레이스토어/앱스토어/갤럭시스토어에서 앱을 다운로드 받을 때 어떤 행동을 유도할까? 라는 글을 작성한 적 있는데요. 갤럭시스토어는 내가 다운로드 받은 앱과 유사한 앱을 설치 버튼 탭과 동시에 띄워주는 방법을 활용하고 있었어요. 바텀 시트로, 동일 카테고리 내 인기 앱을 보여주는 단순한 방법이었지만 제게는 꽤 매력적인 트리거였어요. 단순 수치지만 3개의 앱을 받을 때 1번 정도 갤럭시스토어가 유도한대로 움직였기 때문입니다.

2-1.함께 읽어보세요!

3.리스트 UI 추가 사례 확인 및 정리

지금 써보러 갑니다, 00:00 지난 뉴스레터 주제는 ‘리스트 UI’ 였어요. 총 9개 서비스를 살펴봤는데요.(오늘회, 헬로네이처, SSG새벽배송, 무신사, 오늘의집, 네이버 쇼핑라이브, 클럽하우스, 인스타그램, 틱톡) 여러 피드백 중, 관련 사례와 자료를 꾸준히 보고 싶다는 내용이 많아 앞으로는 뉴스레터 발행 후 사례를 추가로 확인하고자 합니다 (추가로, Hooky라는 이름의 국내외 모바일 앱 사례 및 연관글 확인이 가능한 서비스를 별도로 만들고 있어요.)

(1)호텔스컴바인

호텔스컴바인은 리스트에서 숙소를 대표하는 이미지를 스와이프로 확인할 수 있어요. 숙소는 다른 제품들과 달리 사용자가 봐야 할 범위가 많고, 이미지로 대략적인 확인이 가능한데요. (침대, 뷰, 화장실, 부대시설 등)대표이미지 한 장을 보고 상세화면을 진입하는 것 대비 더 많은 정보를 볼 수 있다는 장점이 있어요. 게다가 세로 비율로 적용되어 있어 넘겨보기가 더 편리합니다. (물론 오른손으로 한 손 사용시 닿기 어렵다는 점도 있지만)

(2)에어비앤비

에어비앤비도 숙소 이미지를 리스트에서 넘겨볼 수 있어요. 호텔스컴바인과 다른점이 있다면 이미지의 가로 비율이 더 길다는 점. 그래서 한 손으로 조작할 때도 쉽게 확인이 가능해요. 그리고 보통 숙소 이미지는 가로로 보는 경우가 많고, 가로는 공간을 더 자세히 볼 수 있다는 장점이 있습니다. 또 하나 눈에 띄는 점은 하단 고정으로 지도를 띄워준다는 점이에요. 특정 도시 내 리스트에 포함된 숙소가 어디에 있는지 화면 전환없이 확인 가능합니다. (호텔스컴바인은 지도와 필터를 언제든 확인 또는 변경할 수 있었죠.) 두 서비스 모두 이미지를 먼저 확인하는 구조라는 건 동일하네요!

(3)스카이스캐너

스카이스캐너도 앞서 살펴본 호텔스컴바인, 에어비앤비와 같이 리스트 내 이미지를 넘겨 볼 수 있어요. 지도는 리스트 상단에 위치하고 있지만 고정으로 별도 확인은 어렵고 필터는 언제든 확인 및 재설정 가능해요. 재밌는 건, 리스트에 포함된 이미지를 모두 확인한 경우에요. 탭해서 더보기를 활용, 자연스레 상세페이지로 진입이 가능하게 설계되어 있습니다.

(4)제주지니

제주지니는 (제가 아는 한 유일하게) 장애인 접근성에 대한 정보를 리스트에서 표기해줘요. 리스트에 휠체어 아이콘이 보이시나요? 상대적으로 쉽게 돌아다닐 수 있음을 의미합니다. 상세페이지로 진입하면 더 자세한 정보를 볼 수 있어요.

  • 휠체어 탑승 상태로 자유롭게 이동가능
  • 장애인 활동 보조 필요 여부
  • 턱 여부
  • 장애인 전용 화장실 여부
  • 장애인 전용 주차장 여부
  • 전동 휠체어 대여 가능 여부

당연히 있어야 할 정보인데, 그만큼 신경쓰지 못했던 영역이기도 해요. 그래서 더 반가웠던 내용이었습니다.

(5)트립어드바이저

트립어드바이저는 리스트에서 리뷰를 강조하고 있어요. 평점 평균과 전체 리뷰 수, 그리고 실제 숙박객이 남긴 리뷰 중 하나를 선정해 리스트에서 보여주는 방법을 활용합니다. 리뷰는 우리가 구매를 결정할 때 가장 중요한 기준이 되는데요. 다만 여러명이 평가한 평균치에 특정 리뷰가 더해졌을 때의 효과가 어떤지는 아직 잘 모르겠어요. 좋은 리뷰를 우선적으로 배치할 수 있기 때문입니다.

부록1 : 클럽하우스와 함께 활용하면 좋은 서비스 모음

1.Clublink

  • 소셜 미디어에 공유가능한 클럽하우스 숏링크 생성

2.Clubhype

  • 클럽하우스 이벤트를 소셜미디어에 공유할 수 있는 숏링크 생성

3.Rooms of Clubhouse

  • 클럽하우스 내 오픈된 모든 방을 검색할 수 있도록 도와줌

4.Clubhouse Bio Editor

  • 브라우저에서 클럽하우스 프로필 설정 가능

5.Chpic

  • 클럽하우스 프로필 이미지에 컬러 테두리를 생성해 줌

6.Direcon for Clubhouse

  • 방, 오디언스 등에 대한 구체적인 데이터를 제공해 줌

출처 : https://www.producthunt.com/newsletter/8014
출처 : https://www.producthunt.com/newsletter/8019

00:00 뉴스레터 발행 안내

2021년 02월 18일 발행된 24번째 뉴스레터 주제는 9개 서비스에 대한 리스트 UI 분석이었어요. 다음 뉴스레터 발행일은 3월 4일 오전이며, 주제는 ‘탈퇴화면’입니다. 탈퇴화면 분석도 많은 기대 부탁드려요! (뉴스레터 구독하기)