web-dev-qa-db-ja.com

ダッシュボードのメインコンテナーの最適な配置は何ですか?

少しのコンテンツが表示される場合、ダッシュボードのメインコンテナーの最適な配置は何ですか?

ダッシュボードがクラシックな構造であるとしましょう-ヘッダー、フッター、サイドバー、右側のメインコンテナー。このコンテナには通常、いくつかのテキストと表(小さなwith)または1から2のグラフィックスがあります。これのための最良のアプローチは何ですか:

  • 左揃えの要素。
  • 右揃えの要素。
  • 正当化されたコンテンツ(全幅のテーブル)?

私の意見では、中央揃えのコンテンツでは、使い慣れたパターン(Fパターン、Zパターン)を適用できないため、左揃えのコンテンツが最良のソリューションです。どう思いますか?

更新-例:

enter image description hereenter image description hereenter image description here

2
Madalina Taina

説明したように、典型的なビジネスダッシュボードには「クラシック」な構造があり、画面スキャンに共通のパターンを適用できます。ただし、スキャンパターンは、コンテンツを構造化して画面に表示する方法にも影響されると思います。そのため、新しいデザインを作成するか、既存のデザインを変更するかによって、ある意味でキャッチ22になります。

より完全な答えを提供するには、いくつかのギャップを埋める必要があると思いますが、ダッシュボードの設計に関する一般的なアドバイスは、以下の点のいくつかを考慮することです。

  • 空白、半分空の状態、および完全な状態:ユーザーが初めて見たときの状態はどうなりますか?データがいっぱいになったときや、ダッシュボードが完全にいっぱいになったときはどうですか?
  • 目的:意思決定用に設計されたダッシュボード(つまり、ビジネスインテリジェンス)の場合、混乱を避けて主要な情報を強調表示する必要があるため、設計に影響を与え、典型的なレポートまたはステータス追跡ダッシュボードと比較したレイアウト。
  • ウィジェットまたは視覚化:使用される「ウィジェット」の数とタイプに応じて、他のものよりも適切な配置またはレイアウト戦略が異なる場合があります。
  • 視点:画面の実際のサイズと設計対象のデバイスに応じて、オフィスのほとんどのデスクトップセットアップにはデュアルモニターとスキャンパターンはシングルモニターと比較されます。

おそらく他の要因もあるでしょうが、私は実際にそれを経験したことも、調べたこともありません。

[〜#〜] update [〜#〜](提供されたスクリーンショットに基づく)

もちろんこれをテストする必要がありますが、優れたデザインの基本原則(単純で明確)を考えるだけで、追加の配置の線を作成し、中央に配置されたレイアウトでユーザーが画面上で視線を移動できるようにします。あなたのデザインに応じたフルスクリーンのものと比較して

enter image description here

今、私は必然的にデザインの原則を引用することはあなたの主張を裏付けるのに十分な証拠になると言いますが、何人かの人々との簡単なテストと、ページ上のコンテンツを見つけて見つけるのがどれだけ迅速であるかを見れば、おそらくうまくいくでしょう。

3
Michael Lai

私はこの「ボトムアップ」に近づこうとしています。 「見栄えがよい」レイアウトを探すのではなく、まずコンテンツブロックのいくつかの要件を検討します。

メインコンテナーのコンテンツのブロックには、最小幅と最大幅の幅が必要です。テキストの場合、行は短すぎたり長すぎたりしてはならず、テーブルは狭すぎてはいけません。

実際の回答では、スクリーンショットのように、テキスト全体の幅を使用しないでください。ただし、テキストを読みやすくするために、すべてのコンテンツを列に収めてください。

2番目の例が最適のようですが、テキスト列を狭くしてください。テキストを正当化すると、実際の「列」を作成するのに役立ちます。テーブルはマージンに従う必要はありませんが、それらは明確にする必要があるスペースです。たとえそれがテキストより広い場合でも

1
gerstemout

私はあなたの画像を見て、どの画像が一番好きかを自問しましたが、2番目の画像を選びました。

enter image description here

このデザインは、画面の中央にある情報ボックスの周りのスペースなどの要素が画面上の他の要素よりも普及しているため、私にはもっと飛び出しました。この画面が表示されたときに、何を見ている必要があるのか​​がわかります。

テキストの本文を左揃えにすると、中央揃えになっているタイトルと情報ボックスにユーザーが集中するようになるため、混乱が少なくなります。

これは Rule of Odds の興味深い解釈のようです。

画像1と3は、主に情報階層を設定していないため、あまり魅力的ではありませんでした。画像2がうまくいったこと。

1
Kitanga Nday