Article | 텅 빈 화면, 이대로 괜찮을까요?
빈 화면으로 사용자 경험 높이기
빈 화면 활용, 왜 중요할까?
자연스러운 사용 흐름 제공
빈 화면은 말 그대로 비어있는 화면인 만큼 사용자의 행동을 유도하는 액션을 제공하기에 적절한 공간이다.
길잡이 역할의 페이지로 탈바꿈하게 된다.
서비스 내 체류 시간 증대
텅 빈 화면은 사용자의 체류 시간 감소 및 이탈을 유발할 수 있다.
반대로, 서비스 내 체류 시간을 늘리는 것도 가능하다.
→ ex 다음 단계를 위한 정보나 가이드 제공, 현재 상황이나 정확한 오류 안내
서비스 완성도 향상
자연스럽게 신뢰도를 높일 수 있다.
빈 화면 활용하는 방법
1. 현재 화면 정확하게 안내하기
안내할 때 주의할 점은 부정적인 인상을 주지 않아야 한다.
사용자에게 부담이 될 수 있는 언어는 지양하는 것이 좋다.
디즈니플러스
관심 콘텐츠가 없다는 안내와 해당 화면에 저장한 관심 콘텐츠가 표시된다는 안내를 인포그래픽과 함께 제공한다.
인스타그램
현재 상황을 명확하게 안내하고, 해당 기능을 서비스 전반에서 동일하게 사용하는 인포그래픽과 함께 나타낸다.
보관된 스토리의 경우, 추억을 되돌아볼 수 있다는 안내를 첫 번째로 제공한다(동기부여에 초점).
일회성 전시인 스토리 기능에 대한 설명과 저장한 본인만 볼 수 있다는 상세 기능 설명을 제공한다.
2. 더 깊은 서비스 특화 기능 자세히 알려주기
너무 많은 내용을 한 화면 안에 담을 경우, 오히려 사용자는 정보를 인식하지 못한다.
화면 구성의 목적이 서비스 특화 기능에 대한 설명인지, 동기 유발인지, 이용 정책·제한에 대한 설명인지 등을 구별하여 설계할 필요가 있다!
펫프렌즈
펫 프렌즈 고유의 서비스(펫프 스탬프)를 스크롤 하단에 배치하여 제공한다.
그러나, 공급자 중심의 서비스 이용 정책, 제한 등에 관련한 내용이 많아 이해가 어려울 수 있다.
트레바리
쿠폰이 없다는 사실과 간단한 이용 정책을 안내한니다(+사용 방법).
놀러 가기라는 쓰임을 모를 수 있는 사용자들을 위해 자주 묻는 질문을 연결해 준다.
3. 왜 빈 화면인지 정확히 알려주기
빈 화면이 노출되는 이유에 대해 정확하고 세심하게 설명하는 것이 필요하다.
이에 더해 '자연스러운 사용 흐름’을 고려하여 해결 방법에 대한 간단한 안내를 제공하면 좋다!
그러나, 안내가 공급자 중심으로 쓰여 있다는 인상을 제공할 수 있는 점을 주의해야 한다.
쿠팡
필터에 조건을 과하게 걸었을 경우, 조건에 맞는 샐러드가 없다는 안내 문구가 노출된다.
쿠팡은 친절하게 사용자가 선택한 조건을 파란색 텍스트로 강조하여 해당 조건에 맞는 검색 결과가 없음을 알린다. 또한, 모든 필터를 초기화하는 버튼을 제공하여 해결 방법까지 제시한다.
쿠팡 이츠 / 원티드
사용자가 설정한 필터 조건에 맞는 결과가 없으니 조건이나 검색어 변경하여 재시도해보라는 지침을 제공한다. 설정된 필터는 활성화 상태로 표현됩니다.
현대카드
단순하게 카드 발급 조회 내역이 없다는 안내만 할 수도 있었지만, 사용자 중심으로 현재 ‘발급 진행 중’인 카드가 없다고 명확하게 명시한다는 점이 포인트다.
고객센터 문의처에 대한 안내는 제공하나, 자연스러운 사용 흐름이 제공되지 않는다.
강남 언니
시술 전후 사진이 제공되지 않는 설정 및 조건에 대해 설명한다.
내역이 없는 이유와 내역을 볼 수 있는 방법, 내역 조회 시 주의사항 등에 대해 자세히 안내한다.
시술 전후 사진을 왜 확인할 수 없는지, 사진을 어떻게 불러올 수 있는지에 대해 정확하게 알려주고 있다.
배달의 민족
배달의 민족 비회원 주문내역 화면에서는 주문내역을 얼마 간의 기간 동안 조회할 수 있는지, 비회원 주문내역을 확인할 때의 주의사항에 대해서 자세히 안내한다.
4. 어떻게 하면 채울 수 있는지 추천하기
'추천'의 장점
- 자연스러운 사용 흐름
- 서비스 내 체류 시간 증대
- 추천 리스트는 사용자의 고민을 덜어줌
추천은 크게 ‘인기순 추천’과 ‘사용자 데이터 기반 개인화 추천’ 2가지 방식으로 제공될 수 있다.
같은 추천 방식이라도 기능과 앱 서비스의 특징에 따라 다른 선택이 필요합니다.
EX
선물하기 기능은 ‘선물’이라는 특성과 무난함에 중점을 둔다면 개인화보다는 인기순이 적절한 구성이지만, ‘내가 받고 싶은 선물’ 기능일 경우 개인 맞춤 추천이 적절히 섞여 있다면 조금 더 효과적입니다.
카카오 선물하기 위시리스트 화면
기능에 대한 간략한 설명과 함께 AVF 영역에서 위시리스트에 담을 수 있는 제품을 추천한다. 카테고리 별로 추천하는 제품을 분류해 놓아 사용자에게 편리함을 준다.
지그재그 장바구니 화면
장바구니에 아무 상품을 담지 않을 경우, 하단 추천 제품을 좌우 스와이프를 통해 제공한다.
이때 추천 제품은 사용자가 이전에 검색한 기록을 기반으로 제공된다.
5. 행동을 유도하기
사용자가 화면을 채울 수 있도록 유도한다.
직관적인 설명을 제공해 사용자가 행동을 통해 얻을 수 있는 이점을 알려주어 동기 유발을 노리는 것이다.
추천의 특징을 넘어 친절한 인상을 남길 수도 있을 것이다.
스타벅스 선물함 화면
기프트 아이템 등록 방법에 대해 자세히 설명함으로써 사용자가 쉽게 기프트 아이템을 등록할 수 있도록 유도한다.
지그재그의 스토어 즐겨찾기 화면
스토어 즐겨찾기를 했을 때의 장점을 설명함으로써 사용자가 스토어 즐겨찾기를 하도록 유도한다.
쿠팡 이츠의 즐겨찾기 화면
식당 즐겨찾기를 하는 법을 이미지를 이용해 직관적으로 보여줌으로써 사용자가 쉽게 식당 즐겨찾기를 할 수 있도록 유도한다.
6. 빈 화면을 의도적으로 피하기
말 그대로 결과 없음 화면을 의도적으로 피한 사례를 이야기하려 한다.
서비스에서 콘텐츠가 없음을 의도적으로 숨기거나, 대체(유사) 콘텐츠를 추천하는 유형을 말하는데,
주로 OTT 서비스에서 많이 볼 수 있는 유형이다.
OTT서비스의 경우 찾는 콘텐츠가 없다는 인식, 볼만한 콘텐츠가 없다는 인식은,
사용자가 앱을 이탈하게 만들고, 나아가 서비스 구독 해지까지 이어질 수도 있다.
한 번 자리 잡힌 부정적인 인식은 쉽게 지워지지 않고, 재가입을 어렵게 만들기에 이런 유형의 시도를 통해 콘텐츠 부족 인식을 회피하고, 자사 콘텐츠의 풍부함을 드러내고자 한 것으로 해석할 수 있다.
넷플릭스
결과 없음에 대한 안내를 제공하지 않는다.
유사 콘텐츠를 인기순으로 노출하고, 비슷한 장르의 콘텐츠를 추천한다.
티빙
검색어 단어 기준으로 걸린 검색 결과를 제공하나, 사용자가 찾고자 하는 콘텐츠에 대한 결과를 전달하지는 않는다.
노출된 콘텐츠가 뜬금없다고 느껴질 수도 있을 정도로 연관성이 떨어지지만 시청 가능한 콘텐츠를 추천해 주고 있습니다.
쿠팡 플레이
넷플릭스와 유사한 사례라고 볼 수 있다. 장르나 분위기가 유사한 콘텐츠를 추천하고, 일치하는 검색 결과가 없으면 유사 콘텐츠가 노출되도록 매핑해 놓은 것으로 보인다.
7. BX 녹이기
빈 화면을 단순 시스템 문구로 처리하지 않고 감성과 재미를 담아내면 빈 화면도 브랜딩의 한 요소로 적절히 활용하는 방식의 유형.
빈 화면을 잘 활용하면 서비스 고유의 이미지를 사용자에게 각인할 수 있다.
서비스가 내세우고 싶은 이미지를 다양한 방식(폰트, 문구, 일러스트)으로 계속해서 노출하는 것은 사용자에게 서비스 고유의 분위기를 제공할 수 있으며, 결과적으로 ‘서비스의 완성도’ 측면에서도 기여할 수 있다.
배달의 민족 – B마트 주문내역 없음
특유의 B급 감성과 자체 제작 폰트, ‘텅’이라는 위트 있는 한 글자로 디자인하였다.
사용자는 ‘배민은 재치 있는 서비스’라는 인식을 가질 수 있다.
스타벅스 – 나만의 메뉴 없음
일러스트를 활용하였다.
고객이 특정 재료를 넣은 음료를 주문하면 테이크 아웃 잔에 고객이 요청한 재료를 표시한다. 즉, 테이크 아웃 잔에 재료를 표시하는 행위 자체가 나만의 메뉴를 상징하기도 한다.
키 컬러를 사용해 일러스트화하고 빈 화면을 채움으로써 브랜드 이미지를 확실하게 전달한다.
펫프렌즈
펫프렌즈 역시 일러스트를 활용해 빈 화면을 채워, 사용자에게 직관적으로 상황을 전달한다.
자체 캐릭터를 적극적으로 반복 활용하여 사용자에게 브랜드 이미지를 전달하는 방법이 될 수 있다.
8. 사용자에게 피드백받기
사용자에게 직접 피드백을 받을 수 있는 화면이 된다.
사용자의 의견을 들을 수 있고, 데이터도 수집가능하여 좋은 방법이다.
특히, 정보의 변화가 많거나, 신뢰도 및 정확도가 중요한 경우 활용하기 좋다.
그러나, 검증되지 않은 데이터이기에 신뢰도에 대한 확인은 필수적이다.
LG전자
검색결과 값이 없는 경우, 어떤 맥락의 검색을 했는지 물어보는 UX를 제공한다. 고객의 답변을 검색 엔진의 정확도를 높이는 데 사용하거나 결괏값에 대한 검증 데이터로 활용할 수 있다.
펫프렌즈
상품 입고요청이 가능하고, 사용자가 원하는 특정 상품이나, 브랜드, 카테고리를 알 수 있기에 MD 측면으로 활용될 수 있다.
T맵 네이버 지도
사용자가 새로운 장소를 직접 추가할 수 있다. 피드백받기는 새로운 정보가 빈번하게 발생하며, 정확도가 중요한 지도 서비스에서 효과적인 방법이라 할 수 있다.
메모.
사용자에게 화면이동에 대한 자연스러운 흐름을 가져다주는 것이 중요하다고 판단한다. 사용자의 시선이나 마우스 혹은 손가락이 오랜 시간 멈춰있게 하는 것은 위험하다. 여기서 내가 말하는 시선은 사용자가 당장 무엇을 해야 할지 몰라 한 곳에 머무르는 시선을 의미한다. 다양한 사용자의 데이터를 수집하는 것이 중요하겠다. 사람들이 불편해하는 요소 혹은 필요로 하는 요인을 파악하기 위해서는 다양한 사람들의 데이터가 필요하다. 그렇다고 모든 사람을 만족시키기 위해 많은 것을 집어넣는 것은 오히려 중요한 목적을 잊게 만들 수 있다. 디자이너의 입장에서 적절하고 중요한 것이 무엇인지에 대해 균형을 가지고 파악하는 것이 중요하겠다.
