Webアプリケーションでのアイテムの「賞味期限」変更に関するアラートの表示
冷蔵庫に保管されている材料について2レベルのアラートを表示する必要があります。オレンジと赤のアラート。アラートは、アイテムが有効期限にどれだけ近いかによって異なります。冷蔵庫はツリー構造のオブジェクトなので、「-80c病理学A /ラック1 /ボックス1」のようなすべてのアイテムのパスがあります。
したがって、すべてのアイテムについて、パス（-80c病理学A /ラック1 /ボックス1）、材料の名前（145-2C11、BMP6.M6.6G11）、材料のタイプ（抗体、ハイブリドーマ）とその量があります。数百の異なる素材を名前で、約10の素材で表示することができます。
これらのアラートを表示するための素敵でエレガントな方法が見つからないので、アドバイスは役に立ちます。必要に応じて、CSS3またはjQueryでそれを行うことができます。
確かに、私はそのような仕事をした最初の人ではありません。これには何か良い基準、基準がありますか？避けるべきことはありますか？
私は相談しました この記事 しかし、それは私が必要とするものではありません。
編集：
これは、Facebookのようにユーザーをログに記録するデスクトップWebアプリケーションです。誰もが自分のアカウントを見て、同じデータを共有しますが、ユーザーには異なる権限があります。
アラートは最初の画面に表示されます。比較的大きな機能のためのスペースがあり、幅はこのページの中央列の半分になる可能性があります<div id="question">ですが、高さはほとんど不定です。
アラートは特に一覧表示する必要がありますが、迷惑なものではありません。材料は非常に多く、通常は冷蔵庫の箱に分散しているため、ユーザーが自分で確認することはできません。
アラートが発生した後は何も起こりません。ユーザーはおそらく期限切れ間近の非常に高価な試薬を持っていることを知らされているので、最初にそれらを使うことを勧められます。警戒にもかかわらず、彼らが試薬を失うことを選択した場合、それについては何もできません。
あなたの状況を完全に理解していないので、あなたが検討するかもしれないいくつかの提案があります。 Google Material Design UIから " Snackbars and Toasts "に類似した相互作用を検討し、必要に応じてそれらをスタックします。
Macユーザー向けのGROWL通知の処理と、通知をどのようにスタックするかについて相談してください。特に、多くの通知が互いに接近してトリガーされる場合はそうです。
これらの例はどちらも、ユーザーにかなりよく知られているエクスペリエンスから借用したものです。身近なものに固執するほど、ユーザーの認知的負荷は少なくなります。
ただし、このシナリオを解決する前に、ユーザーを防ぐ方法があるかどうか尋ねますそもそもこれらすべての通知と「エラー」（より適切な用語がないため）を確認する必要がないためです。ユーザーにこれらの通知を「強制フィード」する必要がないように、UIレベルでできることを実行して、ユーザーが迷惑にならないようにします。これが短期間で非常にイライラするようになるのがわかります。
目的が有効期限に最も近い資料の使用に導くことである場合、それに応じて情報を整理する必要があります。ユーザーに積極的に警告するのではなく、有効期限が近づいている素材だけを特定する必要がある可能性が高いようです。
SgryzkoによるVSの提案と同様に、アラートを重大度で分類し、ユーザーがそれらをフィルターで除外できるようにするでしょう。
ここにあなたが言及した技術を使った実際のquick-n-dirtyのモックアップがあります： jsfiddle
フリーテキスト検索/フィルターはそこに素晴らしい追加かもしれません;）
これがあなたの質問に答えてくれることを願っています。
Visual Studioに、エラー、警告、メッセージを含むエラーリストがあるのが好きです。カテゴリをクリックすると、表示が切り替わります。たとえば、エラーと警告のみを気にし、メッセージは気にしない場合、メッセージをクリックして非表示にします。
3つのレベルがありますが、2つのレベルでそのようなことを簡単に行うことができます。
もう1つの良い点は、この「エラーリスト」ペインを移動したり、左右にドッキングしたり、サイズや列を変更したりできることです。その機能がすべて必要かどうかはわかりませんが、ユーザーとして、私のエラーリスト。