モバイルのモーダルダイアログ-[戻る]ボタン
小さなギャラリーがある1つのサイトがあります。画像をクリックすると、チームメンバーの説明と追加の画像が表示されます。
通常のデスクトップでは、PopUp（または何らかのライトボックス）を使用して追加情報を実装することを考えていました。これは、ユーザーがXをクリックするか、ESCキーを押すと、どういうわけか問題ありません。そしてダイアログが閉じます。
モバイルデバイスでは、コンセントと同じスタイルが表示されます。しかし、限られた画面サイズとPopUpのコンテンツの量が原因で、これは多かれ少なかれ画面全体をブロックします。画面に収まらないこともあり、ユーザーは上下に移動する必要があります。
ここでの主な問題は、このポップアップを閉じる方法です。モバイルデバイスには、ESCキーはありません。ユーザーが閉じるボタンを簡単に見つけられない場合は、戻るボタンで閉じます。ただし、[戻る]ボタンを使用すると、Webページを離れて前のページに戻ることも意味します。
追加情報を適切に表示する方法はありますか？
前述のように、モバイルのモーダルは「閉じる」または「X」で閉じる必要があります。
しかし、モーダルを回避する方法があります。 「詳細情報を表示する」ボタン（アイコンボタン、テキストボタン、または単なるテキストリンクなど）のようなCTAを表示する必要があります。これは、情報ページ（右から左）にスライドします。これは、画像の上に追加のレイヤーがあるように感じます。このページでは、ユーザーはスクロールして必要なアクションを実行できます。 「画像に戻る」CTAを配置できます。さらに、右にスワイプすると、情報ページがスライドして表示され、画像が再び表示されます。
モーダルの右上隅に「X」または「閉じる」固定位置ボタン/リンクを配置するのが最適だと思います。したがって、ユーザーがモーダルを下にスクロールする必要がある場合でも、「閉じる」インジケーターは表示されたままで、簡単に見つけることができます。
また、コンテンツがビューポート以上の場合は、ユーザーが垂直方向にスクロールして、ユーザーが下にスクロールするだけで済みます。