Intro to UX: Facebook Layout Heuristic Evaluation

Intro to UX: Facebook Layout Heuristic Evaluation - student project

What is Facebook? 

Facebook is a major social media and networking service. As the most widely-used social media platform in the world with over 1.5 billion active users, people from all walks of life use this site to share and connect with others on a regular basis. The site is used to keep in touch with friends and family, locally buy and sell items, post pictures, form interest groups, promote businesses, and more.  

Why did I decide on Facebook? 

As a daily user on the site and someone who took a curiosity in it's new redesign, I thought that Facebook in it's current state would be interesting to evaluate due to it's popularity and new features. There must be some carefully crafted design that goes into the world's most heavily-used social media site so that nearly anyone can successfully use it.  

Evaluation

I based my evaluation off of Jakob Neilsen's 10 Usability Heuristics for Interface Design, taking the time to evaluate the platform off of each of the ten individual heuristics. 

1. VISIBILITY OF SYSTEM STATUS: The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.  


Intro to UX: Facebook Layout Heuristic Evaluation - image 1 - student project 

When the site's icon in the top left corner is clicked on, it sends you to your homepage, or your feed. When this happens, a grey circle with a blue loading icon in the middle is displayed in the top center of the page. The moving loading circle informs users that the page is actively working on loading your information and is not frozen or never loaded. However, this particular loading display is only used when loading your feed and does not show up while loading other pages on the site and leaves the browser in which the site is loaded on to provide visual feedback on loading. 

When hovering over an icon, a pop-up describing said icon appears. For example, when hovering over a user's profile picture, a pop-up of the user's name, mutual friends and education is shown to give the user a quick summary of this other user's identity. Another example is when hovering over an action to create a type of post (photo/video, feeling/activity), the specific action is lit up. 

2. MATCH BETWEEN SYSTEM AND REAL WORLD: The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.  

Facebook's phrasing is designed to communicate with the average person. The platform currently offers 43 different languages to users and is currently working on being translated into more. I have my account set up to be English (US) as that is my primarily language. That said, everything on the site is in English with my current settings unless a user creates a post in a different language. Even then, the site will often offer to translate the post if the algorithm detects text in a language different than the user's set language. 

Actions are described in regular writing and phrases. When commenting on a post, the actions are described as "write a comment" and "show previous comments". Links to other pages on the site are "Messenger", "Marketplace", "Saved", and "Shortcuts". When on a user's profile page, the user's information is broken into "Intro", "Photos", "About", and "Friends". There is no action on the site that is described in the form of command prompts or in coding terms. 

3. USER CONTROL AND FREEDOM: Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.   

 

Intro to UX: Facebook Layout Heuristic Evaluation - image 2 - student project

 

Your main "feed" is Facebook's version of a main menu or lobby of it's site. It is the page that loads first when you open the site and is has a side bar which contains links to your user profile page, COVID-19 information, Messenger, Marketplace, Saved posts, and Shortcuts. This side bar is only visible on your feed. However, a top bar which contains the site's icon, a search bar, Home, Watch, another Marketplace link, Groups, Gaming, another Messenger link, and Notifications, can be accessed no matter where on the site you are. That said, if you happen to accidentally click on a page you didn't mean to go to you can simply click any of the links on the top of the page, the "back" button on the top left corner of your browser, or the Facebook icon to go to your feed. 

4. CONSISTENCY AND STANDARDS: Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions

As the world's heaviest used social media site, Facebook is more likely to set the standards for other networking sites than the other way around. That said, the site's current layout is very streamlined and consistent. 

On the top bar, the Home icon is a house. The Messenger icon is a speech bubble with a lightning bolt through it. The notification icon is a bell. The marketplace icon is a market. On a user's profile page, their employment icon is a briefcase. Their education icon is a graduation cap. Their friends icon is a stick figure and photo icon is of a photograph. All of these icons are simple yet effective in communicating to the user what each page's purpose is before going to it. 

There are a couple of Facebook-specific intricacies that are worth noting: "Friends" and the gaming icon. 

 

Intro to UX: Facebook Layout Heuristic Evaluation - image 3 - student project

Intro to UX: Facebook Layout Heuristic Evaluation - image 4 - student project

 

The standard on most social media platforms is that user's subscribed to each-other's posts and content are called "followers". Facebook calls users mutually subscribed to each-other "friends", regardless of the actual real-life relationship between the two users. On other social media platforms, one can follow another user without the user having to follow them back. On Facebook, in order to become friends, one user must send the other a friend request and have it be accepted. While there are options to block the user's posts from your feed and the account altogether, being friends with someone on Facebook is a bit more personal and exclusive in comparison to two people following each other on another social media platform. Many people will not accept a request unless they know the user in question and will hide much of their information from the public eye. 

In mist of the rise of video game and e sports streaming, Facebook now offers its own streaming service for such use. While the service itself seems rather popular among the gaming community, the icon for said service could be changed. Facebook's gaming icon on the top bar is a weirdly divided cartoon "G". The G obviously stands for gaming, but I feel as if a simple gaming controller would have done a better job communicating where the link was going to take you. as someone who plays video games on a regular basis, I had no idea what the G stood for until I clicked on it. I theorize that this design was used to stand out among competitors like Youtube Gaming and Twitch, but it seems to just create more confusion. 

5. ERROR PREVENTION: Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.  

Intro to UX: Facebook Layout Heuristic Evaluation - image 5 - student project

When logging in to the site, if an incorrect username or password was used it is cleared out and a pop-up appears saying that the incorrect information was entered. Old passwords are also kept on-file, informing the user if one was entered. 

6. RECOGNITION RATHER THAN RECALL: Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. 

Going back to Facebook icons, every icon is simple yet very recognizable. 

7. FLEXIBILITY AND EFFICIENCY OF USE: Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. 

Most of Facebook's learning curve is recognizing the symbols/icons commonly used on the site. Depending on the user's social media experience, I would say it could take anywhere from ten minutes to an hour to learn the core ins and outs of the website. For the most part the site is very easy to use and usually does not require a special tutorial or instruction. 

8. AESTHETIC AND MINIMAL DESIGN: Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

While Facebook has always been simple looking and straightforward, the current redesign especially looks sleek and streamline. The site now offers a dark mode option for users who prefer a dark navy to black backdrop in contrast to the classic white. The icons are simple and elegant. One thing I've noticed is that things such as text bubbles and posts are more rounded and that the website now sports a more cartoony look. The icons on the side are colored minimalistically and with gradients, and the icons on the top are just outlines. I noticed that blue is used quite a bit throughout the site as it is featured in the logo, on user's stories and in many of the icons featured on the side bar. 

9. HELP USERS RECOGNIZE, DIAGNOSE, AND RECOVER FROM ERRORS: Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.  

Posts, pictures and comments can be edited and deleted if the user wishes. On messenger, texts cannot be edited once sent. They can be deleted (either for themselves or for everyone), but a pop-up will appear informing the party that said text has been deleted by the user. 

If a page fails to load, an error text appears; "Sorry, this page isn't available. The link you followed may be broken, or the page may have been removed." 

10. HELP AND DOCUMENTATION: Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.  

 Intro to UX: Facebook Layout Heuristic Evaluation - image 6 - student project

 

Intro to UX: Facebook Layout Heuristic Evaluation - image 7 - student project

 

Intro to UX: Facebook Layout Heuristic Evaluation - image 8 - student project

 

Under the "Account" drop-down menu, there is a "Give Feedback" link and "Help and Support" link. Give Feedback allows the user to write feedback on the new Facebook layout or report on a broken feature. Help and Support has links the the Help Center, where questions and popular topics are listed, the Help Community, a forum board to post Facebook related questions on, a Support Inbox in which updates and messages from the Help Team are sent, and Report a Problem in which the user can directly report an issue to the Help Team.  

Summary  

Facebook's new layout is simple, sleek and beginner-friendly. The site is easy to navigate and learn as well as very organized. The few issues I do have with it are rather minute and do not affect a user's ability to use the site in the slightest. While for now the site gives users the choice to switch between the two layouts, I recommend more people give the new layout a try.