ユーザーが新しく作成したアイテムを並べ替え可能なアイテムリストに配置できるようにする方法
背景
ユーザーが作成、移動、編集、削除できるアイテムのリストがあります。各項目は、テキストボックスフィールドやヘッダーなどの異なるタイプにすることができます。
新しいアイテムを作成したり、既存のアイテムを編集したりするには、リンクをクリックするとポップアップが表示されます。このポップアップにより、ユーザーはアイテムタイプ（テキストボックス、ヘッダー、ドロップダウンなど）およびその個々のプロパティを変更できます。
ユーザーエクスペリエンスを向上させるために、ユーザーがポップアップ内のアイテムの位置を変更することを許可していません。これは、アイテムの移動先の視覚的な表現ではなく、インデックス番号フィールドであったためです。代わりに、ユーザーは各アイテムをドラッグアンドドロップできます。
これにより、ユーザーは各セクションをドラッグアンドドロップし、アイテムの[編集]をクリックしてポップアップを開き、そのプロパティを変更できるため、既存のアイテムを適切に編集および移動できます。新しいアイテムを追加するときに問題が発生します。ユーザーが新しく作成したアイテムを配置するためのわかりやすい方法が必要だからです。
私がそれを見る方法は私が2つのオプションを持っているということです：
オプション1
ポップアップを開き、ユーザーが確認した後、リストの最後にアイテムを配置する「新しいアイテムの追加」リンクを作成します。そこからユーザーはアイテムを目的の位置に移動できます。これに関する問題は、ユーザーがアイテムを作成した後、それを正しい位置にドラッグする必要があるため、ユーザーがアイテムを最後に追加したくない場合、面倒なことです。
オプション2
すべてのアイテムに[下に挿入]リンクがあり、ポップアップが開きますが、リンクのある既存のアイテムの下にアイテムが挿入されます。これの欠点は、すべてのアイテムに[下に挿入]リンクがあり、ページが込み合っているように見えることです。
質問
ユーザーエクスペリエンスの点で優れているオプションはどれですか。または、表示されていない別のオプションはありますか？
私は最近同様の難問を抱えていました。それは、他の場所には絶対に物事を表示することはできず、意図した場所に正確に表示することができない状況に基づいたものだけでした。
私がしたこと（そして今のところそれは十分に直感的です）は、要素を分割し、二次挿入UIを提供する既存の要素間にホバーアクションを挿入しました。これは、メインのものが一番下に配置されているという冗長性があることを意味しますが、ユーザーは一番下のものが消えた場合でも、ユーザーが物を挿入することができます。固定ナビゲーションを作成することが不可能である特定のケースでは、これがうまく機能するように見えました。
この相互作用の簡単なモックアップを作成しましたので、ご検討ください。オプション2と非常に似ていますが、少しエレガントなソリューションです。
（ここでより流動的なバージョン： http://imgur.com/OL8OEeX ）
近年、かなりの数のデザインで同じ課題に直面しています。
インターフェイスにドラッグアンドドロップが含まれている場合（並べ替え用）、個人的には、アイテムを追加する最も便利な方法はドラッグアンドドロップを使用することでもあることがわかりました。これは主に Sooner と呼ばれる（design-award-winner-type）モバイルアプリケーションを含む多数のソリューションをテストした後のことです。
いくつかのスクリーンショットがあれば、コンセプトを実証するには十分だと思います。
Soonerのもう1つの優れた点は、ドラッグアンドドロップフィードバックであり、追加位置の下にあるすべてのアイテムを（ドロップ内ではなく、ドロップ間で実行することにより）ナッジします。言葉で説明するよりも簡単です。
とにかく、そのようなパターンは、ユーザーが「何かを追加したい」というよりも、「ここに何かを追加したい」というユーザーに対応しています。あなたの場合、追加位置がドロップによって決定されたら、ダイアログを開きます。
リストの一番下に新しいアイテムを追加するオプションはお勧めしません。提供されたソリューションはスケーラブルではないためです。リストが増えると、ユーザーは下にスクロールして上に移動する必要があります。推奨される相互作用ではありません
オプション1新しく作成したアイテムを上部に追加します。アイテムユーザーのほとんどは、新しいアイテムを上部に追加するつもりです。これは単純な対話であり、いくつかの主要なケースをカバーしていません。
オプション2ポップアップに新しいアイテムを追加するときに、「上部または下部に新しいアイテムを追加する（ラジオbtnオプション）」という小さなオプションを提供します。これは、すべてのコーナーケースのソリューションになります。
要素を追加するためのフローを変更できます。
- ユーザーが特定の位置にドラッグアンドドロップしてアイテムを追加する
- ユーザーが追加されたアイテムを編集します
- ユーザーはそれらをドラッグして並べ替えます
これが私が作成したモックアップです（ユーザーが見出し、ドロップダウン、入力などを追加できると述べました）。
このフローは、Webflowなどの多くの設計ツールで使用されます（「選択された要素」の詳細パネルに注意してください）。 
コンテキストメニューが最高のエクスペリエンスを提供することをお勧めします。おそらく、リスト内の項目に関連する他の機能が時間の経過とともに出現します。 （「下に挿入」を補完するために、「上に挿入」はすぐに思い浮かびます。「削除」は言うまでもありません。）ユーザーがアイテムを右クリックしてそのような機能を呼び出せるようにすると、UIが乱雑になるのを防ぐことができます。また、新しい機能が追加されるたびにレイアウトを変更する必要がないようにします。
[〜＃〜]編集[〜＃〜]
質問は既存のアイテムの間に新しいアイテムを配置することに固有ですが、既存のアイテムがない場合に新しいアイテムを追加するためのインタラクションデザインも考慮する必要があります。定義により、前者とは異なり、既存のアイテムに関連するUI要素を含めることはできません項目。
一貫性を念頭に置いて、設計目標は、どちらの場合でも同じ相互作用を使用できるようにすることです。
これは、アイテムが存在しない場合にアイテムコンテナーでアクティブな右クリックメニューの使用を再度提案します。したがって、全体的な使用例add itemの相互作用は、既存の項目が存在するかどうかに関係なく一貫しています。どちらの場合でも、新しい項目を追加することができますアイテムコンテナ内を右クリックします。