1つの画面に複数のフォーム
ユーザーが記入するフォームは5セットほどあります。これらのフォームのセットのほとんどのフィールドは必須なので、ユーザーがこれらすべての5つのフォームをチェックアウトする必要があることは明らかです。このフォームの煩わしさを軽減するための最善の方法についてのヒントとガイダンスが必要です。
これは、左側のフォームを編集し続け、右側にライブプレビューが表示される電子メールデザイナーコンソールと考えてください。
1.同じ退屈な長い形式です。
私がこれに従うつもりはありませんが、これが私の最初のアプローチです。そのため、シミュレーター/ライブプレビューは画面の右側に固定され、左側のフォームが編集されます。 5つのフォームは上下に配置されます。ユーザーは常に貧弱なスクロールを行わなければなりません。ユーザーは何がトップで何が次に来るかわからないので、これは不満足な（少なくとも私の実装では）UXだと思います。 Scroll Scroll Scroll（up-down、down-up）...
これがスクリーンショットです。 
2.ソリューション2：（これ以上スクロールしない）-動的なコンソールアプローチ
現在、これらのフォームをアコーディオンメニュー形式にしています。一度に1つのフォームのみが表示され、他のフォームは折りたたまれます。 Webページにはスクロールバーがなく、すべてが非常に明確で、ユーザーは次に何をすべきかを知っています。ユーザーには、各フォームの最後に「次へ」ボタンがあります。これにより、次のアコーディオンメニューが開いたときに次のフォームが表示されます。個別のフォーム検証も実装するので、このアプローチは良いと思います。これにより、最後にフォーム全体を検証する手間が軽減されます。
これがスクリーンショットです。 
3.大幅に簡素化され、より広いスペース。
したがって、このアプローチは2番目に似ていますが、アコーディオンはありません。その次々とその形。ただし、上部に進行状況バーがあり、ユーザーはフォームをナビゲートできます。フォームコンテンツのためのスペースが多いため、このアプローチが好きです。前のタイプでは、対応するヘッドが垂直方向のスペースを取っていたため、これにより最小化されました。
スクリーンショット。 
オプション3をお勧めします。2と3は近いですが、3の上部にあるプロセスインジケーターは、IMHOの邪魔にならない程度にクリーンです。ユーザーは、全体的なプロセスのどこまで進んでいるかについてのコンテキストがあり、ページの上部にあるステップインジケーターを使用して直感的に前後にクリックできる必要があります。
3つは、何が必要になるのか、どのくらいの時間を費やす必要があるのか、システムがどのように「モデル化されている」のかについての感覚をユーザーに強く示します。また、後のページで明らかにカバーされる情報を除外することにより、現在のページのあいまいな質問に関連する回答を推測することもできます。
2つもこれらの利点を提供しますが、アコーディオンコントロールのおかげで「ノイズ」が増加します。 Threeを使用すると、プログレスバーは、折りたたみdivよりもわずかに優れた線形順序で通信するため、ユーザーが非線形の方法で試して進行する可能性も低くなります。