LiveChatから学ぶ、通知機能のデザインの重要性

LiveChatはサイト上で運営者と訪問者が直接コミュニケーションを取れるチャットツールです。Webサービスの料金プランに迷っているときや、ちょっとした疑問があったときなど、わざわざ電話やメールをするのは面倒ですが、チャットですぐに答えが返ってくるのなら問い合わせてみる気になりませんか？サイト運営者はLiveChatを設置することによって潜在的な顧客を逃すリスクを減らすことが出来るので、スタートアップなどで設置するサイトが増えてきました。

LiveChatのユーザーは仕事中いつでも訪問者からメッセージを受け取る可能性がありますが、常に見張っているわけにはいきませんよね。けれど訪問者はすぐに返事が来ることを期待しているはずなので、運営者がきちんと気付けるような通知機能が用意されていることは非常に重要です。そこで今回、LiveChatがどんなことに気を付けながら通知機能をデザインしているのか”Usability of notifications”というタイトルでブログにまとめていたので今回MEMOPATCHで翻訳して紹介します！

（以下、”Usability of notifications”の翻訳）

通知機能をデザインすることについて、正しく理解できているソフトウェアディベロッパーは少ないのではないでしょうか？そもそもソフトウェアプロダクトにおいての通知機能とは、通知しなければユーザーが気づかないであろう出来事をユーザーに知らせるための視覚的、または聴覚的な情報のことです。単純な機能のように聞こえるかもしれませんが、エンドユーザーの視点から見るといくつか重要なポイントが存在しています。

そこでまずは人気プロダクトがどの様に通知機能を作っているのか見てみましょう。

通知機能の悪い例

iPhoneのリマインダーというアプリはコンセプトレベルでは素晴らしいのに、通知機能でもったいないことをしています。ユーザーが複数のデバイスを使っている時に、シームレスにタスクを通知することに失敗しており、全デバイスほぼ同時に通知が届くようになっています。つまりデバイスの数だけ通知音を聴くことになるのです。

さらにMacbook上で通知された内容を確認して閉じても、その内容が完了したとはみなされません。完了するにはリマインダーのアプリを開き、対象のアイテムにチェックを入れないといけないのです。この点から、リマインダーは単にタスクを通知するために作られたアプリではないことが分かります。実際にはもっと高機能なことをやるリストなのです。

Pingdomのサービス（※訳者注　PingdomはWebサイトの表示速度を計測するサービス）では、「Beta labs」のメニューでbeta版の機能について通知しています。ただ問題はメッセージを読んだにも関わらず、そのままバッジが表示されることです。その結果、6ヶ月間このバッジを見続けることになってしまいました。

通知機能の良い例

定番の例として、iPhoneのメッセージアプリは通知機能を効果的に使っています。赤いバッジはカラフルなアイコンに対して強いコントラストを生みますよね。またバッジはメッセージが読まれるまではこのまま表示され、読後はすぐ消えるようになっています。

Facebookも通知機能を上手く使っています。Webとモバイルで共通のビジュアルパターンを使っていたり、通知されているメッセージが読まれた時にだけバッジが消えるようになっています。

適切な通知機能の3原則

ここで通知機能の3つの基本事項について確認しましょう。

1. ユーザーがメッセージを読んでいない場合には通知機能を表示し、メッセージが読まれた瞬間には表示を消す。
2. デザインパターンに沿って、赤い背景に未読のメッセージ数を表示する。
3. もしも通知された内容がすぐに分からない場合は（例えば開いたページには表示されていないなど）、ユーザーがそこに辿り着けるようにバッジなどを使う。

3つ目は珍しいケースであり、以下にスクリーンショットと共に説明します。

LiveChatはどうユーザーに通知しているか

LiveChatのユーザーにとって通知機能は非常に重要な役割を果たしています。そのため私たちはユーザーがアプリのどの部分を見ているかに関係なく、何が起きていてるかわかるようにデザインしました。例えばお客さんとのチャット中に別のお客さんがメッセージを送ってきた場合、ブラウザからの通知がスクリーンの右上に表示されます。

さらにLiveChatのメインメニューには赤いバッジが表示され、ユーザーが別のブラウザタブを見ている場合でも、アプリのタブには未読のメッセージ数が表示されるようになっています。

他にもユーザーがお客さんと話をしているときに他の誰かが返事を送ってきたら、お客さんとのチャットを表すバッジが表示されます。

もしユーザーが同時に複数のお客さんとチャットをしている場合、使われていない時間が長いものは2番目のページに隠れます。その隠れてしまったチャットに返信があった時は、ページの矢印上に通知機能が表示され、2番目のページにも注目する箇所があることを示すようにしました。

それぞれの通知機能は大した影響を与えているように感じられなくても、全体として合わさると、お客さんが素早い反応を確実に受けることができるシステムになっているのです。

今後の課題

LiveChatで使われている通知機能は、まだ複雑なケースをカバーしきれておらず、例えばリアルタイムの性質上、LiveChatはバックエンドで未読のメッセージを記憶していません。アプリケーションのGUIが赤いバッジを必要な時に表示させるので、その結果アプリを閉じて開くと未読のメッセージについての通知機能は消えてしまいます。これを解決するには、未読のメッセージリストまたはGUIの現在の状態をバックエンドで保存しておく必要があるのですが、すぐに解決できる問題ではなく、下手すると不要なバッジを表示してしまうことも考えられます。

もう1つの問題は、複数のデバイス間での同期です。複数のブラウザタブで開かれたアプリをすぐに同期することは簡単ですが、LiveChatではユーザーが様々なデバイス（iPhone、iPad、Android）を持ったお客さんと会話出来なければいけません。なのでデバイス間での通知を同期するためにはバックエンドの操作が必要なのです。

最後に

ほとんどの場合は、基本的な原則に沿っていれば、充分有用な通知機能を作ることができます。リーンスタートアップの手法（※訳者注　必要最低限の機能を備えたプロダクトやサービスを作り、ユーザーの反応を見ながら改良をしていく手法のこと）に沿って考えてみると、通知機能についての複雑なロジックを何週間も掛けて考えたくないですよね。基本的な法則に従えば95%の状況に対応することができるはずなので、デバイス間でリアルタイムに既読通知を同期するなどといった高度な改良については後回しにする方が良いでしょう。

（翻訳ここまで）

いかがでしたでしょうか？単純そうに見える通知機能ですが、LivaChatでは色々工夫してデザインされていることがわかりました。通知機能をデザインする際は上記で紹介した3原則をチェックしてみてくださいね！