Fancy format blog solutions: https://webdevwithpurpose.wordpress.com/2017/04/01/facebook-teardown/ https://webdevwithpurpose.wordpress.com/2017/04/01/facebook-mockups/
Boring Plain-text solutions (I might fix you later)
For the final project in the Viking Coding School course “Web Design Basics”, I will be utilizing all I have learned over the course to deconstruct Facebook. This will be a bit longer, and more in-depth than my previous posts. Let’s begin.
UX Teardown
Who is the main user of Facebook?
Anyone who wants to maintain long term social connections with family, friends, and colleagues. What are the top 3 critical goals for that user?
Stay up-to-date on the current events, status, and thoughts of “friends” Comment on those posts Post personal events, status, and thoughts for others to view and comment What is the site’s approximate information architecture? (in general — don’t get caught up in the details too much)
Facebook architecture
For your top user goal, what is likely to make the user’s experience particularly satisfying?
Being able to quickly access the most pertinent posts Being able to quickly look up specific friends To accomplish this goal, how does the user flow through the site’s architecture? (ie. which pages are visited and what are clicked?)
Once logged in, you have immediate access to a news feed, as well as friend requests and notifications. If the option is checked to remember user, the login can be bypassed, instantly taking you to the home page. You are able to access specific pages through the search bar, without travelling to the search page. To view messages and notifications, you must click on the message or notification button, and then click again to be taken to the relevant message or post. Comments can be posted on page, without having to travel to a new link 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?)?
Facebook is incredibly shallow. You can access almost everything you need to on the home page, or within a single click. Reverting to the original home page, or your personal profile, can be quickly accessed on any page. It feels near impossible to get lost. It is clear where you are and how you get there. The user can easily determine where to go next. What does Facebook do well to allow the user to accomplish the top goal effectively, efficiently and with good satisfaction?
Instantaneous access to news feed and all notifications. The news feed adjusts according to previous user behaviors and settings (I want to see things similar to this. I don’t want to see things similar to this). You don’t have to travel more than a page or two to get anywhere on Facebook. Notifications auto-refresh, allowing you to instantly see responses to posts or messages. What does Facebook do poorly when allowing the user to accomplish the top goal effectively, efficiently and with good satisfaction?
The news feed goes on indefinitely. It often mingles ads with user posts, in a way that is difficult to distinguish at first glance. Once far enough down the news feed “rabbit hole”, it is very difficult to return to a specific post further up, without remembering its specific details. This is a challenge, as the news feed can often cause user information overload.
Design Teardown
For this next section, we are required to take a look at five main Facebook pages. Squint your eyes, blur them, and then take a quick sketch. This next section will be divided up by page
Login page
facebook_homepage
What areas are denser and what areas are more sparse?
The Sign Up section on the right is heavily dense with text input bars. The explanation of “Why sign up?” is more sparse, providing quick bulletpoints. Open your eyes and ask yourself “who is the most likely user of this page?”
A non-facebook user, checking it out for the first time. A facebook user who is either concerned with security, or doesn’t check into facebook very often. What is that user’s critical goal on that page?
Log in Sign-up Find out more Does the visual hierarchy you sketched lead to that goal?
I can quickly see why I should sign up, what is required to sign up, and how to sign up. It is also easy to see where to log in, if I have already signed up. Do the relationships between the elements lead you to that goal (remember your CRAP principles)?
The Blue Bar separates the Log in from the grey sign-up section. The green button stands apart The signup section is grouped apart from the “why” section, which is distinct from the log-in section. Each fits within its own alignment The blue bar and logo is prevalent throughout facebook. What font families are most prominent on the page? (use the WhatFont add-on or your browser’s developer tools to inspect this).
Helvetica How do these font families contribute to or take away from the site’s flow?
It is a very universal font, easy to read, easy to load. It speeds up loading times, and makes everything congruent. How do the line spacings, sizes and weights contribute to or take away from the site’s flow?
My attention is immediately directed to the “Sign Up”, and next to what is required. Since most users on this page are looking into signing up, this is excellent flow. Other text is used for addressing concerns. The final purpose, logging in, is on the blue bar that persists through all of facebook, and acts as the hub for facebook navigation. You should be able to immediately do what you set out to do. What would you improve to achieve a better hierarchy or flow?
As more steps are required to sign up, I would consider saving the gender and birthday fields until the next page. The less information they have to provide, the quicker they’ll click “continue”. Having the user click “Continue” is the ultimate goal.
News Feed page
facebook_newsfeed_obscured
What areas are denser and what areas are more sparse?
The center news feed column is the most dense, with the left column being the most sparse. The right column is definitely sparse, but less than the left. Open your eyes and ask yourself “who is the most likely user of this page?”
Anyone who wants to check in and get a quick update on what is happening in their circle of friends. What is that user’s critical goal on that page?
Find the latest, most pertinent postings from their “friends”. Does the visual hierarchy you sketched lead to that goal?
The most recent/popular post among the user’s friends is predominantly displayed front and center. The red notification button lights up, if any posts have been created by those you are following, or those posts related to you. Yes, it leads me straight to my goal. Do the relationships between the elements lead you to that goal (remember your CRAP principles)?
The white center column, containing the news feed, completely contrasts itself with the grey background. The right notification panel is also white, but is blocked off from the center. The left links are flat against the grey background, providing little contrast. This contrast is prioritized exceptionally for the users’ goal. The repetition, alignment, and proximity of all three sections of the page help group the sections together. What font families are most prominent on the page? (use the WhatFont add-on or your browser’s developer tools to inspect this).
Helvetica How do these font families contribute to or take away from the site’s flow?
It is a very universal font, easy to read, easy to load. It speeds up loading times, and makes everything congruent. How do the line spacings, sizes and weights contribute to or take away from the site’s flow?
The spacing, size, and weight leans most heavily towards the news feed, then the trending/notifications column, and last to the quick links. This is in the order of importance for most users. What would you improve to achieve a better hierarchy or flow?
The right-most column, containing trending and notifications, feels very imbalanced, short and wide. I would get rid of it, and turn the news feed page into a two-column system. The information provided can easily be placed in the in the news feed itself, or as a notification. Profile Page
facebook_profile_obscured
What areas are denser and what areas are more sparse?
The top is the most dense, followed by the left column, followed by the right column. The most sparse section is the timeline scrollbar, on the far right. Open your eyes and ask yourself “who is the most likely user of this page?”
Regular facebook user who is looking for more information on, or the latest events of a specific person. Regular facebook user wanting to make personal changes to their profile. What is that user’s critical goal on that page?
Gain more information on a specific person To update information Does the visual hierarchy you sketched lead to that goal?
My eyes are first drawn to the profile picture, ensuring I know exactly who’s profile I am looking at. Second, I am drawn to the profile landscape, which oven gives me a quick snapshot of what the person is like. Next, I am drawn to their status feed, showing me their most recent postings and updates. Lastly, I am drawn to the about section, which gives me more general information. I believe this visual hierarchy leads to the user’s goal. Do the relationships between the elements lead you to that goal (remember your CRAP principles)?
Everything is nicely grouped together according to purpose. It’s very easy to differentiate the sections, and accomplish my goal
What would you improve to achieve a better hierarchy or flow?
For the profile owner, it would be nice to be able to make modifications directly on the profile page, rather than visit a new page. Also, a picture is worth a thousand words. It would be great to have direct access to recently posted pictures in addition to posts.
About page
facebook_about_obscured
What areas are denser and what areas are more sparse?
The top is the most dense. The column beneath is sparse. Open your eyes and ask yourself “who is the most likely user of this page?”
A facebook user who is looking to obtain more information on a specific person A profile owner, looking to update personal information. What is that user’s critical goal on that page?
Gain more information on a specific person To update personal information Does the visual hierarchy you sketched lead to that goal?
My eyes are first drawn to the profile picture, ensuring I know exactly who’s profile I am looking at. Second, I am drawn to the profile landscape, which oven gives me a quick snapshot of what the person is like. Next, I am drawn below to the “About” section, where all information appears almost equal. There is very little visual hierarchy in this section Do the relationships between the elements lead you to that goal (remember your CRAP principles)?
There is less relationships formed between elements. The center column is divided in two, and related information is grouped together. But since all information appears to be equal, finding exactly what you are looking for could be a little more difficulty. What would you improve to achieve a better hierarchy or flow?
Quicklinks to specific sections, within “About” could really speed up the process; perhaps listed on the side as a table of contents. Photos page
facebook_photos_obscured
What areas are denser and what areas are more sparse?
The photo section is by far the most dense. The header is the most sparse. Open your eyes and ask yourself “who is the most likely user of this page?”
A facebook friend, looking up recent photos of another user A profile owner,making modifications to the pictures posted, or reminiscing about past events. What is that user’s critical goal on that page?
Look up recent pictures Search pictures Modify pictures Does the visual hierarchy you sketched lead to that goal?
My eyes are first drawn to the mosaic of pictures. All are grouped together in such a way that I can see most detail, yet view many at the same time. This is the primary goal of most users. A second goal of the profile owner would be to make modifications. The buttons present on the page serve this purpose. Do the relationships between the elements lead you to that goal (remember your CRAP principles)?
On this page, all pictures are crammed together by date. No information is provided on specific pictures. This allows the user to browse as many pictures as possible in a short time, but doesn’t lend much to search or in-depth exploration. What would you improve to achieve a better hierarchy or flow?
It would be great if there was a way to organize beyond “Photos of you” and “Your photos”. Perhaps organize by location, or allowing the user to quickly jump to a specific time.