ウェブサイトのインタラクションデザイン：情報デザインにおける「父と子の関係」

インタラクション デザイン作業の中核は、情報アーキテクチャとインタラクションの詳細設計にあります。情報アーキテクチャには、情報の分類と情報表示ロジックの設計が含まれます。インタラクションの詳細は、主にコントロールの選択、インタラクション効果の定義などで表されます。情報設計において、最も難しい問題は、情報が多すぎて設計結果が満足のいくものでないことです。では、要件を削減できない場合（情報が多すぎるため、要件自体を簡素化できる可能性があります）、このような問題をどのように解決すればよいのでしょうか。

一般的に、情報間の相互排除、情報間の相互補完、情報間の包含と包含される関係など、情報を設計する際には従うべき関係が数多くあります。そこで今日お話しするのは「父と息子の関係」についてです。いわゆる「親子関係」とは、インターフェース設計におけるコア情報と補助情報（類似情報）、キー情報と二次情報（非類似情報）の比較関係を指します。

1. デザインにおける「父と息子の関係」の重要性

ページを自明にできない場合は、少なくとも自明にしてください。これは、Krug 氏が「Don't make me think」で指摘した点です。 「父と息子」の関係の現れは、ユーザーに何に注意を払う必要があるか、現在何が最も重要であるかを説明し、メインのパスが妨げられないようにすることです（広告であっても、カスタマイズされていれば肯定的な意味を持ちます）。

2. デザインにおける「父と子の関係」の見つけ方

デザイナーはまず、デザインする必要がある情報間の関係を決定する必要があります。判断基準はビジネスロジックまたはユーザー操作ロジックになります。

たとえば、成功フィードバック ページなどです。ビジネス ロジックがここで終了し、次のアクションがない場合は、フィードバック情報がより重要になります。ビジネス ロジックでのこの成功したフィードバックがロジック内の単なるリンクである場合は、次のアクションのガイダンスがフィードバック情報よりも強力になります。

3. 「父と息子の関係」をデザインに反映させる方法

ステップ1: 情報分類

すべての情報を何らかのロジックに従って分類します (カードソート)。分類する前に、すべての情報を同じサイズ、フォント、色に設定します。

分類設計方法:

線：デザイン補助線、実線、点線など

表面: 背景色、背景フレーム

空白スペース: 情報の間に空白スペースを入れて区切る

たとえば、メール認証成功ページでは、ビジネスに応じて情報が 3 つのタイプに分かれています。

オリジナルページ

ステップ2: ページ上で情報が配置される順序

さまざまな情報がページ上に配置される順序は決まっています。この順序は標準である場合があります。たとえば、ページの成功フィードバックはページの上部に表示され、その後にガイドが表示されます。次に、以前に分類した情報をカテゴリ順にページ上に表示します。

ステップ3: ページ上の情報の優先順位を決める

ページ上で情報が表示される順序は一定の仕様ですが、情報の優先順位はこの仕様によって制限されるものではありません。優先順位を明確にした後は、それをデザインに反映させる必要があります。

優先順位付け設計方法論: レイヤー

レイヤーの概念は PS のレイヤーに似ています。最も優先度の高い情報がまずユーザーの注目を集め、ユーザーに親近感を与えるようにすることです。一般的な処理方法としては、影の追加、背景色の追加などがあります。

たとえば、メール認証成功ページでは、ユーザーに個人情報の入力を促し、それを強調するために背景色と影を使用します。

ステップ4: 大きなフレームワークが設計された後、設計ユニットは情報の優先順位を決定します

クラス単位の情報の設計方法は、上記方法と同様です。

例えば、会員情報入力ガイド内の情報設計：ページ情報はタイトル、アクション、説明言語の 3 つのカテゴリに分かれています。アクションはタイトルの直後に配置する必要があります。

解釈型言語はアクションを中心に展開されます。情報間の空白に注意してください。

ステップ5: インタラクションの詳細を調整する

上記の設計手順を完了すると、ページ情報は基本的に問題ありません。次に、インタラクションの詳細を調整して、ユーザーが視覚的な観点から情報を見つけられるようにすることに重点を置きます。

デザインアプローチ: フォント、フォント サイズ、色、スタイルを別々に扱います。

メール検証成功ページでは、成功プロンプトのテキストの色は #666666、12 px (Web サイトの標準)、ガイド テキスト内のリンクの色は #0066cc、マークは 14 px 太字などです。

ステップ6: 減算

このステップは不可欠です。最初は、ページデザインの効果を最大限に引き出すためにさまざまなエフェクトが使用されますが、最終的にはページを全体的な視点から見て、過剰なデザイン要素を削除する必要があります。

最終的なデザイン効果:

ページの情報階層は明白で、「父と息子」の関係が特に顕著です。

4. 日常デザインにおける「父と息子の関係」の応用

A. Apple.com

Apple公式サイトのホームページの情報デザインには、強調と副次、中核と補助の関係が含まれています。

B. Amazon.com

Amazon のデフォルトホームページの部分的なデザインでも、運用情報とルーチン、キーとセカンダリ、コアと補助の間に比較的明らかな関係があります。

Ps: ナビゲーションなどの一般的な情報自体は最も重要かもしれません。ただし、Web サイトが成熟すると、ユーザーはナビゲーションに対する意識が高くなり、視覚的な強化は不要になります。運用情報自体の周期性により、一定の期間に強化する必要があることが決まります。

C. ギャップドットコム

トレンドブランドGap公式サイトの婦人服ページでは、人物の服装の大きな写真を主なプロモーション方法として採用しており、情報設計の面では、操作情報と従来情報、コア情報と補助情報の関係が非常に明確になっています。

デザイン手法のガイダンスは、確かにページの標準化と規則性を確保できますが、具体的な該当プロジェクトでは、どのデザイン手法を採用するかについて、デザイナーが深く考え、分析する必要があります。同時に、プロジェクト完了後にデザインを見直し、経験をまとめることで、より大きな進歩を遂げることができます。

出典: http://www.aliued.com/2012/07/28/1021/

原題: ウェブサイトのインタラクションデザイン: 情報デザインにおける「父と子の関係」

キーワード: ウェブサイト、インタラクション、情報、計画、父と息子の関係、計画作業、検証、情報、ウェブマスター、ウェブサイトの宣伝、収益化