トップ通知バーのデザインパターンまたはベストプラクティスは？
SEの上部の通知バーがポップアップし、「バッジx獲得」などのメッセージが表示されます。 このタイプのUIのベストプラクティスは何ですか？
具体的な詳細：
- 表示中-コンテンツを下に移動（SEのように）するか、ページの上部にカーソルを合わせて一部のコンテンツを非表示にしますか？
- 常に表示されているか、ページの上部に接着されていますか？
- ショッピングカートのオファーを表示するのに適した場所でしょうか？
- 色またはアニメーションを使用する必要がありますか？
- どのくらいの垂直方向の画面スペースを使用できますか？
- どのようなメッセージを表示する必要がありますか？
- 他に何か？
公開された回答や決定的な回答はないと思いますが、明確な回答が利用できない場合でも、これは検討すべき非常に役立つトピックであるため、役立つと思われるいくつかの例を提供します。
表示時-コンテンツを下に移動（SEのように）またはページの上部にカーソルを合わせて一部のコンテンツを非表示にしますか？
コンテンツの表示（IMO）は、バーがページの上部または下部にある場合にのみ機能します。ページ内の他の場所に移動する非表示のボックスがあると、ページの外観が非常に混乱する可能性があります。コンテンツを非表示にすることも決して良い考えではありません。可能な場合は、空白または画面の端が通知に適しています。重要なことを隠したくない。ページの上部に「非表示」の通知がある場合は、ナビゲーションバーが非表示になる可能性があることに注意してください。
常に表示されるか、ページの上部に接着されますか？
実際に読んでから却下したい場合は、重要な場所で「接着」してください。ここでもっと重要なことは、それがなくなるかどうかということです。たとえば、YouTubeは、動画のアップロード時に、15分を超える動画をアップロードするように声を出して通知することにしました。過去と同様6か月。これらのような通知を非表示にするオプションを許可します。Xで通知を非表示にする場合は、完全に非表示にすることをお勧めします。 常時のメッセージの場合はポップアップします。例えばFacebookの「ステータス更新」カウントは、Facebookが「新しいメッセージ/新しい更新」カウンターで行うように、永続的なUI要素のオーバーレイにすることを検討してください。それらを取り外し可能な通知ポップアップにすることは非常に煩わしいでしょう。
ショッピングカートのオファーを表示するのに適した場所ですか？
人々は広告を嫌います。人々は広告とともに暮らしていますが、コンテンツの流れを妨げる広告を作成すると、人々はあなたのサイトを去ります。 「オファー」と言っているのは知っていますが、明示的に探し出さなかった商品を誰かに購入させようとしているのであれば、それは広告です。
色またはアニメーションを使用する必要がありますか？
短いアニメーションのイン/アウトは大丈夫です（個人的に私がこれらを面白いと思うことはめったにありません）が、常に「点滅」/「移動」する要素は、緊急よりも不快に見えます。 Windowsタスクバーを点滅させるアプリケーションについて考えてみましょう。 1回または2回の高速点滅で通知されます。常に点滅するアイコンannoysあなた。
縦の画面スペースはどれくらい使用できますか？
必要な分だけ。 SEメッセージは非常に優れています。簡潔で、読みやすくするために十分な余白があります。特に、ページのコンテンツをシフトする場合は、混乱を最小限に抑えます。ユーザーは通知を残して後で対応し、通常どおりサイトを使用し続ける場合があることに注意してください。特にそれが「新着メッセージ」タイプのポップアップの場合。
表示するメッセージの種類は？
ユーザーが見逃してしまうこと。 Stack Exchangeの例を使用する場合、通知で通知されていなければ、このサイトのI had特権レベルを知ることはありませんでした。 ITは新しいコンテンツや機能にも最適です。 Googleはこのような通知を頻繁に受け取ります。サイトに精通しているさまざまな場合でも、ユーザーが注意を引き付けられない場合、単一の新しいリンクやメニュー項目などの小さなUIの変更を見落とすことがよくあります。機能があまり通知されない場合、特にユーザーが既に存在する機能を要求することが多い場合は、ユーザーが便利であると思われる場合は、1回限りの通知を検討してください。 Facebookは「友達発見」システムを宣伝する新しい通知を頻繁に投稿します。これはサイトのほとんどのユーザーにとって魅力的なものですが、同時にユーザーが自分でサイトを探すことはほとんどないか、まったくありません。注目を集めるのに役立ちます。売り込みのように聞こえないようにしてください。
書かれたパターンは知りませんが、Intuitでこれをさまざまにテストした経験があります。トップバーには2つの用途があります。
- リンクへのアクセス： プロトタイプ例 。私はこれを2005年にIntuitのWebサイト用に作成しました。非常にうまくテストされました。ページ全体をオーバーレイするメニューよりもはるかに優れています。今日、IBMにはさまざまな種類があります。上位ナビゲーションリンクの1つをクリックします。
- 通知/ステータス：Intuitでもこれを使用して、ショッピングカートに入っている商品の数を示しました。アマゾンや他の人がこれを行います。 SEの上部にスコアが表示され、左側のメニューを使用して新しいコメントが表示されます。
トップバーには2種類あります。
- Everpresent。これは、通知が実際にスクロールダウンするQuora.comのようなものです。彼らはそれを行うためにJavfaScriptを使用しますが、遅いモバイルデバイスでは非常に煩わしい場合があります。ただし、正しく実行すると、貴重な（垂直）画面の一部が削除されますが、バーの全体的な認識が高まります。
- 通常。 （これに適したラベルはありません。これはSEのようなものです。ページの残りの部分と一緒にスクロールします。すばやくロードされ、「スクロールせずに見える範囲」で機能しますが、画面外にある場合は役に立ちません。
どのモデルが最適かを判断するには、サイトの全体的なスキームとバーの情報の重要性を比較検討する必要があります。ただし、私は（Intuitでのテストと私自身のデザインの意味から）、多くのリンクと何らかのステータスを持つサイトでは、ほとんどの場合、トップバーが良いアイデアであると信じています。 （ショッピングカート、通知付きの複雑なサイト）。理解しやすいです。これはかなり効率的なスペースの使用であり、最後に、ユーザーとリッチでありながら予測可能な方法で通信することができます。
これがあなたのお役に立てば幸いです。
カラーまたはアニメーションを使用する必要がありますか？
通知がウィンドウの上部に固定されている場合は、ユーザーの周辺視野に向かっている可能性があります。そのため、動きに気づきやすくなり、色の変化が少なくなります。イライラしないでください。
関連するかもしれないいくつかの研究： http://www.alma.edu/departments/psychology/SP98/ZaMa/pcv.html
黄色は、平均して、最も迅速に特定された色（図1を参照）で、右目が73度、左目が73.5度で、赤が2番目（72、70.5）でした。最も認識されない色は緑（60.5、64.25）と紫（64、63）でした。青は、右目の中心から68.75度、左から68度に認められた。さらに、被験者は、実際の色の知覚への突然のシフトを報告する前に、多くの場合、緑色を紫色または赤色であり、ある場合にはピンクであると識別しました。
価値のあることを、これらのステータスブリップと呼びます。