web-dev-qa-db-ja.com

ユーザーは、ウィザードのナビゲーションバーがクリック可能であることをいつ理解しますか?

私のWebアプリケーションでは、画像のようなウィザードナビゲーションバーを使用します。

example of a wizard navigation bar

他のデザイナーからフィードバックを得ると、進行状況バーがクリック可能かどうかを尋ねられました。私の考えでは、ほとんどのウィザードナビゲーションバーはクリック可能です。ウィザードのナビゲーションバーがクリック可能であることをユーザーに知らせるための良い方法はありますか?それについての研究はありますか?現在のデザインについて、ユーザーがウィザードのナビゲーションバーをクリックできることをユーザーが理解できるようにするための提案はありますか?

ちなみに、次の図に示すように、画面下部のボタンナビゲーションも使用しています。

bottom navigation

ウィザードのナビゲーションバーにいくつかのアイデアを追加しました。

Other ideas

45
Dimitra Miha

Simon Richterの回答とO. R. Mapperのコメントから離れて、クリック可能であることを示すのに役立つようにタブのように見えますが、ウィザードの手順の流れを伝える矢印の形はどうですか?

大まかな醜い例: directional tabs

21
Josiah Keller

注:この回答が書かれたとき、質問は「進捗状況バー」について話していました。質問は後で「ウィザード」を意味するように変更されました。まだ定期的に投票されているため、この回答はそのままにしておきます。したがって、これは「ウィザード」スタイルのフォームにもある程度適した答えのようです。

決して

これまでの質問と回答のすべての例では、ユーザーとして、クリックするというアイデアを得ることができませんでした。それどころか;特にWebアプリケーションの場合は、重要なページがまだ読み込まれているときに、何かをクリックすることにしないことに通常は注意を払っています。支払い操作の最後のボタン。

だから、私はクリック可能な部分をプログレスバーの外に置いて、いつものように見えるようにすることをお勧めします(リンク、ボタン、アプリケーションにあるものは何でも)。

見通し

長時間実行される重要なジョブで多少優れたエクスペリエンスが必要な場合は、「通常の」進行状況バーを完全に回避する必要があります。つまり、ユーザーにサーバー側の進行状況を表示し、ユーザーが自由に離れて後で戻ることができることを100%明確にします(新しいブラウザーセッションでも可能です)。これを行うには、進行状況バーのメタファーをスキップして、「Progress:77%;これはすでに44分かかり、長い時間がかかる場合があります。このウィンドウを閉じて後で戻ってくるのが安全です。」ここで操作を中止します。 "ユーザーが実際にウィンドウ(つまり、セッション)を閉じて後でアクセスする場合、サーバーはもちろん、操作の結果を準備しておく必要があります。

64
AnoE

この場合、アイコンに依存する必要があると思います。

鉛筆は、編集アクションに関連付けられています。これが正しく理解されている場合は、ステップがクリック可能である理由です。チェックアイコンは、ステップが完了したことを示します。そして可能な編集はありません:

背後にある考えは、すでに満たされたステップはもう番号を必要とせず、それらは編集可能または編集不可能(そして完了)であるということです。ステッパーは 線形または非線形 のいずれかです。


ソース: 材料設計-ステッパー

35
Alvaro

多くのことはすでにここで議論されており、ユーザーの メンタルモデル byborder-bottomを使用すると、ウィザードのステップがクリック可能であることを示します

私はこれを私の仕事で使用したことがありませんが、それは研究のための素晴らしいオプションでしょう。

enter image description here

33
DPS

ここで起こっている本当に良い議論。以下のいくつかの考えやアイデア。

enter image description here

アタッチされた設計と言及された複数のシナリオを検討してください:

1)ステータスメッセージを導入すると、データが保存されたことを示唆し、セクションに再度アクセスできることが役立つ場合があります。

2)これは、信頼度および情報アイテムとして機能し、ユーザーがより理解し、感じるのに役立ちます。コントロール

3)ステータスメッセージは注意深く記述することができ、さらにpopup/tooltipを配置して、バー/タブのホバーに関する詳細情報を補足できます。

4)ステップの番号付けは無視できます。これは、戻ることができないというヒントを与えるからです。 1-2-3のように大丈夫ですが、メンタルモデルでは、簡単に3-2-1に行くことができるとは考えていません。

29
Amit Jain

Deutsche Bahnはタブ付きインターフェースを使用しており、ユーザーがウィザードに沿って進むにつれてタブが追加されます。緑色の線は、それぞれのページに有効なデータが含まれていることを示しています。ユーザーは、古いタブを選択して戻ることができます。

(ドイツ語)写真付きレポート

18
Simon Richter

プログレスバーがクリック可能であることをユーザーに知らせたい場合は、たとえば、プログレスバーの特定の領域にカーソルを合わせると、マウスカーソルが変わります。

また、バルーンコンテキストメッセージを追加すると役立ちます。バルーンが読みにくくなったり乱れたりする可能性があるため、バルーンにはあまり多くの情報を入れないでください。

4
Mike