Uxデザイン

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

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

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

強力な視覚的階層は、ナイキの何十年にもわたって持続してきました

1970年代のナイキと今日のナイキ：どちらも視覚的な階層の明確な感覚から恩恵を受けています。

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

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

ここにいくつかのステップがあります UXデザイナーデジタル製品の視覚的階層の明確な感覚を実現し、顧客体験を次のレベルに引き上げることができます。

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

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

S.M.A.R.Tの基準を満たすことでUX目標の定義を形作る方法論（ S 特定の、 M 測定可能、に実用的、 R 象、 T ラッカブル）は、これを行うための一般的な方法の1つです。それについての良い記事がありますここに。

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

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

次のような幅広いキャンバスのコラボレーションツールを使用するミラノテ、またはスケッチでさえ、プロトタイプ画面を大まかに時系列でレイアウトします。主要な実務家をオンラインまたは物理的な会議に招待し、UXとブランドの両方の観点から代表者がいることを確認します。

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

情報階層はUXデザインの重要な部分です

このプロジェクトは、ワークショップの目標を概説することから始まり、作業仮説に基づいて、以前に作成された事前入力された注釈を直接掘り下げました。

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

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

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

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

前にプロファイルしたブロードキャンバス形式を使用して、プロトタイプレイアウトに共同で注釈を付け始めます。

1099 vsw2時給計算機

UI階層は、優れたUXに不可欠です。

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

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

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

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

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

視覚的階層を設計システムに組み込む

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

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

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

視覚的な階層は、さまざまなUI要素の影響を受けます

この例のコアブランドメッセージングは、ページ上で最も重要なコンテンツと見なされ、ナビゲーションバーでサポートされ、次にコンテキストヘルプとサポートサービスがサポートされます。

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

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

UX階層の作成は非常に簡単なプロセスです

ページヘッダーの視覚的なデザインは、その階層を反映しており、何よりも写真と画像の組み合わせを使用して注目を集めています。

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

UI階層はさまざまな方法で実現できます

「マネーバー」の概要は、コンテンツの残りの部分（垂直方向と3Dの意味の両方）の上に配置され、ユーザーが最初に注意を払う要素になるように設計されています。

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

要約

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

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

•••