web-dev-qa-db-ja.com

フォーム:モーダルダイアログまたは単一ページアプリの別のページ?

私のアプリケーションでは、「People」や「Contracts」など、いくつかのオブジェクトのリストを表示するページがあります。これらのページから、ユーザーは新しいオブジェクトを作成できます。多くの場合、これらのオブジェクトには、ほんの一握りのプロパティ(おそらく4または5)しかありません。私の質問は、新しいオブジェクトの作成に使用されるフォームの最適なアプローチについてです。

特にプロパティの数が5〜6を超える場合は、別のページを使用することがあります。時々、モーダルダイアログを使用しました。空の行をテーブルに挿入し、値を入力するアプリケーションを見たこともあります。 (私はそれをしません!)

どのようなアプローチを取るべきか、UXの好みや提案はありますか?また、異なるタイプのオブジェクト間で一貫性を保つことは重要ですか?または、アプローチの組み合わせは大丈夫ですか?

私のアプリケーション(Ember.js、単一ページアプリ)のテクノロジを使用すると、別のページに瞬時に移動できます。そのため、アプローチ間のタイミングの違いは問題になりません。実際、Bootstrapダイアログのアニメーションは、ページ遷移よりも時間がかかります。このアプリケーションは、保険会社のバックオフィス管理システムです。

24
Steve H.

モーダルダイアログは、別のページと比較して、わずかに異なる対話を想定しています。

  1. モーダルは、確認、サインイン、サブスクライブ、フィードバック、画像表示などの小規模で迅速な対話に適しています。

    モーダルダイアログ内でのタスクの高速実行により、前のビューに簡単に戻り、コンテキストを復元できます。

  2. モーダルはより少ない不動産を提供します。小さなタスクには適していますが、リッチなUIには苦労する可能性があります。

  3. モーダルは、閉じるボタン、ESC、または外部をクリックすることで、簡単に終了できます。そのため、誤って閉じてデータを失う危険があります。

  4. モーダルはネストできません。それは可能ですが、それは悪いUXをもたらします。

ツールを使用すると簡単に何かを行うことができますが、盲目的に行うべきではありません。そして、単一ページアプリのアトミックオブジェクトはページです。

18

私は同様のシナリオと要件で同様のプロジェクトに取り組んできました。ページ上にいる間、オブジェクトを複数回作成する必要がありました。以下の理由により、JavaScriptモーダルウィンドウを使用してそれを実現しました。

  • Modalはajaxで制御され、VSをロードするのがかなり速く、新しいページを何度もロードしていました。
  • モーダルでは、入力要素の少ないフォームしか表示しませんでしたが、それが新しいページである場合、新しいページには、非常にターンアラウンドが激しいいくつかの視覚的な要素(スタイル)がロードされているはずです。
  • Modalはページを更新せず、目も疲れませんが、ページ間をすばやく前後に移動しなければならない場合、ちらつきや面倒な感じがします。
  • Modalを標準の作成/編集アプローチとして使用すると、アプリケーションのページ数が減り、アプリケーションは使いやすく感じられます。
  • 不動産の経済性を考慮すると、完全な新しいページに対して小さなウィンドウ(モーダル)をロードするのが理にかなっています。

これがあなたの決断に役立つことを願っています。

1
Salman Ehsan