デザインにおけるビジュアルヒエラルキー

あなたのデザインは、誰かが何を見るべきかを伝えるために3秒間あります。すべてが同じように注意を求めて叫んでいたら、何も読まれず、何もクリックされず、ユーザーは去ります。これはデザイン意見ではありません。それはビジョンがどのように機能するかです。

ビジュアルヒエラルキーはこの3秒のウィンドウを制御するシステムです。以下は、実際に人々をガイドするものを構築する方法です。

ビジュアルヒエラルキーが本当は何であるか

ビジュアルヒエラルキーは、目が意図的な順序で要素を処理するように要素を配置することです。ランダムではなく、すべてが一度にではなく、順序で:最初にこれ、次にこれ、次にこれ。

脳は本のように上から下へページを読みません。シグナルをスキャンします。サイズ、コントラスト、色、間隔、位置はすべて、目に何が最も重要かを伝えます。よく構築されたヒエラルキーは、最も重要な要素を見落とすことが不可能で、最も重要でない要素を無視しやすくします。

5つのコントロール

すべてのビジュアルヒエラルキーは5つのレバーから構築されています。一度にすべての5つは必要ありません。特定のレイアウトに適切な組み合わせが必要です。

1. サイズ

より大きな要素は最初に見えます。これは最も明白なレバーであり、最も信頼できるものです。48pxのヘッドラインは常に14pxの段落の前に注意を引きます。サイズ間の比率がヒエラルキーを作成し、絶対数ではありません。

間違い:すべてを大きくすること。見出し、副見出し、本文、CTAがすべてオーバーサイズされている場合、ヒエラルキーが平坦になり、何もリードしません。

2. コントラスト

高いコントラストは目を引きます。明るいページの暗い要素、くすんだ背景の明るいボタン、グレースケールレイアウトの色付きバッジ。コントラストはサイズを変更せずに1つの要素を際立たせる最速の方法です。

これは逆にも機能します。低いコントラストは要素を後ろに押します。メタデータ、タイムスタンプ、およびセカンダリラベルは低いコントラストを持つべきので、プライマリコンテンツと競争しません。

3. 色

色は感情的な重さを作成します。灰色の海の中の単一の赤いバッジは常に注意を引きます。赤が特別だからではなく、その文脈で色彩エネルギーを持つ唯一の要素だからです。カラーパレットは、各色が定義された役割を持つときにヒエラルキーを提供します:CTAの場合は主要、本体の場合は中立、メタデータの場合は暗い。

4. 間隔

空白は空のスペースではありません。それはシグナルです。十分なスペースに囲まれた要素は重要と読まれます。なぜなら、スペースはそれを隔離し、呼吸するためのスペースを提供するからです。一緒に詰め込まれた要素は二次的と読まれます。なぜなら、何も際立たないからです。

ウェブデザインで最も一般的なヒエラルキー障害は、セクション間の間隔が不十分です。各セクションが次のセクションに流れ込む場合、目は1つのアイデアが終わり、別のアイデアが始まる場所を区別することができません。

5. 位置

LTR言語では、目は自然に左上隅から始まり、そこから予測可能なパターンに従います。最も重要な要素を自然な開始位置に配置すると、他のレバーが適用される前に利点が得られます。

単独の位置は弱いです。左上隅の小さな低コントラスト要素は、中央の大きな高コントラスト要素に負けます。位置は他の4つのコントロールを強化するときに最適に機能します。

スクイントテスト

これはあなたのヒエラルキーが機能しているかどうかを確認する最速の方法です。デザインで目を細めるまで、すべてが曖昧になります。見える要素は、あなたのヒエラルキーが優先順位を付けているものです。

目を細めたときに最初に見えるものがCTA、見出し、またはヒーロー画像である場合、あなたのヒエラルキーは機能しています。最初に見えるものが装飾的なサイドバーまたはナビゲーションバーである場合、そうではありません。

これには5秒かかり、ユーザーテストの前に80%のヒエラルキーの問題をキャッチします。

一般的なヒエラルキーの障害

すべてが太字です。 各段落が太字で始まる場合、何も強調されていません。太字は稀なときに機能します。

焦点が多すぎます。 3つの同じサイズ、同じカラフルな要素を持つページはヒエラルキーを持ちません。3つの競争相手がいます。ビューポートあたり1つの勝者を選択します。

モバイルを無視します。 1440pxスクリーンに設計されたヒエラルキーは、375pxの電話でしばしば崩壊します。空間関係が完全に変わるため、5つのコントロールは各ブレークポイントに対して再評価する必要があります。

コントラストなしの色。 色付きの背景の上の色付きボタンは消えます。ヒエラルキーは、焦点要素とその周囲の色コントラスト比が分離を作成するのに十分高い場合にのみ機能します。

実践中のヒエラルキーの構築

これは任意のページレイアウトの具体的なフレームワークです:

1. 1つのことを決めます。 このページで最も重要な単一のアクションまたはメッセージは何ですか?その要素は最大のサイズ、最高のコントラスト、および最良の位置を取得します。
2. 他のすべてをランク付けします。 ページ上のすべての要素の番号付きリストを作成し、重要度でソートします。ランキングは各要素が取得するレバーを決定します。
3. 層あたり少なくとも2つのコントロールを適用します。 最上位要素は大きなサイズ + 高コントラストを取得します。2番目の層要素は中程度のサイズ + 色を取得します。3番目の層要素は小さなサイズ + 低コントラストを取得します。
4. 破損するまで削除します。 ヒエラルキーが低下するまで要素を削除します。物事が壊れる前に削除した最後の要素はおそらく不要でした。

このフレームワークは、ランディングページ、ダッシュボード、記事、電子メール、およびユーザーが最初に見る場所を知る必要があるレイアウトに機能します。

よくある質問

デザインのビジュアルヒエラルキーとは何ですか?

ビジュアルヒエラルキーは、重要度順にデザイン要素を配置することです。サイズ、コントラスト、色、間隔、位置を使用して、目がページ上の情報を処理する順序を制御します。

ビジュアルヒエラルキーが重要なのはなぜですか?

ユーザーは読まず、スキャンするからです。明確なヒエラルキーがなければ、すべての要素が同じように注意のために競い、ユーザーが圧倒され、去ります。ヒエラルキーは要素の集まりを誘導体験に変えます。

ビジュアルヒエラルキーをテストするにはどうすればよいですか?

最速の方法はスクイントテストです。デザインをぼかすか目を細め、どの要素が見える状態のままかを確認します。これらはあなたのヒエラルキーが優先順位を付けている要素です。間違った要素が支配している場合は、正しい要素が先導するまでサイズ、コントラスト、または間隔を調整します。