Why is the new Facebook the best thing which happened in UX/UI recently
The problem with a mass-used product, like a social network, is that people get used to outdated user experience, or non-consistent user interface, very easily—with no other option on the table, users use it so often, they just don't mind after some time. What it eventually does is that it cripples public perception of UX. Facebook always did a terrible job at this. Until now.
Facebook users always had plenty of time to get used to a new version.
And they always hate it.
The problem is Facebook never really set a good standard for UX nor UI. With so many visitors, its responsibility towards the education of how a digital product should look and feel was always very low.
Other products are just not that lucky and even when trying to use modern standards, are often perceived in the optics of a commonly used product — like Facebook. Users often don't get the latest UX, because it's just so easy to use. So easy, it's suspicious. Where the hell is the complexity and multiple options to focus on? I love it that way!
I didn’t support any new version of Facebook just because it was never consistent or done well. So I approached the new version with skepticism… and I was wrong.
It's one of the best examples of how a modern interface should look and behave.
Users hate it.
They'll get used to it.
And it's for the good. Finally.
1. Consistent UI
One of the keys to great usability is consistent and unified UI. Facebook was always using multiple UI elements from different stages of development. One button was rounded, one was not, one field had this radius, the other had a different one, etc. No rules at all, no unified UI kit used.
When done right, you identify a certain element without even thinking about it, since it behaves the same way all over the site. Oh, look, a field!
It's not a hard thing to do. But even a design system founder struggles to do that.
What could be done better are rules for the call to action (CTA) color. Facebook is using blue for an active element, for a clickable element, or for a label. Not clear at all.
What Facebook did there:
✅ Unified fields
✅ Unified clickable elements
✅ Unified font kit
❌ Button's paddings and font sizes sometimes vary too much
❌ Usage of blue CTA color is not clear
2. Mobile-like experience
Why is everything sooo huge? A lot of users ask.
A total minority.
As of July 2020, 98 % of users visited Facebook via any kind of mobile device and 79.2 % (!) ONLY via a mobile device and this trend is still growing.
When you have almost every user familiar with a mobile experience would you do the design touch-friendly, or cursor friendly?
Still, it's not a typical mobile-first solution, with the desktop version using something we all considered extinct.
The three columns.
Three columns layouts are dead. I heart that one like 10 years ago. It was mostly because users got distracted with three pieces of information on the same level, scrolling up and down to read, etc. But with the new Facebook, more columns make perfect sense.
The whole layout is a combination of multiple mobile-like experiences, which most of the users are familiar with. Imagine each column as a mobile screen — when you interact within the column, you never go anywhere else. Notice, that your whole interaction is happening right where you expect it.
The left side is the most prominent one for navigation and search. Right is more about creation and communication. Doesn't matter so much, but in the name of unified UI, all drop-downs and menus behave the same way, in the same place, preventing any confusion.
Done right, users don't have to travel with their eyes, don't lose focus, or wait for subpages to load.
The best demonstration of micro-navigation is a mobile-like submenu.
What Facebook did there:
✅ Consistent layout
✅ Consistent behavior and design of menus and drop-downs
✅ Using micro-navigation
❌ A more mobile-like touch experience will place the navigation to the bottom of the page, not the top, where it is hard to reach with your thumb.
3. Forms done right
Your conversion rate often depends on forms. Most designers can't do it right and users get lost or leave the page. The new Facebook is using multiple principles of how modern UX of forms should look like.
Did you ever start to fill in a field with a placeholder that disappeared when you start typing and you forgot what was eventually there? So you deleted what you typed just to have a look?
Or did you ever need to fill in a date and was making sure about the correct format for multiple times? Or even filled in the day first, then month and then a year in three different fields?
I know you did.
But there are rules to follow to do this right.
✅ Placeholder converted to a label when you start typing.
✅ Bulked options (f.e. for dates) and logical usage of two (or more) fields on the same line
✅ Customized drop-downs for different types of data
✅ Hidden options for something not yet selected, so you don't overlook it
✅ Focus on the selected field
❌ Start/End Time fields are missing a dropdown arrow, telling what to expect on click
❌ A nice-to-have: Highlighting the first field — user's attention is driven to the beginning of the form
4. No distractions
If you ever want to make stuff done, focus on one thing at a time.
In modern UX, it's the same story. If the user picks an option to do something, or create something, don't lose him/her because of distractions.
Let them do one thing.
If you write an article on Medium, you just write. There's nothing else than a blank screen and a cursor.
The new Facebook is mostly trying the same thing — if you want to create a post, the content will fade out and you are left with a place to write, use search, or top-right menu.
The same applies to questions/options. Anything essential should be asked one thing at a time and can’t be skipped. The answer rate will be close to 90 %.
You can't continue with an event creation if you don't choose an option for online, or in-person meeting.
What Facebook did there:
✅ If you have to choose/ask something important, do it one by one
✅ Let the users focus on one thing only. The rest can wait.
5. Flawless responsive design
Just try it.
With so many users using mobile devices, even events have an option to switch between desktop and mobile views. No surprises.
All wrapped up, it's a job well done.
Great news for every UX/UI designer out there.
Millions of users will get used to modern and mobile-future user experience.
It will influence hundreds of other products.
And save a lot of time.
Besides doing branding, product design & UX for more than 12 years, spent the last 5 building products and innovations for corporations and startups. Awarded ex Creative Director at U+, Ex CEO of U+Design. User Experience and startup lecturer talked in Prague, New York, or San Francisco. This is Garcy founder and lifestyle blogger.