web-dev-qa-db-ja.com

マルチステップウィザードで非アクティブなステップを部分的に非表示にする

ウィザードの形式で段階的に実行する必要があるマルチステップナビゲーションのモバイルバージョンでの作業。

ただし、一部のステップのローカル翻訳はかなり長くなります。

ステップ名を短くすることはオプションではないため、次の解決策を考え出しました。 Android水平ナビゲーションパターンに似ています。

これは一般的ではないので、ユーザーにとって意味がありますか

enter image description here

4
Ameen Akbar

あなたが提示したものは、1つの小さな例外を除いて問題ありません。

ユーザーは最後のステップ全体を見ることができないので、プロセスは表示されているステップよりも長いと思われます。視覚的なステップガイドの近くに「Step 5 of 12」のようなものを追加することにより、ステップの数だけでなく、ステップの進行状況をある程度示します。このようなもの:

enter image description here

2
Andrew Martin

各ページにアイコン(可能な場合)を使用することを検討してください。そして、必要に応じて、現在のページにタイトルを付けることができます。

enter image description here

1
SimonTeo

正しくレイアウトできますが、ドットを削除してテキストを垂直方向に中央揃えにします。テキストが2行に収まらない場合は、2行目に省略記号を使用します。

enter image description here

0
Alvaro

enter image description here

ユーザーがアクティブになるまでステップの名前を知る必要がない場合は、単に「ステップ1」、「ステップ2」などを上部に表示できます。次に、ユーザーがステップにいるときに、ステップ名をタイトルとして使用します。例ステップ5/5:超狂気の長いプロセス名

0
Janet

これは実行が保留されるのに意味があると思うし、それを解決するのに役立ついくつかの考えがある-

  1. 「オプション1」または「オプション2」をタップすると、次のステップに進みますか?その場合、シェブロンの使用は少し奇妙に思えます。通常、次のステップに進むのではなく、従属画面に入っていることを示します。 「次へ」ボタンを備えた単一または複数選択のUI(ラジオボタンなど)を検討する場合があります。
  2. これはどのプラットフォーム向けですか(ウェブ、iOS、Android、またはすべて)?このステップウィザードを終了する方法、または前に戻る方法がないようです。
  3. コメントから、ステップ名が重要だと思います。それが事実であるので、ヘッダーの水平ステッパーに名前を詰め込むことが正しい呼び出しかどうかはわかりません。そこで2つの提案-
    • 水平ステッパーでアイコンまたは数字を使用し、オプションの上にインラインでステップタイトルを表示します。
    • 代わりに垂直ステッパーを使用してください。それがどのように見えるかのモックアップを添付しました。これには、画面幅に関係なく常にステップのための十分なスペースがあり、UIをフローの前後に移動するのに簡単に対応でき、ステップを不明瞭にすることなく任意の数のステップに対応できるという利点があります。

enter image description here

0
Josh Olsen