사용자 경험 디자인
온보딩 경험은 앱의 가장 중요한 사용자 경험 중 하나입니다. 우수한 품질의 온보딩 경험을 제공하면 전환율이 90%가 넘게 되고 사용자의 참여와 구매를 더 많이 유도하여 수익을 높일 수 있습니다.
Facebook 로그인을 사용하면 사용자가 빠르고 쉽게 앱을 사용할 수 있고 더욱 개인화된 의미 있는 경험을 즐길 수 있습니다. 이 문서에서는 Facebook 로그인으로 멋진 로그인 사용자 경험을 만들기 위한 도움말과 고려 사항을 제공합니다.
1. 로그인을 유도하는 메시지를 표시하기 전에 가치 표시
사용자 경험 관점에서 로그인 표시 시점을 결정할 때 서비스에서 사용자가 자신의 정보를 기꺼이 제공할 만한 충분한 신뢰를 주고 있는지에 대해 자문해보세요.
앱을 다운로드하기도 전에 사용자가 경험하는 내용이 앱 다운로드에 영향을 주는 경우도 있지만 앱의 디자인을 통해 더 많은 영향을 미칠 수 있습니다.
더 많은 사용자의 로그인을 유도하도록 디자인하는 방법은 다음과 같이 몇 가지가 있습니다.
- 앱에서 제공하는 내용을 명확하고 간결하게 설명
- 로그인한 후 확인하게 되는 일부 콘텐츠 미리 표시
- 새로운 사용자 경험 제공
- 계정이 없어도 앱을 사용해볼 수 있도록 허용
앱에서 제공하는 내용을 명확하고 간결하게 설명
앱에서 제공하는 내용을 명확하고 간결하고 설득력 있게 설명하세요. 앱을 다운로드하거나 App Store에서 앱에 대한 설명을 읽은 후 시간이 꽤 지났을 수 있습니다.
로그인한 후 확인하게 되는 일부 콘텐츠 미리 표시
이 예의 배경 사진과 같이 로그인하기 전에 사용할 수 있는 일부 콘텐츠를 미리 표시합니다. 자세하게 설명하지 않아도 되며, Pinterest Pinboard의 흐릿한 이미지만 제공해도 더 많은 사용자를 Pinterest에 로그인하도록 유도하는 데 도움이 될 수 있습니다.
새로운 사용자 경험 제공
최상의 경험을 제공하기 위해 앱에 추가적인 안내가 필요한 경우 로그인 버튼 위에 여러 단계 데모를 포함할 수 있습니다. 그러면 사용자가 자세히 알아보거나 준비가 된 경우 즉시 로그인할 수 있습니다.
로그인하기 전에 앱을 경험해볼 수 있도록 허용
가능한 경우 로그인 메시지가 표시되기 전에 앱을 경험해볼 수 있도록 허용하세요. 예를 들어 Zulily와 같은 많은 전자상거래 앱에서는 결제 단계 전까지는 로그인을 요구하지 않습니다.
2. 불필요한 단계 사용 자제
전환율을 높이는 데 가장 효율적인 방법 중 하나는 불필요한 단계를 줄이는 것입니다.
Facebook 로그인 버튼을 표시하기 위해 먼저 사용자에게 '로그인' 또는 '등록'을 누르도록 요청하지 마세요. Facebook 로그인을 사용하면 이 단계는 불필요합니다. 사용자가 계정을 보유하고 있는지 생각해 볼 필요도 없습니다.
또한 Facebook으로 로그인한 후 사용자 이름이나 비밀번호를 만들라고 요청하는 메시지를 표시하지 마세요. 사용자가 Facebook으로 로그인하는 가장 일반적인 이유 중 하나는 '빠르고 쉬우며 비밀번호를 입력하지 않아도 되기' 때문입니다. 사용자가 Facebook으로 로그인한 후라면 더욱이 사용자 이름이나 비밀번호를 만들고 싶어 하지 않습니다.
3. Facebook 로그인 버튼
SDK에 포함된 Facebook 로그인 버튼은 통합이 쉽고 일관된 디자인과 경험을 보장하는 기본 교육을 함께 제공합니다.
Facebook 계정을 생성하거나 Facebook 로그인을 사용하려면 상황에 따라 'Facebook으로 계속하기' 또는 'Facebook으로 로그인'이라는 레이블을 사용하는 것이 좋습니다.
'Facebook으로 로그인'의 승인된 사용 방법
'Facebook으로 계속하기'의 승인된 사용 방법
'[이름]으로 계속하기'의 승인된 사용 방법
위의 로그인 디자인을 사용하는 것이 좋으며 Facebook 검수자의 승인을 받게 됩니다. 그러나 필요에 맞는 버전을 빌드해야 할 경우에는 아래의 가이드라인을 따르세요.
로고
인지도와 신뢰를 쌓기 위해서는 항상 Facebook 브랜드 리소스 센터에서 제공하는 승인된 'f' 로고를 사용하세요.
로그인 버튼 디자인에 'f' 로고를 사용할 때는 행동 유도 앞에 표시해야 합니다. 행동 유도에 'f' 로고를 함께 사용하지 마세요(예: 'f' 로고로 로그인).
색상
색상은 사물을 빠르게 인식할 수 있는 가장 좋은 방법입니다. 사용 편이성 측면에서 사용자가 버튼 자체와 버튼이 수행하는 내용을 더 빨리 인식할수록 버튼을 더 빨리 누르고자 하고 더 원활한 경험을 할 수 있습니다.
버튼 색상은 흰색과 Facebook 파란색(5890FF)입니다. 전 세계 사람들이 Facebook 로그인에 대해 이야기할 때 보통 Facebook 로그인을 '파란색 버튼'이라고 말합니다. Facebook 파란색을 사용할 수 없다면 흑백으로 되돌리세요.
FACEBOOK 파란색 색상 값
- CMYK 코팅: 83 / 52 / 00 / 00
- CMYK 비코팅: 77 / 36 / 00 / 00
- PMS 2727C
- PMS 2382U
- Hex #1877F2
- R = 24 G = 119 B = 242
텍스트
상황에 따라 'Facebook으로 계속하기' 또는 'Facebook으로 로그인'이라는 레이블을 사용하는 것이 좋습니다. 'f' 로고를 행동 유도와 사용할 때는 Facebook의 Facebook 브랜드 리소스 센터에서 다운로드할 수 있는 공식 버전을 사용하세요.
로그인 버튼에 행동 유도 카피 문구를 넣되, 버튼 밖으로 나가지 않도록 합니다.
앱에 가장 잘 어울리는 글꼴, 글꼴 굵기 및 커닝을 선택하고 읽기 쉽게 최적화합니다.
노출 위치
로그인 버튼은 최대한 빠르고 쉽게 알아보고 누를 수 있어야 합니다. 즉, 모바일 기기에서는 버튼을 쉽게 누를 수 있도록 엄지손가락에 가깝고 커야 합니다. 큰 버튼은 작은 버튼에 비해 전환율이 높다는 점은 단순하게 들리지만 사실입니다.
버튼 크기를 조정할 수 있도록 다양한 크기의 'f' 로고가 제공되지만, 비율과 타이포그래피 스타일은 일관되게 유지해야 합니다.
권장 사항과 금지 사항
권장 Facebook의 Facebook 브랜드 리소스 센터에서 제공하는 승인된 'f' 로고를 사용하고 사용 가이드라인을 따르세요.
권장 상황에 따라 로그인 버튼에 'Facebook으로 계속하기' 또는 'Facebook으로 로그인'이라는 레이블을 사용하는 것이 좋습니다. 또한 버튼 디자인 안에 카피 문구를 넣으세요.
금지 'f' 로고는 디자인, 크기, 색상 또는 기타 맞춤 변형에 대한 변경 등을 포함하여 어떤 식으로든 수정하지 마세요. 기술적 제한으로 인해 정확한 색을 사용할 수 없다면 흑백을 사용하세요.
금지 적절한 행동 유도(예: 'Facebook으로 계속하기' 또는 'Facebook으로 로그인') 없이 버튼에 'f' 로고를 사용하지 마세요.
금지 행동 유도 카피 문구(예: Facebook으로 계속하기)가 로그인 버튼 밖으로 나가지 않도록 하세요.
4. 권한
필요한 권한만 요청
요청하는 권한이 적을수록 사람들이 권한을 허용하는 것에 부담을 갖지 않습니다. 일반적으로 적은 수의 권한을 요청하면 전환율이 향상됩니다.
사용자가 앱을 먼저 사용해보도록 한 후 나중에 언제든지 추가 권한을 요청할 수 있습니다.
또한 보다 적은 수의 권한을 요청하면 로그인 검수를 위해 앱을 등록하지 않아도 되는 이점이 있습니다. public_profile 및 email 이외의 권한을 요청하는 경우에만 로그인 검수를 위해 등록해야 합니다.
상황에 맞는 권한 요청 및 이유 설명
사용자가 더 나은 경험을 제공하기 위해 앱에 해당 정보가 필요한 이유를 이해하면 권한 요청을 승인할 가능성이 가장 큽니다. 그러므로 앱에서 특정 권한이 필요한 행동을 수행하려는 경우 권한 요청을 트리거하세요.
예를 들어 Facebook에서는 사용자가 상태를 업데이트할 때 위치 버튼을 명시적으로 누르는 경우에만 위치 서비스를 요청합니다.
5. 로그아웃 방법 제공
사용자가 로그인한 후에는 로그아웃하거나, 계정의 연결을 해제하거나, 계정을 모두 삭제하는 방법도 제공해야 합니다. 이는 고객 서비스 차원의 방침이기도 하지만 로그인 개발자 정책의 요구 사항이기도 합니다.
예를 들어 데이트 앱인 Tinder에서는 다른 사람이 앱에서 사용자를 검색하거나, 로그아웃하거나, 사용자의 계정을 완전히 삭제하지 못하도록 프로필 카드를 숨기는 옵션을 제공합니다.
6. 테스트 및 측정
최고의 디자이너조차도 한 번에 온보딩 플로를 제대로 만들 수 없습니다. 일반적으로 우수한 온보딩 경험은 심사숙고한 디자인과 테스트를 여러 번 반복한 결과로 얻을 수 있습니다.
앱을 출시하기 전에, 사용자가 표시 내용에 대해 어떻게 반응하는지 파악하기 위해 정성적 사용성 테스트를 진행합니다. 공식적인 테스트가 아니어도 되지만 사용자가 경험하는 과정을 확인하도록 하세요.
정성적 테스트 이외에도 분석을 통해 사용자가 절차를 완료하고 있는지와 전체 전환율이 어떻게 변경되는지를 파악합니다. 모범 사례 앱은 90%가 넘는 전환율을 기록할 수 있습니다.