Facebook Design (2 of 3)

This is an assignment for Viking Code School’s Web design class. I am spending quite a lot of time on this course because web design is challenging and scary for me and they’ve done a great job demystifying the subject. I’d recommend checking it out if you’re interested in web design.

It’s also part one of the final assignment in the web design prep course, which involves tearing down the the facebook application from a UX and Design perspective, then doing a mockup using Balsamiq.

This is part 2 of this final project, part 1 and part 3.

This is going to be a rather long post since I’ll be answering nine questions for each of five pages at facebook.com. This is a great way to get familiar with facebook’s ins and outs, but probably won’t make for the most engaging read.

The Facebook Home Page

  1. The Visual Hierarchy of The Facebook Home Page (Login Screen)
  2. FacebookTeardown1

  3. Who is the most likely user of this page?
  4. The most likely user of this page is someone who does not have a facebook account or has not logged in on the computer they’re using. People who use facebook a lot tend to have it remember their credentials so they will not see this screen for very long at all.

  5. What is that user’s critical goal on that page?
  6. Either to sign in, or sign up for a facebook account.

  7. Does the visual hierarchy you sketched lead to that goal?
  8. It does, the two big call to actions are the login username and password and the “Sign Up” button on the bottom right.

  9. Do the relationships between the elements lead you to that goal (remember your CRAP principles)?
  10. Yes. The three elements necessary to log in are all close (proximate) to each other. The two text fields also share colors, the “Log In” CTA button is the same colors but reversed. All three elements have the same height and space between elements as well. As a consequence of sharing a height, they are all aligned vertically.

  11. What font families are most prominent on the page? (use the WhatFont add-on or your browser’s developer tools to inspect this).
  12. Most of the page is helvetica, but the giant “Sign Up” form header is in “Freight Sans Bold” which appears to be a purchasable font by Darden Studio I’m not sure what to make of that, other than it’s a very bold, sans font that looks much better than if it was in Helvetica. Here’s the form in question with the font set to it’s default Freight Sans Bold:
    FreightSans

    And here’s the same section with that font set to helvetica:
    Helvetica

  13. How do these font families contribute to or take away from the site’s flow?
  14. As you can see above, the Freight font makes the Sign Up header much more bold and more of a call to action title. It’s letting the user know, hey you should pay attention to this form, but doing it subtly enough that users who already have accounts can ignore it.

  15. How do the line spacings, sizes and weights contribute to or take away from the site’s flow?
  16. The major place I see the line spacing having an effect on this page is in the terms and conditions disclaimer near the bottom. The lines are crammed tightly together, making the text just beg to be ignored.

  17. What would you improve to achieve a better hierarchy or flow?
  18. The only thing I can think of is that the site is visually unbalanced. The bottom left quadrant is completely empty. This may be intentional to call attention to the CTAs on the right, but I’d like to see something there to balance the page.

The Facebook News Feed Page

  1. The Visual Hierarchy of The Facebook News Feed Page
  2. FacebookTeardown2

  3. Who is the most likely user of this page?
  4. A user with a facebook account, probably who lives in the United States.

  5. What is that user’s critical goal on that page?
  6. Looking at information that people they are connected to feel is important enough to share with the world. A secondary goal would be posting information that the logged in user believes is important enough to share.

  7. Does the visual hierarchy you sketched lead to that goal?
  8. It does, though the right hand menu has questionable utility for me since it’s either Ads or just clutter. It’s so low in the visual hierarchy that it may as well not exist. I’d much prefer to have some additional white space in the design.

  9. Do the relationships between the elements lead you to that goal (remember your CRAP principles)?
  10. Yes, it’s obvious that I can share things very quickly using the post box on the top of the page. The first post is also quite eye catching and probably interesting, drawing me in to reading the news feed. The news feed is larger than the left and right columns (Contrast), it has Repeated elements (posts), it’s center Aligned, and the way to interact with it (the post composer box) is very close to where my post would appear (Proximity). All in all, the elements relationships are quite good at leading me to my goal.

  11. What font families are most prominent on the page? (use the WhatFont add-on or your browser’s developer tools to inspect this).
  12. Facebook is using helvetica everywhere as far as I can tell. I would guess that this is because Helvetica is a font that’s present on just about every device, mobile or not. Also, apparently it’s a “brilliant and inoffensive” font that appears many, many, places.

  13. How do these font families contribute to or take away from the site’s flow?
  14. This was a fun question to answer. I used Chrome’s developer tools to edit the font family on the page to “Times” and looked at the result (below). It’s obvious that Helvetica is informal, clear at various sizes and weights, and works for large blocks of text and titles.

    Here’s facebook with the “Times” family (I’m amazed how much this changes the site)

    FacebookWithTimesFontFamily

  15. How do the line spacings, sizes and weights contribute to or take away from the site’s flow?
  16. I tried to mess with this using the developer tools, but the differences were nowhere near as dramatic as the font family change. The line weights are important, however. Both for determining which parts of the page are most important (they have slightly larger line height) and giving the text a lot of room to breathe (whitespace)

  17. What would you improve to achieve a better hierarchy or flow?
  18. I don’t like the fact that they have quite a large blank spot for you to type a post into. I’d like to see it be condensed to a single blank line that expands if you click on it or hover over it. I think that this would help users’s flow through the site by letting their vision immediately go to the content below rather than getting snagged on the large white post box.

The Facebook Profile Page

  1. The Visual Hierarchy of The Facebook Profile Page
  2. FacebookTeardown3

  3. Who is the most likely user of this page?
  4. A registered facebook user looking for more information about another facebook user.

  5. What is that user’s critical goal on that page?
  6. To find out information about the user who’s page it is. I would mention that photos may be prioritized for this task because they contain large amounts of subtext that text can lack. So, the goal could also be “To look at pictures of the person who’s profile it is.”

  7. Does the visual hierarchy you sketched lead to that goal?
  8. Yes, the person’s profile picture in the top left corner is the first thing that they eye’s are caught by. Then the “cover picture” behind that profile picture. After that, you see a feed of their posts though, and have to choose a non-visually-prioritzed “Photos” link to see more pictures.

  9. Do the relationships between the elements lead you to that goal (remember your CRAP principles)?
  10. They do, especially if we take the goal as “Learn about this person” the news feed down the middle is repetitive, large, contrasting, and very much has information about the person. It shows what they’ve been putting on facebook in reverse chronological order (most recent first).

  11. What font families are most prominent on the page? (use the WhatFont add-on or your browser’s developer tools to inspect this).
  12. It’s still Helvetica everywhere, see my comments above.

  13. How do these font families contribute to or take away from the site’s flow?
  14. This page is very similar in the way the font family impacts it to the last one, see my notes above.

  15. How do the line spacings, sizes and weights contribute to or take away from the site’s flow?
  16. This page is very similar in the way the font spacing impacts it to the last one, see my notes above.

  17. What would you improve to achieve a better hierarchy or flow?
  18. Interestingly, one of my complaints about the news feed page was the right hand column, on this page that column is very used and adds nice information about when the information you’re looking at was posted. I might also add a bar of recent photographs above the first post, since my impression is that when reviewing profiles people generally look for pictures first.

The Facebook About Page

  1. The Visual Hierarchy of The Facebook About Page
  2. FacebookTeardown4

  3. Who is the most likely user of this page?
  4. Someone who’s looking for the history of this profile owner in a more than casual way. One example is that prospective employers will probably look at this page.

  5. What is that user’s critical goal on that page?
  6. To find in depth information on the user who owns the profile.

  7. Does the visual hierarchy you sketched lead to that goal?
  8. From just looking at the picture I sketched above, you might not think it does, but I think what facebook does with this page is actually pretty clever. They de-emphasize all the sections below the cover photo and profile picture. This has the nice effect that you can scroll through the sections without your attention being “grabbed” and look for specific information more easily.

  9. Do the relationships between the elements lead you to that goal (remember your CRAP principles)?
  10. Interestingly the de-emphasis of the sections underneath the profile picture means that “Contrast” has less of a role on this page. Repetition is very strong though, each section of the about page looks very similar, it’s a box with a header and some stuff in it. This makes it easy to review. All the sections are center aligned as well, so that doesn’t play as huge a role. There are some nice columns in each individual section, however. The center alignment also means that “Position” isn’t as key on this page, at least not for the sections, the positioning inside each section is well done to enhance important elements.

  11. What font families are most prominent on the page? (use the WhatFont add-on or your browser’s developer tools to inspect this).
  12. It’s still all Helvetica.

  13. How do these font families contribute to or take away from the site’s flow?
  14. The same way that I’ve mentioned above, it is nice that the font families are very consistent across the site.

  15. How do the line spacings, sizes and weights contribute to or take away from the site’s flow?
  16. The line spacings are also very consistent across the site, non-important things are squished together like books and subtitles, important things like job information are spaced out.

  17. What would you improve to achieve a better hierarchy or flow?
  18. There’s nothing that bothers me much about this site, I think that putting the photos section nearer the top would be nice, but there’s a “Photos” link so that might be redundant. I think that this page works very well.

The Facebook Photos Page

  1. The Visual Hierarchy of The Facebook Photos Page
  2. FacebookTeardown5

  3. Who is the most likely user of this page?
  4. A registered facebook user who wants to see pictures of another facebook user.

  5. What is that user’s critical goal on that page?
  6. Look at someones pictures without necessarily interacting with them (the dreaded accidental like)

  7. Does the visual hierarchy you sketched lead to that goal?
  8. It does. There is nothing on this page other than the standard header and a tightly packed photo gallery, it’s great visual hierarchy because it’s very very simple: Here’s pictures!

  9. Do the relationships between the elements lead you to that goal (remember your CRAP principles)?
  10. Well the pictures contrast with the background nicely (unless it’s a picture fog I guess), the repetition is quite nice of the photo grid, they’re aligned to columns, and photos seem to be positioned in chronological order so the relationships are good.

  11. What font families are most prominent on the page? (use the WhatFont add-on or your browser’s developer tools to inspect this).
  12. Still helvetica.

  13. How do these font families contribute to or take away from the site’s flow?
  14. They don’t on this page, there’s hardly any text.

  15. How do the line spacings, sizes and weights contribute to or take away from the site’s flow?
  16. There’s almost not text, so they don’t have a large impact.

  17. What would you improve to achieve a better hierarchy or flow?
  18. There’s nothing I would change about this page, one thing I want to mention that is quite clever. When you look at the photo grid there is no apparent way to “Like” a photo, but if you hover over the photo some information and a “Like” link appear. This is quite clever, it reduces the number of accidental likes (a fixed button might lead to more accidents, for example), but still allows users the ability to “Like” directly from album view.

2 Replies to “Facebook Design (2 of 3)”

Leave a Reply

Your email address will not be published. Required fields are marked *