web-dev-qa-db-ja.com

進行状況トラッカー（進行状況インジケーター）を表示する最良の方法

複数のステップ（少なくとも8つ）を持つフォームがありますが、画面に表示されるのは1つのステップだけです。進行状況トラッカー（進行状況インジケーター）を表示する最良の方法は何ですか？

  • プログレスバー; enter image description here

  • ステッパー（数値）;

enter image description here

  • ステッパー（タイトル）（ただし、8つのステップでは表示が少し難しい）

enter image description here

モバイルステッパーをデスクトップで複数のステップに使用できますか？どう思いますか？

enter image description here

たぶん、番号とタイトル、および「戻る」と「次へ」の矢印で表示されたアクティブなステップがより良い解決策でしょうか？

formsgui-designmaterial-designmulti-stepsteps
1
Madalina Taina

タイトル付きの左から右へのステッパーを作成しますが、ここで注意点があります。現在のステップのタイトルのみを表示し、ステップには番号を付けません。

  1. ステップには番号を付けないでください。 8つのステップがあることをユーザーに示すことは、心理的な阻害要因になります。パーソナルトレーナーが、単に開始するのではなく、開始する前に8セットのエクササイズを行うことを伝えると想像してください。とはいえ、プログレスサークルを維持して、ある程度の長さを示します。そこに座って数えるユーザーはいません。
  2. 完了したステップにチェックマークを表示して、ユーザーに心理的に報酬を与え、不完全なステップが減少していることを視覚的に示します。
3
Babiker

次の理由で3〜4を超えるステップがある場合は、ステッパープログレストラッカーの使用を避けてください。

  • ほとんどのトラフィックをモバイルから取得すると思いますが、モバイル画面にプログレスステッパーを設置することはほとんど不可能です。
  • 4つ以上のステップを個別に表示すると、ユーザーの認知的負荷が大幅に増加し、フォームの入力が妨げられます。

少なくとも8つの質問があるマルチステップフォームに対する私の提案は、継続的な進行状況バーを配置し、フォームの完了率に応じてバーを埋めることです。ほとんどの場合、進行状況に応じてバーを埋めるだけで、ユーザーは多段階のフォームで迷子になることはありません。

ユーザーがX％のパーセンテージを完了した後、進捗バーの上部にテキストとしてパーセンテージを表示することを試すことができます。私の場合、70％が最も効果的に機能した後に、進捗率をテキストとして表示しました。

0
berkay

8つのステップがあることを考えると、垂直ステッパーを使用して数値を表示するのが最善の方法だと思います。合計で何をする必要があるかを把握し、そのプロセスのどこにいるかを確認することが重要です。

私がもっと興味深いと思う別の問題は、非常に多くのステップがあるという事実です...あなたは単純化して、より少ないことができますか？

0
JoseViso