jquery - UX-大きなフォームに保存ボタンを配置する方法と場所

Question

左側にjQueryタブを使用するページがあります。

約8つのタブがあり、各タブ内には、各タブ内の各フォームに約10〜20個のアイテムを保持するフォームがあります。

[保存]ボタンまたは各タブのフォーム上のアイテムが保存されていることを示すための最良の方法は何ですか？

保存ボタンは、すべてのタブのすべてのフィールドを保存する必要がありますが、最高のユーザーエクスペリエンスを実現するために、これを画面に表示するための最良の方法はわかりません。

Answer 1

1 つのタブに多くの項目がある場合は、上部と下部に保存ボタンを配置することをお勧めします。

さらに、これらの保存ボタンのいずれかで複数のタブを保存するのは悪い考えだと思います。4 つの異なるタブで変更を行い、5 番目のタブで [保存] をクリックすると、検証エラーが発生し、5 セント硬貨の状況に陥ります。ユーザーはすべてのタブをクリックして見つける必要があります。 .

より良いアプローチは、各タブに独自のフォームを含めることです。これにより、その 1 つのタブの検証メッセージを簡単に表示できます。

これをユーザーの観点から考えてみてください。たくさんの変更を加えて、半ダースのエラー メッセージが表示され、各タブをクリックして修正する必要があるのは嫌ではありませんか?

Answer 2

私はニックに同意します。保存ボタンが 1 つある一連のタブよりも、各ステップで検証を行わずにウィザード スタイルのレイアウトを使用する方がよい場合があります。各ステップには [戻る] ボタンと [次へ] ボタンがあり、そのステップだけで [次へ] を押すたびに検証が行われます。最後のステップには、[次へ] ボタンではなく [保存] ボタンがあります。また、[戻る] ボタンと [次へ] ボタンの間に、ユーザーがプロセスのどこにいるかを示すプログレス バーがあります。

私はこのような UI を構築しましたが、多くのユース ケースで非常にうまく機能することがわかりました。