brunch

You can make anything
by writing

C.S.Lewis

by 정윤선 Jan 23. 2017

모바일 앱 사용자를 위한 즐거운 온보딩 경험 구축

온보딩이란 무엇이며, 어떻게 구축해야 하고, 예시들은 어떤 게 있을까?

(출처 : [A Roadmap To Building A Delightful Onboarding Experience For Mobile App Users – Smashing Magazine]과 [Retain Users With These Mobile App Onboarding Inspirations | Toptal]의 기사를 번역 및 가공한 콘텐츠입니다.)

앱을 론칭할 때는 사용자를 유치하기 위해 많은 시간과 리소스가 필요합니다. 광고, 홍보 및 콘텐츠 마케팅을 비롯해 다양한 수단을 사용하여 사람들을 앱으로 끌어 와야 하기 때문입니다.

하지만 이 많은 인풋을 들여서 다운로드된 앱은 때때로 사용자들에게 버림받습니다.

디자이너가 할 수 있는 일은 앱이 쓸모없다고 여겨지기 전에 사용자에게 앱의 존재 이유를 분명하게 보여주는 것입니다.

연구에 따르면 다운로드된 모든 앱의 90% 는 사용자가 단 한 번 사용한 후 삭제된 것으로 나타났습니다. 사람들은 종종 인터페이스가 잘못 설계되었거나 부정적인 경험으로 앱을 포기합니다.

Fundamental UI Design의 5 장에서 Jane Portman은 다음과 같이 말했습니다.

사용자가 앱에 로그인하면 혼자 있게 되며, 그들은 목표를 향해 수영하는 대신 익사하기 시작합니다.

사용자가 앱을 사용할 두 번째 기회를 잡으려면 네 가지를 이해해야 합니다.

1. 사용자가 왜 이 애플리케이션이 필요한지,

2. 앱이 그들을 위해 무엇을 할 수 있는지,

3. 가장 중요한 기능은 무엇인지,

4. 그리고, 이러한 기능을 사용하는 방법.

앱의 목적을 전달하는 가장 좋은 방법은 매력적인 온보딩을 이용하는 것입니다.

온보딩 (Onboarding)이란?

"온보딩"이라는 용어는 신입 사원이 새로운 직장에 적응하도록 돕는 것을 의미하는 HR분야에서 비롯됐습니다. UserOnboard에 따르면 소프트웨어 개발에서 온보딩은 사용자가 제품을 성공적으로 채택하고 완전히 사용하도록 돕는 것입니다.

온보딩은 80/20 규칙을 따릅니다.

유저들의 앱 사용 시간 중 80%를 차지하는 작은 기능의 집합들을 사용하는 방법을 신속하게 가르 칠 수 있을 때만 효과적입니다.

온보딩을 구축할 때 가장 신경 써야 할 점은 그 기능이 왜 그렇게 유용한 지 설명하는 것입니다.

1. 입문 슬라이드 또는 비디오,

2. 기능에 대한 팁,

3. 인터페이스 투어,

4. 콘텐츠 샘플,

5. 하이브리드 솔루션.

이러한 모든 솔루션은 사용자와의 의사소통에 효과적입니다.

다음 비디오는 여행 앱 사용자에게 슬라이드를 통해 유저가 사용할 수 있는 기능을 보여줍니다.

위의 온보딩 슬라이드 중 “비행 중 당신은 극저온 상태가 될 것입니다 …”라는 문구는 앱의 사용자 경험을 포착하는 좋은 예입니다.

또한 "계정 만들기", "행성 선택"및 "출발"의 세 가지 슬라이드만 보여주기 때문에 간결하고도, 앱의 목적을 완벽하게 전달합니다.

Beats Music 앱은 지루한 회원가입 폼 대신 온보딩 위저드를 사용하여 사용자를 참여시키고 음악 감상 환경을 맞춤 설정할 수 있습니다.

Onboarding wizard by Beats Music

이러한 유형의 온보딩 디자인은 개개인 사용자의 음악 취향에 호소하여 경험을 유니크하게 만듭니다.

"just for you"는 사용자가 자신의 선호도를 앱과 공유하는 좋은 방법입니다. 사람들은 자신에 대해, 그리고 자신이 좋아하는 것에 대해 이야기하는 것을 좋아합니다.

온보딩 위저드는 여러 다양한 유저의 취향에 맞춰야 하는 앱일 경우 최상의 전략 일 수 있습니다.

IFTTT는 그들만의 고유한 기능을 설명하는 용도로 온보딩 팁을 사용합니다.

Coach marks by IFTTT

IFTTT는 IFTTT만이 가지고 있는 트리거 채널, 액션 채널 등 특정 용어를 사용하며, “만약,~한다면”의 논리를 사용하여 사람들이 명확하게 프로덕트를 이해하도록 돕습니다.

온보딩 (Onboarding)을 위한 전략

다양한 유형의 온보딩을 알았으므로 온보딩 경험을 최대한 재미있게 디자인하는 방법을 알아보겠습니다.

만약 사진 편집 응용 프로그램을 위해 온보딩을 설계한다면 4 ~ 5개의 소개 슬라이드를 만들 수 있습니다.

금융 앱에는 차트, 그래프 및 예산 기능이 포함된 자세한 둘러보기나 팁이 있는 시스템이 필요할 수 있습니다.

음악 편집 앱의 경우 컨트롤을 사용하여 트랙을 만드는 방법을 간략하게 설명할 수 있습니다.

일부 디자이너는 두 가지 이상의 유형을 결합한 하이브리드 방식을 사용합니다.

예를 들어, 어떻게 사용하는지 힌트가 포함된 소개 비디오와 자세한 지침이 포함된 도움말 메뉴를 섞어서 사용할 수 있습니다.

예를 들어 Google의 Inbox 앱에 대한 동영상은 두 가지 이상의 유형이 섞여서 사용됩니다.

이제, 사용자 참여를 위한 6 가지 전략을 알아보도록 하겠습니다.

1. 긍정적인 감정을 트리거하기

사람들이 앱을 사용하기 시작하면 처음에 받은 팁을 쉽게 잊어버리고 UI에서 길을 잃을 것입니다.

올바른 방향으로 그들을 끌고 오도록, 디자이너는 애플리케이션을 게미피케이션 할 수 있습니다.

예를 들어, ‘달성한 것들’과 함께 팁을 제공하거나 테스크를 완료하기 위해 사용자를 칭찬할 수 있습니다.

성취는 긍정적인 감정을 유발합니다. 프로덕트가 성공의 느낌으로 연결고리가 형성되면 사용자들은 프로덕트를 계속 사용하게 됩니다.

Fu ndamental UI Design의 5 장에서 Jane Portman은 다음과 같이 말했습니다.

모든 사용자 온보딩은 심리에 관한 것입니다. 성공 및 성취감으로 인해 사용자가 다시 돌아올 수 있습니다.

MailChimp 또한 유저들의 테스크 완료를 위해 사용자를 칭찬함으로써 긍정적인 감정을 유발하는 방법을 사용하고 있습니다.

MailChimp

온보딩에서 감정이 잘 활용되었다는 것은 아래의 기준을 만족시켰다는 것입니다.

1. 내비게이션은 이해가 쉽고 쉽게 이해할 수 있습니다.

2. 디자인이 시각적으로 호소력을 발휘합니다.

3. 슬라이드를 통해 이동하는 것이 매우 즐겁기 때문에 사용자는 계속 슬라이드 하기를 원합니다.

4. 온보딩 경험 전체가 브랜드와 고객의 개성을 반영하여 기억에 남을만한 개인적인 경험을 제공해줍니다

우리는 Yalantis에서 자체 온보딩 프로세스를 설계하기 위해 이러한 기준을 사용했습니다.

아래는 온보딩에서 감정적인 접근법을 사용하여 가상의 패션 앱의 대상 고객을 끌어들이는 방법을 보여줍니다.

이들의 아이디어는 젊은 여성이 세련된 옷을 선택하도록 돕는 것이 었지만, 프로덕트의 기능을 설명하는 데만 초점을 맞추지 않았습니다. 매력적인 디자인을 통해 감성적인 온보딩 경험을 만들었습니다.

이 영상에서는 어도비 애프터 이펙트 (After Effects)를 사용했지만 프로토타입 툴과 일러스트레이션을 통해서도 쉽게 구현할 수 있습니다.

2. 사용자가 어떤 액션을 할 수 있는지 보여주기

온보딩 경험을 구축할 때는 사용자의 관점을 고려해야 합니다.

사용자가 제품의 혜택을 누릴 수 있는 방법을 보여주는 것은 제품의 우수성을 보여주는 한 가지 방법입니다.

앱이 하는 일과 앱이 제공하는 가치에 대해 간략하게 설명하는 3개 정도의 짧은 문장을 사용하는 게 좋습니다.

Google의 받은 편지함 앱은 다음과 같은 결과를 보여주는 좋은 예입니다.

Inbox by Google

받은 편지함은 동사와 아이콘을 사용하여 각 화면을 설명합니다. 동사는 다른 어떤 품사보다 사람들에게 행동을 하도록 강요합니다.

아래에 나와있는 예제에서 사용자가 녹화 버튼을 누르는 순간부터 동영상 편집, 필터 적용, SNS에 동영상 공유하기까지 동영상 편집 앱과 인터렉션 하는 과정을 시연해 봤습니다.

우리는 이 앱의 모든 기능의 장점을 강조했습니다. 하지만 자칫하면 기능이 복잡해 보일 수도 있어서 사용자가 앱의 이점을 명확히 이해할 수 있도록 슬라이드에 되도록 간단한 단어를 선택했습니다.

3. 경쟁우위를 위한 주의 끌기

만약 디자인하는 제품이 유사한 기능의 업체들과 경쟁해야 한다면 경쟁 우위를 분명히 강조해야 합니다. 3 ~ 4 개의 슬라이드를 사용하여 사람들에게 앱이 다른 앱과 다른 점을 알리고, 사람들이 왜 앱을 필요로 하는지 명확하고 간결하게 설명합니다.

“Comprehensive,” “Twice a day,” “Definitive” and “Reminders”- 아래의 네 슬라이드는 야후의 뉴스 다이제스트 앱의 가치를 몇 천 단어보다 훨씬 임팩트 있게 설명합니다.

News Digest by Yahoo

News Digest 앱은 온보딩 디자인에 아름다운 색상을 사용했습니다. 이 메시지는 야후의 앱이 시장에 있는 유사한 앱들과 얼마나 다른지 강조하지만, 색상은 야후 사용자 인터페이스와 일치합니다.

4. 콘텐츠가 담긴 샘플과 함께 설명하기

사용자는 콘텐츠가 담겨있는 온보딩을 볼 때 앱과 인터렉션 하는 방법을 더 잘 이해할 수 있습니다.

콘텐츠 샘플은 주로 생산성 및 문서 편집 응용 프로그램에 사용됩니다. 디자이너는 팁과 슬라이드로 이뤄진 콘텐츠가 담긴 샘플을 온보딩에 사용할 수 있습니다.

다음은 Dropbox가 paper앱에서 사용자에게 콘텐츠가 담긴 샘플을 보여주는 방법입니다.

Paper by Dropbox

문서 및 폴더에서 공동 작업하는 것은 복잡해 보이지만 Dropbox는 실제로 사용이 얼마나 쉬운지 온보딩을 통해 보여줍니다. 또한 인터페이스가 깨끗하고 명확하여 사람들이 신속하게 아이디어를 얻을 수 있도록 도와줍니다.

Mac 용 Readdle 's Documents 응용 프로그램에서도 콘텐츠가 들어있는 온보딩을 볼 수 있습니다.

Documents by Readdle

Readdle은 온보딩을 통해 사용자가 관리할 수 있는 파일과 이러한 파일을 가져올 수 있는 위치를 표시합니다.

5. 오래가는 첫인상 만들기

온보딩 디자인은 사용자가 앱을 처음 사용할 때 사용되어야 합니다.

처음에 보는 빈 화면인 "blank slate"는 사용자가 첫 번째 조치를 제대로 취하도록 유도할 수 있습니다.

새 문서를 만들 것인지 묻는 그림과 같은 클릭 유도 문안 (call to action)을 통해 사용자가 첫 액션을 조금 더 수월하게 할 수 있습니다. 빈 슬레이트를 사용하여 일어날 일에 대한 설명과 가이드를 제공하는 것이 좋습니다.

효과적인 빈 슬레이트는 사용자를 교육하고, 즐거움을 주고, 사용자에게 질문을 던집니다. 다음 세 가지 애플리케이션을 살펴보면 이 애플리케이션들은 화면의 공백을 충분하게 채 웁니다.

Three apps that fill up the empty screen

첫 번째 스크린 샷은 제공하는 기능에 대한 설명과 함께 메시징 앱을 설치하라는 초대장이 표시됩니다.

두 번째 스크린 샷은 비용 추적을 단순화할 은행 카드를 등록하도록 사용자를 가이드합니다.

세 번째 샷은 사용자가 자신의 프로필에 게시물을 추가하여 더 매력적으로 만들 것을 권장합니다.

마지막은 재미있는 디자인으로, 사용자를 "find awesome ads"로 초대합니다.

6. 점진적인 학습 시스템의 구현

이것은 가장 복잡한 전략이며, 진입 문턱이 높은 기술적으로 정교한 프로젝트에 적합합니다.

이 방법을 사용하면 사용자는 동영상이나 추가 가이드 없이 제품을 사용하는 방법을 학습합니다. 점진적 학습에는 일반적으로 과제 시스템이 포함됩니다.

요소

자신에게 맞는 전략을 선택했다면, 이제 디자인에 대해 생각해봐야 합니다.

온보딩 디자인에는 네 가지 핵심 요소가 있습니다.

1. 버튼과 내비게이션

슬라이드 쇼를 제시하는 경우 인터페이스에서 화살표 및 기타 기호로 사용자가 다음으로 이동해야 한다는 것을 표시해야 합니다.

지금까지 보아온 최고의 온보딩 디자인 중 하나는 지금은 없어진 Dropbox의 Carousel 앱이었습니다.

사용자가 처음으로 앱을 시작했을 때, "start"를 클릭하면 아래로 스크롤하여 앱의 주요 기능을 설명하는 슬라이드를 볼 수 있었고, 인디케이터는 아래로 스크롤하여 다음 스케치를 볼 수 있도록 합니다.

온보딩 경험이 끝나면 사용자는 앱을 사용하기 위해 등록할 수 있습니다.

Carousel by Dropbox

Dropbox의 Carousel 앱은 세련된 인터페이스와 온보딩 경험을 제공했기 때문에 꽤나 성공적인 앱이었습니다.

하지만, Dropbox 생태계의 제품 위치가 약하고 Google 포토, Apple iCloud 및 Facebook 순간과의 경쟁이 심했기 때문에 프로젝트는 종료되었습니다.

Dropbox는 Carousel의 핵심 기능을 주요 앱으로 이전했습니다.

2. 팁

팁은 특정 순서로 화면에 표시되는 커뮤니케이션의 집합입니다. 팁은 인터페이스의 다양한 구성 요소에 첨부되어 사용자가 이러한 구성 요소와 상호 작용할 수 있는 방법을 간략하게 설명합니다.

팁을 사용한 인터페이스를 통해 사용자를 안내하여 앱에서 첫걸음을 내딛도록 도와줄 수 있습니다.

앱을 업데이트한 후 팁을 사용하면 새로운 기능을 표시할 수도 있습니다.

팁은 다양한 방법으로 제시할 수 있습니다.

1. 능동적인 요소들을 강조하기 위해,

2. 힌트로서의 텍스트,

3. 팝업 창으로,

4. 화면의 빈 영역을 채울 때.

우선 팁을 표시할 사용자 유형을 고려해야 합니다.

숙련된 사용자는 초보자의 조언에 짜증이 나서 온보딩을 건너뛸 수 있습니다.

또한 일부 사용자는 온보딩이 얼마나 매력적이든지 상관없이 온보딩 기능을 제공받고 싶어 하지 않습니다.

3. 텍스트

온보딩 텍스트는 특정 가이드라인을 따라야 합니다.

1. 간결함과 명확성 - 각 슬라이드는 명확하고 일반적인 언어로 앱의 핵심 가치를 설명하는 단일 문장을 포함해야 합니다.

2. 명시성 - 텍스트는 배경과 쉽게 구분되어야 하고 눈에 띄어야 합니다.

3. 구성 - 텍스트는 전체적인 디자인 언어와 일치해야 하고 제품의 톤 앤 매너를 반영해야 합니다.

사용자의 말에 귀를 기울여 그들이 알고 싶은 것을 알아내야 합니다. 그들이 무엇을 사용하거나 이해하기가 어려울지 고려하고 그 항목들에 대해서는 더 많은 설명을 제공해야 합니다.

4. 그래픽

텍스트로 인터페이스를 오버 로드하지 말고, 일러스트를 사용하는 것이 좋습니다. 이미지는 사용자의 메모리에 시각적 단서들을 남기므로 텍스트만으로는 달성하기 쉽지 않은 것들을 달성하게 해줍니다.

영상의 가장 중요한 두 가지 기준은 단순성과 보편성입니다.

디자인한 이미지, 아이콘 및 기호는 다른 국가 및 지역에서도 동등하게 해석되고 사용되어야 합니다.

그래픽 디자인에서 사용할 주요 콘텐츠 유형은 일러스트레이션, 사진, 비디오, GIF 및 스크린 샷입니다.

이제 우리는 온보딩에서 사용할 수 있는 전략과 요소를 알았으므로 실제 디자인을 만들어야 합니다.

온보딩 디자인용 프로토타이핑 툴

대체적으로 디자이너들은 프로토 타입 디자인을 할 때 다음 툴을 사용합니다.

Principle

Pixate

Flinto

InVision

Atomic

Framer.js

Form (by RelativeWave)

이런 툴들을 통해 팀과 공유할 수 있는 프로토 타입을 만들 수 있습니다.

내가 가장 좋아하는 툴은 Principle로 몇 분 안에 사용자 정의 애니메이션을 사용하여 프로토 타입을 만들 수 있습니다. 다른 모바일 UI 프로토 타입 도구와 달리 Principle은 편리하게 설계되었습니다. Principle의 단순성은 성능을 향상하고 설계 프로세스를 보다 유연하고 다양하게 만듭니다.

RelativeWave의 Framer.js 및 Form은 디자이너가 코딩 방법을 알아야 한다고 생각하는 사람들을 위한 것입니다. 이 도구를 사용하면 개발자가 만드는 프로토 타입을 보다 쉽게 구현할 수 있습니다.

InVision은 프로토 타입을 생성하는 가장 쉬운 도구이지만 애니메이션에는 몇 가지 제한이 있습니다.

우리는 다음 비디오 편집기도 사용합니다.

Adobe After Effects

Apple Motion

이를 통해 세련된 사용자 정의 애니메이션을 만들고 인터페이스 요소가 어떻게 변형되는지 실험할 수 있습니다.

온보딩을 만드는 법

일반적인 모바일 앱에는 다양한 기능, 구성 요소 및 상호 작용이 많이 있습니다.

하지만 온보딩 과정에서 그 모든 기능에 대해 설명할 필요는 없으며, 단지 앱의 주요 목적과 이점을 알려주는 것만으로도 충분합니다.

다음은 온보딩 프로세스를 설계하는 전반적인 프로세스에 대한 간략한 요약입니다.

1. 프로덕트의 몇 가지 중요한 핵심 기능들에 대한 리스트업

2. 프로덕트가 강조할 가치 리스트업

3. 경쟁사가 있다면 경쟁사와 해당 프로덕트의 차별점에 대해 리스트업

4. 앱의 구체적인 사용 사례 하나를 설명해보기

5. 앱의 가치를 전하는 가장 적합한 온보딩 전략을 선택

6. 그래픽 요소와 내비게이션 흐름을 먼저 디자인하기

7. 프로토 타입 제작

8. 프로토 타입 테스트

9. 경험을 향상하기 위해 이터레이션 과정 거치기

온보딩에서의 흔한 실수

디자이는 온보딩 경험을 디자인할 때 실수를 하는 경우가 있습니다. 다음은 가장 일반적인 실수입니다.

1. 사용자에게 바보라는 느낌을 주지 않도록 누가 봐도 명백한 세부 사항을 일일이 설명하면 안 됩니다.

2. 온보딩을 너무 길거나 추상적이게 만들면 안 됩니다. 부정적인 감정과 사용자의 오해만 유발할 것입니다.

3. 유사한 앱을 복사해서 그대로 사용하면 안 됩니다. 온보딩 디자인은 제품마다 고유해야 하며 해당 프로덕트를 사용하는 특정 사용자에게 적합해야 합니다.

4. 온보딩을 위한 온보딩을 제작하면 안 됩니다. 온보딩은 사용자와의 의사소통 시스템 중 하나의 구성 요소이며, 다른 모든 프로덕트들이 그렇게 하기 때문에 따라 디자인될 요소가 아닙니다. 온보딩은 제품 사용 경험을 보완하고 향상하여야 합니다.

최상의 온보딩 경험이라 할지라도 제품의 전반적인 UX에 대한 문제를 해결할 수는 없습니다.

온보딩을 만드는 작업에는 다소 시간이 걸릴 수 있지만 결국에는 사용자 경험이 중요합니다. 온보딩 환경을 만들 때 다음 사항을 명심해야 합니다.

- 분석 및 사용자 테스트를 통해 온 보딩 디자인의 효과를 측정해야 합니다.

- 다른 사람들의 실수로부터 배워야 합니다. 우리는 리서치할 수 있는 많은 기사와 자료들을 가지고 있습니다.

- 온 보딩의 훌륭한 사례를 연구하면 좋습니다. 인사이트를 얻으려면 UX Archive, User Flow Patterns 및 Pttrns가 좋은 리서치 사이트가 될 수 있습니다.

온보딩의 예시

1. Google Docs

Google Docs 앱은 유저들의 첫 화면에 바로 문서를 띄워주는 게 아니라, 온보딩에서 이 앱을 통해 사용자가 문서를 처리하는 방식이 어떻게 변화할 수 있는지에 대해 보여줍니다.

Divan Raj

2. Dropbox

Dropbox앱의 온보딩은 단순히 기능을 나열하는 것이 아니라 특정 라이프 콘텍스트에서 앱이 사용자에게 도움이 되는 방법을 보여주는 훌륭한 예입니다. 버스에서 사진을 백업하고 친구들에게 비디오를 신속하게 전송할 수 있다는 것은 단순 기능 리스트보다 사용자에게 더 많은 것을 의미합니다.