[HIG] Onboarding 🛫

Human Interface Guidelines 원문 해석과 함께 사례 분석을 추가해서 작성한 글입니다.

🛫 온보딩은 새로운 사용자와 다시 돌아오는 사용자를 환영하기 위한 수단입니다.

 

📍 Human Interface Guidelines

빠르고, 재밌고, 서비스에 대한 설명을 주며, 선택적으로 제공되는 온보딩은

사람들이 방해받지 않고 앱을 최대한 활용하는데에 도움이 될 수 있습니다.

Onboarding - App Architecture - iOS - Human Interface Guidelines - Apple Developer

 

1. Provide onboarding that helps people enjoy your app, not just set it up

온보딩을 앱에 대한 설정이 아니라 단지 사용자가 앱을 즐기기 위한 것이어야 합니다.

 

사용자는 온보딩을 통해 앱을 사용해볼 기회가 주어짐에 고마워할 수 있지만,

동시에 온보딩 과정에서도 제대로 동작하길 바랍니다.

설정이나 권한 상세과 같은 온보딩 경험에 대한 방해는 피해야 합니다.

 

2. Get to the action quickly

빠르게 액션에 취할 수 있도록 하세요.

 

런치 스크린 이후 앱의 최초 화면이 보여지게 된 후, 사용자들을 바로 앱에 뛰어들어 사용할 수 있도록 해주세요!

만약 튜토리얼이나 인트로 시퀀스를 제공해야 한다면,

skip 할 수 있는 방법을 함께 제공해야 하며

다음 실행시 자동으로 보여주지 않아야 합니다.

 

3. Anticipate the need for help

도움을 요청할 것에 대한 예상을 하고 있어야 합니다.

 

사용자들이 앱을 사용하며 막힐 지점을 미리 파악한 뒤 온보딩을 통해 그때 유용한 팁을 자연스럽게 제공하세요.

예를 들면, 게임이 일시 중지되거나 캐릭터가 전진하지 않을 때 유용한 팁을 자연스럽게 표시할 수 있습니다.

처음에 놓친 경우 튜토리얼을 다시 볼 수 있도록 하세요!

 

4. Stick to the essentials in tutorials

튜토리얼에는 필수적인 것만 넣어주세요.

새로운 사용자들을 위한 가이드를 제공하는 것은 좋지만 이러한 가이드가 좋은 앱 설계 자체를 대신할 수 없습니다.

너무 많은 가이드가 필요하다면 앱을 좀 더 직관적으로 만들 필요가 있습니다. 앱 설계를 재검토하는 것을 고려해보세요.

 

5. Make learning fun and discoverable

온보딩을 통한 학습을 재밌고 발견 가능하게 만드세요.

직접 행동을 통해 배우는 것은 가이드 목록을 읽는 것보다 훨씬 재미있고 효과적입니다.

애니메이션과 상호작용을 사용하여 상황에 맞게 점진적으로 가르쳐주세요!

 

---

📍어떻게 온보딩을 설계해야 할까?

온보딩이 중요한 이유

유저의 앱 다운로드 후 삭제율 곡선을 보면,

첫째날에 가장 삭제율이 높으며 시간이 지날 수록 곡선이 평평해지는 것을 볼 수 있습니다.

출처 : Appsflyer( https://www.appsflyer.com/kr/blog/new-data-shows-uninstalls-remain-significant-pain-apps/ )

따라서 온보딩을 통해 사용자에게 앱에 대한 첫 인상을 심어줄 수 있으며

앱의 목적, 해당 앱이 사용자에게 도움될 것이라는 것을 인식시키고 앱 삭제를 막을 수 있습니다.

 

사례로 보는 온보딩 케이스 분석

 

1️⃣ 핵심만 전달

카카오페이

카카오페이는 온보딩을 통해

서비스가 사용자에게 제공하고자 하는 핵심 가치를 전달하고 있는 것 같습니다.

 

그리고 하단에는 카카오페이인 만큼카카오 로그인을 할 수 있도록 넣어뒀네여

또 온보딩 애니메이션을 통해 좀 더 시각적으로 주목을 끈 것 같아요!

카카오페이

 

 

2️⃣ 사용 가능한 주요 기능 설명

네이버페이

네이버페이에서는 5가지의 주요 핵심 기능에 대해 간단하게 설명하고 있습니다.

핵심 기능들은 옆으로 스와이프하여 볼 수 있는 형태로 제공하며

온보딩 이미지 아래 페이지 컨트롤러를 두어

몇 개의 기능을 설명하고자 하는지 알 수 있습니다.

또한 하단에는 시작하기 버튼을 고정시켜두어

모든 온보딩 설명을 스와이프해서 보지 않더라도 바로 앱의 컨텐츠를 시작할 수 있도록 하고 있네요!

네이버페이

 

 

3️⃣ 개인화된 경험 제공

루티너리

루티너리에서는 스플래시 이후 첫 화면에서

반가워👋 라는 버튼을 통해 로그인을 하지 않고도 앱을 사용할 수 있도록 하고 있습니다!

루티너리

 

 

반가워👋 버튼을 통해 들어가면 앱을 어떻게 사용하면 되는지에 대한 가이드 온보딩을 제공하고

루티너리 온보딩

 

그렇게 들어간 메인 화면에서는 바로 서비스의 주요 기능을 사용해볼 수 있도록 연결되어 있습니다.

루티너리 메인