Facebook: Teardown and Mockup

This was a monstrous effort. It featured a lot of whining, a lot of complaining, a lot of procrastination, and after a while, I finally pushed this child out of my brain (that’s where babies come from, right?).

image
Not too far off base

I think my next non-VCS post will be about how to deal with burnout – something I’ve definitely had to push myself on this massive final project, and it took me a long time. I’m not feeling too done yet, because I still have to post this, but when I’m done posting this I’m going to go take a book and read in the park across from my house. Return to the world, etc.

Okay, so, as always, this is an assignment for Viking Code School, and is my final project for the Web Design Unit. The next few things I post will be for the next unit on Software Engineering Basics!

UX Teardown 

Who is the main user of Facebook?

The main user of Facebook is basically everyone in America at this point. They have an incredibly wide audience.

What are the top 3 critical goals for that user?

The top three critical goals of the average user would be:

  • to quickly see the NEWEST posts of their friends
  • to be able to post quickly and easily themselves
  • To be able to comment and interact with their friends’ posts quickly and easily.

For your top user goal, what is likely to make the user’s experience particularly satisfying?

Quickly see new posts – the infinite scrolling feed that shows new posts in real time is certainly helpful. A feature that could be helpful would be to be able to “save” posts somehow – whether being able to go back and see posts that you have “liked”, or having another button to save posts means another way to disseminate information and possibly even save posts for later, meaning you don’t have to get caught in the infinite scroll and miss posts that could be important to you. 

To accomplish this goal, how does the user flow through the site’s architecture? (ie. which pages are visited and what are clicked?)

The great thing about the system is that you are immediately seeing posts as soon as you log in. The home screen is where all the posts live, so you don’t have to do a lot to access what you want to do. If you want to see posts from a particular user, there are several ways to do that – you can use the search bar to find posts on a certain person/organization’s profile, posts on a certain topic, or using certain words.The more specific you want to get, the more clicks it will take to get there, but the basics are all there for seeing posts immediately after signing in. 

What style(s) of navigation is/are used? Do they answer the key questions (Where am I and how did I get here? Where should I go next and how do I get there?)?

There are several styles of navigation – sidebars, an infinite scroll for posts with hyperlinked aspects to take you to a person’s profile or get more details on the post, buttons to click to access things like your profile or account (with an extra drop box on that last one). They answer the questions pretty well – all the buttons are marked in such a way that you know where you’re going when you click on it. The only exception to this, in my opinion, is that I wish there was a marker for trying to get to your own profile. You have to click on your picture, which is okay but not the #1 most intuitive thing to do. But that’s pretty hair-splitting. 

What does Facebook do well to allow the user to accomplish the top goal effectively, efficiently and with good satisfaction?

They have the posts of other people front and center, so you get sucked in right away and start scrolling. They also have it on an infinite scroll, which lets you keep going for as long as you want. They also notify you in real time when new posts are showing up at the top of your feed, so you can scroll back up and see them. It’s definitely designed to keep you scrolling for a long time! 

What does Facebook do poorly when allowing the user to accomplish the top goal effectively, efficiently and with good satisfaction?

One thing that I think Facebook could do better to encourage people to stay scrolling longer is, as I said before, to allow people to save others’ posts in a way that isn’t public (like sharing on your own timeline). This would cut down on a lot of extraneous posts that could be annoying for people (but maybe that’s why you can’t – they want to keep people sharing so they’re inundated with posts), but I think from the user’s perspective it’s something that a lot of people would really enjoy, and would enhance their Facebook experience. 

Design teardowns, by page
LOGGED OUT HOMEPAGE: 
facebook_homepage.png
Open your eyes and ask yourself “who is the most likely user of this page?”
Since Facebook has auto-login, I’m assuming that the person who is using this page for its intended purpose is someone who is not a member of Facebook and is getting ready to sign up. 
What is that user’s critical goal on that page?
This user’s critical goal is to sign up for Facebook with as little distracting them as possible, and in the most efficient way possible. 
Does the visual hierarchy you sketched lead to that goal?
Yes – this is a very simple page, which I think in this case is a good thing. There isn’t a lot of extraneous detail that could seem inaccessible to someone who isn’t familiar with Facebook.
Do the relationships between the elements lead you to that goal (remember your CRAP principles)?
Yes – again, it’s a really simple layout, and I think that works in its favor. There isn’t really a whole lot of the CRAP principles at play, except perhaps alignment. With just the form aligned to the right and just white space on the entire left side, it makes sure that the only thing that your eye is drawn to is the form to sign up. 
What font families are most prominent on the page? (use the WhatFont add-on or your browser’s developer tools to inspect this).
  • Facebook logo – Francisco
  • Most other text – Freight sans bold

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

The Facebook logo is iconic, and everyone knows of it and has seen it, even if you’re not a site user, so I think it’s important that it have its own font so it’s set apart from the rest of the text on the page (especially since there isn’t much). The rest of the text is very simple, and not overwhelming. It looks clean, which contributes to the form looking very low-key and not stressful to complete. The font works in service of getting more people to sign up by making it seem low-effort to sign up. 

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

There is just one massive heading which says “Create Account”. The simplicity of having the one heading and the form encourages people to sign up, and that they won’t get distracted along the way by the other stuff on the page. 

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

This is really nitpicky, because I feel like overall the page achieves its purpose, but one thing I would do is I would try to make it look a little more professional and I would make it match the style of the rest of Facebook a little better. I think the developers put a ton of effort into the site after sign-in, and most people never see this page much, but I think having it match the style of the rest of the site would give a more seamless user experience. 

-Not Facebook logged out homepage-page-001

LOGGED IN NEWS FEED PAGE: 
facebook_newsfeed_obscured
Open your eyes and ask yourself “who is the most likely user of this page?”
The most likely user of this page is anyone who logs into Facebook, so a very wide user base.
What is that user’s critical goal on that page?
There are several possible critical goals:
  • To view their friends’ posts quickly and efficiently
  • To create their own posts quickly and efficiently

Does the visual hierarchy you sketched lead to that goal?

Yes – the top two critical goals are the first couple things that draw attention on the homepage. The top action on the page is “Create post.” In my opinion, this should be more bold (the way it used to be before the site updated). The next thing, which is directly underneath and very hard to miss, are all the posts from friends.

Do the relationships between the elements lead you to that goal (remember your CRAP principles)?

I think that the contrast between the “Write post” and the posts below it could be improved to draw attention to the option to write a post. It’s just white, and I think a colored border or shading in the text box itself would draw attention to it. So, more attention to contrast would be good.

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

  • San Francisco – used for titles  and hyperlinks (pretty much anything you can click on)
  • System UI – used for “body” text, or basically anything you can’t click on

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

  • System UI is an extremely clean and standard font, so it doesn’t take away from the content. It’s easy to scan and read as you scroll, and it doesn’t get lost when you size it up or size it down.
  • Francisco is the font used for the Facebook logo, and it looks very “Facebook.” The good thing about it is that it’s recognizable, but still clear and not distracting.

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

  • Line spacing on this page is very important so that it doesn’t look cramped or too confusing. Facebook does a good job of keeping everything spaced evenly so it’s always clear which text belongs to the posts and which text belongs to the sidebars.
  • Sizing is also important – right now, the biggest text size on the screen belongs to the text of the post themselves, so that’s what gets the emphasis on the page.

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

One thing I would do to achieve a better hierarchy would be to make the “Write post” section more distinctive. I think Facebook assumes that everyone at this point probably knows where to go to write a post, but it’s still good to have the button highly visible for clarity.

-Not Facebook news feed-page-001

PROFILE PAGE:
facebook_profile_obscured
Open your eyes and ask yourself “who is the most likely user of this page?”
A Facebook friend – someone who is looking for the most recent info about their friend – their posts, their pictures, and what they’re up to.
What is that user’s critical goal on that page?
The user’s critical goal is to see the information they are looking for in the quickest and most convenient way, without having to click through too many screens before they satisfy their curiosity or get bored (unless you’re like me and like to Facebook creep!)
Does the visual hierarchy you sketched lead to that goal?
Yes, I think it does. I think the profile picture being off to the side and the cover photo being prominent is good – it allows for more customization. Additionally, below the profile picture there is a box which includes the most pertinent “short list” of info about the person: school, job, birthday, location, relationship status, etc. This is good, because it is set aside and allows someone to glance at that box and possibly see what they were looking for instantaneously. They can keep scrolling or click to expand certain sections if they’re still interested.
Do the relationships between the elements lead you to that goal (remember your CRAP principles)?
Yes – everything is very modular on the page (a feature of alignment and color, two of the CRAP principles). The different modules have white backgrounds, against the overall gray background. Contrast – keeping the background colors basic like grey and white, allows the colors in the photos to stand out, so they are the first things your eyes are drawn to. This is great because the photos are what most people are interested when they are visiting the page (or so it could be argued).
What font families are most prominent on the page? (use the WhatFont add-on or your browser’s developer tools to inspect this).
  • System ui – used for basically everything except the headers
  • San Francisco – used for the headers

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

These font families contribute to the site’s flow because they are very simple, and they keep the focus where it belongs – on the content and the photos. While both fonts are simple, the fact that the headers are in a different font emphasizes the headers, which is always great because it contributes to the overall modularity and breakup of the sections – good organization.

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

There is a lot of white space between the sections, which is great because it doesn’t feel like too much “stuff” crammed into a small space. The sans serifs fonts are simple and contribute to the simplicity of the overall design. The white space and simple colors (blue for links and headers, black for text, and white and grey for backgrounds) keeps the focus on images and photos.

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

There really isn’t a whole lot I would do to improve the flow of the page. The Facebook profile page is so iconic at this point that most people know how to use it, so usability isn’t much of an option. One thing that I think would improve the design is being able to sort the posts a little more. Image posts, personal posts/statuses, and links could all be filtered to give a little more organization. Right now, if you want to find a particular post, the only thing to do is search for the date of it. This is a very picky thing, and perhaps more of a UX issue than design, but I’m including it here because I think it could contribute to the overall organization and flow of the page.

-Not Facebook profile page-page-001

ABOUT PAGE: 
facebook_about_obscured
Open your eyes and ask yourself “who is the most likely user of this page?”
The most likely user of this page is someone who is friends with a person, who is looking for more detail than was available on the main profile page of their friend.
What is that user’s critical goal on that page?
The user is looking for information – therefore, clarity of information is the most important factor, more important than “hooking” someone or making them want to stay and scroll (although that could still be a secondary goal of the page)
Does the visual hierarchy you sketched lead to that goal?
Yes – the page is super simple which isn’t really a bad thing. It presents the information that you want to know, and then you can keep scrolling for photos if you get hooked. It’s a good hierarchy, and even if it’s a little sparse it at least has what you want to see.
Do the relationships between the elements lead you to that goal (remember your CRAP principles)?
Yes – the relationships between the elements lead you to find the information you want (as long as it’s on the page, which can’t really be controlled by the design). The wide spacing is good, because it gives the page a kind of clear minimalism where it’s easy to see all the info. The alignment also lets you clearly see what’s going on, and which information belongs in which category.
What font families are most prominent on the page? (use the WhatFont add-on or your browser’s developer tools to inspect this).
  • System-ui for basically everything except headings
  • San Francisco for headings

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

In this case, it contributes to the site’s flow because there is very little text in the San Francisco font, so its use is emphasized. Most of the text is small, and all of it is simple, which gives focus to the information, the way it should be.

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

As I’ve mentioned other places, the line spacing is very sparse, which means that it is very clear and well-organized. The spareness helps people from having to search too hard to find what they’re looking for – one glance and they can tell if the info they need is there or not.

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

There isn’t a whole lot that I would do to change this. I think the tabs on the side work well and it’s easy to tell if the info you want will be on the page or not. In terms of design, I might suggest a little less grey because it makes the page look boring. If colors aren’t a good option, why not make it more white? That gives the page a cleaner look without looking like it’s trying to be too businesslike.

-Not Facebook about page-page-001

PHOTOS PAGE:
facebook_photos_obscured

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

The most likely user of this page is, again, probably someone who is interested in seeing their friend’s photos. It could also be used by the person themselves, because they want to look back through their own photos and memories. This page is much more likely to be used by the FB user themselves than, say, the About page, because it contains content that they might actually want to go back and look at in the future.

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

Any user’s critical goal on this page would be to view photos, view information about them, and go back to scrolling with as little interruption as possible.

Does the visual hierarchy you sketched lead to that goal?

Yes it does – it allows people to infinitely scroll through pictures, click on the pictures to expand and look at them, view comments and other info, and then click out of the picture and go right back to scrolling.

Do the relationships between the elements lead you to that goal (remember your CRAP principles)?

Yes – the majority of the page is left fairly simple because there’s a lot going on in the picture section. The three tabs at the top are a good way to space out the rest of the page from the scroll of pictures. Most of the page is vibrant because of the pictures, and the rest of it is relatively basic – good contrast. Your eye is immediately drawn to the pictures.

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

  • System – ui for basically everything except headings
  • San Francisco for headings

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

Again, these font families contribute to the site’s flow because they are very simple, and they keep the focus where it belongs – on the content and the photos. While both fonts are simple, the fact that the headers are in a different font emphasizes the headers, which is always great because it contributes to the overall modularity and breakup of the sections – good organization.

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

The line spacings, sizes and weights contribute to the site’s flow because they are very much not the focus of the page. For a “photos” page, you expect to see lots of photos and aren’t as concerned with text (besides headers, so you know what kinds of photos you’re looking at). This page fulfills that, and it means that there isn’t a whole lot to critique. Except – I can say that the text that is there is spaced very far apart, which means it is emphasized when it shows up. Some with the headings – they are a suitably larger size than most of the other text, so your eye is drawn to them. This is good because you’re mostly looking for photos under different categories, so it’s important that the categories are clearly labeled so you don’t get lost.

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

The one thing that I would do to achieve a better hierarchy is to have a way to jump between points in time without having to scroll. Right now, to see pictures from 2013, for example, you would have to scroll through four years’ worth of pictures. A way to jump to a certain point would be a great way to organize the photos even further.

-Not Facebook photo page -page-001

 
And now, because you made it all the way through this post, here are the cutest gifs of puppies I could find on short notice:
cute-puppy-gifs-cute
So cute. Look at its little yawn!

 

cute-puppies-02
She’s drinking water but she has her little paws in there, too! 

 

cute-puppies-19
Aw, he’s so sleepy! Look at those little ears! 

Okay, I’m all done! See you on the other side!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s