次、前、および完全なフォーム後のアクションのための配置
ユーザーが実行する必要がある7つのステップのフォームがあり、すべてのステップで次のステップに影響を与える条件があります。
これは政府のプロジェクトであるため、フォームには多くのフィールドがあり、完了するまでに時間がかかるため、フォームに「後でフォームを完了する」アクションを追加することにしました。ユーザーがクリックすると、すべてのフォームがポップアップ表示されます。情報が保存され、「後でフォームに記入してください」。
しかし、私は配置について混乱しています。
私はこのようなことを考えています：
私のフォームは左揃えで、トップフィールドのラベルです。
Nextという主要なアクションを明確に示したいのですが、後でフォームを完成させることができます。
どんな推薦でも私を大いに助けます。
TL; DR：
- 下部に別の後で完了を追加し、戻るおよび次へボタンを移動します一緒。
下部に別の後で完了するボタンを追加します
ユーザーがフォームの下部までスクロールするの前に、フォームに入力する時間があるかどうかを判断することがよくあります。
このため、ページの下部に別の[後で完了]ボタンボタンを追加を追加すると、ユーザーにメリットがあります。
ほとんどの英国政府のサイトはこれを行います：
可視性
ただし、視認性を高めるために[後で完了]ボタンも上部に配置しますも保持する必要があります。
Don Normanが The Design of Everyday Things で述べているように：
システムの各状態で、ユーザーは許容されるアクションを容易に確認して実行できる必要があります。可視性は、ユーザーに可能性を思い出させる提案として機能します。
同じ理由で、BackボタンとNextボタンを並べて配置することも検討してください。
このようにして、ユーザーは許可されたアクションを確認できるように、より小さな領域を検索するとする必要があります。
自然なマッピングと可視性
BackボタンとNextボタンをどちらかの側に配置すると、次のように優れていると主張できます自然なマッピングに準拠。
しかし、これは可視性を犠牲にして行われますマッピングが表示されない場合、自然なマッピングは無関係になります :)
しかし、いつものように、ユーザーテストは、どちらが優れているかについて明確な答えを得る唯一の方法です。
私はそれが好きです。あなたはたくさんのことをやってもらいました。そのうちのいくつかは、外部の研究ソースを提供できます。他のものは私自身の見解に基づいています。
「後で完了する」ボタンがあるのは、それはあなたにとってどのくらい重要ですか？ユーザーに今すぐフォームを完成させますか、それとも後で完成させますか？階層的には、クリックするボタンが最も高くなります（この場合、青色の塗りつぶしが必要です）。二次ボタンには（画像に基づいて）青い枠があります。
フォームの主なアクションを考えてください。今すぐフォームを完成させることだと思います。現時点で主要機能を完了できない場合、後で完了する機能は追加機能です。
- 左に戻るボタン、右に進むボタン。
グーテンベルク図を見ると、フローの最後（右下）に[次へ]ボタンを配置するのが論理的です。繰り返しますが、ユーザーが後で完了するのではなく、次をクリックするようにしたい場合のみ。
- フィールドの上部にラベルが付いた左揃えのフォーム。
入力フィールドの真上にラベルを配置することで、ユーザーは1つの目の動きで両方の要素をキャプチャできました。また、ラベルがユーザーに非常に馴染みのあるデータ（たとえば、名や姓）を示していた場合、ユーザーはラベルを個別に固執して読んでいませんでした。彼らは同じ中心窩領域でラベルと入力フィールドの両方を見ることができました。したがって、追加の固定とサッカードの必要性を排除します。
ソース： フォーム内のラベル配置
トップナビゲーションで現在位置をわかりやすく表示。
単一列レイアウト
フィールドを1列のレイアウトで表示します。複数の列は、フォームを下に移動する垂直方向の勢いを妨げます。ユーザーに視覚的に方向を変えることを要求するのではなく、フィールドごとに個別の行を持つ単一の列に固執することで、ユーザーをフロー内に留めます。 （このルールの例外：市区町村、都道府県、郵便番号などの短いフィールドや論理的に関連するフィールドを同じ行に表示できます。）