<h3>빈 화면 구성에 더 힘을 쏟아야 하는 이유</h3><strong>(에디터, 재그마스터)</strong> 우리가 다양한 화면을 구성하는 과정에서 놓치기 쉬운 화면이 몇몇 존재하는데요! 그 중 대표적인 상황이 바로 '데이터가 없는' 상태의 빈 화면 입니다. 사용자의 참여로 데이터가 채워지는 서비스라면 더더욱 그렇죠. 빈 화면이 중요한 이유는 사용자에게 다음 행동에 대한 힌트와 함께 정보를 제공해줄 수 있다는 점입니다. 자칫 마지막 화면이라 생각할 수 있는 공간을 스스로 채워야겠다는 생각으로 바꿀 수 있는 곳이기도 하죠. 이는 사용자의 참여율을 높이는 중요한 장치로 이어질 수 있기도 합니다. <strong>(에디터, 동동)</strong> 담겨야 할 데이터가 없는 빈 화면을 채우기 위해 어떤 데이터, 행동이 필요한지 사용자에게 정확하게 인지시키고, 다음 액션을 유도하는 것은 정말 중요합니다. 오늘은 단순히 텍스트로 상황을 알려주는 화면보다 특정 행동을 유도하는 사례를 통해 빈 화면 대응 방안을 살펴보려 합니다. <br/><br/> <h3>빈 화면 사례 소개</h3><h4><span style="text-decoration: underline;"><strong>1. 배달앱, 찜한 가게가 없는 경우</strong></span></h4><img class="size-full wp-image-19759 aligncenter" src="https://www.wishket.com/media/newscenter/629/1.png" alt="" width="640" height="441" /><p style="text-align: center;">요기요, 배달의 민족, 쿠팡 이츠 - 찜 목록이 비어 있는 경우</p> 요기요(①)와 배달의민족(②), 쿠팡이츠(③)는 모두 특정 '가게'를 즐겨찾기 할 수 있습니다. (찜, 좋아요 등) 첫 실행을 기준으로 한다면 아직 찜 한 가게가 없을 가능성이 높은 화면이기도 하죠. 이들이 빈 화면을 대하는 방법은 조금씩 다릅니다. ① 요기요는 이 공간이 '왜' 비어 있는지를 먼저 설명해줍니다 (찜한 음식점이 없습니다.) 그리고 공간을 채우기 위해 어떤 행동을 할 수 있는지를 알려줍니다.(관심있는 음식점 상세화면에서 하트 아이콘을 눌러 '찜' 하시면~) 마지막으로 앞선 설명을 통해 실제 행동 할 수 있는 버튼을 추가했습니다. (음식점 보러가기) 설정한 동네의 전체 음식점 리스트로 이동하게끔 말이죠. ② 배달의 민족은 본인들의 캐릭터를 빈 화면에 적절히 활용하고 있습니다. 캐릭터가 하트를 안고 누워있는 것으로 이 공간이 어떤 곳인지 설명하고 있습니다. 하지만 빈 공간을 어떻게 채워넣을 수 있는지 '안내' 측면에 대한 정보는 부족합니다. 또 사용자가 직접 하단 탭 또는 뒤로가기 버튼 등을 활용해 다시 음식점이 있는 공간으로 이동해야 하는 불편함이 존재합니다. ③ 쿠팡이츠는 세 서비스 중 '기능 안내'를 가장 적절하게 제공하고 있는데요. 실제 음식점 상세 화면 뷰를 일부 가져와 좋아요를 어떻게 하는지 알려줍니다. 실제 화면을 보여주니 이해가 훨씬 빠를 수 밖에 없고요! 또 버튼을 탭하면 바로 홈 화면 내 맛집을 확인 할 수 있도록 행동을 유도하고 있습니다. <strong>(에디터, 재그마스터의 덧붙임)</strong> 빈 화면의 첫 번째 목표는 사용자가 해당 화면 내 기능을 '어떻게' 활용 할 수 있는지 알려줄 수 있어야 하는 점입니다. 특정 가게를 '찜'하면 이 곳에서 언제든 확인 할 수 있어! 와 같은 구체적인 메시지를 활용해야 하는 이유기이도 합니다. 또 별도의 화면을 만들지 않더라도, 빈 화면 내 제공되는 기능을 바로 활용할 수 있도록 연결고리를 마련해주는 것 역시 중요합니다. 쿠팡과 요기요가 맛집 리스트로 바로 이동할 수 있도록 버튼을 제공해주는 것처럼 말이죠. <br/><br/> <h4><span style="text-decoration: underline;"><strong>2. 여행 서비스, 찜한 숙소나 일정이 없는 경우</strong></span></h4><img class="size-full wp-image-19760 aligncenter" src="https://www.wishket.com/media/newscenter/629/2.png" alt="" width="640" height="441" /><p style="text-align: center;">데일리호텔, 마이리얼트립, 야놀자 - 빈 화면</p> 음식 배달 서비스 뿐만 아니라 숙소 또는 여행 관련 서비스에서도 '찜'하기나 '좋아요'는 정보를 수집하는 중요한 기능으로 활용 되는데요. 데일리호텔과 마이리얼트립 그리고 야놀자 역시 위시리스트, 찜하기 기능을 제공하며 빈 화면 내 여러 정보 제공과 행동 유도를 하고 있습니다. ① 데일리 호텔은 숙소와 레스토랑을 예약이 가능하기에 위시리스트 역시 두 개의 탭으로 제공되고 있습니다. 요기요와 유사하게 현재 상태를 알려주고 (저장된 위시리스트가 없습니다.) 찜하기를 어떻게 할 수 있는지 말해주며 (원하는 숙소 상세 화면에서 하트 아이콘을 눌러~) 실제 숙소를 볼 수 있는 화면으로 이동 가능한 버튼을 제공해줍니다. 재밌는 점은 '숙소 보러가기'를 탭했을 때 원하는 조건에 따라 확인 가능한 검색 화면으로 이동한다는 점입니다. ② 마이 리얼 트립은 현재 상태에 대한 정보만 제공해주고 있네요. ③ 야놀자는 하트와 X를 조합한 아이콘으로 명확한 현재 상태를 보여주고 있습니다. 데일리호텔과 같이 빈 화면을 채울 수 있는 공간으로 연결되는 버튼이 제공되고 있네요. <strong>(에디터, 재그마스터의 덧붙임)</strong> 어떤 화면으로 이동 시키느냐도 중요한 기준이 됩니다. 앞서 쿠팡이츠는 '홈 화면'으로, 요기요는 우리 동네 맛집 '전체 리스트'로 바로 이동이 가능한데요. 데일리 호텔은 검색 화면으로 이동시키고 있습니다. 홈 화면으로 이동하는 것보다 리스트로 이동하거나, 조건에 따른 검색이 가능한 화면으로 이동하는 것이 찜할 확률을 더 높일 수 있는 방법이 되기 때문입니다. <br/><br/> <h4><span style="text-decoration: underline;"><strong>3. 커머스, 장바구니가 비어 있는 경우</strong></span></h4><img class="size-full wp-image-19761 aligncenter" src="https://www.wishket.com/media/newscenter/629/3.png" alt="" width="640" height="441" /><p style="text-align: center;">오아시스, 쿠팡, 이마트 - 장바구니가 비어 있는 경우</p> 커머스에서 장바구니란 오프라인에서 카트와 같은 역할을 합니다. 개별로 구매하지 않고 장바구니에 담아 한 번에 구매하기 위한 수단이기 때문인데요. 온라인 또는 모바일 환경에서 장바구니를 먼저 들어가는 경우는 많지 않지만 쇼핑 후에는 비어 있는 경우가 많기에 앞선 사례와 같이 빈 화면 대응을 고민해 봐야 합니다. ① 요즘 자주 만나게 되는 오아시스입니다. 가입 후 장바구니를 먼저 확인해 봤는데 비어있다는 상태 정보만 알려주고 있었습니다. 서비스 특성 상 유기농 제품을 주로 취급하기에 이에 대한 안내와 주요 제품들을 바로 만나볼 수 있는 연결고리가 있다면 어땠을까 라는 생각이 드네요. ② 쿠팡은 현재 상태 정보와 함께 '추천 상품 보기' 버튼을 제공하고 있습니다. 쿠팡은 개인에 따른 추천화가 잘 되어 있기에 다른 화면 보다 이를 가장 잘 적용한 홈 화면으로의 이동을 선택한 것 같네요. ③ 이마트는 장바구니가 비어있다는 정보와 함께 실제 '상품 리스트'를 바로 보여주고 있습니다. 화면을 이동하지 않고 바로 상품을 만나볼 수 있도록 유도하는 방법인데요. 개인의 구매 내역과 같은 데이터를 기반으로 구성된 리스트가 아닌, 누구에게나 적용 가능한(구매 이력이 없는) '인기 상품'을 기준으로 리스트를 구성하고 있습니다. (인기 상품을 보니 대부분 생필품에 포함되는 상품!) <strong>(에디터, 재그마스터의 덧붙임)</strong> 행동을 유도하기 위한 문구는 직설적이거나 구체적인 것이 좋습니다. 숙소 보러가기 vs 국내 숙소 기획전 보러가기, 오늘의 추천 상품 보기 vs 쇼핑하러가기. 어느 문구가 좋다고 생각하시나요? 기획전 내 숙소를 보거나, 나를 위한 추천 상품을 볼 수 있다는 것이 제게는 더 매력적으로 다가오는데요. 이처럼 빈 화면 내 다음 행동 유도를 위해서는 명확하지만 직설적인 내용을 담는 것이 좋습니다. 설득의 효과를 얻을 수 있기에 더더욱! <br/><br/> <img class="size-full wp-image-19762 aligncenter" src="https://www.wishket.com/media/newscenter/629/4.png" alt="" width="640" height="380" /><p style="text-align: center;">아이디어스, 에이블리, 지그재그 - 장바구니가 비어 있는 경우</p> 이번 사례는 의류와 악세서리 중심의 커머스입니다. 개인적으로 식료품과 생활용품 대비 의류는 장바구니에 담아둔 채로 유사 상품과 비교하는 시간이 긴 편이에요. 비교하고 그 카테고리와 상품은 구매 확률이 높기 때문에 초기 빈 화면에서 상품을 담는 과정이 매우 중요하다고 생각합니다. ① 최근 텀블벅을 인수하며 화제가 된 아이디어스입니다. 아이디어스는 '마음은 가득 찬 당신'이라는 문구로 서비스 성향에 맞는 감성적인 문구와 함께 상단에 할인 쿠폰 배너를 배치했습니다. 할인 쿠폰을 통해 작품 주문까지 좀 더 쉽게 연결될 수 있도록 유도하고 있는데요. 주문에 있어 금액이 중요한 만큼 상단 배치가 인상적이었습니다. ② 사실 빈 화면을 거의 처음 보는 듯한 에이블리입니다. 에이블리는 베스트 상품의 페이지로 연결하는 버튼을 배치했어요. 베스트 페이지는 사용자 맞춤 필터와 상품 인기순으로 모아볼 수 있어 같은 선택을 한 것 같습니다. 지그재그도 에이블리와 유사하게 하단의 상품 보러가기 버튼을 통해 인기 상품 페이지로 사용자를 유도합니다. 여기서 주목할 부분은 ③의 포인트를 통해 Z페이를 사용자에게 좀더 인식시킬 수 있도록 표현한 점인데요. 서비스에서 강조하고 싶은 특색과 기능을 보여줄 수 있는 점을 참고하면 좋을 것 같아요! <br/><br/> <h4><span style="text-decoration: underline;"><strong>4. 기타 참고 사례</strong></span></h4><img class="size-full wp-image-19763 aligncenter" src="https://www.wishket.com/media/newscenter/629/5.png" alt="" width="615" height="640" /><p style="text-align: center;">리멤버, VSCO는 빈 화면을 어떻게 활용하고 있을까?</p> ① 리멤버의 주요 기능 중 하나인 '팀 명합첩'이 비어 있는 경우입니다. 같은 역할을 하는 팀원들이 함께 명함첩을 만들어 관리할 수 있는 기능인데요. 좋아요, 찜과는 또 다른 경우로 리멤버와 같은 서비스에서만 쓸 수 있는 기능이기에 첫 사용을 대비한 '안내'가 꼼꼼하게 적용되어 있습니다. 간략한 기능 안내와 함께 명함첩을 바로 만들 수 있는 버튼, 그리고 자세히 알아보기라는 텍스트 링크를 통해 더 자세한 정보를 확인 할 수 있는 여지를 남겨두었네요. 찜하기와 같이 일반적인 기능으로 채워지는 화면이 아니라면 리멤버와 같이 기능에 대한 안내를 자세히 확인 할 수 있도록 돕는 것도 좋은 인상을 심어줄 수 있는 방법이 될 수 있습니다. ② 오랫동안 잘 활용하고 있는 사진, 영상 편집 앱 VSCO는 사용자가 편집, 업로드 한 이미지를 모아 볼 수 있는 공간이 따로 존재합니다. (인스타 공개 계정과 같은 역할) 아직 저는 이 공간을 따로 활용하고 있지 않은데요. 비어 있는 이 공간이 채워질 때 어떤 구성으로 보여줄지에 대한 레이아웃 정보는 어떤 내용으로 채워지는지에 대한 정보를 제공하고 있습니다. 편집 화면으로 바로 이동 가능한 버튼도 함께 제공하고 있네요! <br/> <img class="size-full wp-image-19764 aligncenter" src="https://www.wishket.com/media/newscenter/629/6.png" alt="" width="640" height="380" /><p style="text-align: center;">인스타그램, 페이스북, Emolog</p> 포스팅 기능 중심의 빈 화면도 함께 살펴보겠습니다. 대표적인 사례로 인스타그램 스토리, 페이스북 그리고 제가 최근 애용하는 Emolog라는 이모지 활용 일기 서비스를 만나볼게요. 인스타그램 스토리와 페이스북 게시글 작성 시 ①, ②번의 문구를 통해 입력에 필요한 액션과 어떤 내용을 적으면 좋을지 가이드를 주고 있습니다. 그리고 하단의 포스팅 작성을 위한 기능들이 크게 배치되어 바로 적용할 수 있도록 안내하고 있죠. ③Emolog는 큰 이모지로 하루의 기분을 표현하고 하단의 일기 제목과 하루를 기록하는 서비스입니다. 그래서 이모지 영역과 텍스트 영역 모두 톤 다운된 폰트 컬러로 안내 멘트를 제공하고 있습니다. <strong>(에디터, 동동의 덧붙임)</strong> 빈 화 면의 경우, 행동 유도를 위한 문구를 주로 포인트 컬러가 아닌 그레이 계열의 톤 다운된 컬러로 디자인합니다. 그 이유는 기능을 활성화하여 작성된 내용과 확실하게 비교할 수 있도록 직관성을 높이기 위함과 기능을 버튼으로 배치했을 때 버튼과 포인트가 눈에 띌 수 있도록 유도하기 위함입니다.
