モーダルまたは新しいページ？
7つの商品があります。サイトには多くのコンテンツ（テキスト）ページがあります。各コンテンツページの下部に、製品をサムネイルとして表示します。
バージョンA：サムネイルをクリックすると、製品情報を含むモーダルが開きます
バージョンB：すべての製品とその情報を相互に一覧表示する製品ページがあります。サムネイルをクリックすると、ユーザーは製品ページに移動し、ページは関連する製品情報に自動スクロールします。
どちらのバージョンがより使いやすくなるのか、そしてその理由は？
オプションC：カードを展開して詳細を表示します。
モーダルは対話の流れを壊すので、モーダルよりもこの方法を優先します-フォーカスをページの別の部分に切り替える可能性があります（モバイルではそれほどではありませんが、それでもコンテキストが壊れます）。
サムネイル自体を展開します-ユーザーはすでにここを探しているため、すべて同じフローの一部になります。サムネイル自体で他のサムネイルを覆うことも、それらをすべてコンテナの下のスペースに拡張することもできます。あなた次第。
新しいページに移動しないことの利点は、ユーザーがページを切り替える前にコンテンツを覗くことができることです。展開したサムネイルには、商品ページへのリンクを含めることも含めないこともできます-何をしてほしいかによって異なります。
それが役に立てば幸い:)
モーダルvのページへの切り替えに適用する一般的なルールは次のとおりです。
情報または遷移が一時的なものであり、ユーザーが情報を吸収した後、または小さなフォームとやり取りした後にフォーカスがページに戻され、フォーカスが変更されない場合、モーダルフォームが適切な方法です。 。
リンクまたはフォームがユーザーを現在のフローから外し、元のフローに戻ることが期待されない場合は、新しいフローページへの遷移によってフォーカスを新しいフローに移動するのが正しい方法です。
私はバージョンBの別のページに行きます。モーダルは適切にスケーリングされないため、情報を追加すると壊れる傾向があります。また、別のページで、あなたと訪問者は製品情報に直接リンクできます。
モーダルは適切に拡大縮小されません。モーダルのコンテンツが画面の高さを超えるとすぐに、スクロールバーを追加するか、コンテンツを切り取る必要があります。それはモバイルで迅速に発生します。ユーザーがモーダルとして認識している典型的なデザイン（おそらくそれを彼とは呼ばないでください！）は、中央にボックスのある全画面オーバーレイです。オーバーレイをクリックすると、ボックスが閉じます。コンテンツが多すぎると、これは実際には機能しません。
いくつかの例：左は悪いモーダル、右は良いモーダルです。
質問に答える唯一の正しい方法は、ユーザーがアプリケーションをどのように使用し、製品と対話しているかを理解することです。
どちらの提案も、製品に注意が必要であることを前提としています。
Modalsは、ユーザーが製品を頻繁に切り替えるであり、相互作用が制限されている場合に適しています。
新しいページは相互作用がさまざまで多少複雑の場合に適していますが、他のプロジェクトへの切り替えは簡単ではありません。
Webサイトの構築に使用されるテクノロジーは、Webサイトのレイアウトを選択する上で重要な役割を果たします。
ページの読み込みに時間がかかる製品ごとに個別のページを使用すると、ユーザーの待ち時間が長くなり、ユーザーエクスペリエンスが向上しません。スクロール可能な情報が多いモデルは、ウェブサイトでも見栄えが悪くなります。
Single Page Application（SPAs） のようなテクノロジーを使用すると、サイトが初めてロードされたときにデータがロードされ、ページをロードせずに必要なときに即座に情報が表示されます。これは、ユーザーが自分がどこにいて、どこからこのページに到達したかを追跡するのに役立ちます。
私の結論は、単一ページのアプリケーションで複数のページを使用することが適切だということです。