マシンの状態の表示–概要サイト
一部のマシンの状態をWebアプリケーションに表示する必要があります。マシンは約8つの異なる状態を持つことができます。
私たちのアイデアは、ユーザーがすべてのマシンとその状態を確認できるサイトを作成することです。しかし、個々のマシンを表示する方法はわかりません。
同僚は、カラーコードを使って何かをしようと考えていました。各マシンは、異なる色の長方形として表示されます（状態を示します）。このようなもの：
ユーザーが各色の意味を思い出せないので、このアイデアはあまり好きではありません。それぞれの色がどの状態を表しているのかがわかるまでには、長い時間がかかります。
マシンとその状態をどのように表示できるかについてのアイデアはありますか？
要求事項：
- このサイトは主にデスクトップブラウザで表示されます。しかし、タブレットもサポートする必要があります。
- ユーザーは、マシンをクリックしたりホバーしたりせずに状態を確認する必要があります
- 20〜300台のマシンをサイトに表示する必要があります。 （可能であればページングなしで）
問題
あなたは色の使用について正しいです。 8つの状態がある場合、ユーザーはそれが何を意味するかを覚えていないでしょう。また、色覚異常のあるユーザーにも問題を引き起こします。
凡例を使用すると、画面の周りでダートに目を向けるので、効果がありません。また、カラーブラインドの問題も解決しません。
300アイテムはナビゲートが困難になるため、セルの設計と並べ替え（ステータス別、ユーザー定義など）およびフィルタリングを組み合わせて慎重に行うと役立ちます。
提案
セル設計を改善します。
- すべてのセルがマシンのように見えるため、マシンのキャプションを表示する必要がない場合があります。
- 数字はマシンを区別するために使用されるため、フォントのサイズを大きくします。
- マシンのステータスを表示するには、色とラベルの両方を使用します。これは現在のベストプラクティスです。色で簡単に読むことができますが、色覚異常のユーザーや見慣れないユーザーのステータスも明確に表示されます。
- セルのデザインを簡素化して、重要なことに目を向ける：アウトラインをフェードします（これにより グリッドの錯覚 効果を減らすのに役立ちます）。背景全体に色を付けないようにします。これにより、数値の読み取り/スキャンが難しくなります。 。
- 背景全体を赤/緑などでペイントする代わりに、見本を使用してステータスを示します。
- 上記のように、並べ替えとフィルターのコントロールを追加します。
結果のデザインは次のようになります（セルレイアウトのみ、フィルター/並べ替えを追加する必要があります）。
これは密度が低く、目がスキャンしやすく、さまざまなユーザー（新規、専門家、色覚異常など）にステータスを伝達しやすくなります。
お役に立てば幸いです。
製造現場の地図
機械の場所が記載された製造現場のマップを用意することを検討してください。これは、コンテキストを提供し、機械の操作プロセスを合理化するのに役立ちます。以下は一例です（マシン数に制限があります）。物事を拡大したい場合は、グラフィックを強調した建築計画を使用できます。
ダッシュボードの概要
ダッシュボードビューは、ユーザーが緊急のタスクに参加するのに役立ちます。マシンの状態に関連する他のすべての情報をマップ内に埋め込むことができます。ホバー状態を利用して追加情報を表示することもできます。
トースターの回答は見ていません（編集中）が、ダッシュボードはこのように表示されます。ダッシュボードを使用して、マップ内の問題のある領域を強調表示することもできます。全体的に、これはコンテキストとステータスの両方をマシン操作に提供するだけでなく、タスクのピリオト化されたリストも提供します。
更新：2つの世界のベスト
これは質問の範囲と制約と制限に従うの範囲を超える可能性がありますが、マシンのステータスに関する情報を製造サイトのレイアウトとどのように組み合わせることができるかを共有したいだけです。
問題のないマシンを隠すことを検討してください。目標が完全に機能していないマシンを見つけることである場合、red1つ。問題を修正するためにいくつかの作業を必要とするマシンを表示するだけです。
異なる状態のマシンの数のみを表示するダッシュボードを追加することもできます。すべてのマシンの概要を把握するのに役立ちます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
インスピレーションを得るために tohster からの回答に感謝します。
サイトに20台から最大300台のマシンを表示する必要があります。 （可能であればページングなしで）
1ページで、スペースを節約します。フィルターと賢い並べ替えを備えたリストに行き、状態を書き留めて、よく理解できるようにします。なぜなら、あなたが言ったように、人々は8色の状態を覚えていないからです。
わずかに異なるアプローチの1つは、おそらく背景色を使用した単純なグループ化です。したがって、たとえば、すべての「OK」マシンは、状態が入力されたヘッダー（必要に応じてテキストの説明付き）を持つグループにあり、グループ全体が微妙な背景色になる可能性があります。リストをソートする方法によっては、このソリューションが機能しない場合があります。
最大200台のマシンを使用できるため、すべてのマシンのラベルに状態を書き込むと、多くの繰り返しが発生します。考えるだけの何か。