モバイルでの多数のステップのための左ステップの設計パターン

Question

5つのステップに分かれた食事注文プロセスを作成しようとしています。モバイル用のステッパーパターンを設計するための良い方法を知りたいと思っていました。

調査後、4つのオプションに絞り込みました

1）ステップサークルとテキストを圧縮して、行に収まるようにします。読みやすさの問題が雑然としすぎて無視されます。

2）垂直ステッパー：これは良いオプションですが、一部のステップは私のユースケースには「高すぎる」ため、モバイルでは「背が高くなる」ため、ステップ間をナビゲートすることは指摘されているようにあまり大きくありません- この答えも。

3）YのステップXパターン：これは良い代替案ですが、ここでのいくつかの問題は、ユーザーがすべてのステップを見ることができず、ステップを直接ナビゲートすることが問題であるということです

4）ステッパーの水平スクロール：スクロールは別として、このアプローチには問題はありませんが、この特定のトピックに関するユーザー調査があるかどうか知りたいと思いました。

だから私はアプローチ3と4の間で確信が持てず、誰かが私をガイドしたり、ステップの問題を解決できる代替案を提案したりできるかどうか非常に感謝します。

Rafael Perozin · Answer

私のウェブサイトでは、以下の代替案のいくつかを使用します。

代替1：

ページネーションのように機能するもの。基本的に、最初のステップと最後のステップの2つのステップと、その他のステップを3つだけ示します。

例を見る：

もちろん、クリエイティブに作業する必要があり、そこに任意のテキストを配置できます。

代替2：

代替3：

代替4：

代替5：

この4番目の例のようにバーを追加し、現在のステップのタイトルを「<520」に変更できる別のオプションを追加しました。

それがお役に立てば幸いです。必要なものはわかっていました。

Rafael Perozin · Answer

マテリアルデザインタブを参照として使用することもできます。いくつかの未使用のステップを非表示にすることができますが、ユーザーがスワイプすると、彼はそれを見ることができます。

[〜＃〜]または[〜＃〜]前回のWebサイトで使用したように。すべての情報を含むボックスをトラックバーの上に挿入できます。