web-dev-qa-db-ja.com

リスト内のタスク間の依存関係を追加する方法

相互に依存できるタスクのリストがあります。タスク＃2は、タスク＃1が完了するまで開始できません。

回路図では、次のようになります

Id  | Dependency
----+-----------
 #1 |  - 
 #2 | #1         // #2 cannot begin before #1 is completed
 #3 |  -
 #4 | #2, #3     // #4 cannot begin before both #2 and #3 are completed
 #5 | #1, #3     // #5 cannot begin before both #1 and #3 are completed

1つのタスクは他のいくつかのタスクに依存でき、多くのタスクは同じタスクに依存できます。循環依存はありません。

ユーザーがタスクをリストに追加し、タスク間の依存関係を自分で構成できるユーザーインターフェイスを作成する必要があります。

私の最初の考えは、そのようなテーブルを持つことでした：

enter image description here

しかし、これはそれほど技術的でないユーザーを探すのは簡単ではなく、タスク間の関係をうまく視覚化しません。

私の次の考えは、一種の階層的なドラッグアンドドロップリストを持つことでした

enter image description here

しかし、1つのタスクが複数のタスクに依存していることを表す方法を理解できません（たとえば、タスク4がタスク2とタスク3の両方に依存しているが、これら2つは互いに独立している場合）。また、すべてのタスクが前のタスクに依存している場合は、かなり長い時間インデントされるリストになります。

ガントチャートとして視覚化することも考えましたが、これはテーブルソリューションと同じくらい技術的です。

このタスクをユーザーフレンドリーな方法で解決する方法について何かアイデアはありますか？

usabilitygui-designlayout
5
Daniel

1。これはよくある問題です

  • 80年代にスケジューリング、プロジェクト管理、製造計画のアプリが作成されて以来、デジタルデザイナーはこの問題に取り組んできました。

2。グラフィック表現は重要です

  • 複数の任意の依存関係がある場合、依存関係をグラフィカルに表示することは非常に困難になります。簡単な例（>は依存関係を表します）：

    1. > B > C > ... > Z
    2. C、D > FおよびA、B > E

  • 依存関係を自動的に単純化しますか（＃1が＃2を自動的に保証するため、＃2は安全に削除できます）？
    それらすべてを表示していますか（この場合、レイアウトに複数の重複する行があり、非常に混乱する可能性があります）

  • 結論：本当にグラフィカルなことをしたいのであれば、それを成し遂げるために多くの時間と労力を費やす準備をしてください。

。テキスト表現は構築が簡単で、正しく理解するのが難しい

  • 可能であれば、ステップの数値ラベルを削除してみてください。これはしばしば不可能ですが、説明すると、これらのうちどれがより理解しやすいですか：

    • 泡立て器の卵、ドレッシングを準備>ミックスサラダ

    • 1、＃23 >＃6

  • 色分けの依存関係は、それらがあまり多くない場合に役立ちます。ホバーまたはクリックで色を使用して、依存関係を示すこともできます。 enter image description here

  • 一部のアプリ（Excel、ILOGなど）では、矢印またはポップアップツールバーを使用して、テーブルに多数の行がある場合にユーザーが依存関係に移動できるようにしています。

4。アプリの開発者が自分のしていることを知っていることを確認してください

  • 任意の依存関係を使用すると、循環参照を取得することは非常に簡単です。また、アクティビティがワークフローから削除されたときに依存関係を孤立させることも非常に簡単です。
4
tohster

この例では、タスク2と3を縦に表示する代わりに、フローチャート表現で並べて表示でき、両方ともタスク4に独立して接続します。

視覚化しているタスクの数によっては、面倒になる場合があります。多数のタスクを整理するには、形状や色などの手がかりが必要になる場合があります。

0
Voxwoman

私はおそらく最初のテーブルの列の順序を逆にして、おそらくそれらを呼び出すPrerequisites-このタスクを実行する前に必要なものです。

このようなもの...

enter image description here

0
DaveAlger