web-dev-qa-db-ja.com

材料設計ステッパー-ステップ内のリスト

マルチステッププロセスについてユーザーがamobile Android application

  1. 基本データ(場所、日付など)
  2. 指定されたリストから複数のデータを選択します
  3. 作成したアイテムの写真

そこで、ステッパーのマテリアルデザインアプローチ/仕様を調べました( Material Design Steppers )。

仕様に関して、私が見る限り、モバイルのユースケースに適した2つの可能性があります。

  1. セクション「ステッパー/モバイルステッパーのタイプ」で説明したステッパー: enter image description hereenter image description here

  2. 「ステッパー/垂直ステッパーのタイプ」セクションの垂直ステッパー: enter image description here

さて、実際の問題に:
上記のように、ステップ2でユーザーは、時間とともに変化し、増加する可能性のあるアイテムのリストから複数のアイテムを選択する必要がありますおよび未定義のサイズまで大きくなる可能性があります。

その観点から、アイテムはおそらく追加のフィルタリング/ソートの可能性を持つ独自の画面に表示される可能性があるため、ステッパー1がより適していると思います。

「デザイン」の観点からは、垂直ステッパーは見栄えが良いと思いますが、そのようなリストをその中に含めるソリューションは想像できません(そして、どういうわけか内部のリストには、正確な方法ではないというわずかな「匂い」があります)。

UXの観点から、何がより適していると思いますか?

もうありがとう!

5
JDC

見栄えがいいだけでなく、「ステッパー2」が優れている理由は他にもあります。

  • 進捗状況の追跡が容易
  • ステップのタイトルは、必要な情報を示しています
  • フォームを物理的に下がるにつれて、より大きな進歩感
  • 他の手順に順番どおりにアクセスできない(例:手順3から手順1にすぐに移動)

ただし、すでに述べたように、ステップ2にはさまざまなサイズのリストがあります。 [続行]ボタンと[キャンセル]ボタンを使用してリストを埋め込もうとした後に表示領域が残っていると、ユーザーがリストをスキャンすることが難しくなります。そして、有用なフィルタリング/並べ替えツールがある場合、それらを画面に含めようとする(またはそれらをまったくそこに入れない)ことは困難になります。

したがって、「ステッパー1」、特に「Step X of Y」が上部にあるデザインをお勧めします。ステップのタイトル(「ステップ1/3:基本データ」など)を含めても、この設計には次のメリットがあります。

  • 進捗状況の追跡が容易
  • ステップのタイトルは、必要な情報を示しています

より多くのユーザーがすぐに「Step X of Y」を理解する必要があるため、私はページのドットを避ける傾向があります。ページドット付きのステッパーバージョンを使用する場合でも、ステップにタイトルを付ける必要があります。 Nielsen Norman Groupは、覚えておくべきこともいくつか書きました( https://www.nngroup.com/articles/4-ios-rules-break/ (はい、記事はiOS向けですが、同じです原則はAndroidに適用する必要があります)。

3
Gerald F.

デザイン2でもかまいませんが、リストからの選択を dialog に委任できます。ダイアログが完了すると、ステッパーには選択したアイテムのみが表示されます。

これは妥協策ですが、ウィザードの操作性に大きな影響を与えないはずです(頻繁に実行しない限り、リストを開いたり閉じたりするための2回の追加クリックがユーザーの迷惑になります)。

0
Chris