視覚的階層

視覚的階層とは、画面上の要素の配置方法であり、それぞれの要素が読まれる前に、その相対的な重要性がすぐにわかるようにするものです。これは、サイズ、太さ、色、コントラスト、間隔、位置、グループ化などによって生み出され、ページ上で注意が移動する順序を決定します。人は読むよりもざっと目を通すため、階層構造は、その場にとどまるか離れるかの判断を下す前に、しばしば唯一の情報伝達手段となります。

機能的な階層構造は、ページ読み込み直後に「このページは何について書かれているのか」「ここで何ができるのか」「次にどこを見ればよいのか」という3つの疑問に答えます。階層構造が明確であれば、文章全体を読まずにざっと目を通した訪問者でも、正しい方向へ進むことができます。一方、階層構造が平坦だと、すべての要素が等しく主張し合い、視線の誘導経路がなくなり、訪問者は理解するために文章を読まなければならなくなりますが、多くの人はそうしないでしょう。

階層構造は、強調だけでなく抑制によっても形成される。何かを目立たせるには、他のものを目立たなくする必要がある。そのため、複数の関係者がそれぞれページに対する権利を主張する組織では、階層構造は必然的に崩壊していく。そのメカニズムはよく知られている。四半期ごとに別の要素が昇格し、何も降格されないため、2年後にはページには6つの競合する焦点が生まれ、階層構造は完全に失われてしまう。階層構造を回復するには、視覚的なものではなく、組織的な優先順位に関する明確な決定が必要となる。

ホワイトスペースは、最も過小評価されているツールのひとつです。要素の周囲にスペースを設けることで、その要素を際立たせ、重要性を高めることができます。また、要素間のスペースは、境界線や見出しを必要とせずに、それらが別々の要素であることを伝えることができます。ファーストビューにより多くのコンテンツを収めるためにホワイトスペースを減らすという要望は、追加コンテンツによるメリットよりも、階層構造を損なうことが多いのです。なぜなら、情報がぎっしり詰まったページは、すぐに内容を伝えることができず、すぐに内容を伝えることができないページは、スクロールされて見過ごされたり、放棄されたりするからです。

階層構造は視覚的なものだけではなく、視覚的なものとして扱うとアクセシビリティ上の問題が生じます。ページの意味構造は、見出しレベル、ランドマーク、読み上げ順序などによって表現され、支援技術が伝える階層構造そのものです。そして、この階層構造は視覚的な階層構造と一致する必要があります。視覚的に最も目立つ要素がスタイルが適用されていないdiv要素としてマークアップされているページや、構造的な意味ではなく見た目を重視して見出しレベルが選ばれているページは、スクリーンリーダーのユーザーにとって、視覚に問題のないユーザーとは異なる階層構造として認識されます。

階層構造は実際のコンテンツにも耐えなければなりませんが、ほとんどのデザインはローンチ後にこの点で失敗します。6語の見出しと厳選された商品画像で明確に読み取れるレイアウトも、40語の見出し、画像の欠如、長い商品名、そして販売チームが適用した3つのプロモーションバッジでは、全く異なる挙動を示します。理想化された例ではなく、最も長くあり得る文字列や最も好ましくないデータなど、現実的なコンテンツ範囲を想定してデザインすることが、階層構造が最初の1週間で崩壊するのを防ぐ鍵となります。これはまた、デザイナー以外のユーザーが強調表示を追加できる仕組みに対するガバナンスの必要性を示唆するものでもあります。バッジ、バナー、ハイライトスタイルを無制限に適用できると、時間が経つにつれて強調表示の意味が失われてしまうからです。

階層構造の検証は簡単だが、めったに行われない。5秒テストで、人々が第一印象から実際に何を受け取るかが明らかになる。デザインをぼかして大まかな形状だけが残るようにする目を細めるテストで、単一の焦点が残るかどうかが明らかになる。ページを見出しのアウトラインだけで読むと、視覚的なスタイルなしで構造が理にかなっているかどうかがわかる。これらのチェックは、 UX監査結果として得られるルールを、定義されたタイプスケール、間隔スケール、および強調システムとしてエンコードします。 製品設計 新たなページが構築されるにつれて、階層構造が再び崩壊するのを防ぐのは、仕事そのものである。