권한 UX

PushSubscription를 가져와 서버에 저장한 후의 자연스러운 단계는 푸시 메시지를 트리거하는 것이지만, 제가 노골적으로 얼버무린 것이 하나 있습니다. 사용자에게 푸시 메시지를 보내기 위한 권한을 요청할 때의 사용자 환경입니다.

안타깝게도, 사용자에게 권한을 요청하는 방법에 대해 많이 고려하는 사이트는 거의 없으므로, 잠시 시간을 내어 좋은 UX와 나쁜 UX를 모두 살펴보겠습니다.

일반적인 패턴

사용자와 사용 사례에 가장 적합한 것을 결정할 때 참고하고 도움이 될 만한 몇 가지 일반적인 패턴이 있습니다.

가치 제안

혜택이 명확한 시점에 사용자에게 푸시 알림을 구독하도록 요청합니다.

예를 들어 사용자가 온라인 상점에서 상품을 구매하고 결제 절차를 완료했습니다. 그러면 사이트에서 배송 상태에 관한 업데이트를 제공할 수 있습니다.

이 접근 방식은 다음과 같은 다양한 상황에서 효과적입니다.

  • 특정 상품의 재고가 없습니다. 다음번에 구매 가능할 때 알림을 받으시겠어요?
  • 이 속보는 정기적으로 업데이트될 예정입니다. 소식이 업데이트될 때 알림을 받으시겠어요?
  • 최고가 입찰자입니다. 다른 사용자가 더 높은 금액을 입찰하면 알림을 받으시겠습니까?

이러한 지점은 모두 사용자가 서비스에 투자한 지점이며, 푸시 알림을 사용 설정할 수 있는 명확한 가치 제안이 있습니다.

오웬 캠벨 무어의 푸시를 위한 좋은 UX의 예.

오웬은 이 접근 방식을 보여주기 위해 가상의 항공사 웹사이트 모형을 만들었습니다.

사용자가 항공편을 예약하면 항공편 지연 알림을 받을지 묻습니다.

이는 웹사이트의 맞춤 UI입니다.

오웬 캠벨 무어의 권한 메시지 관련 우수 UX 사례

Owen의 데모에서 또 다른 좋은 점은 사용자가 알림을 사용 설정하기 위해 클릭하면 사이트에서 권한 프롬프트를 표시할 때 전체 페이지에 반투명 오버레이를 추가한다는 것입니다. 이렇게 하면 사용자의 주의를 권한 메시지로 유도할 수 있습니다.

이 예의 대안인 권한 요청을 위한 잘못된 UX는 사용자가 항공사 사이트에 방문하자마자 권한을 요청하는 것입니다.

오웬 캠벨 무어의 푸시 알림에 대한 잘못된 UX 예시

이 접근 방식은 알림이 필요한 이유나 사용자에게 유용한 이유에 관한 맥락을 제공하지 않습니다. 또한 이 권한 메시지로 인해 사용자가 원래 작업 (예: 항공편 예약)을 완료할 수 없습니다.

이중 권한

사이트에 푸시 메시징의 명확한 사용 사례가 있다고 생각하여 가능한 한 빨리 사용자에게 권한을 요청하고 싶을 수 있습니다.

예를 들어 채팅 및 이메일 클라이언트가 있습니다. 새 메시지 또는 이메일에 대한 메시지를 표시하는 것은 다양한 플랫폼에서 확립된 사용자 환경입니다.

이러한 카테고리의 앱에서는 이중 권한 패턴을 고려해 볼 가치가 있습니다.

먼저 웹사이트에서 제어하는 대화상자를 표시하여 사이트 사용 사례의 가치를 설명합니다. 그러면 대화상자에서 필요한 권한 요청을 트리거하거나 포기하는 버튼을 제공할 수 있습니다. 사용자가 긍정적인 신호를 보내면 권한을 요청하여 실제 브라우저 권한 메시지를 트리거합니다.

이 접근 방식에서는 먼저 컨텍스트를 제공하는 웹 앱에 맞춤 프롬프트를 표시합니다. 이렇게 하면 사용자가 예상치 못한 권한 메시지로 인해 짜증을 내어 웹사이트가 영구적으로 차단될 위험 없이 사용자가 사용 설정 또는 중지를 선택할 수 있습니다. 사용자가 맞춤 UI에서 사용 설정을 선택하면 실제 권한 메시지를 표시하고, 그렇지 않으면 맞춤 대화상자를 숨기고 사용자의 선택을 따릅니다.

권한 권장사항 및 Google Meet에서 권한 흐름을 개선한 방법에 관해 자세히 알아보세요.

설정 패널

알림을 설정 패널로 이동하여 웹 앱의 UI를 복잡하게 만들지 않고도 사용자가 푸시 메시지를 쉽게 사용 설정하거나 중지할 수 있습니다.

페이지를 처음 로드하면 프롬프트가 표시되지 않습니다.

이에 대한 좋은 예는 Google I/O 사이트입니다. Google I/O 사이트를 처음 로드하면 아무것도 요청하지 않고 사용자가 사이트를 탐색하도록 합니다.

푸시 메시지를 위한 Google IO 웹 앱의 설정 패널

몇 번 방문한 후 오른쪽의 메뉴 항목을 클릭하면 사용자가 알림을 설정하고 관리할 수 있는 설정 패널이 표시됩니다.

권한 메시지를 표시하는 Google I/O의 웹 앱

체크박스를 클릭하면 권한 메시지가 표시됩니다. 숨겨진 추가 비용이 없습니다.

권한이 부여되면 체크박스가 선택되고 사용자는 계속 진행할 수 있습니다. 이 UI의 장점은 사용자가 웹사이트의 한 위치에서 알림을 사용 설정하거나 중지할 수 있다는 것입니다.

수동적 접근 방식

사용자에게 푸시를 제공하는 가장 쉬운 방법 중 하나는 사이트 전체에서 일관된 페이지 위치에 푸시 메시지를 사용 설정/사용 중지하는 버튼 또는 전환 스위치를 두는 것입니다.

이 방법은 사용자가 푸시 알림을 사용 설정하도록 유도하지는 않지만, 사용자가 웹사이트 참여를 선택하거나 선택 해제할 수 있는 안정적이고 쉬운 방법을 제공합니다. 이탈률이 높으면서 정기적으로 방문하는 시청자가 있는 블로그와 같은 사이트의 경우, 이 옵션은 정기적으로 방문하는 시청자를 타겟팅하면서도 일회성 방문자를 방해하지 않으므로 좋은 선택입니다.

제 개인 사이트에는 바닥글에 푸시 메시지 전환 스위치가 있습니다.

바닥글의 Gauntface.com 푸시 알림 전환 버튼 예시

눈에 잘 띄지 않지만 정기적으로 방문하는 독자라면 업데이트를 받기 위해 충분히 관심을 가질 것입니다. 일회성 방문자는 전혀 영향을 받지 않습니다.

사용자가 푸시 메시지를 구독하면 전환 스위치의 상태가 변경되고 사이트 전체에서 상태가 유지됩니다.

알림이 사용 설정된 Gauntface.com의 예

좋지 않은 UX

이러한 것들이 웹에서 흔히 볼 수 있는 관행입니다. 안타깝게도 매우 흔한 잘못된 관행이 있습니다.

사용자가 사이트에 방문하자마자 권한 대화상자를 표시하는 것은 최악의 방법입니다.

사용자는 권한을 요청받는 이유에 대한 맥락이 전혀 없으며, 웹사이트의 목적, 기능, 제공하는 서비스에 대해 알지 못할 수도 있습니다. 이 시점에서 짜증이 나서 권한을 차단하는 것은 흔한 일입니다. 이 팝업은 사용자가 하려는 작업을 방해합니다.

사용자가 권한 요청을 차단하면 웹 앱에서 권한을 다시 요청할 수 없습니다. 차단된 후 권한을 얻으려면 사용자가 브라우저 UI에서 권한을 변경해야 하는데, 이는 사용자에게 쉽지 않고 명확하지 않으며 재미도 없습니다.

어떤 경우에도 사용자가 사이트를 열자마자 권한을 요청하지 말고, 사용자가 권한을 부여할 인센티브가 있는 다른 UI나 접근 방식을 고려하세요.

해결책 제시

사용자가 푸시를 구독하도록 하는 UX를 고려하는 것 외에도 사용자가 푸시 메시지를 수신 거부하거나 선택 해제하는 방법을 고려하세요.

페이지가 로드되는 즉시 권한을 요청한 다음 푸시 알림을 사용 중지하는 UI를 제공하지 않는 사이트의 수는 놀라울 정도입니다.

사이트에서 사용자에게 푸시를 사용 중지하는 방법을 설명해야 합니다. 그렇지 않으면 사용자가 극단적인 선택을 하여 권한을 영구적으로 차단할 가능성이 높습니다.

다음에 수행할 작업

코드 실습