web-dev-qa-db-ja.com

グリッドレコードの詳細を編集および表示するには、ポップアップウィンドウ(ライトボックス)を使用する必要がありますか?

ユーザーが次の2つのいずれかをすぐに実行できるWebアプリケーションがあります。

1)レコードを検索する

OR

2)新しいレコードを作成する

その結果、メニューバーに[検索]と[作成]という2つのリンクがあります。リンクをクリックすると、それぞれ検索ページまたは作成ページに移動します。

レコードを検索し、検索結果グリッドから特定のレコードを選択した後、ユーザーは選択したレコードの編集または表示を選択できます。注:検索結果は、レコードデータのサブセットを提供します。

ユーザーが選択したレコードを編集または表示することを選択した場合:

ユーザーを新しいページに移動して、編集または表示するための完全なレコードを表示する必要がありますか

OR

完全なレコードを含むポップアップウィンドウ(ドラッグ可能および拡張可能)/ライトボックスを開く必要がありますか?

後者のオプションは、ユーザーが検索基準と結果を(暗くしても)見ることができるという利点があるようです。ユーザーはウィンドウを簡単に閉じて(または編集を送信して)、検索条件と結果に戻ることができます。その後、ユーザーは編集する別のレコードをすばやく選択できます。

ただし、ポップアップウィンドウの使用に関しては、ユーザビリティの問題があることを理解しています。アプリでユーザーが別のWebページに移動して編集または表示する場合、検索ページの状態(結果、並べ替え順序、条件など)を保存する必要があります。これは複雑な作業です。これを回避する方法はありますか?

どんな考えでも大歓迎です。

5
James

これについていくつかの提案があります:

「新しいレコードを作成する」、「レコードを編集する」(できれば「レコードを表示する」)が視覚的かつ機能的に可能な限り相互に近いことを確認してください。この種の一貫性により、ユーザーはこれらのフォームの1つを見るだけですべてに慣れるので、ユーザーにとって非常に簡単になります。

検索結果を表示するときに、完全なデータの表示または編集を許可するためのいくつかのオプションがあります。

  • 別のページは、あなたが述べたように、検索結果から離れることによってコンテキストを失う可能性があります。このコンテキストを維持できることはどれほど重要ですか? (ところで、保存後に検索結果に戻ることができるように最後のページを追跡するなどは、技術的な観点からは非常に簡単であり、決定に影響を与えないはずです)。
  • ライトボックスは、フィールドの数によっては、画面の多くを覆います。この時点では、別のページである可能性もあります。
  • ポップアップは、元のデータから非常に「削除された」ように感じることがあります。

他のいくつかの提案:

  • 展開可能な行を使用します。検索結果の各行はアコーディオンのように機能し、展開すると、そのアイテムの完全な情報が表示されます。これは、1つのステップ(すぐに編集できるようにする)または2つのステップ(編集不可能な情報とフィールドを編集可能にする編集ボタンを表示する)のいずれかです。
  • 画面の幅の2/3をカバーし、情報/編集を表示するパネルの完全な高さまたは部分的な高さの右側のスライドを使用します。これにより、検索データが残り、単一ページの「新規作成」と同じ方法で簡単にレイアウトできます。これは、1ステップまたは2ステップのプロセスにすることもできます。
5
Tims

私にとっての答えは、各行のデータ量と、そこから実行する可能性のある他のアクションにあります。各行にいくつかのフィールドしかなく、それが「行き止まり」である場合、ライトボックスは理にかなっています。行き止まりは、ユーザーを別のページに移動させる他のアクションがないことを意味しています。

ユーザーを別のページに移動してデータを編集している場合は、当然、そこにはフィールド用のスペースがかなりあります。それが望ましい動作である場合、ユーザーがサイトの別の部分に移動する機会も多くあります(私はそれについて考えたのですが、テーブルの行を編集しているときに誰かに離れて移動させることはおそらく悪い考えのようです)。

ただし、どちらのソリューションでも、テーブルのコンテキストからユーザーが確実に削除されます。 Timsは展開可能な行について良い提案がありました。また、データがそれをサポートしている場合は、本当に便利であるとして、インプレース編集も破棄します。 ここに良いブログ投稿があります テーブル内のインプレース編集のトピックについて、そして jankoatwarpspeed.comのテーブルパターンに関する素晴らしい投稿 には、拡張可能なテーブル行が含まれています。

2
Mark D