Source: http://lollieo.com/facebook-review/

Facebook Design Teardown (2 of 3)

In Part 2, I review the visual layout of five pages on the Facebook site. The analysis centers around the goal of each page and how the visual elements support (or hinder) the user’s ability to achieve this aim.

You can see my review of the site’s UX and information architecture in Part 1.

1) Sketch on a sheet of paper what the approximate visual hierarchy looks like — what areas are denser and what areas are more sparse?

Home Page (when logged out)

• The top portion of the form, the heart in the hero image, and the green CTA button catch the eye

Home Page/ News Feed (after signing in)

• Contrasting colors (such as the red highlighted “Notifications” button in the header) and primary images (such as photos in the News Feed) pull the eye. Suggested pages to the right, based off location (near the top right of the page) also draw attention. The left hand column fades into the background as it’s greyed out, contains small images, and is somewhat noisy (a lot of text to take in)

Profile Page

• Header image, profile photo, photo block, and any photos in the feed draw attention. The header is most prominent because of placement on page and visual

About Page

• The eye drifts to the center of the page as the organized content makes it easier to focus there (almost a reprieve relative to the complexity of visual information of the rest of the site; the eyes rest casually on the perceived simplicity of the layout). From there, it was a right -> left eye movement

Photos Page

• The matrix of photos is the primary focus. The structure of the images, and diversity of color/ content grabs your attention. Further, your intent is to view photos, so you are primed to look there (based on past experiences and expectations)
• Caveat: Sometimes the page automatically loads the page showing only pictures (and not the header portion). In this instance, it did not, and I sketched the view I saw

2) Open your eyes and ask yourself “who is the most likely user of this page?”

• Home page (not logged in): I imagine there’s a preconceived notion of what Facebook entails at this point, and that most new sign ups do so at the behest of a family member or friend, therefore a likely user is someone who wants to share in and explore the life moments of friends and family
• News Feed: Someone who likes novelty, information, updates about what people in their social network are up to
• Profile page: For one’s own page, it is strangely satisfying to have your life so orderly and plainly laid out. With regards to this, one will naturally care about what and how the information is presented. It seems likely this caters to those who are a bit egotistical (we all are), and it likely also breeds behavior
• About page: Someone who wants more concrete details about another person, is interested in/ concerned with tangible marks (i.e., where someone works, went to school, where they are from, etc.)
• Photos page: Someone who wants a quick glance at the lifestyle or activities of another. Pictures are much more event oriented (as compared to what can be gleaned by sharing an article), and likely depict more about what the person likes to do

3) What is that user’s critical goal on that page?

• Home page (not logged in): To Sign Up. The purpose is explicit in the CTA in the header and also the pronounced green button
• News Feed: Scroll through the feed to begin the process of exploring and engaging
• Profile page: Explore the person/ their page (if on a user’s profile) by scrolling through their feed to quickly getting acquainted. On your own profile, to reminisce about past events by reviewing the timeline, then perhaps clicking into photos
• About page: Review the information
• Photos page: Click into photos (to get into presentation mode)

4) Does the visual hierarchy you sketched lead to that goal?

• Home page (not logged in): The page does not really explain what I’m signing up for, and the value proposition is general. Again, this is likely because most people come to the site with an understanding of what the product is about. As for the layout of information, it is straight forward and no frills; It is clear that I am supposed to sign up. Saying that, it seems to require more information than I feel is necessary (i.e., gender, birthday… why?)
• News Feed: Yes. The layout encourages the action of scrolling, almost as a way to ignore the rest of the page. Upon first impression, the layout is overwhelming and encourages the user to take some sort of action (after some time orienting). After one is acquainted, the urge is to take the path of least resistance: To click on Notifications (if highlighted) and to scroll
• Profile page: Most of the content is below the fold, so I want to scroll down to see what is there
• About page: Most of the info that I don’t get elsewhere is immediately in my view
• Photos page: The most straight forward page of the bunch. All photos, never ending stream, and easy to click in and out of individual selections

5) Do the relationships between the elements lead you to that goal?

• Home page (not logged in): The “Sign Up” headline and the CTA button are prominent (the green of the button contrasts starkly against the rest of the page). The organized form makes it clear what is expected, and that these elements are connected
• News Feed: The center column and left column are clearly defined. One quickly gets accustomed to the dynamic content in the scrolling News Feed. Most of the page blends together, putting focus on the center. When pictures are cut off by the fold, it elicits a desire to scroll down to see what it is
• Profile page: Again, most of the pictures continue below the fold. The blocks are clean and orderly, making it much simpler to take in than the News Feed; The page is much easier to get acquainted with
• About page: The labels (Cities, Employers, Schools, etc.) are blue and standout as titles. They typically have an associated image, laid out in a horizontal manner. It is clear the information is related. Below the hero image, the grey bar provides a “bread crumb” menu, which makes indicates what page you are on
• Photos page: The grid of images is easy to view and manipulate

6) What font families are most prominent on the page?

• Across the site: Names and Home icon use “BlinkMacSystem” font. Everything else uses “San Francisco,” then ‘.SFNSText-Regular’, sans-serif (as part of the font-family)

7) How do these font families contribute to or take away from the site’s flow?

• Sans Serif: Clean, friendly, more of a relaxed demeanor. The font evokes the loose feeling of hanging out with a friend

8) How do the line spacings, sizes and weights contribute to or take away from the site’s flow?

• News Feed: The white background of the center column makes images “pop.” The “white space” of the right column nudges the eye, again, to the center.
  In each post, the user’s photo, name, and positioning of the objects are the first items seen when scrolling down, and have the most white space compared to the rest of the content. These act as the first level of curation (helping one decide whether to explore the content of that post further, or scroll faster onwards).
  The spacing between each post is minimal, which aids the idea of a never-ending waterfall (of content). The font size is consistent among the titles, text, etc., though for articles, maps, or posts with additional explainer text, the font is larger.
• Profile page: The compartmentalized boxes are easy to identify, with text that is more spaced out than what is found in posts (less cluttered), making it readable. Box titles and colored icons clearly articulate what the section is about. Spacing between boxes is greater than the boxes in the News Feed. The “bread crumb” menu below the hero image support navigation.
• About page: The section titles are large and distinguished by a grey bar. The menu items are vertically aligned in the left column. The page you are on is indicated by the font becoming bolded and black, along with a blue rectangle indicator. The rest of the items are greyed out. In the center column, the most pertinent information (the “current” details) are a slightly larger font. The content is boxed together, and there is ample white space separating the blocks of text. The information in the right hand column is laid out in a list format, but has more spacing and is easier to review than the left hand column in the News Feed.

9) What would you improve to achieve a better hierarchy or flow?

News Feed:

Aim: To cut down the noise on the page, with the intent to encourage the user to focus more on the content of the feed:

• Remove content in the left hand column and create a Groups button on the top right. This button would have a similar functionality of the friends and messages buttons, whereby a menu drops down listing the groups and pages you belong to. The menu would also include would a link to “see all” which would take you to a separate page listing everything out, akin to the About page)
• Extend the width of the center panels (expand into the now unoccupied left portion of the page)
• Note: This results in a minimization of the expressed importance of groups/ pages/ apps, etc. (which I personally don’t use frequently. I’m curious about their overall usage among other users)