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

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

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

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

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/

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

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

<<:  百度起業家トレーニングキャンプが熱い議論を巻き起こす:起業家精神は流れに沿う必要がある

>>:  貿易企業のためのインターネットマーケティングの実施方法

推薦する

中国最大のリンクプラットフォーム「アリウェイ」が数日間連続DDos攻撃を受けた

中国最大のリンク交換プラットフォーム「AliVV」の公式サイトが数日連続で開けない状態が続いており、...

SEOサービスを探す際に注意すべき5つのこと

インターネット マーケティングに参入する業界が増えるにつれて、アウトソーシングされた SEO サービ...

Akamai が新しいネットワーキング クラウドおよびコンピューティング サービスを開始

クラウド コンピューティング企業の Akamai Technologies は、コンピューティング、...

eleven2-50%オフ/SSDに完全アップグレード/12年の実績を誇るホスティング会社

以前のHDDディスク搭載のcpanelパネルホストは時代遅れです。eleven2はSSDディスクの全...

百度の「知心検索」は美容整形サイトのSEOにどのような影響を与えるのでしょうか?

2013年10月16日の夜、上海で開催された百度ウェブマスタープラットフォームの高級サロン「百度ナイ...

SEO マネージャーに必須のスキル: サイト全体の最適化計画の策定

多くのウェブマスターは、どうすれば有能な SEO 担当者、さらには SEO スーパーバイザーになれる...

フレンドリーなリンクを素早く見つけるための3つのヒント

ウェブマスターとして、フレンドリーリンクの重要性を多かれ少なかれ理解しているでしょう。フレンドリーリ...

ツールウェブサイトAizhan.comの成功の簡単な分析

Aizhan.com の本社は、李星平のような英雄的な草の根活動家を含む才能ある人材を輩出することで...

競合他社を顧客として扱うことで、ランキングがより高いレベルに上がります

現在、SEO実践者はますます増えており、SEOはほぼすべての業界に存在します。一部の業界では、特定の...

百度のブラックジューンの大規模Kステーションは一石二鳥だ

6月22日と28日の中国ウェブマスターのブラックジューンから半月近くが経ちましたが、Baiduに処罰...

所有ボックス - 24 ポンド/年/KVM/512m メモリ/10g SSD/3T トラフィック

Ownbox は、フランスと米国にホスティング マシンを持つ小規模なホスティング会社です。Ownbo...

中国ゲーム企業の開発状況

ゲーム市場の収益とユーザー規模の前年比成長率はともに低下しており、企業はプレッシャーにさらされながら...

crowncloud - $17/年/256MB メモリ/512Swap/20GB ハードディスク/3TB トラフィック/G ポート

crowncloud.net は 年に設立されました。この会社からの広告はほとんど見たことがありませ...

多様な最適化手法を活用してウェブサイトのランキングを向上させる方法

百度が25日に公開した外部リンク情報から、百度のウェブサイト外部リンクに対する要求はますます完璧にな...