온보딩

온보딩 (Onboarding)

온보딩 경험은 사용자가 제품이나 기능을 시작하는 방법을 안내해요.

온보딩을 한 번으로 끝내는 기회로 보는 대신, 사용자 여정의 여러 지점을 고려하고 사람들이 받아들일 준비가 됐을 때 정보를 제공하세요. 그때가 앱이나 기능을 처음 사용하는 때일 수도, 관련 기능을 사용할 때일 수도, 업데이트 이후일 수도 있어요.

출처: 문서

본문

원칙 (Principles)

효과적인 온보딩 경험은 다음과 같은 연구 기반 원칙을 따르죠. Microsoft의 모든 제품은 새 온보딩 경험을 설계할 때 이 원칙을 따라야 해요.

비방해적 (Non-distracting)

사용자의 일차 목표에 장벽이 되지 않도록 하세요.

선택적 (Optional)

사람들이 현재 하고 있는 일을 빠져나가 끝낼 수 있게 하되, 나중에 다시 돌아올 수 있는 방법을 주세요.

혜택 중심 (Benefit-focused)

사람들은 콘텐츠로부터 어떻게 혜택을 얻을지 이해하지 못해 첫 실행 경험을 자주 건너뛰어요. 앞서 혜택을 알려주면 주의를 기울일 동기를 얻게 돼요.

일관성 (Coherent)

표준 Fluent 컴포넌트를 사용해 사용자가 온보딩 경험과 상호작용할 때 무엇을 기대할지 알게 하세요.

시나리오와 목표 (Scenarios and goals)

모든 온보딩 경험은 환영(welcome), 길안내(orient), 알림(notify), 설명(explain), 행동 취하기(take action)라는 다섯 가지 목표 중 하나 이상을 달성하도록 돕는 것을 추구해요. 각 온보딩 경험에서 일차 목표를 좁히는 것이 중요해요. 그래야 올바른 UX를 구현할 수 있죠.

이 목표들이 모두 한 번에 일어나지는 않아요. 일부 UX는 여러 목표를 동시에 다루기도 하고, 어떤 것은 경험 전반에 걸쳐 펼쳐질 수도 있어요.

환영 (Welcome)

환영 경험은 사용자가 올바른 장소에 있다고 안심시켜줘요. 간단한 환영 화면, 배너, 또는 모달 다이얼로그를 시도해보세요.

그것이 정확히 한 번만 나타나고 혜택에 집중하게 하세요. 콘텐츠를 짧고 훑어볼 수 있게 유지하고, 하나나 두 개의 주요 포인트로 제한하세요. 이 환영 후에는 경험 전반에 걸쳐 추가 기능을 맥락에 맞게 노출할 수 있다는 점을 기억하세요.

모달은 사용자에게 새 경험을 시도하도록 초대하고, 혜택을 알리며, 거부(opt out)할 방법을 줘요.

브라우저 내 배너(in-browser banner)는 새로운 개선 사항에 주의를 끌어요.

길안내 (Orient)

새 경험에 사용자를 환영한 후에는 유용한 기능을 맥락에 맞게 보여주는 것이 중요해요. 특정 옵션이 어디에 나타나는지 보여주려면 빈 상태(empty states)나 교육용 팝오버(teaching popovers)를 시도하세요.

특히 브랜드 색의 교육용 팝오버는 UI에서 유용한 기능을 직접 가리킬 수 있어요.

알림 (Notify)

앱이나 경험의 기능이 추가되거나 변경되면, 사용자에게 이제 무엇을 얻을 수 있는지, 그리고 어떻게 새 UX에 행동을 적응시킬 수 있는지 알리세요. 알리려면 배너, 빈 상태, 교육용 팝오버, 또는 토스트(toast)를 시도하세요.

브라우저 상단의 메시지 바(message bar)는 사용자에게 워크플로를 더 쉽게 만드는 새 기능을 알려요.

설명 (Explain)

사용자가 막힌 느낌을 갖게 하지 마세요. 무엇을 할 수 있는지 또는 명확히 드러나지 않을 수 있는 세부 사항을 알려주려면, 사용자가 어떻게 나아갈지 알려줄 수 있는 힌트를 UI에 넣어보세요. 빈 상태는 짧고 설명적인 메시지에 훌륭한 표면이에요. 설명을 덧붙이려면 한두 문장의 텍스트 설명을 포함할 수도 있어요.

Teams의 빈 상태 메시지는 사람들에게 무엇을 성취할 수 있는지 빠르게 알려주고, 쉬운 길로 가는 CTA를 줘요.

행동 취하기 (Take action)

때로는 사용자가 뛰어들기 전에 앱이나 기능 사용에 필요한 몇 가지 예비 동작을 완료해야 해요. 이런 경우 FRE(Fist Run Experience), 캐러셀에 내장된 설정 마법사, 또는 드로어(drawer) 안의 다단계 흐름을 시도해보세요.

마법사는 사용자에게 완료해야 할 단계 수와 진행 상황을 알려줘요.

콘텐츠 (Content)

설명보다 행동을 위해 쓰기 (Write for action more than explanation)

가능한 한 능동태와 강한 동사를 사용해 사용자가 앱으로 무엇을 할 수 있는지 알려주세요. 직접적이고 능동적인 언어를 사용하세요. CTA 버튼은 "I want to …(나는 … 하고 싶다)" 문장을 완성해야 해요.

필요한 지점에서 UI 카피와 툴팁을 사용하세요. 단계를 소화 가능한 점진적 행동으로 쪼개세요. 상호작용 없는 긴 텍스트 같은 수동적 온보딩은 피하세요.

도움을 찾기 쉽게 만들기 (Make help easy to find)

사용자는 도움을 요청하는 것을 주저하거나, 그것이 필요하다는 걸 모를 수도 있어요. 적시(just-in-time) 도움(툴팁, "Learn more(더 알아보기)" 링크, 교육용 팝오버)을 내장하고, 새롭거나 복잡한 기능에 대한 지원에 쉽게 접근하게 하세요. 포용적이고 비판단적인 언어를 사용하세요. "Stuck?(막혔나요?)"보다 "Need help?(도움이 필요하세요?)"가 더 좋아요.

합리적인 기대 설정하기 (Set reasonable expectations)

환영하거나 사용자가 행동을 취하도록 요구하는 온보딩 UX에서는 무엇을 기대해야 할지 명확히 하세요. 기대가 어긋나면 신뢰가 무너질 수 있으니, 설정한 기대를 반드시 충족하는 것이 중요해요. 사용자에게 무엇이 곧 일어날지, 얼마나 걸릴지 알려주세요. 예를 들어 "This takes 2–3 minutes.(2~3분 걸려요.)" "We'll guide you through 3 quick steps.(3개의 빠른 단계를 안내해 드릴게요.)"

즐거운 것이 아니라면 놀라움을 피하세요.

온보딩