web-dev-qa-db-ja.com

ポップアップまたはモーダルウィンドウがある場合の複数のスクロールバー。この設計パターンを実装する理由は何ですか?

ブラウザーで単一ページとフリースクロ​​ールビューとして実装されている特定のWebサイトで、ポップアップまたはモーダルウィンドウをトリガーすると、2番目のスクロールバーが表示され、ユーザーがウィンドウのコンテンツをスクロールできることがわかりました。プライマリスクロールバーもアクティブですが、ポップアップまたはモーダルウィンドウが画面の大部分をブロックするため、あまり効果的ではありません。

この実装アプローチには使い勝手の理由が非常に強いとは思えないので、有効な技術的な理由や制約があるのではないかと思っていました。しかし、UXデザインの観点から有効な議論がある場合は、その背後にある理論的根拠を見つけることにも興味があります。

enter image description here

そして、私はあなたがあなたをフォローしている人々を見ているときにMediumのウェブサイトでこれに気づきました。このようなWebサイトはUX/UIのベストプラクティスに従うと思うので、非常に驚​​きました...

enter image description here

4
Michael Lai

これは「機能」ではなく、悪い(または不幸な)設計であり、2つの理由があり、1つは技術的です。

  • モーダルのコンテンツまたはページのコンテンツの高さが、デザイナーが予想したよりも高くなっています。
  • モーダルの適切な高さを設定するための技術的コストは高すぎると考えられていました(そして、不幸な状況ではほとんど不可能です)。

二重スクロールバーは、モーダルのコンテンツとページのコンテンツの両方の高さがそれぞれのコンテナーよりも高く、モーダルコンテナーがページ幅の100%に及ぶ場合に発生します(したがって、ページ)。モーダルが非表示のコンテナに含まれている理由は、ユーザーがモーダルの「下」にあるものをクリックできないようにするためです。

状況を技術的に複雑にするいくつかの要因があります。

  • 多くの場合、コンテンツを完全に制御できません。
  • ユーザーに対するコンテンツのレンダリング方法(画面サイズやフォントレンダリングなど)を完全に制御することは決してありません。
  • さらに、高さはブラウザで制御するのが難しい場合がよくあります。

Webテクノロジーに精通していない場合、HTMLとCSS(マークアップとレイアウトを制御するための2つのコア言語)は、多くの状況で高さを制御するためのサポートが不十分です。ここで詳細に入ると、おそらく技術的になりすぎるでしょう。

2

UXの観点から言えば、canは、メインページの元の位置を維持しながら、ユーザーが長いサブコンテンツページを閲覧するのに役立ちます。

たとえば、メインページを1ページのレイアウトにする必要がある場合があります。これは非常にコンテンツが豊富で長いページになる可能性がありますが、コンテンツが豊富で長いサブページも存在します。モーダルウィンドウでサブページを開く場合は、そのサブページのみを参照し、メインページを残した位置に維持することをお勧めします。

技術的には両方のアプローチが可能です–したがって、これは主に技術的な問題よりもux設定の問題であると思います。

1
tillinberlin