Facebookの情報アーキテクチャの分析

<br />原文: http://uicom.net/blog/?p=762
Facebook の情報アーキテクチャ設計は、私がこれまでインターネット上で見てきた中で最も合理的な情報アーキテクチャです。
基本的に、各トレーニングセッションでは、古いもの、新しいもの、盗用されたものを含めて、分析に約 20 分を費やす必要があります。この分析のプロセスをずっと書き留めておこうと思っていたのですが、話すときには絵や音声で説明できても、文章で表現するのは確かに難しいです。
今日試してみます。トレーナーが言ったことの30％くらいは表現できればいいなと思います。（列の分割やスケーラビリティの問題を分析せずに、現在インターフェースに表示されているものだけを記述します）
まず、古いFacebookインターフェースの情報アーキテクチャを見てみましょう: (1024解像度では画像の幅を完全に表示できないため、画像を個別に開くことをお勧めします)

クリックして拡大
大規模アーキテクチャの開発と変更のプロセス:
1. 当初、Facebook の全体の情報アーキテクチャは、主に「システムコアナビゲーション領域」(上の図の青い部分。ロゴと 2 つのフルナビゲーションを含む)、「アプリケーションナビゲーション領域」(上の図の黄色い部分。グローバルアプリケーション (検索) とすべてのアプリケーションのリストを含む)、「コンテンツ表示領域」(上の図のオレンジ色の部分。主にローカルナビゲーション、メインコンテンツ、補助コンテンツの 3 つの部分に分かれており、メインコンテンツが多数あります) の 3 つの部分に分かれていました。
「システムコアナビゲーションエリア」と「アプリケーションナビゲーションエリア」は、通常通り存在し、コンテンツが豊富なため、使用中にユーザーがメインコンテンツに集中するのを妨げることがよくあります。そのため、Facebook はビジュアルデザインにおいて「コンテンツ表示領域」を強調するために意図的に位置ずれを利用しています (上の写真のオレンジ色の部分のように。デザイナーの中には「Facebook のビジュアルはひどい、あの位置を歪めるのは愚かだ」と言う人もいますが、実際にはデザイナーの意図をまったく理解していない、愚かです!)。
2. その後、Facebook はグローバル機能である「共同翻訳」を追加しました。一般的な設計アイデアによれば、この「翻訳」の場所は、「すべてのナビゲーション 3 (設定)」の位置に配置することも、「すべてのナビゲーション 2 (アプリケーション)」の通常の項目として配置することもできます。
しかし、Facebook はそうしませんでした。UGC の素晴らしい魅力をよりよく示すために、Facebook のデザイナーはナビゲーションにおける「翻訳」の割合を大幅に増やしました。このアプリは「コンテンツ表示エリア」の右上に「違和感」なく強調表示され、「全体ナビゲーション3（設定）」に言語切り替えナビゲーションが追加されました（後に「言語切り替え」はほとんど使われていないことが判明したため、下部の著作権情報の右側に移動されました）。
3. その後、Facebook は IM 機能を開始しました。 Facebook の場合、これは通常のアプリケーションであり、情報アーキテクチャ内に通常通り存在する必要があります。そこで彼らは「インスタントメッセージング」と「メッセージ通知」を組み合わせて「ステータスバー」モデルを作成しました。（この頃、Facebookの設計者たちはすでに「オペレーティングシステム」というアイデアを持っていたのではないかと思います）
これは非常に芸術的なデザインであり、非常にうまく処理されています。 IM 自体は非常に軽量で使いやすいように設計されています。これまで、IM は「システムコアナビゲーション領域」の「受信トレイ」の位置に置かれるのではないかと予想していましたが、それは間違いでした。より優れた設計方法が見つかったのです。
4. 現在では、「システムコアナビゲーションエリア」（上図の青い部分）と「アプリケーションナビゲーションエリア」（上図の黄色い部分）が通常のコンテンツであり、インターフェースの大部分を占めており、コンテンツ表示エリア（上図のオレンジ色の部分）自体にも「関連ナビゲーション」、「フレンドリーナビゲーション」、「タイトル」コンテンツが必要なため、各ページで実際に「コンテンツ」を表示する領域は非常に少なくなっています。
ウェブサイトとしては、これは大きな問題ではありません。しかし、「アプリケーションプラットフォーム」としては、間違いなく多くの障害があります。インターフェイスコンテンツの表示は厳しく制限されており、ユーザーの視覚は常に「通常のナビゲーション」に費やされています。考えてみてください。オペレーティングシステムインターフェイスのスペースの 1/3 が長時間システムメニューで占有されていたら、クラッシュするでしょうか?
古いデザインに関する私の主なコメント:
1. 論理は明確で、構造は厳密です。優れたスケーラビリティ。しかし、コンテンツの提示には革新性が欠けています。
2. Facebook ウェブサイト全体の中核となるのは「マイ」であり、これはその最上位のシステムコアナビゲーション領域です (最初の図の青い部分を参照)。また、上部に「全体ナビゲーション3（設定）」があります。上部のセクション全体はウェブサイトの核心であり、ユーザーや第三者によって変更することはできず、Facebook の公式予約「エリア」でもあります。
しかし、彼らが慎重に避けてきたが、実際には手放せなかった細部があります。それは、間に合わせの「家」です。
実際、現在、ほとんどのユーザーはロゴをクリックしてホームページに戻っています。Facebookはメインナビゲーションから「ホーム」リンクを削除しましたが、完全に削除する勇気はありません。そのため、「すべてのナビゲーション3（設定）」エリアの前に「ホーム」リンクを追加し、このリンクとロゴリンクを区別し、データのテストを行ってきました（最新の情報アーキテクチャ設計もリンクを区別してデータをテストしています。興味のある方は、ロゴリンクとホームリンクのリンクアドレスが異なることがわかります）。
3. Facebook のメインナビゲーションは、実際には「アプリケーションナビゲーションエリア」です。これはメインコンテンツ領域の表示に影響します。
コンテンツ表示領域を囲むように「システムコアナビゲーション領域」と「アプリケーションナビゲーション領域」が配置されており、構造とロジックが明確でわかりやすいです。
4. メインコンテンツ領域には、常に議論の的となっているデザインがあります。
たとえば、「写真」ページに、Facebook は「マイピクチャ」と「マイピクチャを保存」という 2 つのリンクを追加しました。これらの 2 つのリンクは「フレンドリーナビゲーション」に処理されました。ユーザーがそれらをクリックすると、新しいインターフェイスにリダイレクトされます。新しいインターフェイスは、現在の「写真」アプリケーションに戻ることはできません。
しかし、国内ユーザーの使用習慣に基づくと（この分野では国内ユーザーと海外ユーザーの使用習慣に差があるとは実際には考えていません）、これら 2 つのリンクは「関連ナビゲーション」または「ローカルナビゲーション」として扱う必要があります。これは、UCH が Facebook をコピーする際に行った数少ない「良い変更」の 1 つでもあります。

前のページ1 2 次のページ全文を読む

<<: CSS3は円錐グラデーション効果を実現します

>>: MySQLの外部結合と内部結合クエリの違い