web-dev-qa-db-ja.com

Wizard B2Bアプリケーションの分割ステップVS大きなステップ

ユーザーフレンドリーにするためにB2Bアプリケーションを再開発していますが、堅牢性を維持しています。

機能の1つには、3つのステップを持つポップアップウィザードがあります。

ステップ2では、ステップ3に進むためにチェックボックス/選択する項目のグリッドが必要です。

問題は、グリッドが表示されるためには、ユーザーが特定のCSV基準を検索する必要があるということです(ユーザーが検索できる基準は4つあります)。基準が入力されて適用されると、ステップがクリア/ロードされ(以下のステップ1.2および2.2を参照)、それらの基準を持つ結果のグリッドが表示されます。

これは意見が分かれているところです:

  • 「スプリットステップ」アプローチ(1.x画面が添付されているのを参照):4つの入力ボックスの画面+基準の適用ボタン;

enter image description hereenter image description hereenter image description here

  • または、フルステップアプローチ(添付の2.x画面を参照):すべてを1つの画面に配置し、基準に折りたたみを使用します。

enter image description hereenter image description hereenter image description hereenter image description here

ここに私たちの考えがあります:

  • ユーザーがグリッドを見て、いつでも戻ってさまざまな基準を再適用できる場合、分割ステップにより、UIがよりクリーンになり、不動産の無駄が少なくなります。 (条件を変更したい場合は、クリックして戻しますか?ユーザーは何かにパニックを起こしますか?)

  • フルステップでは、ユーザーにオールインワン画面が提供され、基準を折りたたむことができます(最初または後で?しかし、ユーザーは「基準パネルはどこに行きましたか?」

  • グリッドは巨大になる可能性があります...そして、すべてを1つの大きなステップに収める...ブラウザーを爆破したり、大量のスクロールを引き起こしたりする可能性があります。

  • どちらのアプローチも「クリック」に夢中です(1つは大きなチャンクの折りたたみまたはスクロールで、もう1つは戻ってグリッドが表示されません)。

  • どちらのアプローチにも「適用基準」の問題があり、グリッド全体をリロードします。

PS:私たちのページネーションがおかしいことに気づく方もいるでしょう。それはそうだからです。私はあなたを聞く。

助けてくれてありがとう:)

1
aly.i.ux

ステッパーナビゲーションを上に配置してみてください。基準値を表示し、必要に応じて更新できるようにします。

リストの品質は基準に依存するため、eコマースでのフィルタリングと同様に、永続的なサイドバーを試すことができます。

マテリアルデザインには、steppers。の単純なパターンがいくつかあります。これにより、水平方向のスペースを扱うことができます。

enter image description here

全画面表示にできますか?不動産を最大化します。

これがデスクトップだとすると、ダイアログを使用する場合、それをフルスクリーンに拡大できますか?これにより、より多くのスペースを確保でき、常に目に見えるフィルターを左側に配置できます。

可能であれば、結果とフィルターを一緒に表示します。

Edward Tufteから、情報デザインの主要な原則:

重要な視覚分析を時間的に積み重ねるのではなく、空間的に隣接して行うことができます。

ページのセクションの輪郭を描くことができる場合は、左側にフィルターの一般的なパターン、右側に結果を利用できます。

結果を得るために適用したフィルターを記憶させないでください。

両方を一緒に表示することで、ユーザーのメモリ税を回避でき、前のステップまたは結果の表の上にあるフィルターを開閉する必要がなくなります。

ここで、スペース内の隣接が機能します。

enter image description here

enter image description here

更新:基準を分離することもできますが(必要な場合)、必要に応じてコンテキスト内で表示/編集したいという理由で罰せないでください。

柔軟性は、選択が不確かな場合や、状況に応じてデータを表示してフィルタリングする必要がある場合に役立ちます。

私はv1Big Stepが単一のタスクに集中するのに非常に役立つと思いますが、リマインダーや選択を編集する必要がある人のために柔軟性を構築できますか?環境?

別の編集方法を許可する場合、基準を表示する(そしておそらく編集する)必要があるユーザーを罰することはありません。

最悪のシナリオは、基準の表示/編集オプションが表示されず、ステップに戻ることです。

テーブルがあり、テーブルの上にポップオーバーとしてフィルターを表示および編集できる取引プラットフォームKrakenからこのパターンに遭遇しました。

右上はフィルターがかかっていることを示しています:

enter image description here

ポップオーバーを使用すると、テーブルの値を表示できます:enter image description here

グラフィックデザインの選択肢の中には少し気を散らすもの(濃い紫)がありますが、データをフィルターにかけるのに役立ちました。

あなたの場合、あなたは「表示/編集基準」ボタンまたはリンクを配置することができます。

2
Mike M

40以上のFacebookページを持つエンタープライズソーシャルメディアアカウントをオンボードする必要があるという同様の要件に遭遇しました。私たちはアドテック企業であり、USPはさまざまなソーシャルメディアチャネルを1つのプラットフォームに統合するものでした。私たちは以前、これらのクライアントが大きなクジラだったので、これらのクライアントのオンボーディングを担当する専任の従業員がいました。


これが2セントです

  • 分割ステップはよりクリーンなUIを提供し、ユーザーがグリッドを見て、いつでも戻ってさまざまな基準を再適用できるときに、不動産の無駄を減らします。 (条件を変更したい場合は、クリックして戻しますか?ユーザーは何かにパニックを起こしますか?)
  • どちらのアプローチも「クリック」に夢中です(1つは大きなチャンクの折りたたみまたはスクロール、もう1つは戻ってグリッドが表示されません)が、B2Bアプリ最もきれいではありません私たちは見た

ここのユーザーは、業界の知識を持つ訓練を受けた担当者であり、探しているCSV基準を知っていると思います。したがって、これらをPower usersと呼ぶことができます。その結果、有効性を維持しながら、ユーザーの効率に確実に焦点を当てます。きれいなUIの外観を優先するのは2番目です。

上記の関連情報から、私のお金は2.xオプションに送られます。理由は次のとおりです。

  1. すべての情報は同じ場所で一目で確認できるため、効果的な判断ができます。
  2. 往復する必要がないため、プロセスがより効率的になります。

  • グリッドは巨大になる可能性があります...そして、すべてを1つの大きなステップに収める...ブラウザーを爆破したり、大量のスクロールを引き起こしたりする可能性があります。

密集したデータの表示をより丁寧に扱えると感じています。インスピレーションが必要な場合は、これらのデータテーブルを見回してください???????? https://ant.design/components/table/

1
tridip1931

私はイギリスの.GOVプロジェクトで多くの仕事をしています。タスクを小さなコンポーネントに分割することをお勧めします。タスクを特定のことに集中させるためです。エルゴ、ステップワイズアプローチは常に進むべき道です。

より複雑なやり取りでは、1つの画面でやりすぎているように見えます。これにより、学習が困難になります。

そして、あなたが考慮する必要があるもう一つのこと:このツールはどれくらいの頻度で使われますか?毎日?毎月?一度?それは相互作用のタイプにも影響します。めったに使用されない場合は、段階的な段階的なアプローチが必要になる可能性がさらに高くなります。

概要

タスクを分解するので、ステップワイズは良いです

ユーザーの注意を集中させる

学ぶのは簡単です

しかし、エキスパートであり、頻繁に使用するユーザーにはそれほど速くはないかもしれません

トリックはもちろん、ユーザーと作業をテストすることです。

1
colmcq