다양한 컴포넌트 중
어떤 것을 써야 할까?
정보를 전달하는 컴포넌트: 프롬프트 패널, 스낵바, 툴팁
어떤 정보를 사용자에게 보여주는 방식은 아주 다양해요!
팝업창을 띄울 수도 있고, 토스트 바를 사용할 수도 있는데요.
그동안 어떤 컴포넌트를 써야 하는지 확실한 기준이 없어 감으로 찍고(?) 작업을 했던 것 같아요.
저와 비슷한 고민을 가진 프로덕트 주니어분들이 많을 것 같아 디독 메일을 읽고 정리한 글을 공유드릴게요!
출처: 디독 - 이 메시지는 어떤 컴포넌트를 써야 할까?
컴포넌트를 선택하는 기준
정보의 양과 강조되어야 하는 정도에 따라 컴포넌트를 선택을 해야 해요.
그러기 위해선 이 정보가 서비스 or 프로세스 진행에 있어서
어느 정도 중요한지 먼저 확인하는 것이 중요하답니다.
정보의 양과 강조되어야 하는 정도에 따라 어떤 컴포넌트를 쓰면 좋은지 알려드릴게요.
1. 프롬프트 패널
정보의 양: 그래픽을 포함한 장황한 정보
강조되어야 하는 정도: 상
무신사
이벤트 정보 전달에만 집중했으며 그 밖의 오늘 그만 보기, 닫기, 자세히 보기 버튼의 가시성은 떨어지네요.
오늘의 집
배너 크기를 크게 함으로써 이벤트 정보를 강조했으며, 배너 속에 CTA 버튼을 위치시켜놓았어요.
배너를 구성하는 문장이 많고 한 곳에 모여져 있지 않기 때문에 정보가 산발적으로 보이는 느낌이 들기도 하네요.
(이 정도면 거의 프롬프트 스크린이라 불릴 수도 있을 듯...?)
더블유컨셉
롤링 배너이지만 페이지 네이션이 우측 상단에 작은 텍스트로 제공되어 많은 사용자들이 인지하는데 어려움을 겪을 것 같아요.
토스
디자인적으로 광고라는 느낌이 들지 않아요.
(실질적으로 광고라기보다는 앱 내 새로운 기능을 알리는 것이니깐 광고라고 부르기도 애매하네요.)
CTA 버튼의 문구도 잘 설계를 해놓았습니다. 닫기 버튼은 없네요.
이미 많은 사용자들이 닫기 버튼을 누르지 않고 배너를 제외한 화면의 다른 부분을 누르면
배너가 사라진다는 것을 알기 때문에 닫기 버튼이 없어도 무방해 보여요.
쿠팡
오늘 하루 보지 않기 버튼이 없어요. 그래서 앱을 들어갈 때마다 항상 다른 내용의 프롬프트 패널이 뜨는 상황입니다.
(프로덕트의 방향성 때문에 어쩔 수가 없는 거겠지 싶은...?)
쿠팡의 프롬프트 패널의 그래픽은 소위 말하는 예쁜 것(?)과는 거리가 있지만 한눈에 확 들어오는 디자인이에요.
전환율이 높은 배너가 비즈니스 쪽으로 좋은 디자인이기 때문에 예쁘지는 않지만 좋은 디자인이라고 할 수 있을 듯합니다.
위메프
상단에 오늘 하루 보지 않기와 닫기 버튼이 위치해있어요.
2. 스낵바
정보의 양: 단순한 그래픽을 포함하며 간결한 정보를 가지고 있는 경우
강조되어야 하는 정도: 중하
마켓 컬리
가시성이 다소 떨어지는 편이이에요.
해당 스낵바를 누르면 아래로 스크롤이 내려가는데요, (한 번의 스크롤로 갈 수 있는 거리)
하단 스크롤로 사용자를 유도하기 위함이 아닐까 싶습니다.
인스타그램
사용자의 행동 플로우에 맞춰 필요한 정보를 전달해 주고 있어요.
FLO
스낵바 형태로 간결한 문구를 전달합니다. 하단에 플레이어 바 까지 있어, 프롬프트 패널을 사용할 시
홈 스크린의 많은 영역이 가려지기 때문에 스낵바 형태를 취하는 것 같아요.
티몬
개인적으로 가장 신선한(?) UX였어요. 주황색 스낵바를 누르면 프롬프트 패널이 올라와요.
그리고 프롬프트 패널 안에서 콘텐츠를 롤링할 수 있어요. 닫은 프롬프트 패널은 언제든지 다시 열 수 있고요.
티몬은 타임 어택을 강조하고 있기 때문에 이러한 UX가 나오지 않았을까 생각이 드네요.
(처음 보지만 한 번의 학습으로 이해되는 UX)
현대카드
앱을 켜자마자 나타나는 것이 아니라, 사이드바 화면에서 스크롤을 일정 구간 이상 내리면 스낵바가 나타나요.
앱 사용 중간에 스낵바가 나타나는 형식이라서 더욱 강조되어 보입니다.
3. 툴팁
정보의 양: 그래픽을 포함하지 않으며 간결한 정보를 가지고 있는 경우
정보의 구성: 해당 정보가 사용자를 안내해야 할 경우
(새롭게 업데이트된 기능 설명을 노출할 경우 주로 사용)
강조되어야 하는 정도: 상중
카카오 TV
카카오의 키 컬러를 사용함으로써 툴팁이 잘 보여요. BG는 어둡게, 전환을 유도해야 하는 곳에는 키 컬러,
Notification은 빨간색을 사용함으로써 시각적으로 정보 위계가 잘 느껴집니다.
닫기 버튼은 있지 않아요. '업데이트 알림 받기' 툴팁을 누르면 알림을 설정할 수 있는 프롬프트 패널이 나옵니다.
그 이후로 툴팁이 나오지 않지만 배너 형태로 업데이트 알림 받기 기능을 다른 방법으로 알려주어요.
앱 서비스 내에서 주요 기능으로 밀어야 하는 경우에 사용하면 좋을 UX이네요.
왓챠
닫기가 텍스트 버튼으로 제공돼 있어요. 보통은 아이콘 버튼 형태로 작게 제공되어서 창을 닫기 힘들 것 같은 느낌이 많이 드는데, 크게 텍스트 버튼으로 제공되니 편리함이 느껴지네요.
오디오 클립
닫기 아이콘 버튼이 circle box와 함께 제공되니 아이콘만 있을 때 보다 가시성이 높아 보여요.
11번가
툴팁 BG와 텍스트의 색상 대비가 낮아 가시성이 좋지 않습니다.
닫기 아이콘 버튼의 크기가 작아 상단의 오늘 발송이나 광고 배너가 함께 눌릴 것 같은 부정적인 느낌이 들기도 하네요.
