ネストされたフォームインターフェイスの複雑さを軽減する方法
私は手に複雑なデザインを持っています。それは本質的にウィザードです。次のモックアップはあなたに公正な考えを与えるでしょう：
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
step1、step2 ....ステップ5は、別にしておく必要がある追加のステップです。 「Step2」にはタブ付きのモーダルが含まれているため、「Add2」や「Add link」などのタブが付いているので問題があります。
製品の追加が別のタブに保持されている理由は、ユーザーが複数の製品に進むことができるためです。したがって、[送信]をクリックすると、製品が正常に追加されたことがユーザーに通知され、必要に応じて新しい製品を追加するためのフォームがクリアされます。リンクの追加と同じです。
私の質問は、複雑さを軽減し、ユーザーがこの「ステップ2」をできるだけ簡単に実行するためのより単純なプロセスにする方法はありますか？
最初の問題は、異なる種類のコンテンツに対して「追加」リンクが1つしかないことです。できれば、各リンクをコンテキスト化する方が良いでしょう：
- 商品リストに「商品を追加」
- リンクリストに「リンクを追加」
- 画像を挿入する必要がある場所ならどこでも「画像を追加」
次に、ある種類の製品を選択するように依頼すると、彼はすでに質問に答えており、閲覧していません。したがって、この質問はタブではなくフォームの一部である必要があります
あと2つ：
- 「デフォルト」の場合は特に、「その他」よりも具体的な用語を見つけます。
- リセットボタンは使用しないでください。誤って使用されます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
タブをディシジョンツリーに変換することで、これを簡略化できます。
このアコーディオンコントロールのようなもの：
次に、タブ付きのウィンドウをポップアップするのではなく、右側の（単一の）ウィンドウをポップアップします。
ボラナスが提案するアコーディオンが最善の策です。別の提案は、非常に見やすい+および-ボタンをアコーディオンヘッダーに追加して、タッチフレンドリーにすることです。