明確な視覚的階層でUXを後押し

インターネットが遠い幻想だったので、視覚的階層の概念はデザインに適用されました、そしてそれはそれが印刷広告の頂点にあったのと同じくらい現代の製品デザインにおいて重要です。

視覚的な階層は、ページがデジタルであるか印刷であるかに関係なく、ユーザーがページ上の情報を取り込んで処理する順序を決定します。 これは、最適なユーザーエクスペリエンスを作成するための重要な部分です。

簡単に言えば、視覚的な階層の明確な感覚は、重要なコンテンツまたはアクションに向けて人々を導きます。 印刷広告では、これはストラップラインになりますが、デジタル製品では、ブランドメッセージまたは主要な行動の呼びかけになる可能性があります。

これは、戦略的な結果を達成する可能性を高めながら、整然とした目的のあるカスタマーエクスペリエンスを作成するための非常に便利な方法です。

ここでは、UXデザイナーがデジタル製品の視覚的な階層を明確に把握し、カスタマーエクスペリエンスを次のレベルに引き上げるために実行できるいくつかの手順を示します。

UXとブランドの目標を定義する

多くの製品チームは、さまざまな方法を使用して、製品の各セクションのUX目標をすでに定義しています。

SMART方法論の基準（特定、測定可能、機能可能、関連性、Tラック可能）を満たすことでUX目標の定義を形成することは、これを行うための一般的な方法の1つです。 ここにそれについての良い記事があります。

同様に重要なのはブランドの目標です。 これらは、ブランドと商業の両方の観点から、ビジネスの包括的な目標を反映しています。 自動車サービスのランディングページのブランド目標の例は、a）プレミアムサービスとしてブランドを確立し、b）車の検索を奨励することです。

カスタマージャーニーのさまざまなフェーズのUXとブランドの目標を文書化する最も簡単で効果的な方法は、共同のビジュアル階層ワークショップを実行することです。

MilanoteやSketchなどの広大なキャンバスのコラボレーションツールを使用して、プロトタイプの画面を大まかに時系列に並べます。 主要な実務家をオンラインまたは物理的な会議に招待し、UXとブランドの両方の観点から代表者がいることを確認します。

次に、画面共有（またはモニターへのプラグイン）を行い、注釈を付け始めます。

これにより、カスタマーエクスペリエンスの各セクションのUXとブランドの目標を特定するプロセスが開始され、残りの設計プロセス全体で活用できる戦略的なワークフローが開始されます。

明確な視覚的階層のためのランク付けアクションとコンテンツ

UXとブランドの目標が設定されたので、次は各アクションまたはコンテンツの適切な視覚的階層を定義し、その後の設計作業で参照できるように文書化します。

まず第一に、分類法が必要です。 1から3のスケールを使用するのが最適です。1が最も重要で、3が最も重要ではありません。

前にプロファイルしたbroad-canvas形式を使用して、プロトタイプレイアウトに共同で注釈を付け始めます。

この例では、「このブランドのサービスについて詳しく知り、自分の予算、ニーズ、好みに合っているかどうかを判断したい」というUXの目的があります。 ブランドの目的は、a）ブランドをプレミアムサービスとして確立し、b）車の検索を促進することです。

これに照らして、500台以上の車から理想的な車を見つけるというブランドメッセージには、付随するフォームとCTAと同様に、1の階層が割り当てられています。

包括的なカスタマーエクスペリエンスにとって重要であるにもかかわらず、実際のロゴ（およびナビゲーション）には2が割り当てられています。これは、UXおよびブランドの目標を達成する上でそれほど大きな役割を果たしていないためです。

サポートコンテンツには3のマークが付いていますが、これは直感に反しているように思われるかもしれません。 ただし、ブランドメッセージングと「開始」機能を主な焦点として、次にサービスのプレミアムIDと構造を確立するためのロゴとナビゲーション、そしてサポートコンテンツを中心に、形になり始めているナラティブフローに準拠しています。安心させ、コンテキストを提供し、顧客に刺激を与えます。

デザイナーが視覚的な階層を考慮に入れることに慣れてくると、それが明らかにする物語の可能性を理解し始め、ユーザーインターフェイスと彼らが語るストーリーに真の深みを加えることができます。

デザインシステムに視覚的階層を構築する

目標と視覚的階層のランキングが設定されたので、それらを実現する視覚言語を作成できます。 すでに設計システムが導入されており（そうでない場合は、最初にこれを実行する必要があります！）、さまざまなUI要素がすでに設計されていると仮定します。

最初に始める場所は、構成、つまり必要なテンプレートのレイアウトです。 ランクの高い要素をどこに表示するかを検討します（前述のように、常に最も期待されるとは限りません）。 さまざまなシナリオに対応するには、複数のバリエーションが必要になる場合があります。 プロジェクトの後半で見落とされないようにするために、設計者は時間をかけて作成する必要があります。

設計プロセスの後半で、UIパターンのライブシンボルを使用して、いくつかのモックアップの例を設計システムドキュメントに含めることができます（したがって、プロジェクトに取り組んでいる設計者は最新バージョンを使用できます）。

構成の幅広いアイデアが確立されると、UI要素のバリアントの作成を開始できます。

控えめなページヘッダーを取ります。 HRコンサルタントの最近のプロジェクトのこの例では、さまざまなランクの視覚的階層に対応するために、設計システムに3つのバリエーションがあります。

設計者は、UIの構成要素を使用してこれを拡張できます。 たとえば、人気のある求人アプリの最近のプロジェクトでは、コンテンツパネルを区別するために深度が使用されました。深度が大きいほど、視覚的な階層が高くなります。

視覚的階層は、ブランドの視覚言語のほぼすべての要素（構成、タイポグラフィ、奥行き、画像、図像、声のトーン）に合わせて設計できます。 デザインが深くなるほど、顧客体験はよりまとまりがあり、焦点が絞られます。

要約

視覚的な階層ワークフローを設計プロセスに組み込むと、ユーザーエクスペリエンスが大幅に向上します。 これは、デザイナーにさまざまなタイプのコンテンツにランクを割り当てる手段を提供することで実現され、順序付けられた直感的なだけでなく、主要なブランド目標を達成できるユーザーインターフェイスを実現します。

明確な視覚的階層は、UXを向上させるだけでなく、設計プロセスに戦略的な焦点を与える持続可能なワークフローを設定します。これは、最新の製品設計環境に不可欠です。

Toptal Designブログでさらに読む：

• 設計原則：階層の概要
• UIデザインのベストプラクティスとよくある間違い
• ゲシュタルトのデザイン原理を探る
• 情報アーキテクチャの包括的なガイド
• これらの成功したインタラクションデザインの原則でUXを後押しする