web-dev-qa-db-ja.com

Outlookスタイルのマスター詳細を非全画面表示に適合させる

Webアプリのマスター/詳細グリッド(左側の狭いマスター、右側の広い詳細ペイン)がOutlookやiPad Mailアプリのようなフルスクリーンではなく、代わりに垂直方向にスクロールできるページに埋め込まれている場合、どこでマスターリストの下にある要素が選択されているときにグリッドの上部がページからスクロールされると、詳細ペインが垂直に表示されますか?

詳細ペインのコンテンツをビューポートの上部に表示して、ユーザーにスクロールして表示させる必要がありますか?または、ユーザーがグリッドの下部にぶつかるまでユーザーが下にスクロールするときに、詳細ペインのコンテンツをユーザーに「追従させる」必要がありますか?または別のオプションはありますか?

私が念頭に置いている特定のユースケースは、25アイテムを超えないマスターリストです。リストの一番下までスクロールすると、小さなブラウザーではリストの一番上が非表示になる可能性がありますが、短いほど短いです。マスターリストに個別のスクロールバーを配置したくない。

私はこの問題に直面する最初の人ではないと確信しています。オプションとは何ですか?

6
Justin Grant

私は、モックアップを見ずに一般的なユースケースに答えるのは難しいと思いますが、特定のユースケースでは、次のことが頭に浮かびます:

  • 原則としてスクロールバーが不要な場合は、ユーザーに明示的なナビゲーションを提供する必要があります。リストをスクロールする方法を参照できない場合、ユーザーは満足しません。
  • あらゆるUXデザイナーの最大の敵は、既存のパターンに依存するのではなく、新しいロジックを思いつくことです。ソフトウェアを使用するだけでなく、ソフトウェアの仕組みを学びたいユーザーは多くありません。新しい要素/ロジックは、使いやすさの向上よりも混乱をもたらすことがよくあります。
  • とはいえ、マスターリストがページに適合しているかどうかを確認してみませんか?存在する場合、スクロールバーを表示しません。これは、ほとんどのコンテンツ要素のデフォルトの動作です。
  • この答えが絶対に受け入れられない場合、私はこのようなものを提案します: enter image description here 基本的に、下部/上部の矢印をクリックすると、非表示のアイテムがスクロールして表示されます。
1
mikryz