A review of Facebook's information architecture

Original: http://uicom.net/blog/?p=762

Facebook's information architecture design is the most reasonable information architecture I've seen so far on the internet.

Every training, I basically need to take about 20 minutes to resolve it, including old, new, copied. have been planning to write down this process, but when speaking can be a picture and Mao, write when it is really difficult to express.

Today I want to give a try, I hope to be able to talk about the content of the trainer to express 30%. (Only write what is displayed on the interface now, do not analyze the column division has been extended problem)

First look at the old Facebook Interface Information Architecture: (in 1024 resolution, the picture width can not be fully displayed, it is recommended to open a separate picture to see)

Click to enlarge

The development and change process of large architecture:

1, in the beginning, the entire information architecture of Facebook is divided into three parts: "System core Navigation area" (as shown in the blue section above). including logo and two all navigation), "Application Navigation area" (pictured above, yellow section.) Includes a global application (search) and all the application lists, and the content display area (pictured above, the orange section). Mainly divides into the local navigation, the main content, the auxiliary content three most, has n many main content.

As the normal existence and content of the "system core Navigation area" and "Application Navigation area", users often interfere with the user's attention to the main content. So Facebook specifically highlights the "Content display area" (pictured above, the orange section) in visual design. I see some designers say, "Facebook's vision sucks, and it's silly to twist that position," they don't see the designer's intentions. ）

2. Later, Facebook added "collaborative translation," which is a global feature. According to the general design idea, this "translation" position choice can: place in "all Navigation 3 (set)" position, or as "all Navigation 2 (application)" a normal project.
But Facebook did not, and in order to better show its UGC charm, Facebook's designers have greatly increased the proportion of "translation" in navigation. "Nondescript" put this application, highlighted in the upper-right corner of the content display area, while a language-switching navigation was added to "all navigation 3 (set)" (it was later found that "language switching" was rarely used, and is now swapped to the right of the bottom copyright information).

3, and later, Facebook launched the IM function. This is a normal application for Facebook, and it has to be normal in the information architecture.  So they combine "instant messaging" with "informational notifications" as a "status bar" pattern. (I guess that's when Facebook's designers already have "OS" ideas)

This is a very artistic design, very good handling. and im itself designed to do very lightweight and easy to use. Before that I guessed that they might put im in the inbox of the system core navigation area, and I was wrong and they found a better way to design.

4, now, because the "system core Navigation area" (such as the above, the Blue section), "Application navigation area (such as the above, yellow part) is the normal existence of content, occupy a large proportion of the interface, plus the content display area (such as the above, orange part) itself also need some" association navigation "" Friendly navigation "has" title " Content, which causes each page to really show "content" in a very small area.
As a website, there is no big problem. But as an "application platform", there is no doubt that there are many obstacles, the interface content is severely limited, the user's vision is always wasting "normal navigation" on. Think about it. If your OS interface, 1/3 space is occupied by the system menu for a long time, will you not crash?

I design for the old edition, several major evaluations :

1, the logic is clear, the level is trenchant rigorous. Extensibility is good. But in the content present, lacks the innovation.

2. The core of Facebook's entire site is "mine," which is the core navigation area of his top system (such as the first picture, the Blue section). In addition, the top also has "all navigation 3 (set)". The entire top is the core of the site, users can not be changed by users or third parties, but also Facebook's official reserve "area."

But here's a little bit of detail they've been on tiptoe without really letting go, is that expedient "home".
In fact, most users now return to the home page will be clicked Logo,facebook in the main navigation to cancel the "place", but do not dare to completely cancel, so in the "all Navigation 3 (set)" In the front of the area added a "home", but also the link and logo links made a distinction between has been maintained on the detection of data (including the latest information architecture design also made a link distinction, in the detection of data. Interested people can see the logo link and home link address is not the same)

3, the main navigation of Facebook is actually "application navigation area". This affects the display of the primary content area.
The system core navigation area and the application navigation area surround the content display area, and the structure and logic are clear and easy to understand.

4, the main content area has a design has been controversial:
For example, on the "Pictures" page, Facebook added two links to "My Pictures" "My Pictures", these two links were processed as "friendly navigation", the user clicks to the new interface, the new interface can not return the current "picture" application.
However, with regard to the use of domestic users (which I do not believe are biased by the use of domestic and foreign users in this place), these two links should be treated as "associated navigation" or even "local navigation". This is one of the few "good changes" Uch has ever done in copying Facebook.