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

An analysis of the grid systems used on Facebooks new desktop interface.

This article is the second part of a series of articles doing a quick review of the new interface. The other parts have been linked below. For those who have read the first part, skip to the meat or read on.

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.

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 Facebook's new desktop interface and does not dive into the UI for any other device.

The TL;DR

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

1. Information architecture and navigation

Facebooks new UI goes from wow to ouch… fast!(Part 1)

2. Grids

3. Attention to detail (loading rant…)

Part 2 — Grids

We are all familiar with how Facebook has not been able to maintain a consistent grid across its platform over the years as it built out new features, added new functionality and changed focus and direction multiple times.

This happens often with large products and websites that have multiple design teams with their own set of systems and guidelines working on the same platform

So now comes the time that Facebook settled in and decided to redo a major part of their platform. A year after the initial announcement we finally get to see the work that's been put in. As Mark mentioned, the new interface moves away from being a public town hall to concentrating on private conversations, groups, etc. But in more than a year of work, why couldn't they fix the inconsistencies in the grid being used across the platform?

You must be thinking, what the hell is he talking about? Well, look at the screens below and then let's get back to this.

Grid 1 — Home

The first grid system used by Facebook hasn't changed much from that it still uses 3 distinct areas but moves from a boxed layout to a full-width one thus making the most of the screen. Like many dashboard systems, the primary content areas use a grid that is independent of the ancillary areas.

Grid 2 — Hey that looks different

On switching to the pages section, this grid completely changes.

• The left column is much broader
• The primary content area uses a new grid that is centered excluding the left column.
• The container cuts into the right column of the top menu. This really looked like an error to me until I saw the next page.

Grid 3 — Did something change again?

• The left column remains constant. This continues across the other grids too. I’m still trying to figure out why they couldn't just use the same left column on the home/feed page too. Any ideas?
• The central column gets a new container which is slightly narrower than the earlier container to account for the aspect ratios of videos I assume. Question — why couldn’t the pages container be the same width?
• The container sits weirdly under the top menu in a way that it looks misaligned. So the misalignment continues.

Grid 4 — Time to give up

OK now, let’s do this one more time. All together now. 😛

• Left column stays consistent
• The central container now has 8 columns which obviously don’t match any of the earlier containers.

There is one more section with a slightly different grid to grid 2 but I think we all get the gist by now. If anyone knows the relevance of using multiple grid systems across a product, please let me know.

So Facebook Design, time to get in line! or in grid! Or at the least, please

There are a multitude of articles written on the importance of grid systems in visual and web design but some of the key points are

1. Grid systems help provide a clear hierarchy
2. They help create a rhythm across the design thus guiding the user through the journey with least resistance
3. They help maintain consistency and avoid recoil from the user on viewing a completely new page which might look alien to the rest
4. They avoid creating repetitive elements across various sizes to account for different grids. This greatly reduces both dev and design time.
5. The ensure conformity and negate elements clashing or moving into each other. (Unless you are going for a broken grid layout.)

We’ve already seen a few tweaks to the interface since Facebook started rolling out the update and It looks like they are doing a good job learning.

I’ll try staying ahead of the curve till then. :)

Keep a lookout for part 3 in the series.

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