web-dev-qa-db-ja.com

カスケードモーダルポップアップの代替

現在、ウェブアプリの1つを作り直すことを検討しています。

現時点では、すべての編集はモーダルポップアップで行われます。単一のモーダルをインライン編集モードなどに置き換えるのは簡単です。ただし、現在のアプリでは、複数レベルの依存データを同時に入力できます。

例えば：

  1. ユーザーがカレンダービューで1日をクリックし、「新しい旅の開始」を選択すると、「新しい旅」ポップアップが開きます
  2. 新しいジャーニーフォームのフィールドの1つは、そのジャーニーで移動するクライアントを選択することです。このフィールドには、現在選択されているクライアント（おそらく空白）と、クライアントを選択するためのポップアップを開く「選択」ボタンが表示されます。このポップアップには、選択可能な利用可能なクライアントのリストと、結果を絞り込むための単純な検索ボックスがあります。

Select client popup

  1. ただし、ご覧のとおり、このウィンドウから新しいクライアントを追加することもできます。 「新規」をクリックすると、「新規クライアント」ポップアップが開きます。
  2. 新しいクライアントフォームのフィールドの1つは、クライアントの手術/医師を選択することです。繰り返しますが、手術を選択するためのポップアップを開く「選択」ボタンがあります。これは、select clientポップアップによく似ています。
  3. 手術がまだシステムにない場合は、別の「新規」ボタンがあり、「新規手術」ポップアップが開きます。

したがって、この時点でユーザーには5つのポップアップのスタックがあります。

  • 新しい旅
  • クライアントを選択
  • 新しいクライアント
  • 手術を選択
  • 新しい手術

各ポップアップで[保存/選択]をクリックすると、最初のポップアップに戻るまで、ポップアップの下の適切なフィールドが閉じて入力されます。ユーザーがそれを保存すると、システムは先ほど作成したジャーニーの画面に移動します。

ポップアップを使用しない代替アプローチはありますか？または、ポップアップはここでの仕事に最適なツールですか？

formspopupmodal-windowsedit
2
SystemParadox

ポップアップは、CRUD操作に最適なUXになることはほとんどありません。次のコンポーネントのいくつかを調べることをお勧めします。

  • パネルのスライド
    • これらは、モバイルコンテキストに適切にスケーリングし、現在のページ/アクションのコンテキストを「残す」ことなく、より大きなフォームでのスクロールを可能にします
  • 高度なドロップダウン
    • 検索/選択されているものに関する複数行の情報を表示する
    • オブジェクトの複数のプロパティを検索できます
    • 検索語で始まる値のオプションを探すのではなく、検索で結果を「フィルター」できるようにする

これらの2つのコンポーネントを使用すると、新しいシナリオは次のようになります。

  • ユーザーがカレンダービューで1日をクリックし、「新しい旅の開始」を選択すると、パネルの「新しい旅」のスライドが開きます
  • ユーザーは適切なドロップダウンから既存のアイテムを検索して選択します
    • ドロップダウンの横にある[新規追加]をクリックすると、現在のフローに沿って小さなフォームが表示され、ドロップダウンが無効になります。
      • 「保存」をクリックすると、アイテムが追加され、フォームが削除され、ドロップダウンが選択した値に設定されます
      • 「キャンセル」をクリックするとフォームがクリアされ、ドロップダウンが有効になります

これが理にかなっているといいのですが。最大の違いは次のとおりです。

  • あなたは同じコンテキストにとどまります（新しい旅に入る）
  • より「モバイル/レスポンシブフレンドリー」なコンポーネントを使用している
  • 選択が簡素化され、決定を行うための詳細情報が提供されます
3
Daniel Brown