製品の説明のためのモーダルまたは新しいページ？

Question

私はそれが一種の研究であるという質問があり、投稿する前にいくつか調査しましたが、私の懸念のために直接の長所と短所が欲しいので、この質問をここに投稿します。

レシピの一種のギャラリーがあるページがあり、モーダルをクリックして詳細を開くと、詳細が表示されます。レシピのビデオがあります。その方法と材料であり、レシピの栄養価に関するコメントのタブがいくつかあります。

私の懸念は、上記のレイアウトにモーダルと新しいページのどちらが最適かということです。ここにモーダルを持っていることの長所と短所は何ですか？

私はある種の回答ここを取得し、一種の調査を行いましたが、それらは私が特定の長所と短所を探している一般的な懸念のためにリストしました。

これが私のスクリーンのラフスケッチです。

スケッチの[コメント]タブを見るとわかるように、コメントは各レシピにあります。上の部分には、レシピのビデオと、レシピの共有タイマーなどのいくつかのユーザーアクションが続きます。次に、説明されている他のすべての詳細に続く材料と手順があります。

助けてくれてありがとう：）

Mike · Accepted Answer

あなたの質問とあなたが参照するスレッドを読んだら、次の理由で「新しいページに行く」と言います：

ユーザーがいくつかの製品（レシピ）を比較したい場合は、それらを別々のブラウザーウィンドウ/タブで開いて比較を実行できます。

モーダルダイアログの性質はすべての基本的なUIコンポーネントをブロックすることであるため、モーダルを使用している間はこれは不可能です。

ただし、これは実際にページ内に実装する必要がある貧乏人の比較機能として機能します。
私はあなたの参照スレッドの受け入れられた回答に同意します-拡張可能なリスト、別名アコーディオンを使います。または、ユーザーが他のレシピを閲覧（スクロール）できる間、現在のレシピが表示される固定領域を提供します。固定領域で、比較に追加、新しいウィンドウで開く、などのリンクを提供できます印刷バージョン、以下のモックアップを参照してください：

mockup

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

EDIT：OPがさらに情報を追加した後、最初の質問にさらに理由を与えることができます。

モーダルウィンドウ-これは、私の意見では、最悪のオプションであり、その理由は次のとおりです。
- 長所：
  - 情報を表示します
- 短所：
  - 基礎となる情報を覆い隠す（ブロックする）
  - モーダル内でユーザーをロックします（ブラウザーの戻る/転送機能は意図したとおりに機能しません）
  - アイテムの比較を防ぐ（複数のモーダルを並べて開く）
新しいブラウザウィンドウ（新しいタブ）-私の意見では、モーダルウィンドウよりやや優れていますが、最善の解決策ではありません：
- 長所：
  - 情報を表示します
  - 複数のアイテムを並べて開くことができます（アイテムまたは比較をすばやく切り替える）
- 短所：
  - 開いたアイテムからメインページに戻るのはブラウザに依存しているため、信頼できません
  - 表示後にアイテムが閉じられない場合、いくつかのブラウザウィンドウ/タブが蓄積される可能性があります
私が提案したソリューション（選択可能なもののレシピと固定領域を含むスクロール可能なリスト）：
- 長所：
  - 情報を表示します（驚き、驚き）
  - ユーザーを1ページ内に留める-ナビゲーションが簡単
  - すべてのコンテンツがはっきり見える
- 短所：
  - 実装しない限り、項目の比較は直接不可能（開発の問題）
  - 前述のソリューションよりも多くの表示スペースが必要

私はあなたが求めた解決策と私が提案した解決策の長所と短所を提示するとき、できるだけ客観的になるように努めました。

Davyd Geyl · Answer

これが通常のフローの一部、つまりハッピーパスである場合は、新しいページを使用します。モーダルダイアログは非常に中断が多く、ダイアログを閉じるためのアクションが必要です。これらは、例外、アラート、エラーメッセージなど、通常のフローの一部ではない予期しないシナリオ用に予約する必要があります。