権限の UX

PushSubscription を取得してサーバーに保存した後の自然なステップは、push メッセージをトリガーすることです。しかし、1 点注意しておきたいことがあります。push メッセージの送信許可をユーザーに求めたときのユーザー エクスペリエンス。

残念ながら、ユーザーに権限を求める方法をよく検討しているサイトはほとんどありません。そこで、UX の良し悪しを少しだけ確認しておきましょう。

一般的なパターン

ユーザーとユースケースに最適な方法を決定する際の指針となり、役立つ一般的なパターンがいくつか登場しています。

価値提案

メリットが明白なタイミングで、プッシュ通知の購読をすすめます。

たとえば、ユーザーがオンライン ショップで商品を購入し、購入手続きを完了したとします。サイトは配送状況に関する最新情報を提供できます。

このアプローチが効果を発揮する状況はさまざまです。

  • 特定の商品が在庫切れの場合に、次の入荷時に通知を受け取りますか?
  • このニュース速報は定期的に更新されます。進展がありましたら通知を受け取りますか?
  • お客様は最高額入札者です。競り負けた場合に通知を受け取りますか?

これらはすべて、ユーザーがサービスに投資したポイントで、プッシュ通知を有効にするための明確な価値提案があります。

Owen Campbell-Moore の事例: プッシュ型で優れた UX を実現。

このアプローチを実演するために 架空の航空会社のウェブサイトのモックアップを

フライトを予約した後、フライト遅延に関する通知を希望するかどうかをユーザーに確認します。

これはウェブサイトのカスタム UI です。

権限プロンプトの優れた UX の例として Owen Campbell-Moore が挙げています。

Owen のデモのもう 1 つの優れた点は、ユーザーが通知を有効にするためにクリックすると、ページ全体に権限プロンプトが表示される半透明のオーバーレイが追加されることです。これにより、権限プロンプトに注意が向くようになります。

この例の代わりとなる、許可を求める不適切な UX は、ユーザーが航空会社のサイトにアクセスしたらすぐに許可を求めることです。

Owen Campbell-Moore の事例: プッシュ型のユーザー エクスペリエンスが不適切

このアプローチでは、なぜ通知が必要なのか、あるいはユーザーにとって有用なのかについて、コンテキストが提供されません。また、この権限プロンプトによって、ユーザーは元のタスク(フライトの予約など)を行うことができなくなります。

二重権限

サイトには明確なプッシュ メッセージングのユースケースがあるので、できるだけ早くユーザーに許可を求める必要があります。

たとえば、インスタント メッセージやメール クライアントなどです。新しいメッセージまたはメールのメッセージを表示する機能は、さまざまなプラットフォームで確立されたユーザー エクスペリエンスです。

このようなカテゴリのアプリについては、二重権限のパターンを検討することをおすすめします。

まず、ウェブサイトが制御する偽の権限プロンプトを表示します。これは権限リクエストを許可または無視するためのボタンで構成されています。ユーザーが [許可] をクリックすると権限をリクエストし、実際のブラウザ権限プロンプトがトリガーされます。

この方法では、ユーザーに通知を有効にするように求めるカスタム権限プロンプトをウェブアプリに表示します。これにより、ウェブサイトが恒久的にブロックされるリスクを負うことなく、ユーザーが有効または無効にできます。ユーザーがカスタム UI で有効にすることを選択した場合は、実際の権限プロンプトを表示します。それ以外の場合は、カスタム ポップアップを非表示にして、別の機会に確認します。

その良い例が です。ユーザーがログインすると、通知を有効にするかどうかを尋ねるメッセージがページの上部に表示されます。

設定パネル

通知を設定パネルに移動することで、ウェブアプリの UI を乱雑にすることなく、簡単にプッシュ メッセージを有効または無効にできます。

最初にページを読み込むとき、プロンプトは表示されません。

その良い例が です。 Google I/O サイトを初めて読み込むときは、何も求められません。ユーザーはサイトを探索できます。

Google IO のプッシュ メッセージング用ウェブアプリの設定パネル。

数回アクセスした後、右側のメニュー項目をクリックすると設定パネルが表示され、ユーザーは通知の設定と管理を行うことができます。

権限プロンプトを表示している Google IO のウェブアプリ。

チェックボックスをオンにすると、権限のプロンプトが表示されます。隠れたサプライズはありません。

権限が付与されると、チェックボックスがオンになり、ユーザーは使用できるようになります。この UI の優れた点は、ユーザーがウェブサイト上の 1 つの場所からの通知を有効または無効にできることです。

受動的アプローチ

ユーザーにプッシュ機能を提供する最も簡単な方法の一つは、ページ上でサイト全体で一貫する位置に、プッシュ メッセージの有効 / 無効を切り替えるボタンや切り替えスイッチを配置することです。

ユーザーにプッシュ通知を有効にするように促すものではありませんが、ウェブサイトの利用を簡単かつ確実にオプトイン / オプトアウトできます。定期的に閲覧者がいて、直帰率も高いブログのようなサイトでは、ドライブバイ 訪問者を煩わせることなく、通常の閲覧者をターゲットにしているため、このオプションは確実なオプションです。

個人サイトのフッターに、プッシュ メッセージの切り替えスイッチがあります。

フッター内にある Gauntface.com のプッシュ通知の切り替えの例

あまり手間がかかりませんが、定期的に訪れる読者は最新情報を入手したいという十分な注意を払う必要があります。1 回だけの訪問者はまったく影響を受けません。

ユーザーがプッシュ メッセージに登録している場合は、切り替えスイッチの状態が変化し、サイト全体で状態が維持されます。

通知を有効にした Gauntface.com の例

不適切な UX

以上が、私がウェブでよく目にする日常の一例です。残念ながら よくある悪い手法が 1 つあります

最悪の方法は、ユーザーがサイトにアクセスしたらすぐに権限ダイアログを表示することです。

権限が必要な理由をまったく理解できず、ウェブサイトの目的や機能、その機能さえも知らない可能性があります。この時点で権限をブロックすることは珍しくありませんが、このポップアップはユーザーの操作の妨げになります。

ユーザーが権限リクエストをブロックした場合、ウェブアプリから再度権限をリクエストすることはできません。ブロックされた後に権限を取得するには、ユーザーはブラウザの UI で権限を変更する必要があります。この変更は、ユーザーにとって簡単で、わかりやすく、面白くありません。

いずれにせよ、ユーザーがサイトを開いたらすぐに許可を求めず、ユーザーに権限を付与するよう動機付けを行う他の UI やアプローチを検討してください。

方法を提示する

ユーザーを登録してプッシュする UX を検討するだけでなく、ユーザーがプッシュ メッセージの登録解除やオプトアウトをどのように行うかについても検討してください

ページの読み込み後すぐに権限をリクエストし、プッシュ通知を無効にする UI を表示しないサイトの数は驚異的です。

サイトでは、プッシュを無効にする方法をユーザーに説明する必要があります。そうしないと、ユーザーが核となるオプションを選択して権限を恒久的にブロックする可能性が高くなります。

次のステップ

Codelab