最近の多くのWebサイトには、中央揃えのコンテンツ領域があります。http://ux.stackexchange.comがその例です。
ただし、一部のサイトは左揃えです。 http://forums.Adobe.com/index.jspa 、 http://www.area17.com/ 、 http://30Elm.com / 、 http://www.jefffinley.org/ 。
これは単なるデザインの好みですか、それとも本当のユーザビリティの理由がありますか?
中央揃えのレイアウトが表示されたときに「左揃えで表示されますか?」と言うクライアントにまだ会っていません。そのため、IXDAディスカッション掲示板の Centered Layout vs Left-Aligned Layout スレッドで提示された理論のうち、これは、中央レイアウトの読みやすさの向上について賢明なケースを作るように見えました。
左揃えは悪いことではないかもしれませんが、ワイドモニターでは、多数のアイテムを開いていてウィンドウが最大化されていない場合、中央に配置されたコンテンツデザインの周りに視覚的な「空白」があり、読みやすさが向上します。 。余白の余白が少ない左揃えのサイトに出会いすぎて、そのサイトを他の画面コンテンツから分離しようとすると目が動かなくなる。
--Ferg
事例として:最大化されたウィンドウの半分(または外れ値のQSXGAユーザーの場合、most)が空白で描かれると、混乱の瞬間があります。加えて、ディスプレイの端は読書のタスクから注意をそらす傾向があります。
これを自分でテストするには、ライトを暗くして、モニターの端にある1000pxの左揃えのテキストブロックを、同じテキストを中央揃えで読み取ろうとします。視覚の焦点がディスプレイの端にあるときはいつでも、リフォーカス/目の疲れに気づく傾向があります。
サイトのコンテンツを中央に配置するもう1つの理由-一部の人々はホワイトスペースの大きなチャンクを我慢できず、コンテンツに焦点を合わせる前にブラウザーのサイズを変更してホワイトスペースを削除する必要があるようです。
From 正しい検索結果ページのレイアウトの選択:幅を最大限に活用する :
私のフィールド調査では、固定幅レイアウトの右側に表示される大きな空のスペースに対する人々の反応を観察しました。内容のないそのすべての空間は、私がピクセル恐怖症としか言えないものを引き起こします。そのスペースが最初に開いたとき、人々は通常顔をしかめ、ウィンドウの幅を減らして空のスペースの一部を削除しようとします。ブラウザウィンドウを最大化したほとんどのWindowsユーザーは、ウィンドウのタイトルバーにある[元に戻す]ボタンをクリックしてこれを行います。これにより、ウィンドウサイズがサイトに対して小さすぎる場合があるため、ユーザーはウィンドウサイズを手動で調整する必要があります。顧客がブラウザウィンドウの幅をいじるのに忙しいとき、彼らはショッピングやサイトの広告を見ていません。実際、それらは通常、ますますイライラしており、それは彼らがあなたのWebサイトのすばらしい機能との相互作用を開始する前でさえあります!
ああ、ウェブサイトの左揃えをやめてください。私は30インチのモニターを使用していて、左揃えのWebサイトを読んでいると、頭を45度回転させ続ける必要があります。これは非常に不快で、サイトを離れたり、本当に重要な場合はブラウザーウィンドウ全体を中央に置いたりします。 。
私は確かに少数派であることを理解していますが、最近ではより大きなモニターがますます主流になりつつあり、この変化を説明することは良い考えかもしれません。
フィットの法則によるユーザビリティの向上 はこれについて言及しています。
記事の終わりに向かって、5つの「魔法のピクセル」(ユーザーのカーソルが置かれている現在のピクセルと画面の4つのコーナー)について説明しています。
残念ながら、ウェブデザインは通常、コーナーを活用できません。そのため、これらの主要な場所の平均が採用され、最終的に画面の中心に近くなります。
左揃えと中央揃えのページレイアウトのトピックに関する統計を検索しているときに、このページに遭遇しました。議論についての逸話的な情報と個人的な好みのみがあるようです。
IMOの左揃えのコンテンツは、画面のはるかに流動的な使用を必要とする多くのテキストを保持するフォーラムなど、生きている何かを暗示的に示し、センターデザインは、消費者のエンゲージメントに関連している可能性がある、よりパッシブな読書体験を暗示しています。
メディアクエリが左揃えのページをデザインする新しい機会を提供し、画面の右側(以前は空)を使用するかどうかを私たちは疑問に思っています。スマートフォン。
システムに関して-あなたがそれにいくつかの特別な機能を持っている状況を除いて、多分そうではありません。ユーザーがコンテンツの周りをすばやくクリックする必要があるゲームで、一部のクリックがコンテンツの端で発生する場合があります。
ただし、一般的に、ユーザビリティはシステムにユーザーの期待をよりよく反映させることであるため、非常に重要になります。私は、ほとんどのユーザーがある程度のバランス感覚を持っていると思います。レイアウトをどちらか一方に揃えると、ウェブサイトのバランスが取れているという感覚が乱され、ユーザーの知覚では完璧ではなくなります。これにより、ユーザーはそれを「使いにくい」「使いづらい」と感じるかもしれません。
考え直した。右利きの私は、カーソルを画面の右側に置いておきます。ばかげた好みかもしれませんが、そうです。そのため、画面の左側に移動するのはあまり便利ではありません。これはタブレットではさらに重要になります。通常は左手で持ち、右手で操作します。つまり、コンテンツが左側にあるほど、手を動かす必要があります。ある時点でそれは重要になります。
人間工学については、経験から導き出せるもの以外はあまり知りません。とはいえ、座っている人の頭と目にとって最も快適で自然な姿勢は、真正面を向いていると思います。彼らが姿勢を気にするなら、彼らの頭はこの位置にあるとき画面の中央に揃えられます。
したがって、コンテンツが中央に配置されたサイトを表示するほうが、おそらく手間がかかりません。
はい、中央揃えのページの方が使いやすさの観点から優れています。画面の解像度が異なるため、左右の空のスペースが調整され続け、ユーザーが水平スクロールを取得しないためです。加えて、ルックアンドフィールの観点からは、中央揃えのページの方がエレガントで、左または右揃えのページになっています。
ほとんどの場合、これはデザインの好みだと思いますが、@ pelmsがコメントで指摘しているように、「正しい」ように見え、ユーザーの期待に応えているという事実に基づいています。
本や新聞を見ると、それらのコンテンツは利用可能なスペースに集中しています。
リンク先のサイト(エリア17など)でも、左側にマージンがあります。
私たち人間が読むときは、テキストを表示する表面に対して垂直にテキストを見ることが望ましいです。
印刷された本の大きな利点の1つは、自動的に、簡単に、それらを自動的に配置できることです。
テストとして、視線に対して垂直ではない面からテキストを読み、完全に水平ではないテキスト行で試してください。余分な労力が必要であることがわかります。
対角線ビューは、幅が数インチのモニターの近くに座っていて、テキストが目の前にない場合に発生します。
コンテンツを中央に配置すると、おそらくユーザーの目の前になるでしょう。
ナビゲーションなど、長期間にわたって詳細に読むことを意図していない補助テキストは、中心から外れるように設定できます。
これは、テキスト行が約90文字を超えてはならない理由でもあり、CSSではmax-width
プロパティ。関係が発生するのは、長すぎる行のヒントを読んでいるときに、テキストに対して十分に垂直ではないためです。長い行をゆっくり読むと、疲れが早くなります。