web-dev-qa-db-ja.com

ダッシュボードでプロセスフローをより適切に表す方法は?

私の目標は、製造現場で実行されているいくつかのプロセス(注文)についてユーザーを配置するダッシュボードを作成することです。

プロセスには、説明のためにSTEP1STEP2STEP3STEPNと名付けられたいくつかのステップがあります。

各注文には適切なワークフローがあります。例:

ORDER1: STEP1->STEP2->STEP10
ORDER2: STEP3->STEP6->STEP9

数十の注文が同時に実行される場合があります。

すべての注文、そのワークフロー、プロセスにおける現在の位置のダッシュボードビューを構築し、遅延注文を通知する方法を見つける必要があります(すべてのステップには定義された時間があります)。

私は本当に単一のグリッドしか考えることができません:

        STEP1 | STEP2 | STEP3 | STEP4 | STEP5 | STEP6 | STEP7 | STEP8 | STEP 9 | STEP10
ORDER1    OK  |   *   |    -  |   -   |   -   |   -   |   -   |   -   |   -    |  WAITING |
ORDER2    -   |   -   |   OK  |   -   |   -   |   *   |   -   |   -   |WAITING |   -     |

私の図では:-:順序で使用されていないステップ*:現在のステップ待機中:待機中のステップ

上記の必要な情報をすべて表示して、ユーザー向けの状況画面を作成する直感的で最適な方法のアドバイスが必要です。

編集1:

ワークフローが特定のステップの順序に従っていないことに気付きました。例:

ORDER1: STEP1->STEP2->STEP10
ORDER2: STEP3->STEP6->STEP9
ORDER3: STEP10->STEP5->STEP6
ORDER4: STEP9->STEP2->STEP6->STEP3

逐次表現ができないので、コンセプトが少し変わります...

2
Mendes

2つのビューを許可:順次ステップで注文を表示するための順次ビューと、ボトルネックとスループットを示す生産現場ビュー。

すべてのステップで厳密な順序を設定することはできないため、世界を表示するには2つの方法があります。注文レベルと製造現場です。彼らは2つの異なる目的を果たします。

どちらのビューでも、左側に注文ごとに必要なステップ数を示し、期待値を設定できます。

右側に、注文状況を表示できます。注文が遅れているか不完全な場合は、現在のステップを示すことができます。

順序による順序(さまざまな順序のステップ)

enter image description here

製造現場全体のボトルネックと欠員を表示します。

enter image description here

ショップスチュワードの場合、懸念事項は注文のペースとフロー、およびオーバーフローが発生しているステップ(ワークステーション)です。

すべてのステップ(使用されていないものも含む)を表示することで、スチュワードはすべてのステップとすべての注文にわたって仕事の減退と流れを確認できます

7
Mike M

特定の順序のフローですべてのステップが必要ではない場合、おそらく、各ステップをアイコンまたはグラフィックとして表現し、ステータスを表すために色分けすることができます(色のみに依存しているため、何らかのグラフィックの変更とともに)アクセシビリティに対する貧弱なアイデア)。色/形状の変更を使用して、まだ開始されていない、進行中、遅延、完了、失敗などを表すことができます。

次に、特定の注文に対して適切なグラフィックスを一緒にチェーンし、すべての注文をそれらのチェーンのスクロールリストとして表すことができます。各アイコン/グラフィックには、ステップ自体の詳細を示す、ある種のホバー状態(これはデスクトップベースのUIであると想定-使用のコンテキストとユーザーの詳細が非常に役立つと想定)も必要です。ステータス、およびそのステップに関するその他の重要な情報。

ここにアイデアの超迅速なサンプルがあります(申し訳ありませんが、これに専念するのに10分しかかかりませんでした)。緑は完了を示します。たとえば、黄色は処理中、灰色=まだ開始されていないこと、赤はブロックまたは失敗したことを意味します。ステータスの色の変化を補うために、どのような形の変化も表していないことに注意してください。これは、含める必要がある重要な側面です!): enter image description here

2
Mattynabib