#whisk-빈화면
#홀릭스-검색
#올리브영-상세화면
#콜리-행동유도
1. Whisk가 빈화면 내 기능안내를 제공하는 방법
다양한 주제별 레시피 확인이 가능한 Whisk는 (유사 서비스도 그렇지만) 사용자 개인이 저장한 레시피가 아주 중요한 데이터가 됩니다. 저장하고 확인할 만한 레시피가 많아야 하는 것은 기본이고, 이런 레시피를 사용자가 얼마나 쉽게 저장하고 확인할 수 있는지가 중요한 이유인데요. 저장할 레시피가 많음에도 저장방법이 어렵다면 굳이 이곳에 계속 데이터를 쌓아야 할 이유가 없어지기 때문입니다.
Whisk는 이런 상황을 피하고, 사용자가 손쉽게 레시피를 저장할 수 있도록 ‘저장됨’에 데이터가 없는, 빈 화면을 기능 안내로 적절히 활용하고 있어요. ‘모든 레시피를 저장하세요’라는 안내를 통해 현재 화면이 어떤 역할을 하는지 알리는 것으로 시작해 크게 두 가지 저장 방법을 사용자에게 안내합니다.
여기서 눈에 띄는 건, 사용자가 활용할 수 있는 방법을 한 번에 알리는 것(예를 들어 네 가지 방법을 활용해보세요~)이 아니라 대표적인 한 가지 방법(사용자 입장에서 가장 쉬울법한)을 먼저 제안한다는 점입니다. 웹, 앱에서 사용 가능한 공유 기능을 활용해 레시피를 저장하는 방법을 별도 페이지를 할애해 자세히 안내하고 있어요.
이어서 더 많은 저장 방법이라는 이름으로 3가지 추가 방법을 제안합니다. 이 역시 각각의 페이지를 할애해 자세한 방법을 확인할 수 있도록 구성하고 있어요. 이는 사용자가 여러 선택지(방법)를 같은 중요도로 놓고 판단하지 않고, 한 가지 방법에 먼저 집중해 살펴볼 수 있는 기회를 제공합니다.
서비스의 바람(?)도 일부 적용된 사례지만 소셜 로그인을 제안할 때 모든 옵션을 다 보여주지 않고, 대표적인 한 가지와 다른 방법으로 로그인 등을 별도로 제공하는 것도 같은 맥락에서 살펴볼 수 있어요. 선택지가 많아질수록 사용자는 가입이나 기능을 사용하는 과정에서 투자해야 할 시간 역시 늘어날 수밖에 없기 때문입니다.
2. 콜리가 서비스 이용에 꼭 필요한 기능을 사용하게 하는 방법
콜리는 사용자가 보유하고 있는 카드 등을 활용해 특정 웹사이트나 앱 접속 시 혜택을 바로 안내해주는 서비스입니다. 예를 들어 제가 토스 뱅크 체크카드를 등록하면 이 카드에 담긴 혜택을 특정 서비스에서 사용할 수 있을 때 안내해주는 방식입니다. 여러 장의 카드를 쓰는 우리가 모든 혜택을 알기 어렵다는 문제를 해결하기 위해 시작된 서비스기도 해요.
지인의 추천으로 서비스를 설치했는데, 그동안 잘 경험하지 못했던 기능을 활용해야 하고, 어느 정도 낯선 서비스라는 생각이 들었습니다. 콜리 역시 이런 점을 잘 알고 있기에, 핵심 기능을 활용하기 위해 우리가 무엇을 먼저 해야 하는지 대표적인 3가지 행동을 안내하고 있습니다. 메인 화면을 활용해서 말이죠.
가장 먼저, 콜리와 사용자에게 가장 중요한 건 적절한 타이밍에 필요한, 얻을 수 있는 혜택을 제공하는 방법입니다. 알림 체험하기를 가장 먼저 제안하는 것도 같은 맥락에서 생각할 수 있는데요. 알림 체험하기 옆에 ‘5초’라는 소요 시간을 미리 안내해 오래 걸리지 않는다는 점을 함께 알리고 있습니다. 실제 이 시간을 따져볼 사용자는 없지만, 어느 정도의 시간이 소요되는지 모르고 시작하는 것보다 대략적인 시간을 알고 시작하는 것에는 심리적 차이가 분명 존재하지 않을까 싶네요.
‘체험’ 버튼을 누르면 바텀 시트 형태로 구체적인 안내를 확인할 수 있습니다. 어떤 알림이 제공되는지, 현재 과정을 거치면 어떤 혜택이 주어지는지 살펴볼 수 있어요. 다시 한번 ‘체험하러 가기’를 누르면 실제 알림을 발송합니다. 보통 알림을 요청할 때, 실제 알림 내용과 유사하게 구성해 광고나 스팸이 아닌 ‘필요한 정보’라는 점을 강조하는 경우가 많은데, 이렇게 실제 알림을 받고 나니 어떤 식으로 제공되는지 구체적으로 확인할 수 있는 모습입니다.
알림을 누르면 GS25 사이트로 이동하고, 이곳에서 사용자가 보유하고 있는 카드를 확인해 실제 적용할 수 있는 혜택을 확인할 수 있습니다. 알림이 어떤식으로 제공되며, 어떻게 활용할 수 있는지 자세히 들여다볼 수 있는 과정이라고 할 수 있습니다.
3. 올리브영이 상세 화면 내 발색비교 기능을 제공하는 이유
저는 뷰티 관련 상품을 많이 구매하는 편은 아니지만, 올리브영은 오프라인 매장을 포함해 구경하는 맛이 있어 앱도 종종 들어가는 편입니다. 올리브영이 리뷰 등을 잘 운영하고 있어 참고할 기능도 많이 있고요. 얼마 전에는 인기 검색어에 있던 틴트를 선택하게 되었고, 특정 제품의 상세 화면으로 이동하니 ‘발색 비교’라는 기능을 보게 되었습니다.
아무래도 같은 제품이 다양한 색을 가질 수밖에 없는 특성상, 컬러를 단순히 보여주는 것보다 더 나은 방법을 제공할 필요가 있기 때문인데요. 어떻게 보여줄까, 하는 궁금함에 ‘발색 비교’ 버튼을 누르니 별도 화면으로 이동하고 ‘발색 비교할 컬러를 선택해주세요’라는 안내를 볼 수 있었습니다.
그렇게 하나, 둘 총 네 개의 컬러를 선택하니 모두 동일한 피부색을 지닌 입술에 선택한 컬러가 적용된 모습을 볼 수 있었어요. 옷도 옷이지만 틴트와 같은 제품은 단순 컬러보다 실제 발랐을 때 어떤 모습인지가 중요하기에 선택에 도움을 줄 수 있는 방법 중 하나로 비교 기능을 제공하는 것 같네요.
여기에서 빼놓을 수 없는 기능이 비교에서 끝내는 것이 아니라, 발색 비교를 위해 선택한 컬러를 바로 장바구니에 담을 수 있는 연결입니다. 이전 화면으로 돌아가면 앞서 확인한 제품 컬러를 기억하지 못할 수 있는데요. 비교 대상으로 선택한 제품은 그렇지 않은 제품보다 확인 후 구매 확률이 높다는 판단에 따라 장바구니 버튼을 적용하지 않았을까 싶습니다.
안경도 오프라인의 경험을 온라인에서 그대로 적용하기 어려운 제품 중 하나인데요. 가상 피팅 서비스를 제공하는 등의 노력이 이어지고 있습니다. 신발의 경우에도 자신의 발 사이즈를 측정한 뒤 서비스에서 제공, 추천하는 상품을 확인할 수 있고요. 올리브영의 발색 비교를 포함해 앞선 노력들은 여전히 오프라인 대비 부족하고 불편하게 느껴지는 ‘경험’을 충족시키기 위한 방법으로 생각해볼 수 있어요.
4. 홀릭스가 탐색-검색 화면을 개선한 이유
홀릭스는 자기 계발을 할 수 있는 채팅 기반 커뮤니티 서비스입니다. 저도 뉴스레터 관련 공간을 운영하고 있는데요. 다양한 주제가 오픈되어 있고, 오픈 채팅 등에 비해 기능 역시 잘 갖춰져 있어 정보를 습득하고 논의하기 위해 커리어리와 함께 제가 자주 사용하고 있는 서비스입니다.
얼마 전, 홀릭스가 탐색(검색 포함) 화면을 개선한 것을 봤는데, 기존에 ‘검색 화면 개선’에 대해 소개한 내용과 유사한 부분들이 많아 따로 정리하고자 합니다. 제가 소개했던 검색 화면 개선 사례의 절반 이상은 ‘탭 구분’을 없애고 화면을 통합하는 작업이었어요. 검색 결과를 각각의 탭으로 나눠 보여주던 것을 통합으로 보여주고 필터 등을 통해 사용자가 원하는 조건을 추가할 수 있는 방법이기도 합니다.
가장 최근에 공유한 사례는 ‘왓챠’로 검색 화면 내 3가지 탭을 하나로 통합한 것을 알 수 있습니다. 홀릭스의 기존 탐색 화면은 클럽, 코칭, 클래스 등 세 가지 탭으로 구분되어 있으며 상단에 검색창이 적용된 구성이었어요. 검색창은 탭 구분과 별개로 적용되어 있지만, 플레이스 홀더는 탭에 따라 내용이 달라졌습니다. 클럽 탭을 보고 있다면 ‘어떤 클럽을 찾고 싶으신가요?’등이 적용된 것처럼 말이죠.
탐색의 의미를 갖고 있는 화면이라, 탭을 통해 대표적인 구분을 미리 안내할 수 있다는 점에서는 좋지만, 사용자가 탭을 활용하지 않거나 탭을 하나씩 선택하는 것 자체가 추가 행동을 필요로 하기에 불편하게 느껴지는 단점도 있습니다. 검색 결과 역시 전체를 먼저 보여주지 않고, 클럽과 코칭 그리고 클래스에 따라 확인이 가능하고요.
이런 구성이, 최근 버전에서 많이 변경되었습니다. 우선 탐색 화면의 탭이 하나로 통합되었어요. 이제 한 화면에서 스크롤에 따라 이곳에서 제공하는 주요 콘텐츠나 클럽, 카테고리, 인기 키워드 등을 확인할 수 있습니다. 이 방법은 스크롤에 따라 자연스레 주요 내용을 확인할 수 있다는 장점이 있어요. (다만, 모두 동일한 구성으로 제공하거나 유사한 내용을 반복해서 보여줄 경우 각 영역에 해당하는 내용이 눈에 잘 띄지 않는다는 점은 고려해야 합니다.)
검색 결과 역시 ‘전체’ 결과를 먼저 보여주는 것으로 적용되었네요. 이렇게 전체 내용을 먼저 보여줄 경우, 검색 대상이 무엇인지 쉽게 학습할 수 있고, 원하는 곳으로 바로 이동할 수 있다는 장점이 있다고 생각합니다. 유사한 검색 화면 개선 사례는 링크를 통해 확인해주세요!
