Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you a review of the information architecture on how to achieve facebook. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Facebook's information architecture design is by far the most reasonable information architecture I have ever seen on the Internet.

Each training, I basically need to take about 20 minutes to analyze it, including the old, new, plagiarized. I have always intended to write down this parsing process, but it can be both pictorial and phonetic when speaking, and it is really difficult to express it when writing.

Let's give it a try today, hoping to express 30% of what the trainer said. (only write what is shown on the interface now, without analyzing the scalability problem of column division.)

First take a look at the information structure of the old facebook interface: (at 1024 resolution, the picture width cannot be fully displayed. It is recommended to open the picture separately.)

Click to enlarge

The process of development and change of large architecture:

1. At the beginning, the whole information architecture of facebook is mainly divided into three parts: "system core navigation area" (such as the above figure, the blue part. Including LOGO and two full navigation), "application navigation area" (as pictured above, yellow section. Includes a global application (search) and a list of all applications, and a "content display area" (such as the orange section above. It is mainly divided into three parts: local navigation, main content and auxiliary content.

Because of the normal existence and numerous contents of "system core navigation area" and "application navigation area", it often interferes with users' attention to the main content when they use it. Therefore, in the visual design, facebook specially highlights the "content display area" through dislocation (such as the orange part of the image above. I saw some designers say, "the vision of facebook is very bad, and it is silly to distort that position." in fact, they do not see the designer's intention at all, very stupid! )

2. Later, facebook added "collaborative translation", which is a global feature. According to the general design idea, the location of this "translation" can be placed in the position of "all Navigation 3 (Settings)", or as a normal project of "all Navigation 2 (Application)".

But facebook did not do so, in order to better show its powerful UGC charm, facebook designers greatly increased the proportion of "translation" in navigation. " This application is highlighted in the upper-right corner of the content display area, while a language-switched navigation is added to the full Navigation 3 (Settings). It is now switched to the right side of the copyright information at the bottom).

3. Later, facebook launched the IM function. This is a normal application for facebook, and it must exist normally in the information architecture. So they combined instant messaging with information notification to form a "status bar" model. (I guess the designers of facebook already had the idea of an "operating system" by this time.)

This is a very artistic design, handled very well. And IM itself is designed to be very light and easy to use. Before that, I guessed that they might put IM in the "inbox" of the "core navigation area" of the system, but I was wrong and they found a better way to design it.

4. Nowadays, because the "core navigation area of the system" (such as the blue part above) and the "application navigation area" (such as the yellow part) are normal, they occupy a large proportion of the interface. In addition, the content display area (such as the image above, orange part) also needs some "associated navigation" and "friendly navigation" content that has already been "titled". There are very few areas that lead to the actual display of "content" on each page.

As a website, this is not a big problem. However, as an "application platform", there are undoubtedly many obstacles, the display of interface content is seriously limited, and users' vision is always wasted on "normal navigation". Think about it. Will you crash if your operating system interface, 1Accord 3 space, is occupied by system menus for a long time?

My main comments on the old design are as follows:

1. The logic is clear, and the layers are clear and rigorous. Good expansibility. But in the content presentation, there is a lack of innovation.

2. The core of facebook's entire site is "my", which is the core navigation area of his top system (such as the first picture, the blue part). In addition, there is "full Navigation 3 (Settings)" at the top. The entire top is the core of the site, users can not be changed by users or third parties, and it is also the official reserved "area" of facebook.

However, there is a detail that they have been tiptoing around and have not really let go, which is the "home" of the expedient.

In fact, when most users return to the home page, they will click logo,facebook to cancel the "home" on the main navigation, but they dare not cancel it completely, so they add a "home" in front of the "full Navigation 3 (Settings)" area, and make a distinction between this link and the logo link, always maintaining the detection of the data (including the latest information architecture design also made a link distinction, in the test data. Interested parties can see that the link address of logo is not the same as that of home.)

3. The main navigation of facebook 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. A design in the main content area has always been controversial:

For example, in the "pictures" page, facebook added two links "my pictures" and "have my pictures". These two links were treated as "friendly navigation", and the user clicked to the new interface, which could not return to the current "picture" application.

However, in terms of the usage habits of domestic users (I do not quite believe that there is a deviation in the usage habits of domestic and foreign users in this place), these two links should be treated as "associated navigation" or even "local navigation". This is also one of the few "good changes" UCH made when plagiarizing facebook.

The above is the comments on the information architecture of how to achieve facebook shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.