ユーザーにフォームの入力の階層を表示する
ユーザーが複数のテキストフィールドを使用して複数の「専門分野」を入力できるフォームに取り組んでいます。フォームは次のように始まります。
次に、ボタンを押すと（SUBを追加）、これが発生します。
ご覧のように、ボタンが無効になり、新しい「サブ分野」フィールドが追加されました。
彼らが「専門分野」フィールドに入力し始めると、別のフィールドが作成され、同じことが「サブ専門分野」にも当てはまります。
上の画像のように。
このデザインは、フォームの階層のアイデアをユーザーに提供しますか？そうでない場合、どうすれば改善できますか？ツリーのように各サブをその親と接続する線を追加する必要がありますか？
ありがとう
編集：
それが私がこれまでに思いついたことです：
2番目のオプション： 
3番目のオプション： 
編集＃2：
少し周りを変えました。
これで、使用はボックス（入力のコンテナー）で表示されますが、次のように新しいコンテナーを追加するボタンとして機能します。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
クリックするとボックスが下にシフトし、次のように適切な入力を含む別のボックスが追加されます。
階層をより明確に伝える方法でコントロールを配置できます。インプレース編集パターンのアイデアに近いです。
階層のアイデアを伝えるための他のいくつかの変更は、ゲシュタルトの原則に基づいています。
。
[〜＃〜]更新[〜＃〜]
インプレース編集オプションをサポートするには、いくつかのユースケースのタスクフローを検討してください。
シナリオ1複数のアイテムを追加します。インプレースオプションはよりスムーズなフローを提供します
シナリオ2単一のフローを追加します。最初のユーザーは、アイテムがリストに存在するかどうかを検索します。存在しない場合は追加します。繰り返しになりますが、インプレース編集の方がうまく機能します。
だからインプレース編集はコントロールを決定点の近くに移動します。
3つの主なもの。
まず、ユーザーは「サブ」の意味を理解していますか？ユーザーが使用する共通言語は何ですか。内部名ではありません。
第二に-あなたはサブパートをインデントする必要はありません、私はあなたがプログラマーであると思います（多分そうでないかもしれません）。ちょうどそれを下に置いて、それが最初のアイテムと視覚的にグループ化されていることを確認してください（ちょうど閉じることによって、ボックスの必要はありません）。
3番目-ボタンも必要ですか？最も簡単な解決策は、2つのボックスを表示するか、何らかの形式の漸進的開示を使用することです（1つが入力されたときに別のボックスを表示します）。他の人がその例を提供することができます-そしておそらくこのサイトにはすでにいくつかあります。