web-dev-qa-db-ja.com

ステップベースのナビゲーションのホバー状態

ステップベースのナビゲーションワークフローの適切なホバー状態がどうあるべきかを理解するのに困惑しています。

ナビゲーションは下に表示されます。 3つの状態があります。完了、アクティブ、まだ完了していません。ユーザーは、テキスト/アイコンをクリックして、完了したステップのいずれかに戻ることができます(下のスクリーンショットを参照)。

アクティブな状態とまだ完了していない状態はクリックできないので、ユーザーに伝えるのは難しいと感じています。

これを行う簡単な方法はありますか?ユーザーが完了したステップにカーソルを合わせると、カーソルが手のアイコンに変わるのと同じくらい簡単ですか?もしそうなら、彼らはこれが可能であることをどうやって知るのでしょうか?

enter image description here

4
squeezemylime

私がこの種の決定に直面したとき、私はしばしば適切な古い戦術に依存します、それがクリック可能であることを示すために円の下のテキストに下線を引きます。 @msanfordが述べたように、タッチユーザーはホバー効果を見ることができないため、この視覚的な手掛かりはタッチユーザーにも有効です。

戻るオプションが表示されているように、ユーザーが最初のステップを完了すると、「前のステップを変更するにはここをクリックしてください」の行に沿ってチャット/テキストの吹き出しを表示するだけで済みます。このバブルは、もちろん、ユーザーのデバイスに基づいて適切なサイズ、位置、設計にする必要があります。これは、注意を引くのに十分な時間だけ表示されますが、いつまでもそこにとどまったり、邪魔をしたりしないでください。

お役に立てば幸いです。

2
Alendri

ユーザーはフォームを送信して、どのようにInstructionsからTarget Candidate Profileに進みますか? ウィザードのようなパターン を何らかの[次へ]または[続行]ボタンで実装したと思います。

彼らにステップストロップを使用させたい場合は、写真のステップストリップボタンに affordance を与える必要があります。

前進する方法をユーザーに示す

  1. ステップストリップの次のステップのボタンを無効にします(行ったように)。
  2. クライアント側の検証で現在のステップが終了したと判断されたら、次のステップのボタンを有効にして、アフォーダンスを与えます(穏やかに脈動させ、面取りし、 ツールチップ などを表示します)。
  3. 次のステップをクリックすると、現在のステップが送信されます。ツールチップを使用したアフォーダンス

これにより、ウィザードを操作する方法はステップストリップのボタンを使用することがかなり明確にユーザーに示されます。既に完了したボタンに同じアフォーダンスを与えれば、ボタンをクリックすることで有効なステップに移動できることをユーザーに示しただけです。

0
msanford

これを手っ取り早く当てると、チェックマークをホバーすると、編集記号(鉛筆で書かれた文書)または戻る矢印に変わり、戻ることができることを示します。

0
Bryan Robinson