FlatBook New Flat UI 2016 (by FBPURITY.NET)

Description

FLATBOOK 2016: FLAT UI FOR FACEBOOK, FLAT DESIGN FOR FACEBOOK.

Some features of the extension:
- Astonishing new design and interface;
- Removing all Facebook ads (similar to Adblock);
- Facebook works much faster than before;
- Very useful left panel that allow quick access to main sections;
- Increased readability of the content;
- Read a different news feeds (by category)

After 10 years, Facebook has become one of the most used sites in existence...so why does it still look 10 years old? All other factors aside, the criticism for Facebook's outdated desktop design is well known. Some designers are asking "Why is the design of Facebook's desktop site so bad?" and arguing that looks-wise, Google+ and Flipboard are years ahead of Facebook – which, in this case, means 'current'. For these reasons, "Flatbook for Facebook Flat UI" extension was born.


★★★ Features

✔ Updating Facebook's design

As I mentioned above, one of the big issues with Facebook's UI is excessive content, all competing with each other. When I examined the site critically, it seemed a lot of that content was unnecessary, at least to be ever-present on the page.

In order to find the one item you're looking for, you need to scan a sea of similar items, in a 'Where's Waldo' type fashion, which can be frustrating for accessing your own content. The more options the user has to search through, the more cognitive load is created, which only adds lag to the UX. Their navigation system is shaggy and in-need of a trim.

Sure a lot of that content – timeline, photos, games, etc – is relevant. But on the other hand, a lot of it isn't. But how do you redesign an interface to please all users of one of the most diverse audience of users on the internet?

✔ 01. The illusion of invisibility

When designing a new interface, you must consider the motivations of the user right alongside any financial interests. A popular, but dangerous, train of thought is that for a company to be noticed, they must draw attention to itself and it's great new features. But the user tends to prefer just the opposite.

The most useful UIs are the ones that you forget are there. Like an invisible hand, they guide the user in completely their goals as easily as possible. This 'Slippy UX' is designed around the user solving their problems. With no distractions, the user is free to concentrate on the task at hand.

Every time you consider adding new elements to your UI, ask yourself, does the user really need it?

For Facebook, the user's main goals are about finding the content they care about most. To facilitate this, I removed the right-side stats listings like 'Recent posts' and 'Trending': these are secondary functions that distract from the primary one. As a result, the new interface makes it easier for users to sift through their feed to find what they care about.

✔ 02. Updated labels

One of the most confusing aspects of Facebook has always been the left menu. For some reason, the elements are listed so incomprehensibly. Just compare the UI in 2004 and 2015:

The original design was actually an improvement on the current one, though they didn't have as much to worry about. In order the manage the current Facebook's content load, I needed a more efficient label system.

I simply took what worked about the original menu – including the 'my this, my that' format, which adds a nice personal touch – and expanded it to cover the additions from the las decade. "Flatbook for Facebook Flat UI"'s labels are logical, self-evident, and consistent.

✔ 03. Reducing page-to-page friction

"Flatbook for Facebook Flat UI" features a simple 'sticky' menu that never leaves
Good designs reduce the amount of clicking (friction) to a minimum. In Facebook now, leaving the main page makes the menu disappear, forcing the user into extra clicks. The solution was a simple 'sticky' menu that never leaves – even on your own profile page.

✔ 04. Streamlining the typeface

When it comes to typography, form is function. As Web Design Trends 2015 & 2016 explains: "Flat typography encourages designers to think more carefully about every type selection. Even serif typefaces have evolved with simpler letterforms becoming the norm, allowing the content itself to shine through."

For a site that relies so much on textual content, Facebook's current Helvetica typography is thin and unassuming. In its current busy interface, this pushes the text even deeper into the background, but anything stronger would be just another element competing for user attention.

A social network typeface needs to be clear and inviting to users
"Flatbook for Facebook Flat UI"'s simplified interface, however, opened up a lot of doors for typography with the freedom to be seen. I chose Trebuchet for my typeface because it's legible but still friendly, and the curvature helps populate the space.

Maybe it's not as sleek or sexy as some of today's more popular flat typefaces, but that's not what Facebook needs. A social network typeface needs to be clear and inviting to users. As is the case with all design, it's not about the best choice – it's about the right choice.

✔ 05. Bold strokes of colour

Colours are no longer just decoration – they create an instantly understood emotional language. Any successful update to Facebook would require a new coat of paint.

In the content-focused design philosophy, less gradients leads to less visual noise, another way to make navigation and searches easier for the user. Continuing the overall simplification, I used CSS styles to completely flatten the colour palette.

No bevels, no shadows, and no gradients. For backgrounds and menus, bold and bright colours create a natural contrast, drawing the viewer towards the content and navigation.

✔ 06. Embracing white space

Often underrated, white space impacts the visuals of a site just as much as colour or typography. And because white space improves comprehension, it was the perfect medicine for a site like Facebook that suffers from overcrowding.

By increasing the white space around every element – menus, buttons, blocks with posts, private messages etc – the content became more scannable and legible, heightening the UX.

There was another concern with this, though: to keep up with constantly increasing resolutions, I had to stretch each content card to get rid of the awkward extra space. Luckily, without the right-hand stats column, there was plenty of room to play around with.


✔ Final considerations

The current structure of Facebook's design isn't the problem, only its presentation. Unlike some more radical redesigns (like this Windows-inspired reimagining), I didn't want to alter the interface in such a way that users would need to relearn Facebook entirely. Such a drastic change on such a popular system risks business suicide, no matter how beautiful the new visual design might look.

The MAYA principle (Most Advanced Yet Acceptable) comes to mind here. The redesign needed to be better, but also familiar.

With the "Flatbook for Facebook Flat UI" chrome extension, my goal was to return Facebook to a more content-focused (and therefore user-focused) design by applying the usability principles of flat design. Aesthetic improvements like crisp typography, clear contrast, and a minimalist elements all contributed to a more lightweight interface with faster loading, searching, and navigation.

Considering the vast amount of content Facebook must support, the best design really is no design at all.


★★★ Terms and Conditions

"Facebook" is a registered trademark of Facebook Inc. Our website and browser extensions are neither endorsed by or affiliated with Facebook.

Use "Flatbook 2016" extension at your own risk, it comes with no warranty or guarantee, neither explicit or implicit towards functionality or usability. The author shall not be held liable for any damage or loss of data caused by its use. By downloading and installing "Flatbook 2016" extension, you agree to these terms.


★★★ If you like this addon, you may like these extensions too:

Clean Up News Feed - Ad Block - PURITY 2016
https://chrome.google.com/webstore/detail/higjjoffecpgcnfgegcbccfgbkjnfapb

Social Fixer PRO 2016 (by FB-PURITY.NET)
https://chrome.google.com/webstore/detail/bdifjbmfijpfaeobpmoiicdpcbjeppga

Note: Only use one of them at a time to avoid conflict. Restart browser or refresh all Facebook tabs after installation, otherwise it won't work.