공백을 무엇으로 채우면 좋을까?
유저가 빈손으로 떠나지 않게 하라
우리가 흔히 보는 공백상태(Empty State)
마켓컬리 장바구니
▒ 마켓컬리에 로그인하고 들어가 봤다. 장바구니에 아무것도 담지 않은 것이 현실이긴 하지만, 정말 팩트만을 이야기한 채 단출한 구성이다. *공백상태로 두었다고 해서 잘못됐다는 게 아니다. 이왕이면 그 공간을 한번 잘 활용해보자는 뜻이다:)
장바구니에 담긴 상품이 없습니다
무신사 장바구니
▒ 무신사 장바구니도 팩트만을 담긴 했다. 그래도 최소한 가입 즉시 할인 혜택과 전상품 무료배송이라는 미끼는 함께 보여준다. 무신사 사이트 특성답게 수많은 텍스트가 뿌려져(?) 있어 그리 썰렁해 보이진 않는다.
[마이크로카피]에서는 장바구니 상의 빈 페이지를 '끔찍한 낭비'라고 말한다. 단순히 '구매한 상품이 없습니다' or '주문한 내역이 없습니다'라고만 해두면 판매기회를 놓칠 수도 있기 때문이다. 이 공간에 사회적 증거(판매량 좋은 제품, 검색이 많은 제품, 인기상품 등)를 바탕으로 한 상품 리스트를 제시하면 유저의 구매 의욕을 당기는 데 효과가 있다고 알려준다. 물론 해당 링크도 함께 제시하면 더 좋고.
공백상태에서 텍스트는 유저가 그 다음 행동으로 무엇을 할 수 있는지 직·간접적으로 알려준다. 다음의 사례를 함께 보자.
사례 1: 아이디어스는 작가들의 다양한 작품을 담아보길 제한하면서 [작품 구경하러 가기] 버튼도 함께 두었다. 상단엔 첫 구매 의욕을 당기는 100원 이벤트를 눈에 띄게 배치해서 사이트에 더 머물고 싶은 마음을 준다. 비록 내 장바구니는 empty지만, '작가'들의 작품으로 채워지길 기대하게 만든다.
아이디어스 장바구니
사례 2: W.CONCEPT 장바구니는 친구초대 혜택은 상단에, 사람들이 구매한 상품 리스트는 하단에 두고 쇼핑을 독려한다. 제시한 상품 리스트 중에 우연히라도 눈길을 끄는 제품이 있다면 구매로 이어질 수도 있으니 그 기회를 놓치지 않고 활용한다.
W.CONCEPT 장바구니 C
사례 3: 카카오뱅크 모바일 > 저금통 내역이다. 아직 저금한 게 없어 빈 상태임을 알려주는 카카오 캐릭터의 표정이 귀엽다. 상단에 적힌 '저금통에 쌓인 아이템을 친구와 공유하라'는 글귀가 비어있는 상황과 딱 맞아떨어지지 않아 뭔 뜻인가 한참 헤맸다. 3일 뒤 약간의 돈이 모아졌을 때 비로소 그 의미를 캐치했다. 내가 이해력이 짧은지는 모르겠지만, 저금된 게 하나도 없는 비어있는 화면에 맞는 글귀로 바꾸면 좋겠다는 생각이 들었다. 잔돈 저금을 독려하는 글귀라든가, 어쨌든 카뱅 이용도를 높일 수 있는 그런 글귀 말이다.
→ 나라면 뭐라고 썼을까? 한번 생각해보자!
카카오뱅크 저금통, 잔액 0원 '아직은 비어있어요' → 잔액 796원 '볼펜만큼 모았어요'
사례 4: 배달의 민족은 참 센스가 있다. 일단 한번 보시라. 그냥 '없어요'라고만 하지 않는다. "~없으니 ~해보자"는 식의 대안을 제시한다. 'X를 하려면 Y를 하세요(To do X, do Y)와 같은 포맷은 단순한 방법이지만, 이 조차도 하지 않는 사이트와 비교해 훌륭하다고 생각한다. 상단 카테고리별로 딱 맞는 글귀까지 함께 제시하니 기능과 액션의 동시효과를 잘 이끌어낸다고 생각한다. 적어도 유저를 다음 단계로 진입하게 만드니까.
*참고. <전략적 UX 라이팅>
"~없으니 ~해보자"라는 식의 멘트가 긍정적으로 작용한다
헐, 텅 등 배민 특유의 소리+이미지가 빈 페이지와 무척이나 잘 어울린다
+ 앞서 제시한 스터디 케이스와 함께 보면 좋을 콘텐츠입니다.
*출처: 요즘IT 뉴스레터