ウェブサイトのデザイン分析: 適切な視覚的階層構造を確立する

インターネット上の情報量が飛躍的に増加するにつれ、ユーザーが単一の Web ページを閲覧するときに、私たちが想像しているように、記事を読むときのように左から右へ、または上から下へ 1 ページずつ読むことはなくなりました。なぜでしょうか。

1. 視覚的な階層はなぜ重要なのでしょうか?

左側はデザイナーがユーザーに期待するブラウジング方法、右側はユーザーが実際にブラウジングする方法です（「考えさせないでください」より）

ユーザーがウェブサイトに来るとき、ニュースを読んだり、買い物をしたり、新しいメッセージをチェックしたりするなど、それぞれに特定の目的があります。しかし、情報量が多すぎるため、1つ1つ確認するには時間がかかります。そのため、ウェブサイトは主流のユーザーの特性を把握し、重要なポイントを彼らにプッシュする必要があります。ユーザーは、目的や興味のあるポイントを見つけて初めて、閲覧を続行したり、次のステップに進んだりすることができます。そうでなければ、離脱してしまいます。

ユーザーの時間は限られており、インターネット上の情報量は膨大です。これら 2 つの理由こそが、適切な視覚的階層を構築してユーザーに提示し、ユーザーが目的のものをすばやく見つけられるようにするビジュアル デザイナーの能力を試すものなのです。

2. 適切な視覚的階層を確立することの役割

1. 認識効率の向上

2. 視聴者の興味を刺激する

以下にいくつか例を挙げます。

左の地図には都市レベルの地名が表示されています。ユーザーが通りレベルで検索すると、そのブロック内の店舗が表示されます。状況によっては必要な情報のみが表示されるため、ユーザーは目的の場所を効率的に見つけることができます。

ニュースを読むとき、私たちはまずその日の見出しに注目し、次に編集者のおすすめに注目します。タイム誌の表紙は、一目で見出しとロゴが目に入りやすく、優先順位が非常に明確に扱われています。

映画「シンドラーのリスト」のショットでは、強い色のコントラストを使用して視覚的な階層を作り出し、観客に深い印象を残し、名作となりました。

3. 視覚的な階層を確立する方法

参考までに、3 つの方向を整理しました。

1. 表示しないものを決める

ページのシンプルさの前提は、提示されるコンテンツがほとんどの場合に主流のユーザーが必要とするものであるという点です。これにより、デザイナーは大量の情報を選別せずに優先順位を付けるのではなく、限られた重要な問題の解決に集中できます。

上の写真は、私たちが自宅でよく使うリモコンです。ほとんどの機能はほとんど使われないか、まったく使われません。右の写真は、あまり使われない機能キーを削除しただけです。前と後を比べると、後者の方がはるかにリラックスした感じがします。 - 「シンプルさ第一」より抜粋

その後、デザイナーが残りのボタンをデザインします。リモコンはより使いやすく、邪魔にならないものになると思います。

Outlook ウェブページ インターフェースでは、メールの操作エントリはデフォルトで非表示になっています。ユーザーがメールを選択した場合にのみ、メールの操作が表示されます。同時に、ドロップダウン メニューには、通常とは異なる操作が非表示になります。たとえば、「全員に返信、転送」は「返信」メニューの下に非表示になります。このように非コア コンテンツを非表示にすることで、ユーザーは注意を払うべき情報と主要な操作に集中できます。

2. 情報の深層処理

情報をより早く認識し、受け取ってもらうためには、情報を処理する必要があります。単純なテキストリストでは、ユーザーは落ち着いて読む必要がありますが、深く分析された情報は、表面的に分析された情報よりもユーザーに深い印象を残します。

たとえば、ナショナル ジオグラフィックの「ブルー ホエール」ウェブサイトでは、シロナガスクジラの保護を訴えるために、まずシロナガスクジラの特徴と現在の脅威について人々に知ってもらう必要があります。ウェブサイトでは、シロナガスクジラを他の生物や人工物と動的に比較し、シロナガスクジラの重さや大きさを生き生きと伝え、シロナガスクジラに対する主な脅威を示すビデオを追加しています。テキストを読まなくても、ユーザーはウェブサイトが伝えたいメッセージを大まかに理解できます。

3. 組織情報

1) 情報間の関係を表現する

情報間の関係性には、並列性、関連、包含、因果関係などがあり、それぞれの関係性はさまざまな視覚的表現を通じて伝えられます。この領域は深く探求することができます。実際のプロジェクトで情報関係がどのように扱われているかの例をいくつか示し、前後の変化を確認します。

情報の関係

デザインにおける余白は非常に重要な要素であり、情報間の関係に対するユーザーの理解に直接影響を与える可能性があります。上図に示すように、不適切な余白により、「Chu Zhongtian」は「Lin Danda」と簡単に理解されます。

情報の並置

ソフトウェア内の多くの機能が並列ブロック構造になっているため、ユーザーは大きなブロック内で小さなブロックを見つけることができ、認識効率が向上します。たとえば、Excel インターフェースでフォント スタイルを編集したい場合、他のモジュールに邪魔されることなく、検索する 2 番目のモジュールをすばやく見つけることができます。

事例: 対外貿易メールインターフェースの最適化

上記は、当社の対外貿易メールインターフェースの現状です。すべての操作が並列に配置されています。機能の増加に伴い、ユーザー認識の効率が大幅に低下しています。最適化ソリューションは、関連する操作をグループ化することです。まさに、関連と並列の情報関係を利用した設計です。

情報の因果関係

上の写真はダイエットドリンクの広告です。前面と背面の文字の変化により、商品の効能がわかりやすく表現されています。当社の Web インターフェースでは、順序関係は主に色のコントラストと方向によって伝えられます。

たとえば、一般的なステップ バーでは、現在のステップが最も目立つフォーカスとなり、実行されたステップは 2 番目のレベルとなり、アクティブ化されているとユーザーに感じさせ、実行されていないステップは灰色となり、最も弱いレベルとなります。

下の図は、PayPal の支払いページの最適化プロセスを示しています。旧バージョンでは階層的な視覚的な違いがありますが、タスクを完了する視覚的な順序が乱れています。最適化後は、アクション ポイントが強調され、アクション前の視覚的な順序が同じ方向になっています。順序の関係は非常に明白で、ユーザーのタスク完了率を向上させることができます。

情報の包含関係

Fluent の新しいメール インターフェースでは、矢印とインデントを使用して、情報の包含関係を明確に表現しています。このスタートアップ チームは成功しませんでしたが、製品のデザインは学ぶ価値があります。

2) 提示された情報の重要度

情報同士の関係性を整理した上で、ページ全体の要点をつかみ、二次的な情報を分離してユーザーに提示する。これが、ビジュアルデザイナーがページをデザインする際に腕を振るうポイントです。

では、早速例をいくつか見てみましょう:)

上の写真はAirbnbの賃貸情報詳細ページです。家を借りる際に、入居者が最も気にする情報は、部屋の実際の景色、価格、家主の情報です。その詳細情報を見てみると、種類もいろいろありますが、ユーザーが最も気にする情報は、場所と占有面積の広さの3つで、入居者はこれらによって家の基本情報を一目で把握することができます。興味があれば、さらに詳細を見ていきましょう。

上の図は、デザイナーがデータ テーブルを最適化するプロセスを示しています。最初のバージョンは、単純な情報リストです。重複するテキストを削除し、テーブル自体のデザインを弱めてコンテンツ自体を強調した後、2 番目のバージョンは比較的明確になりました。3 番目のバージョンでは、引き続き重要なポイントを太字にし、配置を変更して、テキストの重複を再度減らしました。4 番目のバージョンは、テーブルのユーザー調査中に最も反応が良かったバージョンです。ユーザーはこのテーブルを長期間使用してデータを取得するため、デザインでは重要でないテキストを非表示にし、ユーザーがマウスを移動した後にのみデータの意味を表示します。一度教育されると、ユーザーはテーブルを見るときに多数の説明テキストに邪魔されることがなくなり、目的の情報を直接取得できます。重要な情報をキャプチャする一見単純なテーブルには、最適化の余地がまだたくさんあります。

上の写真は、私たちのチームが alibaba.com が提供するサービス紹介ページを改訂したプロジェクトです。改訂前は、デザインの階層が明確に区別されていなかったため、ユーザーはページに入ったときにサービスの概要をすぐに理解できず、さらに学習を続けるかどうかを判断できませんでした。改訂後は、サイズ比較を使用して、ユーザーの第一印象をつかむ情報を提示しました。ユーザーは、最初にニーズを満たしていると判断した場合のみ、閲覧を続行します。

3) ユーザーの行動を中心にレイヤーを設計する

ページ全体の要点を把握することはデザインの前提ですが、要点をどのように決めればよいのでしょうか。そのためには、ユーザーの特性を理解し、ユーザーがそのページにアクセスした際の主な目的は何なのかを理解する必要があります。そうして初めて、正しいことを確実に行えるデザインが可能になります。そうでなければ、どんなに階層化されたデザインであっても、ユーザーが望むものとはならない可能性があります。

Alipayは最近、新しいホームページをテストしています。Alipayのホームページで最も頻繁に行う操作はログインです。旧ホームページの最初の視覚的焦点はナビゲーションとアクティビティの促進でした。ナビゲーションが固定位置にある限り、ユーザーは必要なときに見つけることができます。ユーザーが頻繁にナビゲーションを切り替えてウェブサイトが提供するサービスを理解するのでなければ、ページの視覚的焦点にすべきではありません。この点で、新しいホームページはナビゲーションやその他のアプリケーションへの入り口を弱め、Alipay独自のブランドコミュニケーションとログイン行動を強化し、主流ユーザーの行動習慣と一致しています。

最近、チームでは背景スタイルの見直しを進めていますが、これもこの点に関係しています。左の図は、背景で長年続けられてきたナビゲーションスタイルです。操作インターフェースとして、ユーザーの目的が強くなります。ナビゲーションを強化すると、ユーザーがコンテンツを識別する効率が妨げられます。

右の図は、ユーザーの行動特性に基づいてナビゲーションを弱め、メインコンテンツの操作領域にユーザーの集中を促すデザインを示しています。

オンライン調査の結果、新しいスタイルのナビゲーションは視覚的に弱くなったものの、タスクの入り口を見つけるためのクリック率は古いスタイルよりも高く、検索時間は古いスタイルよりもわずかに短いというデータ結論が出ました。全体的に、新しいスタイルの方がパフォーマンスが優れています。

逆に、元のページに新しい機能を追加するなど、ユーザーの行動特性をよく理解していないと、さらなる機能強化が簡単に見落とされてしまう可能性があります。以下は、実際のプロジェクトからの例です。

下の左の写真の部分が追加された機能です。バイヤーがサプライヤーに問い合わせをする際に、現在の調達ニーズのグループを作成し、以前のコンテンツを再利用できることが期待されています。社内の議論では、このオプションを強化し、他のコンテンツのリーダーにする必要があると全員が感じていました。しかし、調査結果はまったく異なり、ユーザーはこのコンテンツを理解できなかったか、単に広告として無視しました。

調整されたバージョンでは、新しいオプションが単純な選択肢に弱められ、再利用された問い合わせの機能が分離され、ユーザーと業界の専門家に認められました。

視覚的な階層は、デザインがユーザーの期待と一致している場合にのみ効果的です。

まとめると、効果的な視覚的階層の確立は、主に次の 4 つの側面から始まります。

1. シンプルさ: 情報を選択的に表示し、ユーザーが限られた情報から重要なポイントを見つけられるようにする

2. 組織化：事前に情報を科学的に分類し、優先順位を整理して、より良いコミュニケーション効果を実現します。

3. プレゼンテーション: 複数のプレゼンテーション方法を組み合わせて、最適な視覚階層効果を実現します。この点を改良した後も、検討すべき点はたくさんあります。ここでは、いくつかのポイントをまとめます。引き続きご参照ください。

4. ガイダンス: ユーザーの習慣に従い、適切なガイダンスの推奨を提供する

いくつかのささやかな意見を皆さんと共有します :)

出典: http://www.aliued.com/2012/12/06/1355/

元のタイトル: ウェブサイトのデザイン分析: 適切な視覚的階層を確立する

キーワード: ウェブサイト、構築、良い、視覚的なレイヤー、インターネット、ネットワーク情報、情報爆発、爆発的な成長、ウェブマスター、ウェブサイトのプロモーション、お金を稼ぐ