권한 UX

PushSubscription를 가져오고 서버를 저장한 후의 자연스러운 단계는 푸시 메시지를 트리거하는 것이지만 한 가지 간과한 것이 있습니다. 사용자에게 푸시 메시지를 보낼 권한을 요청하는 경우의 사용자 환경입니다.

안타깝게도 사용자에게 권한을 요청하는 방법을 신중하게 고려하는 사이트는 극소수에 불과하므로 잠시 시간을 내어 좋은 UX와 나쁜 UX를 모두 살펴보겠습니다.

사용자와 사용 사례에 가장 적합한 패턴을 결정할 때 가이드와 도움이 되는 몇 가지 일반적인 패턴이 새로 등장했습니다.

혜택이 명백할 때 사용자에게 푸시를 구독하도록 요청합니다.

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

이 방법은 다음과 같이 다양한 상황에서 활용할 수 있습니다.

  • 특정 상품의 재고가 없습니다. 다음 상품이 입고되면 알림을 받으시겠어요?
  • 속보는 정기적으로 업데이트됩니다. 뉴스가 전개되면 알림을 받으시겠습니까?
  • 귀하가 가장 높은 입찰가를 제시한 바 있습니다. 더 높은 입찰가가 제시되면 알림을 받으시겠습니까?

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

좋은 푸시 UX의 예인 오웬 캠벨-무어

가상의 항공사 웹사이트를 만들어 이 방법을 보여드렸습니다

사용자가 항공편을 예약한 후 항공편 지연 알림을 원하는지 묻습니다.

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

권한 프롬프트의 좋은 UX에 관한 오웬 캠벨-무어의 예

Owen의 데모를 잘 살펴보자면, 사용자가 알림을 사용 설정하기 위해 클릭하면 권한 메시지가 표시될 때 사이트에서 전체 페이지에 반투명 오버레이를 추가할 수 있습니다. 이렇게 하면 권한 메시지에 사용자가 관심을 갖게 됩니다.

이 예의 대안은 권한을 요청하는 잘못된 UX로, 사용자가 항공사 사이트에 도착하자마자 권한을 요청하는 것입니다.

오웬 캠벨-무어의 잘못된 푸시 UX 사례입니다.

이 접근 방식은 알림이 사용자에게 필요하거나 유용한 이유에 관한 컨텍스트를 제공하지 않습니다. 또한 사용자는 이 권한 메시지에 의해 원래 작업 (예: 항공편 예약)을 할 수 없습니다.

이중 권한

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

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

이러한 앱 카테고리의 경우 이중 권한 패턴을 고려하는 것이 좋습니다.

먼저 웹사이트에서 제어하는 가짜 권한 메시지를 표시합니다. 권한 요청을 허용하거나 무시하는 버튼으로 구성됩니다. 사용자가 허용을 클릭하면 권한을 요청하고 실제 브라우저 권한 메시지가 트리거됩니다.

이 접근 방식을 사용하면 사용자에게 알림을 사용 설정하도록 요청하는 맞춤 권한 메시지를 웹 앱에 표시합니다. 이렇게 하면 사용자는 웹사이트가 영구적으로 차단될 위험을 감수하지 않고도 사용 설정 또는 사용 중지를 선택할 수 있습니다. 사용자가 맞춤 UI에서 사용 설정을 선택하면 실제 권한 메시지를 표시합니다. 그렇지 않으면 맞춤 팝업을 숨기고 다시 요청합니다.

이에 대한 좋은 예는 입니다 . 로그인하면 알림을 사용 설정할지 묻는 메시지가 페이지 상단에 표시됩니다.

설정 패널

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

페이지를 처음 로드할 때는 메시지가 표시되지 않습니다.

이에 대한 좋은 예는 입니다 . Google I/O 사이트를 처음 로드할 때는 어떤 작업도 요청하지 않고 사용자는 사이트를 탐색해야 합니다.

푸시 메시징을 위한 Google IO 웹 앱의 설정 패널입니다.

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

권한 메시지를 표시하는 Google IO의 웹 앱

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

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

수동적 접근 방식

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

이렇게 하면 사용자가 푸시 알림을 사용 설정하도록 유도하지는 않지만, 사용자가 웹사이트 참여를 선택 및 해제할 수 있는 안정적이고 쉬운 방법을 제공합니다. 블로그 같은 사이트의 경우 정기적인 시청자가 많고 이탈률도 높을 수 있는 경우 드라이브 바이 방문객을 성가시게 하지 않고 일반 시청자를 타겟팅하므로 매우 효과적인 옵션입니다.

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

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

이는 상당한 방향이긴 하지만 일반 방문자의 경우 업데이트를 받고자 하는 독자의 관심을 충분히 받아야 합니다. 일회성 방문자는 전혀 영향을 받지 않습니다.

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

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

나쁜 UX

여기까지가 제가 웹에서 알아본 일반적인 관행들입니다. 안타깝게도, 매우 흔한 잘못된 관행이 있습니다.

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

권한을 요청하는 이유에 대한 배경 정보가 없고, 웹사이트가 무엇을 위한 것인지, 무엇을 제공하는지, 무엇을 제공하는지도 모를 수 있습니다. 불편함으로 이 시점에서 권한을 차단하는 것은 드문 일이 아니며, 이 팝업이 권한을 방해합니다.

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

어떤 경우든 사용자가 사이트를 열자마자 권한을 요청하지 마세요. 사용자가 권한을 부여할 만한 다른 UI나 접근 방식을 고려해 보세요.

탈출구 제시

사용자의 푸시 구독을 위한 UX를 고려하는 것 외에도 사용자가 푸시 메시지를 수신 거부하거나 거부하는 방법을 고려하세요.

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

사이트에서 푸시를 사용 중지하는 방법을 사용자에게 설명해야 합니다. 그러지 않으면 사용자가 핵 옵션을 선택하고 권한을 영구적으로 차단할 수 있습니다.

다음에 수행할 작업

Codelab