Analysis of Facebook's Information Architecture
|
<br />Original: http://uicom.net/blog/?p=762 Facebook's information architecture design is the most reasonable information architecture I have ever seen on the Internet. For each training session, I basically need to spend about 20 minutes to analyze it, including old, new, and plagiarized ones. I have always intended to write down this analysis process, but while it can be illustrated with pictures and audio when speaking, it is indeed difficult to express when writing. I'll give it a try today, and I hope I can express 30% of what the trainer said. (Only write what is currently displayed on the interface, without analyzing the column division and scalability issues) First, let’s look at the information architecture of the old Facebook interface: (In 1024 resolution, the image width cannot be fully displayed, so it is recommended to open the image separately)  click to enlarge The development and change process of the big architecture: 1. At the beginning, Facebook's entire information architecture was mainly divided into three parts: "System core navigation area" (as shown in the blue part in the picture above. Including the LOGO and two full navigations), "Application navigation area" (as shown in the yellow part in the picture above. Including a global application (search) and a list of all applications), and "Content display area" (as shown in the orange part in the picture above. Mainly divided into three parts: local navigation, main content, and auxiliary content, with a lot of main content). Due to the normal existence and rich content of the "system core navigation area" and "application navigation area", they often interfere with users' attention to the main content when they are in use. Therefore, Facebook deliberately uses misalignment to highlight the "content display area" in visual design (as shown in the orange part in the picture above. I saw some designers say "Facebook's visuals are terrible, it's stupid to distort that position", but in fact they don't understand the designer's intention at all, which is stupid!) 2. Later, Facebook added "Collaborative Translation", which is a global feature. According to general design ideas, the location of this "Translation" can be: placed in the "All Navigation 3 (Settings)" position, or as a normal item in "All Navigation 2 (Applications)". But Facebook did not do this. In order to better demonstrate its awesome UGC charm, Facebook designers greatly increased the proportion of "translation" in navigation. This application was "incongruous"ly highlighted in the upper right corner of the "content display area", and a language switching navigation was added to the "All Navigation 3 (Settings)" (later it was probably discovered that the "language switching" was rarely used, so it was moved to the right side of the copyright information at the bottom). 3. Later, Facebook launched the IM function. For Facebook, this is a normal application and must exist normally in the information architecture. So they combined "instant messaging" with "message notification" to create the "status bar" model. (I guess that at this time, Facebook's designers already had the idea of an "operating system") This is a very artistic design and it is very well handled. And IM itself is designed to be very lightweight and easy to use. Before this, I had guessed that they might put IM in the "Inbox" position of the "System Core Navigation Area", but I was wrong, they found a better design method. 4. Nowadays, since the "system core navigation area" (as shown in the blue part in the above picture) and the "application navigation area" (as shown in the yellow part in the above picture) are normal contents and occupy a large proportion of the interface, and the content display area (as shown in the orange part in the above picture) itself also requires some "related navigation", "friendly navigation" and "title" content, there are very few areas on each page that actually display "content". As a website, this is not a big problem. But as an "application platform", there are undoubtedly many obstacles. The display of interface content is severely limited, and users' vision is always wasted on "normal navigation". Think about it, if 1/3 of the space on your operating system interface is occupied by the system menu for a long time, will you crash? My main comments on the old design : 1. The logic is clear and the structure is rigorous. Good scalability. But there is a lack of innovation in content presentation. 2. The core of the entire Facebook website is "My", which is its top system core navigation area (as shown in the first picture, the blue part). Also, there is "All Navigation 3 (Settings)" at the top. The entire top section is the core of the website, which cannot be changed by users or third parties, and is also the official reserved "area" of Facebook. However, there is a detail that they have been tiptoeing around and have not really let go of, and that is the makeshift "home". In fact, most users now click on the logo to return to the homepage. Facebook has removed the "home" link from the main navigation, but it doesn't dare to remove it completely. So it added a "home" link in front of the "All Navigation 3 (Settings)" area, and also distinguished this link from the logo link, and has been testing the data (including the latest information architecture design, which also distinguishes links and tests data. Those who are interested can see that the link addresses of the logo link and the home link are different) 3. Facebook’s main navigation is actually the “Application Navigation Area”. This affects the display of the main content area. The "system core navigation area" and "application navigation area" surround the content display area. The structure and logic are clear and easy to understand. 4. There is a design in the main content area that has always been controversial: For example, on the "Pictures" page, Facebook added two links, "My Pictures" and "Have My Pictures". These two links were processed into "friendly navigation". After the user clicks them, he will be redirected to a new interface. The new interface cannot return to the current "Pictures" application. However, based on the usage habits of domestic users (I don’t really believe that there is a deviation in usage habits between domestic and foreign users in this area), these two links should be treated as "related navigation" or even "local navigation". This is also one of the few "good changes" UCH made when copying Facebook. Previous Page 1 2 Next Page Read Full Article |
<<: CSS3 achieves conic-gradient effect
>>: The difference between mysql outer join and inner join query
Recommend
Steps to use ORM to add data in MySQL
【Foreword】 If you want to use ORM to operate data...
Vue-CLI multi-page directory packaging steps record
Page directory structure Note that you need to mo...
【HTML element】Detailed explanation of tag text
1. Use basic text elements to mark up content Fir...
How to implement mask layer in HTML How to use mask layer in HTML
Using mask layers in web pages can prevent repeat...
Common causes and solutions for slow MySQL SQL statements
1. Slow query due to lack of index or invalid ind...
Analysis of the usage of replace and regexp for regular expression replacement in MySQL
This article uses examples to illustrate the use ...
HTML/CSS Basics - Several precautions in HTML code writing (must read)
The warning points in this article have nothing t...
About 3 common packages of rem adaptation
Preface I wrote an article about rem adaptation b...
Prometheus monitors MySQL using grafana display
Table of contents Prometheus monitors MySQL throu...
IE8 compatibility notes I encountered
1. IE8's getElementById only supports id, not ...
MySQL index usage instructions (single-column index and multi-column index)
1. Single column index Choosing which columns to ...
Detailed explanation of Docker's most commonly used image commands and container commands
This article lists the most commonly used image c...
A detailed explanation of the subtle differences between Readonly and Disabled
Readonly and Disabled both prevent users from chan...
Use crontab command in Linux environment to set up scheduled periodic execution tasks [including PHP execution code]
This article uses the crontab command in the Linu...
Detailed example of Linux all-round system monitoring tool dstat
All-round system monitoring tool dstat dstat is a...