Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

パーミッションの UX

PushSubscriptionを取得してサーバーに保存した後の自然なステップはプッシュメッセージをトリガーすることですが、ひとつだけ私があえてごまかした部分があります。ユーザーにプッシュメッセージを送信するパーミッションを求めるときのユーザーエクスペリエンスです。

残念ながら、ほとんどのサイトは、ユーザーにパーミッションを求める方法を十分に考慮していません。ここではちょっと寄り道して、良い UX と悪い UX の両方を見てみましょう。

共通のパターン

ユーザーとユースケースに最適なものを決定する際に参考になる共通のパターンがいくつか出てきました。

価値をどこに置くか

メリットが明白なときは、ユーザーにプッシュを購読するよう一度に依頼してください。

たとえば、ユーザーがオンラインストアでアイテムを購入しチェックアウトフローを完了したばかりの場合です。このサイトは、最新の配送状況を提供することができます。

このアプローチが有効な状況はいくつかあります:

  • 特定の商品が在庫切れの場合、入荷されたら通知を受け取りたいですか?
  • このニュース速報は定期的に更新されます。何か変化があった時に通知を受け取りたいですか?
  • あなたは最高入札者です。他の人がより高値を付けた時に通知を受け取りたいですか?

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

Owen Campbell-Moore は、このアプローチを実証するために、架空の航空会社のウェブサイトのモックを作成しました。

ユーザーがフライトを予約した後、フライトの遅延通知を希望するかどうかを尋ねます。

Owen Campbell-Moore's example of good UX for push.

これはウェブサイトのカスタム UI であることに注意して下さい。

Owen のデモのもう一つの良い点は、ユーザーが通知を有効にするためにクリックした際、パーミッションのプロンプトが表示されると同時に、ページ全体に半透明のオーバーレイが追加されることです。これにより、ユーザーの注意がパーミッションのプロンプトに向けられます。

Owen Campbell-Moore's example of good UX for the permission prompt.

逆にパーミッションを求める悪い UX の例は、ユーザーが航空会社のサイトに辿り着いてすぐにそれを求めるものです。

Owen Campbell-Moore's example of bad UX for push.

このアプローチは、なぜ通知がユーザにとって必要で、有用であるかについて何の説明も提供しません。また、それが原因で元々達成しようとしていた目的(例えばフライトの予約)を邪魔してしまいます。

二重のパーミッション

あなたのサイトはプッシュ通知の明確なユースケースを持っているため、できるだけ早くユーザーのパーミッションを得たいと思うかもしれません。

例えばインスタントメッセージサービスや電子メールクライアントなどです。新しいメッセージや電子メールのメッセージを表示することは、さまざまなプラットフォームにおいて確立された共通のユーザーエクスペリエンスです。

これらのカテゴリのアプリでは、二重パーミッションパターンを検討する価値があるかもしれません。

最初に、あなたのウェブサイトが制御する偽のパーミッションプロンプトを表示します。これはパーミッションの要求を許可または無視するボタンで構成します。ユーザーが許可をクリックしてはじめて、実際のブラウザーネイティブのパーミッションプロンプトを表示します。

この方法ではまず、Web アプリケーション上でカスタムのパーミッションプロンプトを表示し、通知を有効にするよう求めます。こうすることで、Web サイトは永久にパーミッションをブロックされるリスクなしに、ユーザーに有効または無効を選択してもらうことができます。ユーザーがカスタム UI で有効を選択した場合のみ、実際のパーミッションプロンプトを表示し、そうでなければカスタムポップアップを非表示にして、別の機会に尋ねることができます。

これの良い例は Slack です。Slack ではユーザーがログインした後、通知を有効にするかどうかのプロンプ​​トをページの上部に表示します。

設定画面

設定画面に通知の項目を用意することで、Web アプリケーションの UI を煩雑にすることなく、ユーザーにプッシュ通知の有効または無効を変更する方法を提供することができます。

Google I / O の 2016 サイトが良い例です。最初に Google I / O サイトを読み込んだ時点では、特に何も求められません。ユーザーは自由にサイトを閲覧することができます。

When you first load the page, no prompt, just calm on Google IO.

右側のメニュー項目をクリックすると、ユーザーが通知を設定および管理できる設定パネルが表示されます。

Settings panel on Google IO's web app for push messaging.

チェックボックスをクリックすると、パーミッションプロンプトが表示されます。特に驚きはありませんね。

Google IO's web app displaying the permission prompt.

パーミッションが与えられれば、チェックボックスがチェックされ、プッシュ通知の利用が可能になります。この UI の素晴らしいところは、ユーザーがウェブサイト上の特定の場所で、通知を有効または無効にできることです。

受動的アプローチ

ユーザーにプッシュ機能を提供する最も簡単な方法の 1 つは、サイト全体で一貫した場所に、プッシュ通知を有効または無効にするボタンやトグルスイッチを設置することです。

これでユーザーがプッシュ通知を有効にするために押し寄せてくるようなことはありませんが、信頼性も高く手軽にウェブサイトとのエンゲージメントを制御する方法を提供することができます。日常的に訪問者があり、直帰率の高いブログなどのサイトでは、通りすがりのユーザーに嫌われることなく常連のみをターゲットにすることができるため、これは堅実な選択肢と言えます。

私の個人サイトでは、フッターにプッシュ通知のトグルがあります。

Example of Gauntface.com push notification toggle in
footer.

視界には入りづらいため、隅々まで見る常連には効果がある一方、たまたま訪れたユーザーには、悪影響を与えません。

ユーザーがプッシュ通知を購読すると、トグルスイッチの状態が変化し、サイト全体で状態が維持されます。

Example of Gauntface.com with notifications
enabled.

悪い UX

以上が、私がウェブ上で気付いたベストプラクティスです。残念ながらひとつだけ、よくあるバッドプラクティスも存在します。

最悪なのは、サイトに到着してすぐにユーザーにパーミッションダイアログを表示することです。

訪れた人は、なぜ許可を求められているか、あなたのウェブサイトの目的が何か、それが何をするのか、何を提供してくれるのかさえ知りません。そこに不満を感じたユーザーが、ここでパーミッションをブロックしてしまうことは決して珍しいことではありません。このポップアップは、ユーザーがやろうとしていることを邪魔しているのです。

ユーザーがパーミッションのリクエストをブロックしてしまうと、あなたのウェブサイトは二度とパーミッションを求めることができません。ブロックされた後にパーミッションを取得するには、ユーザーがブラウザの UI でパーミッションを変更する必要があります。そうすることは、ユーザーにとって簡単ではありませんし、楽しいことでもありません。

何があっても、ユーザーがサイトを開いてすぐにパーミッションを求めるのはやめてください。そしてできれば、ユーザーがパーミッションを与える理由を見つけられる、他の UI やアプローチを検討してください。

逃げ道を作る

ユーザーにプッシュ通知を購読してもらう UX を検討することに加えて、購読を解除する方法や、オプトアウトする方法をぜひ検討してください 。

ページが読み込まれた後すぐにパーミッションを求め、プッシュ通知を無効にする UI を提供しないサイトの数は驚異的です。

サイトは、プッシュを無効にする方法をユーザーに説明する必要があります。さもなければ、あなたのサイトは永久にパーミッションをブロックされてしまうでしょう。

Translated by