앱의 첫 실행 시, 유저를 사로잡을 수 있는 가장 효과적인 방법 : 온보딩 스크린 사례 5

 

첫 번째 실행 후, 10명 중 9명이 앱을 삭제한다?

여러번의 스마트폰을 쓰면서, 이제 사람들은 자신들에게 꼭 필요한 앱이 무엇인지 잘 알게 되었습니다. 이는 새롭게 출시된 앱이 사람들의 선택을 받는 가장 큰 어려움 중 하나가 되었죠. 한 연구조사에 따르면 다운로드된 대부분의 앱의 90%는 사용자가 첫 실행 이후 삭제된다고 합니다. 때문에 유저 온보딩은 신규 서비스에게 정말 중요한 일이 되고 있습니다. 어렵사리 앱을 다운로드받게 했는데, 앱을 바로 삭제한다면 다신 만날 수 없을 가능성이 높기 때문이죠.

온보딩이란 원래 서비스에 쓰이던 표현은 아니었습니다. ‘타입폼(Typeform)을 활용하는 다섯가지 방법‘을 통해서도 소개드린적이 있는데, 신입 사원이 새로운 직장에 적응하도록 돕는 것을 의미하는 HR분야에서 비롯된 것이 바로 ‘온보딩(Onboarding)’이었습니다. 이를 서비스에 적용해보자면, 앱을 처음 활용하는 유저들이 앱을 계속해서 사용할 수 있는 ‘명확한 이유와 가치’를 보여주는 것이라고 할 수 있겠죠. 오늘은 앞서 작성했던 ‘유저온보딩을 위한 8가지 방법‘의 내용을 통해 다시 한 번 온보딩 과정에 참고해야 할 내용을 살펴본 후, 다섯가지 사례를 살펴보겠습니다.

  • 사용자의 목적에 초점을 맞추기
  • 고객 여정 지도 만들기
  • 쓸데없는 것은 과감하게 잘라내기
  • 서비스의 주요 기능은 하나씩 차례대로 보여주기
  • 친절하고 구체적인 설명해주기
  • 스스로 시작할 수 있는 기회를 제공해주기
  • 빈 화면을 효율적으로 활용하기
  • 사용자와의 직접적인 대화를 활용하기

 

1.Google docs

출처 : https://dribbble.com/shots/3056941-Google-docs-app-onboarding-interaction

먼저 소개드릴 사례는 전 세계 8억명이라는 엄청난 일 활성유저를 보유하고 있는 ‘구글독스’입니다. 이동중에도 문서작성이 가능하고, 팀원들과 협업을 할 수 있으며, 자동으로 동기화가 되는 서비스의 특징을 애니메이션을 활용해 보여주고 있습니다. 매일 쓰는 서비스이기에 익숙해져 있지만, 구글 독스에는 상당히 많은 기능들이 녹여져 있기에 이를 정리해 보여주는게 쉽지 않았을거란 생각이 드는데요! 문서 작성으로 시작되는 서비스의 이용 과정을 4가지로 압축해 깔끔하게 보여주는 모습이 인상적이었습니다. 

 

2.Summer Onboarding by Andrea Cau

출처 : https://dribbble.com/shots/2744202-Summer-Onboarding

두 번째는 컨셉디자인이긴 하지만, 여름이 다가오는 ‘상황’을 온보딩에 잘 녹여낸 사례입니다. 여름하면 ‘휴가’와 ‘여행’이 가장 먼저 떠오르는데요! 휴가 중, 사진을 빼놓을 수 없습니다. 위의 사례는 이런 내용들을 온보딩에 활용하여 여름을 즐기는 또 다른 방법으로 자신들을 사용하라는 메시지를 전달하고 있습니다. 컬러 구성도 눈에 띄고, 메시지도 간결하게 잘 구성되어 있네요.

 

3.Snapster by Pavel Shumakov

‘Snapster’는 러시아의 페이스북으로 불리는 ‘VK(텔레그램을 만든 바벨 두로프가 개발한 서비스로, 그는 1,000만 이용자를 돌파할 즈음 러시아 정부가 개인 정보 제공 요구를 하자 러시아를 떠나 텔레그램을 공개)’에서 서비스중인 사진 편집 모바일 앱서비스입니다. 사진 편집이 주 목적인 서비스답게, 온보딩 과정에서 사진을 편집하고, 공유하고, 사용한 필터를 공유하는 등의 핵심 기능등을 잘 보여주고 있었습니다. 애니메이션을 활용, 사진 이미지를 처음부터 끝까지 자연스럽게 가져감으로써 온보딩 과정에 더욱 집중할 수 있도록 구성해놓은 점이 인상깊었던 사례입니다.

 

4.Zeta by Ramakrishna V

출처 : https://dribbble.com/shots/2873539-Zeta-Onboarding-GIF

‘Zeta wallet’은 인도의 대표적인 결제 솔루션 중 하나입니다. 이들의 온보딩을 살펴보면, 자세한 기능 보다 상점 / 개인간 / 웹 등 ‘Zeta’에서 제공하는 서비스를 활용할 수 있는 주요 상황에 초점을 맞추고 있었습니다. 화면 상단에 아이콘을 활용하여 어떤 상황에서 쓰이는지를 구분할 수 있도록 설계한 점, 상황에 따른 주요 내용을 컬러로 명확하게 구분해놓은 점이 매력적인 사례였습니다.

 

5.Boomer App by Parallel Labs

출처 : https://dribbble.com/shots/3129255-Boomer-App

일러스트와 애니메이션을 활용하여 사용자들이 앱을 사용하기전의 불편함을 개선하는 방법을 보여주는 사례입니다. 최근 ‘삽화’를 앱 소개는 물론 온보딩에 활용하는 사례가 많아지고 있는데요! 사용자에게 명확하게 전달할 수 있는 메시지를 위와 같이 잘 녹여낸다면 더없이 좋은 방법이 될 수 있지만, 반대의 경우 되려 쓸모없는 콘텐츠로 느껴질 수 있다는 점을 고려해야 할 것 같습니다.

 

함께 보면 좋은 내용 소개

 

댓글 남기기