[前へ]、[次へ]、[ドラフトを保存]アクションのボタンの配置
5ステップのフォームをデザインしています。ユーザーはフォームを終了して、後でフォームに戻ることができます。したがって、私は前へ、次へ、および下書きを保存アクションを持っています。
ボタン/要素の理想的な配置は何ですか？
フォームフィールドの下に左揃えで配置し、主要なアクションである次を明確に示します。
これまでのところ、私はこれを考え出しました：
考えや解決策はありがたいです。
フィールドの下にある左揃えのボタンは、完成までの明確な道を提供します。 Luke Wroblewskiは、著書「Webフォームデザイン」（ 一部の画像を含むPDF ）で完成までの明確な道筋について説明しています。
以下は、アラインメントが完了のパスをより明確にする方法に関する本の例です。
上記の例と同様に、「次へ」を唯一のプライマリアクションとし、「前へ」と「ドラフトを保存」をセカンダリアクション（リンク）とすることを検討してください。
質問でこれについて直接尋ねたのではなく、このテクニックの実装をすでに計画している可能性がありますが、フォームでこれを使用することもお勧めします。
これは、ユーザーがどのステップを踏んでいるか、残りのステップ数をユーザーに明確に示します。また、前のアクションを複数回クリックして1つのステップに戻るのではなく、フォーム内の任意のステップをクリックすることもできます。
あなたが取った設計アプローチは良いですが、考慮すべきいくつかの事柄があります：
段階的なアプローチは
- 整理するだけ-ここで
Previousはうまく機能します 1つのステップが次のステップに影響します。つまり、ユーザーがデータを失う可能性があるという意味で、
Previousは潜在的に危険な関数になります。この場合、私は
Previousをそれほど目立たせたくありません。代わりに、5つのステップのリストを表示してクリック可能にします。完了した手順には目盛りが表示されます。このようにして、これらのラベルを視覚的に示して、ステップ4からステップ2にバックアップすると、ステップ3および4のデータに影響する可能性があることを示します。
考慮すべき2番目のことは、ユーザーがSave as Draftをクリックしたときに、ユーザーがウィザードを終了するか、フォーム自体にとどまるかどうかです。たとえば、ユーザーが大量のデータを入力しているときにSave as Draftがあり、作業中にそれを失うべきではない場合、ユーザーはフォームに残ります。ユーザーが一定期間プロセスを完了する可能性がある場合は、フォームを終了する可能性があります。最初のケースでは、データが失われず、ボタンが不要になるため、自動保存を検討する必要があります。
ボタンの配置
左揃えのボタンにはいくつかの利点があります。
- 左揃えまたは上揃えのラベルで構成されたフォームに適合
- ワイド画面のどこにボタンを配置すればよいかわからない
- モバイルでうまく機能します
ボタンの優先順位付け
- ほとんどのユーザーが1つのセッションでプロセス全体を完了すると想定します
Nextが主なアクションであり、そのように強調表示する必要があります Previousはセカンダリです。つまり、灰色（またはリンク）である必要があります。
下書きを保存
- フォームが非常に長い場合、またはユーザーが保存したい理由がある場合は、便利で便利な機能になります。
- 保存には、いくつかの考慮も必要です。ユーザーはどのように保存するか、入力の保存中に何が表示され、確認として何が表示されるか？彼らは再び保存できますか？保存されたフォームに後でアクセスするにはどうすればよいですか？
- 余裕がある場合は、フォームの自動保存を検討することをお勧めします（Gmailでのメールの作成の例を参照）
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
私は常にマインドマップアプローチを採用することをお勧めします。
右利きのユーザーを考慮-前へ/戻るは常に左側にあり、次は常に右側にあり、最も重要なこととして、保存/下書き/などは、コンテキストベースのアクションであるため、画面のツールバー領域にある必要があります（上、下-私は下を好む）。
注：さらに、使用していない場合[〜＃〜] tabs [〜＃〜]現在の位置/ナビゲーションを表示するtrain-componentを提供する必要があります。
私の説明をより詳細に描いた下の画像を見つけてください。
ボタンの配置には、これらの回答のどれも対処できない深刻なユーザビリティの欠陥があります。
[次へ]ボタンと[前へ]ボタンが近すぎます。ユーザーは、偶然に一方を意味するときに一方をクリックすることができます。方向マッピングを使用して、次のボタンを右側に配置する必要があります。これは、ユーザーが期待するものであり、ページ番号を付けるときに慣れています。クリックの間違いを防ぐのに役立ちます。
前のボタンが無効になっているようです。画像で無効化されているかどうかはわかりませんが、無効化されていない前のボタンは、アクティブに見えるように色のコントラストを増やす必要があります。
Save Draftリンクが痛い親指のように飛び出します。どこに置くかアイデアが足りなくなったようで、最後に無計画に叩きました。
[次へ]ボタンをクリックすると、ユーザーは次のページに移動しますが、[下書きの保存]をユーザーに手動でクリックさせることなく、ユーザーの進行状況を自動的に保存します。ユーザーは、「次へ」を押すたびに「あなたの情報は保存されました」という通知を表示することで、これが発生することを知っています。
上記を使用している場合は、[下書きを保存]ボタンを提供する必要はありません。ユーザーがフォームを離れる前に次のページに移動するように動機付けることができます。
ただし、各フォームページに多くのフィールドがある場合、ユーザーは[次へ]をクリックする前にフォームの中央から離れる必要がある場合があります。この場合、[下書きを保存]ボタンを提供できます。これは、[次へ]ボタンの隣に配置されたニュートラルボタンである必要があります。
すべてのデザイナーが読むべきボタンに関する記事は次のとおりです。 http://uxmovement.com/buttons/how-button-color-contrast-guides-users-to-action/
あなたが誰かをプロセスに連れて行っているなら、私はバックグラウンドで保存として機能する次のボタンを持っているでしょう。とにかく戻るには、データを保存する必要があります。
一括コピーを作成していて、次のステップに進む前に下書きを保存したい場合を除きます。これは事実ですか？
ボタンの配置については、Save Draft（何と呼ぼうとも）がワークフローを終了する場合は、他の場所から離して配置する必要があります。誰かが誤ってマウスを数ピクセル動かしてクリックする直前に、ウィザードから追い出されました（データは失われませんが）。
Previousタブに再度アクセスしたい場合は、サイトが入力したデータ（パスワードを除く）を後のページに保存することを期待します。おそらくこれが当てはまります（そうでない場合は、ユーザーに許可してもらえません）途中で保存;）
Nextは、最後のステップでFinishとして転用できます。また、Previousが非表示の場合の最初のステップとして、Nextボタンを移動するのではなく、同じ相対位置に保持することをお勧めします。
他の回答のコメントでSave Draftのタイトルを変更することを検討したとき、いくつかの代替提案：
Save and Exit：これが自動的に閉じられる別個のポップアップである場合のみComplete Later：ワークフローが中断されたときに情報を保存することを暗黙的に示します