빈 화면을 구성한 5가지 사례와 맥락에 맞는 설계의 중요성
빈 화면, 그냥 크게 고심하지 않고 설계해도 되는거 아니야?
그냥 컨텐츠가 없다고 시스템 문구 한 줄 넣으면 되는것 아닌가?
우리는 화면 설계를 하다 보면 종종 빈 화면을 빈 채로 두어도 되는지 고민하게 됩니다.
대표적인 예가 제공할 콘텐츠가 없어 빈 화면을 제시해야 될 때 입니다.
대부분의 서비스가 그러하듯이 빈 화면을 간단한 시스템 **문구 한 줄로 표현할 수도 있지만, 과연 그렇게 설계하는 것이 사용자에게 최적의 경험을 제공하기에 올바른 방법일까요?
우리는 이러한 의문을 시작으로 이번 칼럼을 작성하게 되었습니다.
우선, 우리가 왜 빈 화면에 대해 이야기하려 하는지 생각해 보았습니다.
1. 자연스러운 사용 흐름 제공
빈 화면에는 사용자의 행동을 유도하는 액션을 제공할 수 있습니다.
빈 화면은 사용자에게 새로운 경험을 안내하는 길잡이 역할을 할 수 있습니다.
단절된 사용 흐름을 지양하여 ‘추천/동기 유발’과 같이 서비스 안에서 자연스러운 연결로 이어질 수 있습니다.
2. 서비스 내 체류 시간 증대 가능
의미 없고 무성의한 빈 화면은 사용자로 하여금 유용한 정보를 제공하지 않는다고 판단하여 더 이상 서비스를 이용하지 않고 이탈합니다.
사용자가 처음 서비스를 이용하기 시작했거나, 로그가 많이 쌓이지 않아 제공할 컨텐츠가 없을 때, 우리는 빈 화면에 다음 행동으로 이어질 수 있는 연결 고리를 제공할 수 있습니다.
따라서 자연스럽게 사용자의 체류 시간을 증대 할 수 있습니다.
3. 정확한 정보 제공
빈 화면을 통해 사용자들이 다음 단계를 취하는 데 도움이 되는 정보나 가이드를 제공할 수 있습니다.
또는 현재의 상황(status)이나 오류 원인등을 정확히 안내할 수 있습니다.
4. 서비스의 완성도
잘 설계된 빈 화면은 서비스의 완성도를 높여 자연스럽게 서비스의 신뢰도에 좋은 영향을 미칩니다.
Good case 뿐만 아니라, Bad case에 대한 고려가 잘 되어 있다는 인상이 생겨 서비스의 전체적인 완성도를 높일 수 있습니다.
그럼 이제 본격적으로 다양한 사례 열거하며, 다양한 서비스들이 어떻게 빈화면을 제공하고 있는지에 대해 알아보겠습니다.
가장 많이 찾을 수 있었던 사례입니다.
현재의 상황(status) 과, 현재 접근한 화면이 어떤 화면(기능)인지 명확하게 안내합니다.
사용자가 해당 화면을 어떻게 이용할 수 있을지, 어떤 과정을 통해 화면을 채울 수 있을지 안내합니다.
디즈니플러스 - 관심 콘텐츠 없음
관심 콘텐츠가 없다는 안내와 해당 화면에 저장한 관심 콘텐츠가 표시 된다는 안내를 인포그래픽과 함께 제공합니다.
인스타그램 - 스토리 보관, 저장함 없음
없음에 대한 현재 Status를 명확하게 안내합니다. 더불어 해당 기능을 서비스 전반에서 동일하게 사용하는 인포그래픽과 함께 나타냅니다.
보관된 스토리의 경우, 추억을 되돌아볼 수 있다는 안내를 첫 번째로 제공합니다. 동기부여에 초점을 맞추어 안내합니다.
일회성 전시인 스토리 기능에 대한 설명과 저장한 본인만 볼 수 있다는 상세 기능 설명까지 제공하되, 구구절절하지 않고 명확하게 안내를 한다는 점이 인상적이었습니다.
[자연스러운 사용 흐름]에 대한 고려는 보이지 않았습니다. (채울수 있는 방법으로의 연결) (대부분의 사용자는 빈화면 이라는 인식과 동시에 뒤로가기를 하기 때문이라 생각됩니다.)
더불어, 공수적인 측면도 고려하여 담백하게 안내한다는 점이 가장 큰 특징입니다. 오히려 부차적인 설명, 또는 GUI요소가 시각적 공해로 작용할 수 있기 때문입니다.
안내할 때 주의할 점은 부정적인 인상을 주지 않아야 한다는 것입니다.
실패나, 오류의 상황이 아니기 때문입니다. ”이런 관심 컨텐츠가 없군요 : ( “ 와 같은 뉘앙스는 사용자가 착각 또는 실패의 경험으로 인식할 수 있습니다.
사용자에게 부담이 될 수 있는 언어는 지양하는 것이 바람직합니다. 사용자에게 행동을 강요하는 인상을 주어서는 안되기 때문입니다.
지금까지 살펴본 예시는 서비스에서 빈 화면을 처리할 때 가장 기본적으로 쓰이는 화면(기능)이며, 부차적인 설명 없이도 충분히 상황을 인지할 수 있는 경우에 사용되었습니다.
앞서 설명한 ‘정확히 알려주기’는 현재 상황과 화면의 기능을 단순한 줄글로 안내했습니다. 이번에 살펴볼 유형은 기능에 대한 구체적인 안내를 긴 호흡으로 제공하는 경우입니다.
빈 화면 ‘하단’으로 구성 되거나 ‘별도 화면’에서 구체적으로 안내하는 사례가 있었습니다.
펫프렌즈
펫프 스탬프라는 펫 프렌즈 고유의 서비스를 스크롤 하단에 배치하여 제공합니다.
그러나 공급자 중심의 서비스 이용 정책, 제한 등에 대한 내용이 많아 이해가 어려운 부분이 많습니다.
트레바리
놀러가기 쿠폰이 없다는 사실과 간단한 이용 정책을 안내합니다. (+ 사용 방법에 대해서도 제공합니다.)
놀러가기라는 개념을 잘 모르는 사용자들을 위해 자주 묻는 질문을 통해 안내합니다
정리하자면 일반적이지 않은 서비스 특화 기능 또는 서비스의 주요 기능이지만 사용자들에게 친숙하지 않은 신규 개념을 설명할 때 사용되었습니다.
특히 적절한 일러스트와 같은 이미지 요소를 같이 활용될 때, 이해가 잘 되었습니다.
이 유형은 사용자에게 특화 기능이나 핵심 기능을 설명하기에 적절한 사례입니다.
다만, 너무 많은 내용을 한 화면 안에 담을 경우, 오히려 사용자는 정보를 인식하지 못합니다.
화면 구성의 목적이 1) 서비스 특화 기능에 대한 설명인지, 2) 동기 유발인지 3) 이용 정책/제한에 대한 설명인지 등을 구별하여 설계하는 것이 바람직합니다.
빈 화면은 데이터 부재나 오류 상황일때 사용자에게 노출 될 수 있습니다. 자칫 당황스러울 사용자에게 왜 빈 화면이 나타났는지 정확하게 알리는 것은 중요한 일입니다.
이 유형은 일반적으로 사용자의 특정 행동에 의해 빈 화면이 제공되는 사례였습니다. 때문에 어떤 액션으로 인한 상황인지 정확하게 안내합니다.
쿠팡 - 상품 검색 결과 없음
검색 필드에 ‘샐러드’를 입력하고 필터에 조건을 과하게 걸어보았을 때 조건에 맞는 샐러드가 없다는 안내 문구가 노출됩니다.
쿠팡은 친절하게 사용자가 선택한 조건을 파란색 텍스트로 강조하여 해당 조건에 맞는 검색 결과가 없음을 알립니다. 또한 모든 필터를 초기화하는 버튼을 제공하여 해결 방법까지 제시합니다.
쿠팡 이츠 - 매장 검색 결과 없음, 원티드 - 포지션 검색 결과 없음
사용자가 설정한 필터 조건에 맞는 결과가 없으니 조건이나 검색어 변경하여 재시도 해보라는 지침을 제공합니다.
설정된 필터는 활성화 상태로 표현됩니다.
원하는 결과 화면이 나오지 않았을 때 사용자는 당황스럽고 화가 날 수 있습니다.
이때 왜 결과 없음 화면이 노출 되는지 정확하게 알려주는 세심한 배려가 필요합니다. 또 정확하게 안내해 주는 것에서 그치는 것이 아니라 **[자연스러운 사용 흐름]**을 고려하여 해결 방법에 대한 간단한 안내가 제공된다면 금상첨화입니다.
현대카드 - 카드 발급 조회 결과 없음
단순하게 카드 발급 조회 내역이 없다고 안내 할 수도 있었지만, 사용자 중심으로 현재 ‘발급 진행중’ 인 카드가 없다고 명확하게 명시 한다는 점이 인상적이었습니다.
고객센터 문의처에 대한 안내는 제공하나, 1) 발급 카드 조회가 안 되는 예외 사항에 대한 안내 2) 신규 카드 발급/안내에 대한 설명(연결)이 없어 **[자연스러운 사용 흐름]** 이 제공되지 않는다는 점은 아쉬웠습니다.
강남 언니 - 시술전후사진 없음
시술전후사진이 제공 되지 않는 설정 및 조건에 대한 설명을 제공합니다.
내역이 없는 이유와 내역을 볼 수 있는 방법, 내역 조회 시 주의사항 등에 대해 자세히 안내합니다.
시술 전후 사진을 왜 확인할 수 없는지, 사진을 어떻게 불러올 수 있는지에 대해 정확하게 알려주고 있습니다.
배달의 민족 - 주문내역 없음
배달의 민족 비회원 주문내역 화면에서는 주문내역을 얼마 간의 기간 동안 조회할 수 있는지, 비회원 주문내역을 확인할 때의 주의사항에 대해서 자세히 안내 합니다.
특정 조건/상태/상황에 의해 내용이 없을 때 명확히 안내한다는 것은 서비스 이용에 도움이 됩니다.
단순한 내역 없음의 안내에서 그친다면 사용자들은 ‘그래서 어떻게 하라는거야? 왜 없는거야?’ 라고 의문을 가질 수 있기 때문입니다.
하지만 안내에 대한 UX writing이 공급자 중심으로 쓰여 있다는 인상을 받았습니다. 다음 행동, 올바른 처리에 대한 안내를 이해가 쉬운 언어와 이미지로 제공되는 것이 바람직 합니다.
추천은 [자연스러운 사용 흐름] 과 [서비스 내 체류 시간 증대] 라는 목표 달성에 큰 도움이 될 수 있습니다.
단순한 빈 화면에서 그치지 않고, 빈 화면을 구성할 수 있는 콘텐츠를 추천하여 사용자가 자연스럽게 다음 행동 이어지도록 구성 되어 있습니다.
추천을 통해 사용자는 서비스를 더 탐색할 수 있습니다.
카카오 선물하기 위시리스트 화면
기능에 대한 간략한 설명과 함께 AVF영역에서 위시리스트에 담을 수 있는 제품을 추천하고 있습니다.
카테고리 별로 추천하는 제품을 분류해 놓아 사용자에게 편리함을 주고 있습니다.
지그재그 장바구니 화면
장바구니에 아무 상품을 담지 않으면 하단에 추천 제품을 좌우 스와이프를 통해 제공합니다.
이때 추천 제품은 사용자가 이전에 검색한 기록을 기반으로 제공됩니다.
추천 리스트는 사용자의 고민을 덜어줍니다. 다만 그 방법이 사용자에게 간편해야 합니다.
위 사례의 가장 큰 특징은 화면을 이동하지 않고 해당 화면에서 쉽고 빠르게 탐색할 수 있다는 점 입니다.
또 가볍지만 사용자에게 의미있는 추천이 효과적 입니다.
추천은 크게 2가지 방식으로 제공 될 수 있습니다.
1. 인기순 - Mass 타겟
2. 사용자 로그/데이터 기반 - 개인화
위 사례로 예를 들어 [선물하기] 라는 특성을 고려해 무난함에 중점을 둔다면 개인화 보다는 인기순이 적절한 구성이라고 생각 됩니다. 다만 해당 사례는 내가 받고 싶은 선물이기 때문에 개인 맞춤 추천이 적절히 섞여 있다면 조금 더 효과적이지 않았을까 생각됩니다.
[장바구니]는 개인의 프라이빗한 공간이기 때문에, 구매이력/검색이력/관심 상품등의 데이터 기반의 개인화 추천이 적절합니다.
이와 같이 추천에 대한 방식도 서비스의 특성과 맥락을 고려하여 제공하는 것이 바람직합니다.
빈 화면은 사용자에게 행동을 유도하거나 동기 유발을 할 수 있습니다.
빈 화면을 이용해 사용자의 행동을 유도하는 것 역시 [자연스러운 사용 흐름] 과 [서비스 내 체류 시간 증대] 라는 목표 달성에 큰 도움이 됩니다.
이 유형에서는 보통 사용자에게 빈 화면을 어떻게 하면 채울 수 있을지 안내함으로써 사용자가 화면을 채울 수 있도록 유도합니다.
스타벅스 선물함 화면
기프트 아이템 등록 방법에 대해 자세히 설명해줌으로써 사용자가 쉽게 기프트 아이템을 등록할 수 있도록 유도하고 있습니다.
지그재그의 스토어 즐겨찾기 화면
스토어 즐겨찾기를 했을 때의 장점을 설명해줌으로써 사용자가 스토어 즐겨찾기를 하도록 유도하고 있습니다.
쿠팡 이츠의 즐겨찾기 화면
식당 즐겨찾기를 하는 법을 이미지를 이용해 직관적으로 보여줌으로써 사용자가 쉽게 식당 즐겨찾기를 할 수 있도록 유도하고 있습니다.
어떻게 하면 빈 화면을 채울 수 있을지 직관적인 설명을 제공하여 사용자가 행동을 통해 얻을 수 있는 이점을 알려줌으로써 동기 유발을 할 수 있습니다.
그리고 동기유발, 방법 알려주기를 통해 서비스는 사용자에게 친절한 인상을 남길 수 있습니다.
다시 말해 결과없음을 의도적으로 피한 사례입니다. 서비스에서 콘텐츠가 없음을 의도적으로 숨기거나, 대체(유사) 컨텐츠를 추천하는 유형입니다.
주로 OTT서비스에서 많이 보인 사례입니다.
넷플릭스 - 검색결과 없음
넷플릭스는 이 유형의 가장 대표적인 사례입니다.
결과없음에 대한 안내를 제공하지 않습니다.
유사 콘텐츠를 인기순으로 노출하고 있습니다. 그리고 비슷한 장르의 콘텐츠를 추천해 줍니다.
티빙 - 검색결과 없음
검색어 단어 기준으로 걸린 검색 결과를 제공하나, 사용자가 찾고자 하는 콘텐츠에 대한 결과는 아닙니다.
노출된 콘텐츠가 뜬금없다 느껴질 수도 있을 정도로 연관성이 떨어지지만 시청 가능한 콘텐츠를 추천해주고 있습니다.
쿠팡 플레이 - 검색결과 없음
넷플릭스와 유사한 사례입니다. 장르, 분위기가 유사한 콘텐츠를 추천하고 있습니다. 일치하는 검색 결과가 없으면 유사 콘텐츠가 노출되도록 맵핑해 놓은것이 아닐까 추측됩니다.
3개 서비스가 거의 유사한 맥락으로 UIUX를 제공하는 것을 확인 할 수 있습니다. 검색결과가 없음을 의도적으로 피하고 있습니다.
그렇다면 이들은 왜 의도적으로 빈 화면을 피했을까요? 다시 말해 무엇을 숨기고 싶어했을까요?
‘뭐야 이 서비스에는 볼만한 콘텐츠가 없잖아. 내가 시청하고자 하는 콘텐츠가 없잖아’ 라는 인상을 두려워하고 피하고 싶어함을 알 수 있었습니다.
경쟁사에 저작권이 존재하여 콘텐츠가 없다는 인상을 피하고자 한 것으로 보입니다.
더불어 넷플릭스에서 중요하게 생각하는 키워드는 Hot&New 입니다.
볼만한 콘텐츠가 많다, 새로운 컨텐츠가 많다는 인상을 주려고 노력합니다.
또한 공개 예정 or 넷플릭스 Only와 같이 기대감을 불러 일으키는 카테고리를 추가하고 Lockin 요소를 서비스에 곳곳에 배치했습니다.
이 유형이 특별히 OTT서비스에서 더 두드러졌던 이유는 콘텐츠 의존도가 높기 때문입니다.
찾는 콘텐츠가 없다는 인식, 볼만한 콘텐츠가 없다는 인식은 사용자가 앱을 이탈 하게 하고 나아가 서비스 구독 해지까지 이어지게 합니다.
한 번 자리잡힌 부정적인 인식은 쉽게 지워지지 않고, 재가입을 어렵게 만듭니다.
결국, 결과없음을 피함으로써 자사 콘텐츠의 풍부함을 드러내기에 적절한 사례로 판단 됩니다.
나아가 빈 화면을 구성하는 추천 콘텐츠가 사용자의 공감을 얻지 못하는 Mass 추천 보다는 검색어와 어느정도 연관성이 있는 추천(유사한 장르, 동일 출연진과 제작진의 참여)이 사용자에게 도움이 될 것으로 보입니다.
빈 화면을 이용해 서비스 고유의 이미지를 사용자에게 각인할 수 있습니다.
다음의 예시는 빈 화면을 브랜딩의 한 요소로 적절히 활용한 예입니다. 빈 화면을 단순 시스템 문구로 처리하지 않고 감성과 재미를 담았습니다.
배달의 민족 - B마트 주문내역 없음
배달의 민족은 배달의 민족 특유의 B급 감성과 자체 제작 폰트, ‘텅’ 이라는 위트있는 한 글자로 주문내역이 비었음을 알리는 화면을 디자인했습니다.
사용자는 이 빈 화면을 통해 ‘배민은 재치있는 서비스’ 라는 인식을 가지게 될 수 있습니다.
스타벅스 - 나만의 메뉴 없음
스타벅스는 일러스트를 활용해 나만의 메뉴가 없음을 알리고 있습니다.
스타벅스는 고객이 특정 재료를 넣은 음료를 주문하면 테이크 아웃 잔에 고객이 요청한 재료를 표시해 줍니다. 즉, 테이크 아웃 잔에 재료를 표시하는 행위 자체가 나만의 메뉴를 상징하기도 합니다.
스타벅스는 이 장면을 키 컬러를 사용하여 일러스트화 하고 빈 화면을 채움으로써 브랜드 이미지를 확실하게 전달합니다.
펫프렌즈
펫프렌즈 역시 일러스트를 활용해 빈 화면을 채워, 사용자에게 직관적으로 상황을 전달하고 있습니다.
자체 캐릭터를 적극적으로 활용하는 모습입니다. 캐릭터의 반복적인 사용 역시 사용자에게 브랜드 이미지를 전달하는 방법이 될 수 있습니다.
서비스가 내세우고 싶은 이미지를 다양한 방식(폰트, 문구, 일러스트)을 통해 반복적으로 노출하다보면 사용자는 서비스 고유의 분위기를 느낄 수 있습니다.
그리고 [서비스의 완성도] 측면에서도 기여를 할 수 있습니다.
그러나 너무 무분별하거나 과도한 BX의 사용은 오히려 부정적인 이미지를 초래할 수 있습니다.
강남 언니의 경우 알림 화면에서 활동, 쪽지, 채팅상담 탭이 모두 같은 일러스트로 채워져있습니다.
긍정적인 요소로 작용해야 할 BX와 CI를 부정적 경험에서 반복 노출 하는 것은 적절하지 않을 수 있습니다.
결과 없음의 빈 화면에서 그치는 것이 아니라, 사용자에게 직접 피드백을 받을 수 있는 Scene으로 활용한 사례 입니다.
사용자의 의견을 들을 수 있고 데이터도 수집하는 일석이조의 방법입니다.
LG전자 - 검색결과 없음
검색결과 값이 없는 경우, 어떤 맥락의 검색을 했는지 물어보는 UX를 제공합니다. 고객의 답변을 검색 엔진의 정확도를 높이는데 사용하거나 결과값에 대한 검증 데이터로 활용 할 수 있습니다.
펫프렌즈 - 검색결과 없음
상품 입고요청을 할 수 있습니다. 사용자가 원하는 특정 상품이나, 브랜드, 카테고리를 알 수 있기 때문에 MD 측면으로 활용될 수 있습니다.
T맵 네이버 지도 - 검색결과 없음
사용자가 새로운 장소를 직접 추가 할 수 있습니다. 피드백 받기는 새로운 정보가 빈번하게 생기며, 정확도가 중요한 지도 서비스에서 효과적인 방법이라 할 수 있습니다.
동일한 점은 좀 더 나은 서비스가 되기 위해 피드백을 받는 점입니다. 보다 생생한 사용자의 보이스를 들을 수 있어 가치 있는 데이터로 활용되기에 용이합니다.
다만, 검증되지 않은 데이터이기에 신뢰도에 대한 확인이 필수적 입니다.
사용자 의견을 수집하여 서비스의 개선이 가능한 경우 적절한 사례로 볼 수 있습니다.
정보의 변화가 많거나, 신뢰도/정확도가 중요한 경우 활용 되기 적합합니다.
마지막으로 가장 좋았던 사례를 언급하고자 합니다.
앞서 언급한 주요 특징이 혼합되어 있으며, 사용자 관점에서 설계되었다는 인상이 잘 느껴져 추천하고 싶은 사례입니다.
슬랙 - 나중에 목록 없음
[사용자 관점의 UX writing]
‘눈에서는 멀어져도 마음에서 멀어지지 않습니다’, ‘이제 원하는 일을 마음껏 해보세요.’와 같이 적절한 위트와 함께 사용자 관점에서의 UX writing이 사용되었습니다.
‘메시지 검색에 더이상 시간을 낭비하지 마세요. 자주 찾는 메시지를 보관합니다.’ 라는 문구는 기능을 직관적으로 설명할 뿐만 아니라, 사용자가 기능을 사용함으로서 얻는 이득을 안내합니다.
[Status에 따른 세심한 고려]
완료됨을 즉시 처리한 경우와 완료됨 목록에 콘텐츠가 쌓여가는 경우를 분기해 각각 다른 화면을 제공합니다.
즉, 사용자의 Status에 따라 세심하게 안내 메시지를 제공합니다.
[UX - 연결성 고려. 기능에 대한 명확한 안내]
리마인더 기능에 대한 안내와 함께 리마인더 설정을 할 수 있는 화면으로 이동 할 수 있도록 합니다.
[BX 녹이기]
브랜드 이미지(보라색 키 컬러)를 느낄 수 있는 인포그래픽이 적절하게 사용되었습니다.
슬랙이 빈 화면을 구성할 때 앞서 살펴본 사례 중 2~3가지 이상을 고려했다는 점 그리고 그 표현 방식이 매우 간결하고 직관적이라는 점이 매우 우수하였습니다.
또 그 표현 방식이 매우 위트 있으며 친근하고 부드러웠습니다.
나중에 할일 목록 화면이 빈 경우, 기능에 대한 사용자 관점의 이득, 기능에 대한 설명뿐만 아니라 ’여러분이 얼마나 훌륭한지 상기시켜줄 필요가 있습니다.’ 라는 문구를 더하였다는 점이 매우 인상 깊었습니다.
공급자 입장에서 설계를 하다 보면 구구절절한 설명 또는 부차적인 설명이 필요하지 않을까 우려하고는 합니다. 빈 화면임에도 빽빽하게 채워야 하지 않을까 하는 강박이 있습니다.
그럼에도 불구하고 사용자 관점에서 한번 더 생각하여 정말 필요한 요소만을 넣고 공감을 얻을 수 있는 문구를 사용하였다는 점이 인상 깊어 우수한 사례로 평가 하였습니다.
우리가 앱을 사용하며 쉽게 지나 치기도 하고, 실제 설계를 하는 입장에서도 크게 고민을 하지 않았던 빈 화면에 대해 이야기 해 보았습니다.
위의 다양한 사례를 살펴보았듯이 다양한 빈 화면 구성에서의 CONTEXT가 존재함을 알 수 있었습니다.
어떤 상황에도 모두 동일하게 사용 할 수 있는 빈 화면이란 존재 하지 않는 것처럼, 무조건 정답인 빈 화면의 구성은 없습니다. 맥락에 맞는 설계가 가장 적합합니다.
만약 독자들이 빈 화면을 기획하게 되었다면, 큰 고민 없이 넘기는 것이 아니라, 앞 뒤 전후 맥락을 파악하여 적합한 빈 화면을 구성하길 바라며 이 글을 마칩니다.
- 라이트브레인 가치UX그룹 김세훈, 이유림
[참고자료]
빈 화면에 디자인 시간을 더 쏟아야 하는 이유 -Chase Chang