brunch

You can make anything
by writing

C.S.Lewis

by Maudie Dec 22. 2022

공백의 쓰임새


공백을 무엇으로 채우면 좋을까?




유저가 빈손으로 떠나지 않게 하라








우리가 흔히 보는 공백상태(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 뉴스레터

매거진의 이전글 넷플릭스 설득의 기술
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari