web-dev-qa-db-ja.com

視覚的な進行状況バーをナビゲーション要素として使用できますか?

チームメイトの間で、より良いUXソリューションは何かについて少し議論があります。ですから、皆さんがこれを解決するのを手伝ってくれることを願っています。

データコレクションエクスペリエンスには線形のフローがあり、プログレスバーを使用して、どれだけ進んだかを示します(duh)。私たちは最近、変更が必要な場合に備えて、このフローに前後のナビゲーションを追加することを決定しました。現在のUXフレームワークは、左側に固定幅の「ワークベンチ」で、右側にメインの操作パネルがあります。メインパネルの上にあるのはプログレスバーです。

この前後のナビゲーションをどこに配置するかについて、2つのアイデアが提案されています。

  1. ページの上部、進行状況バーの両端
  2. ページ下部のワークベンチ領域の両側。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

どれがあなたにとって最も理にかなっていますか?不当に意見を述べたくないので、どちらを信じるかは言いません。ありがとう。

14
Jason

うまく機能しますが、提案している方法はお勧めしません。

ブレッドクラムをプログレスバーの形式として使用できます。これは、ナビゲーションの問題を解決するだけでなく、純粋なプログレスバーよりも適切に実行する必要があることを示します。また、最もよく使用されるWebサイトでは一般的な方法であるため、ユーザーは既に慣れている可能性があります。

ここではいくつかの例を示します。

enter image description here

enter image description here

28
JohnGB

進行状況バーを使用して前後に移動している場合は、本質的にユーザーが進行状況を「取り消す」ことを意味しますまたは進行中(?)にジャンプできます。

懸念を分離するそして、進行状況バーを使用して進行状況を表示し、ナビゲーションを使用してナビゲートします。物をごちゃ混ぜにしないでください。ユーザーが自分の行動でナビゲーションや進行状況を変えられるかどうかをよく考える必要がある場合、それは悪いUXです。

6
rk.

まず、プログレスバーがここでの最善の解決策かどうか疑問に思っています。進行状況バーは、進行状況を示すステップではなく、継続的な進行状況を示します。

さらに、バーを見ると、いつでも好きな場所にジャンプできると想像しています。私が「私」と言うのは、すべてのユーザーが同じように感じるかどうかはわかりませんが、私の確信を強調するためです。ビデオの進行状況バーとタイムラインはこのように機能します。したがって、前後のナビゲーションが必要な場合は、おそらく進行状況バーを使用できません。

だからあなたの質問に答えるために:2番目の選択肢は確かに最高です。 n°1が混乱しているからです(継続性と段階的なアナロジーとユーザーの習慣のため)。

第二に、なぜプログレスバーの代わりがワークベンチ領域の両側にあるのですか?それは他の多くの場所にあるのではないでしょうか?下が最も一般的な場所のようです。

それらのゲームのインストールを覚えていますか?

enter image description here

本当にあなたのデザインに挑戦したいです。数値(3/5 steps)または不連続なグラフィック要素([x] [x] [x] [ ] [ ])?

プロセスが非常に長く、調査のようにステップ数すら気にしない場合は、進行状況バーを使用します。この場合でも、数値のパーセンテージ(60% of the survey completed)。そして、それは初めてしか機能しません。そして、それが正直なフィードバックを与える場合のみ。

おそらく、ここにすべての情報がないので、入力が意味をなしているかどうかを確認できますが、試してみる価値はあります。

1
Gildas Frémont

あなたがプログレスバーを参照しているのは、プログレスインジケーターが付いたナビゲーションバーのようです。その意味では大丈夫です。

ユーザーの「進行状況を元に戻す」という@rkの考えは重要ですが、私が解釈する方法は、プロセスのどこにいるかを示すナビゲーションバーと進行状況バーです。つまり、ページを1つ戻ると、最終目標から少し離れて、その意味で、それは間違って聞こえないということです。

ここでの私の懸念は、>と<の三角形に十分な視覚的目立ちを与え(そして、現時点では何も表示されていない空白の画面での視認性が高く)、最初に見つけられ、進行状況バーが後で「見える」ようにすることです。プログレスバーが視覚的な注意を「引き」、ナビゲーションをナビゲーションとして見られない場合は、ここで問題が発生する可能性があります。ですから、気を付けてください。

0
Salman Ehsan