最高の使いやすさのためにフォームナビゲーションをレイアウトする方法は？
フォームボタンのレイアウトに関するユーザビリティスタディはありますか？
簡単な登録プロセスがあります。ユーザーはプロセスを通じていくつかのフォームでガイドされます。各フォームには、<next>ボタンと<back>ボタンがあります。一部のステップには、<next>、<choice A>、<choice B>、<back>ボタンの代わりがあります。
すべてのUAにはネイティブのボタンがあるため、フォームのボタンは絶対に不要であることを認識しています。しかし、残念ながら、Web作成者はその機能に対するユーザーの意識を失いました。したがって、私の最後のステップとして、「データを確認し、必要に応じて編集する」と述べています。 UAの[戻る]ボタンを忘れたユーザーに、戻るための直感的な可能性を提供する必要があります。
今、私はこれらのボタンをどのようにレイアウトして最高の使いやすさを実現するのか疑問に思っています。誰かがこの問題についてすでに研究を行っているのではないかと思っています。その結果を指摘したいと思います。
Luke Wroblewski（著者の Webフォームデザイン：空白を埋める ）には、多数の情報源に基づいて フォームの使いやすさに関する素晴らしい研究 がいくつかあります。 「フォームアクション」および「完了へのパス」がおそらく最もあなたが尋ねている質問に関連する部分ですが、うまくいけば、他の分野も興味深いものになるでしょう。
ルークの資料は、さまざまな情報源に基づいています。
- ユーザビリティテスト（エラー、問題、アシスト、完了率、タスクごとに費やされた時間、満足度スコア）。
- フィールドテスト（使用されたソース、環境、コンテキスト）。
- カスタマーサポート（上位の問題、インシデントの数）。
- Webコンベンション調査（一般的な解決策、独自のアプローチ）。
- サイトトラッキング（完了率、入口点、出口点、利用された要素、入力されたデータ）。
- アイトラッキング（固視数、固視の長さ、ヒートマップ、スキャンパス）。
ベストプラクティス：ラベルの配置
- 完了時間を短縮し、使い慣れたデータ入力を行うには、上揃えのラベルを使用します。
- 垂直方向の画面スペースが制限されている場合：右揃えのラベルを使用します。
- 慣れていない、または高度なデータ入力の場合：左揃えのラベルを使用します。
ベストプラクティス：必須フィールドとオプションフィールド
- オプションのフィールドは避けてください。
- ほとんどのフィールドが必須の場合：オプションのフィールドを示します。
- ほとんどのフィールドがオプションの場合：必須フィールドを示します。
- テキストが最適ですが、*は必須フィールドで機能することがよくあります。
- インジケーターをラベルに関連付けます。
ベストプラクティス：フィールド長
- 可能であれば、アフォーダンスとしてフィールド長を使用してください。
- それ以外の場合は、入力に十分なスペースを提供する一定の長さを検討してください。
ベストプラクティス：コンテンツのグループ化
- 関連するコンテンツグループを使用してフォームを整理します。
- 有用な関係を伝えるのに必要な最小限の視覚要素を使用してください。
ベストプラクティス：フォームアクション
- すべてのフォームアクションが等しいわけではありません（リセット、キャンセル、および戻るは二次的なアクションです：使用する必要はほとんどありません（ある場合）、保存、続行、および送信は主要なアクションです：直接責任がありますフォーム補完用）。
- アクションの視覚的表現は、それらの重要性と一致する必要があります。
- 可能であれば、2次的なアクションは避けてください。それ以外の場合は、プライマリアクションとセカンダリアクションを明確に視覚的に区別します。
- 主要なアクションを入力フィールドに揃えて、完了までの明確な道筋を示します。
ベストプラクティス：ヘルプとヒント
- ヘルプとヒントは、ユーザーがデータが要求されている理由、データを提供するための推奨される方法、または特定のデータ要求がオプションである場合に、よく知らないデータを要求するときに役立ちます。
- ただし、過度に使用すると、ヘルプとヒントがすぐにフォームを圧倒します。このような場合は、動的なソリューション（自動インライン露出、ユーザーがアクティブにするインライン露出、ユーザーがアクティブにするセクション露出）を検討することをお勧めします。
ベストプラクティス：フォーム補完のパス
- 不要なデータ要求をすべて削除してください。
- スマートデフォルトを有効にします。
- 柔軟なデータ入力を採用します。
- 完成への明確な道を照らします。
- 長い形式の場合は、進行状況を表示して保存します。
- タブ動作を考慮することを忘れないでください。
- Tabindex属性を使用して、タブ順序を制御します。
- フォームをレイアウトするときは、期待値をタブで移動することを検討してください（複数列フォームと単一列フォームの動作など）.
- プログレッシブ開示を優先度の高いユーザーのニーズにマッピングします（たとえば、選択した特定のオプションにすべてが該当しない場合は、コンポーネントへのすべてのパスを一度に表示しないでください）。
- 一貫したアプローチを維持します。
ベストプラクティス：ユーザーフィードバック
- 潜在的に高いエラー率を持つ入力にはインライン検証を使用します。
- 要求された情報を反映する入力フィールドを使用します（たとえば、自由形式のテキストフィールドではなく、[はい/いいえ]応答のチェックボックスを使用します）。
- フィールドの制限を伝えます（許可される文字、フィールド長など）。
- エラーが発生したことを明確に伝えます：上部の配置、視覚的なコントラスト。
- エラーを修正するための実用的な対策を提供します。
- 責任のあるフィールドをプライマリエラーメッセージに関連付けます。
- エラーが発生したビジュアル言語を「2倍」にします。
- 進行中のタスクを示します。
- 重複した送信を避けるために、ユーザーがクリックした後、「送信」ボタンを無効にします。
ベストプラクティス：データ送信
- データ送信が成功したことを明確に伝えます。
- 送信されたデータのコンテキストでフィードバックを提供します。
最終レビュー画面に表示する必要がある情報の量によっては、ユーザーがデータを編集するために登録プロセスに戻る必要がなく、最終レビュー画面でインラインでデータを編集できるようにする方がはるかに簡単です。 。
ユーザーが情報を編集するために登録画面をナビゲートする必要があると思われる場合は、ブレッドクラムナビゲーションを利用できます。そうすれば、ユーザーは戻るボタンを繰り返し押す必要がなく、ワンクリックで前のセッションに戻ることができます。