인증 및 온보딩

사용자 온보딩 및 인증은 가장 일반적인 사용자 여정 중 하나이며, 사용자가 가장 많이 포기하고 가장 답답해하는 여정입니다. 온보딩 및 인증은 앱에 대한 사용자의 첫인상이므로 편리하고 신뢰할 수 있는 환경을 제공하여 사용자를 환영하는 것이 중요합니다. 로그인, 사용자 등록 또는 온보딩 둘러보기를 디자인할 때 다음 가이드라인을 참고하여 이상적인 환경을 만드세요.

요약

• 멋진 온보딩 환경을 만드세요.
• 사용자 신뢰, 친숙함, 편의성을 위해 패스키와 같은 사용 가능한 라이브러리를 사용하세요.
• 중요한 사용자 정보만 수집하세요.
• 명확하고 도움이 되는 언어를 사용하세요.
• 기능의 가치와 권한의 이유를 정리하고 설명하세요.

시작하기

1. 수집: 사용자가 설정, 학습, 승인해야 하는 사항을 생각해 보세요.

2. 인앱과 사전: 앱을 사용하는 동안 수행해야 하는 작업과 앱을 사용하기 전에 수행해야 하는 작업을 구분합니다. 사용자가 앱 콘텐츠와 상호작용을 시작하는 데 불편함을 겪지 않도록 하세요. 콘텐츠와 상호작용이 프롬프트로 표시되는 것이 더 나은지 아니면 교육의 순간으로 표시되는 것이 더 나은지 생각해 보세요.

3. 컨텍스트 내 요소의 경우 해당하는 경우 설명과 작업을 제공합니다.

4. 앱을 사용하기 전에 완료해야 하는 중요한 단계와 교육은 논리적 단계로 정리합니다. 일반적으로 기기 권한을 요청하거나 계정을 만들기 전에 앱의 가치를 보여줘야 합니다. 항상 가치 제안 다음에 작업을 따르세요.

5. 앱에 계정이 필요한 경우 인증 방법을 결정합니다. 패스키는 계정 관리에 대한 사용자의 우려와 불편함을 완화할 수 있습니다.

6. 복구 방법을 제공합니다.

7. 사용자의 진행 상황을 보여줍니다. 스테퍼, 페이저 또는 진행률 표시기와 같은 구성요소를 사용할 수 있습니다.

사용자 여정

뛰어난 온보딩은 성취감을 주고 뚜렷한 개성을 지닙니다. 온보딩은 사용자가 앱의 브랜드 및 개념과 상호작용하면서 환경을 설정하고, 권한을 부여하고, 진행 상황을 파악할 수 있도록 명확한 표지판 패턴을 통해 길을 찾는 데 도움이 됩니다.

진입점 배치

환영 배치 는 모든 사용자 교육과 앱 설정을 미리 로드합니다. 이 접근 방식은 앱에서 콘텐츠에 액세스하기 위해 사용자 등록이 필요하거나, 콘텐츠 미리보기가 불가능하거나, 컨텍스트 내 학습이 적합하지 않은 경우에 이상적입니다. 주요 이점은 사용자가 앱 사용 방법을 즉시 파악하고 더 빨리 전체 액세스 권한을 얻을 수 있다는 것입니다. 그러나 앱을 경험하기 전에 사용자를 잃을 위험이 더 크다는 상당한 단점이 있지만, 다음 이미지와 같이 콘텐츠에 대한 초기 인식을 제공하여 이를 완화할 수 있습니다.

상황별 또는 적시 인앱 온보딩을 사용하면 콘텐츠 인식, 등록, 학습에 관해 더 큰 유연성을 제공할 수 있습니다. 필요한 특정 시점에 요청이 이루어지는 권한 프라이밍과 같은 패턴을 사용 설정합니다. 이 방법은 가입을 유도하기 위해 미리보기를 제공하려는 경우 또는 등록 및 교육을 더 작고 기억하기 쉽고 관리하기 쉬운 단계로 나누려는 경우에 가장 적합합니다. 또한 사용자가 작업을 하면서 학습하고 유지할 가능성이 더 커집니다.

등록 / 가입

등록 또는 가입 흐름은 사용자가 앱 계정을 만드는 데 도움이 됩니다. 앱을 사용하기 위해 사용자를 미리 등록해야 하는지 아니면 특정 수준의 콘텐츠와 기능에 액세스할 수 있는지 생각해 보세요.

등록 흐름을 최적화하려면 이메일 및 비밀번호와 같이 필요한 최소한의 정보만 미리 수집하거나 단계를 결합하여 불편함을 줄이세요. 인증을 위한 사용자 이름과 같은 필수 속성만 캡처하면 사용자에게 옵션이 너무 많아 부담을 주지 않을 수 있습니다. 더 긴 프로세스의 경우 여러 화면으로 나누되, 화면당 하나의 입력만으로 과도하게 나누지는 마세요. 비밀번호 요구사항이 명확하고 논리적인지 확인하세요.

로그인

재방문 사용자는 계정에 다시 로그인할 방법이 필요합니다. 로그인은 빠르고 눈에 띄지 않아야 합니다. 앱에 계정 인증만 필요한 경우 싱글 사인온 방법을 통해 등록과 로그인을 결합하는 것이 좋습니다.

효과적인 로그인 여정은 최신 인증 패턴을 구현하여 사용자 편의성을 우선시해야 합니다. 여기에는 생체 인식 프롬프트와 자동 완성 기능을 제공하여 사용자에게 필요한 인지 부하와 수동 입력을 줄이는 것이 포함됩니다.

온보딩 둘러보기 및 맞춤설정

전체 둘러보기를 구현하기 전에 애플리케이션에 둘러보기가 정말로 필요한지 신중하게 평가하세요. 복잡한 기능은 사용자의 초기 흐름을 방해하지 않는 미묘한 동작 큐 또는 컨텍스트 내 툴팁을 통해 더 자연스럽게 도입할 수 있습니다.

기기 권한이 필요한 경우 '권한 프라이밍'을 사용하여 요청된 액세스의 가치를 설명하세요. 이 방법은 앱 환경 시작 시 대량 요청으로 실행하는 것보다 필요한 특정 시점에 실행하는 것이 가장 효과적입니다.

가입을 유도하기 위해 앱 기능을 소개할 때는 일련의 정적 전면 광고 슬라이드보다 실제 콘텐츠 미리보기가 더 설득력이 있는지 생각해 보세요. 둘러보기를 사용하는 경우 항상 건너뛰거나 즉시 로그인할 수 있는 명확하고 지속적인 옵션이 있는지 확인하세요.

진행 상황 캐싱과 같이 건너뛰고 나중에 다시 시작할 수 있는 방법을 제공하세요. 저장 방법을 제공하면 체크포인트가 생성되므로 사용자가 완전히 포기하기보다는 중단한 지점부터 다시 시작할 가능성이 더 큽니다. 항상 진행 상황에 어떤 일이 일어날지 명확하게 전달하여 사용자를 안심시키세요.

스테퍼와 진행률 표시기를 사용하여 시각적 표지판을 제공하면 사용자 기대치를 설정하는 데 도움이 됩니다. 이러한 요소는 남은 단계 수를 명확하게 파악할 수 있도록 하여 온보딩 또는 설정 프로세스가 길어지는 동안 포기율을 줄입니다.

회복

복구 흐름은 사용자 개인 정보 보호에 대한 공감과 존중을 바탕으로 설계해야 합니다. 계정 흐름에서 행복한 경로만 가정하지 마세요. 사용자가 답답함 없이 오류를 수정할 수 있는 명확한 경로가 있는지 확인하세요.

앱에 특정 사용자 이름이 필요한 경우 사용자가 쉽게 기억하거나 재설정할 수 있는 방법을 제공하세요.

이메일 주소와 같은 특정 필드를 미리 채우는 것은 등록 중에 편리할 수 있지만 비밀번호와 같은 민감한 정보는 검색 또는 재설정 프로세스 중에 미리 채워서는 안 됩니다. 항상 민감한 입력을 마스크 처리하여 공공장소에서 사용자 개인 정보 보호를 기본으로 설정하세요.

SSO / 패스키

패스키 및 싱글 사인온 (SSO) 제공업체와 같은 기존 라이브러리와 통합하면 신뢰도가 향상되고 원활하고 친숙한 환경을 제공할 수 있습니다. 이러한 시스템을 사용하면 사용자가 기존 보안 하드웨어와 사용자 인증 정보를 활용하여 앱에 원활하게 진입할 수 있습니다.

레이아웃 및 구성요소

인증 양식을 디자인할 때는 '이름' 및 '성' 필드를 가까운 위치에 배치하는 것과 같이 유사한 항목과 관련 항목을 함께 그룹화하여 포함을 활용하는 것이 중요합니다. 이렇게 하면 리플로우할 수 있는 유연한 레이아웃을 디자인하는 데 도움이 됩니다.

사용자 불만의 주요 원인인 긴 스크롤 양식을 만들지 마세요.

입력란을 포함하기 전에 정보가 정말로 필요한지 신중하게 평가하세요. 사용자가 실수로 긴 양식에서 뒤로 이동하는 경우 사용자가 모든 정보를 다시 입력해야 하면 포기율이 높아질 수 있습니다.

확장 레이아웃

확장 또는 가로 모드 뷰에 맞게 레이아웃을 조정할 때 디자이너는 사용자 인터페이스가 계속 사용 가능하고 미적으로 만족스러워야 합니다. 특히 버튼과 같은 양방향 구성요소를 전체 화면 너비로 늘리지 마세요. 부자연스러워 보이고 사용성이 저하될 수 있습니다.

대신 포함 원칙을 계속 사용하고 양식 요소와 콘텐츠 블록의 최대 적정 너비를 설정하여 더 큰 디스플레이에서 가독성과 시각적 균형을 유지하세요.

사용자 교육 구성요소

사용자에게 새로운 기능과 온보딩을 소개할 때는 여러 구성요소를 사용할 수 있습니다. 리치 툴팁과 대화상자는 기능 검색을 강조하고 앱 내에서 사용자를 교육하는 데 도움이 될 수 있습니다. 시트는 온보딩 및 교육 콘텐츠를 제공하는 전면 광고 상태를 제공할 수 있습니다.

기타 폼 팩터

온보딩에는 교차 폼 팩터 및 확장 앱 사용을 위한 기기 핸드오프가 포함될 수 있습니다.

모바일 앱 환경은 인증을 관리하는 데 더 인체공학적으로 편리한 방법을 제공할 수 있으므로 온보딩은 다른 폼 팩터에서 제공될 수 있습니다. 예를 들어 사용자는 Google TV 앱에서 시작된 모바일 기기에서 로그인을 완료할 수 있습니다.

앱에 AI 안경 또는 Wear OS와 같은 다른 폼 팩터의 확장 활동이 있는 경우 검색 프롬프트와 사용자 교육을 제공하여 사용자를 온보딩하세요. AI 글라스 온보딩 환경 디자인에 관해 자세히 알아보세요.

UX 작성

스낵바 및 토스트와 같은 비간섭적 피드백 메커니즘을 사용하여 사용자 작업을 확인하거나 간단한 상태 업데이트를 제공하세요. 이렇게 하면 사용자가 사소한 피드백을 위해 모달 대화상자를 닫을 필요 없이 시스템 상태에 관해 정보를 얻을 수 있습니다.

어조

오류 발생 시 작성의 어조가 중요합니다. 사용자를 조롱하거나 답답하게 만드는 언어를 사용하지 마세요. 특히 비밀번호 복구와 같은 스트레스가 높은 순간에는 실수보다는 해결책에 중점을 둔 명확하고 도움이 되며 격려하는 문구를 사용하세요.

리소스

Android 온보딩 Figma 키트에서 온보딩 템플릿, 사용자 흐름, 사용자 교육 애셋을 찾아보세요.