Facebook's new desktop interface goes from wow to ouch… fast!(Part 1)

Over the last couple of weeks, Facebook has been rolling out a new version of their desktop interface which is a large migration from what most users are used to.

The aim of the new UI seems to be to bring various parts of the platform like groups, marketplace, stories, and videos to the fore while still maintaining enough importance for the feed and messenger.

I’ll try to keep this article short and focused and not go out into a full-blown rant, but if I do….. well, you can always navigate away. Medium has their UX sorted in that way 😉

Disclaimer — These are completely my opinions as a Facebook user and UX designer and are based on assumptions that I have made. Facebook Design do correct me where I go wrong.

Please note — This article only refers to Facebooks new desktop interface and does not dive into the UI for any other device.

The TL;DR

The new facebook desktop interface seems confused and unfocused and requires tons of work and testing for it to reach the level of its predecessor. It tries to bring attention to too many elements and features which is always tough. Some great decisions and some poor but definitely moving in the right direction.

OK, so let's dive right in. I’ll divide this series into 3 articles:

1. Information architecture and navigation
2. Grids

Facebook's new interface needs to get in line. A review (Part 2 — Grids)

3. Attention to detail (loading rant…)

Part 1 — Information architecture and navigation

The Facebook interface was primarily made up of 5 distinct areas as shown below.

1. Top navigation
2. Secondary navigations area 1
3. Primary content pane
4. Secondary navigation area 2
5. Contacts pane

Let’s do a quick break down of each one to see what has changed and what this means for us.

Top Nav

This formed the primary navigation and housed basic components like global search, profile, notifications, messenger and the settings menu.

The navigation sees a drastic shift from the traditional nav and follows the approach taken on the mobile nav putting pages, watch (videos), marketplace and groups top and center. This clearly demonstrates Facebook’s attempts at moving away from being just a social network to delivering a lot more value to their users via all the additional features that have been built into the platform.

Pros 👍

• Easy navigation to more often used features like videos and groups
• Prioritization: Bringing features that Facebook wants to prioritize to the fore
• Consistency: Retention of all earlier elements means users do not need to go searching for them

Cons 👎

• Iconography: The use of both line and solid icons across the header makes for an inconsistent look which can be disturbing to the user.
• Colour: Facebook has decided to go with a white header and removed its iconic blue header. This reduces the overall contrast on the page and might also lead to a lowered recognition and recall for the Facebook blue in the future.

Secondary Nav

Facebook divided their secondary navigation into 2 columns on either side of the central Primary content pane. These columns were used to house all the various sections of the platform that were increasingly becoming as important if not more important than the news feed.

The Facebook platform is no longer just a feed of all that’s going on in your extended network but over the years has been evolving to house a full-fledged marketplace, videos, groups (which might be one of the most used sections), business pages and messenger. The secondary navigation areas here essentially let you navigate into any one of these sections. These areas would often go unnoticed due to its location, size and apparent hierarchy with groups and pages being relegated to the lower half of the menu.

The division of navigation between the 2 columns always felt a little odd with the right column receiving a more detailed look into pages, posts, promotions, etc which was placed there to induce action on the user's part (assumption by me). The new look is an attempt to simplify this navigational flow and achieve some amount of uniformity.

Pros 👍

• Consolidation: Single access area for all additional nav elements. A user does not need to search.
• Hierarchy: Clear hierarchy between features and shortcuts/most used
• Sizing: Increased emphasis by increasing the size and reducing clutter. But, does this make the overall interface more clunky?

Cons 👎

• Distraction: Extreme use of colors in the iconography is distracting and inconsistent
• Repetition: Groups, marketplace, and videos are repeated from the primary nav and waste space. This could be avoided giving importance to other features
• Distinction: The left column flows into the main page container without any borders or shadows. This does not help the user distinguish between the elements. Each column has an independent vertical scroll and without borders or any other distinguishing feature, this makes the independence less apparent.

Primary Content Pane

The central column or container has always been the prime focus of Facebook. Taking up the maximum screen real estate, this container focuses the user on the task at hand whether it be exploring what your network is up to via the news feed, searching for items to buy on the marketplace or scrolling through all the hilarious cat videos (like the one below) that have taken over the internet on the videos pane.

Trying to make sense of the new Facebook design

At first glance, the new look seems familiar and almost identical to the previous rendition but on taking a closer look, we can find a plethora of smaller tweaks. Some of the more prevalent ones being:

• Stories are king: The new layout brings stories front and center. Looking at recent trends, stories have become one of the primary ways for users to interact and making sure the stories are the first thing one sees is definitely reinforcing the idea that Facebook is betting big on this feature.
• Removal of item names: A small but significant tweak in the UI is the complete removal of item headers. This tweak is very interesting and I would love to understand the insights that led to this action. My assumptions: 1. Users are accustomed to the UI elements and can easily differentiate between the multitude of them. 2. Removing the stories from their parent container actually gives them a lot more emphasis thus drawing the users to click and explore.
• Iconography: The new iconographic styles are visible here too. But this time in a solid color approach. (4th style on this screen till now)
• Greater emphasis on input fields: The current approach focuses more on users filling in the news update by clearly distinguishing the input element as compared to focusing on the action buttons below it from the previous UI. Facebook also seems to have reverted to their “What’s on your mind, {User}?” line from much earlier on.
• Device-specific options: There are some very interesting decisions made on what to retain and what not to on the desktop version. Notable elements are 1. “Add to Story” element is only present on mobile devices. 2. The option set under “Create post” has been made more relevant for the device you are on with mobile devices housing “Live, Photo and Check in” as compared to “Photo/Video, Tag Friends and Feeling/Activity” on the desktop version rather than giving us a large set of unwanted options to choose from.

Apart from the aforementioned changes, there seem to be multiple design changes to the UI which we shall not get into for the moment.

Pros 👍

• More real estate: The column has been given a greater width than before. This will help with readability and give more emphasis to the area. Getting rid of the element titles has also added more vertical space to play with thus being able to fit more content in the same space.
• Prioritization: Moving the stories above the post box will help with higher consumption of content.
• Differentiation and focus: The secondary nav and contacts pane has been moved to the edges of the screen thus giving a lot more focus to the primary content. Great decision, just requires some tweaking now.

Cons 👎

• Unexpected navigation: One of the weirdest interactions on the page is the “See all stories ” buttons which looks like a carousel navigation and I would have honestly expected the stories carousal to just scroll and show me more stories, but no, clicking the button takes you to an entirely new page and that doesn’t even have any content in the main container. This left me completely confused, thinking I had done something wrong and not sure why I was taken to a new page. Facebook Design is this what you’ll were going for? 😕

Clicking the “See all Stories” button navigated the user away from the carousel looking element and to a new page.

• Inconsistent design: There are some glaring inconsistencies when it comes to element alignment, colors, etc. But we will leave that for part 4 of this series

Contacts Pane

Contacts pane, messenger view, pages, well whatever it was earlier, this definitely is a contacts pane now. Facebook decided to get rid of the pages notifications from here and focus this area only on your network. Although the design here sees the least deviance, I believe the pane clearly shows the effort put in by Facebook to consolidate their information and make it easier to digest.

• Categorization: Moving the Birthdays notification from the secondary nav to this pane is a great addition as I often saw myself messaging the person on their birthday via the messenger feature than writing on their wall.
• Fixed action button: Starting a new conversation is now easier with a FAB for just this purpose.

Pros 👍

• Clear hierarchy: Moving the birthdays into the pane and removal of page notifications gives a lot more clarity to the purpose of this pane.
• Search: Adding search functionality to the top of the list makes it easier to use and find.
• FAB: The fixed action button for starting a new conversation brings forward Facebook's dedication to their messenger feature and should help in higher usage

Cons 👎

• Color and Distinction: Like everything else on the platform, the panes flow freely into the central container without a bounding box thus creating no clear distinction.
• Sizing: Increasing the sizes of all elements has made the overall look feel cluttered.
• Group chats: One needs to scroll to the bottom of all active users to finally reach the list of group chats vs showing only 10 users as was in the previous design. This can waste a lot of time and cause frustration. Also, if Facebook wants to promote their group's features, then why push this to the bottom?

As obvious, the new UI, though a huge departure from the previous version, still maintains some of the key features and functionality, while trying to bring attention to features that Facebook wants to promote.

I am certain the UI will evolve over the next few months and am really looking forward to seeing how Facebook fixes some of the issues identified here, or to see how my assumptions were completely flawed.

You can find the next part here — https://medium.com/p/9bd2b61e74c7

Want to chat about UX Design? Find me at https://www.lenoldvaz.com/