Categories
Design Thinking

Why Facebook’s Desktop UI Makes No Sense from Human Computer-Interaction Perspective

Is this is beginning of the end of the new Facebook Desktop user interface?

Every once in a while, a design change comes – and people get furious. And it’s quite OK – because people hate changes. Remember, I was seven. People hated the icons of iOS 7. But eventually we made peace with it. However, in this case of Facebook’s redesign, I think the hatred is quite logical. Because when examining the designs from HCI perspective, I had found that they are repeating the same mistake which Microsoft did a few years ago.

A hallmark of a good user interface is how simple it is to find and do things on a web page.

Users shouldn’t have to read a manual in order to publish a Facebook post.

Why I think Facebook is in trouble with the new desktop design

2012, I was using Windows 7 on my laptop. A free offer prompted on my screen to upgrade from Win 7 to Win 8. The first look was really very impressive, but the problem started when I was trying to find common apps that I needed most. I tried many ways with utter frustration to get back to old desktop theme and when I finally did, the option was to move the mouse pointer to absolute lower left corner. The “tile thing” on Win8 had nothing to do with my PC activities! I desperately Googled to get back my Desktop look and feel permanently. I still wonder how many people use that tiled interface on their Win 10 PCs.

Probably not many. Because Microsoft has been phasing out the tiles and in the October 2020 update, the new start menu will finally put a nail on the coffin for tiles.

The reason why Microsoft was pushing tiled interface hard was based on the assumption that people will no longer be using the PC we know today, instead everybody will be carrying and working with mobile computing devices with no mouse and keyboard. While the later part is true, contrary to their belief, people are still using PCs with tiled interface off. They were theoretically (Fitt’s Law) correct, but not historically (Cognitive Adaptation). Moreover, it was also Microsoft’s illusion that if most users get adapted with their new interface, people will be quick to accept their mobile Operating System. Eventually they launched their Windows Mobile and when I got my hand on it, I couldn’t figure out how to make call with this pathetic device! The rest is history, a 100s of millions $ just drained into water.

Facebook’s new design turns your PC into an enormous phone

Once you switch to the new Facebook layout, the first overwhelming impression is one of supreme embiggenment.

Everything is so ******* big! From the icons to the layouts, the buttons, it’s like it has been designed for really small resolution phones.

Facebook forgets Fitt’s Law

While designing the new Facebook user interface, I guess the designers completely forgot there is a thing named Fitts Law. Here is a simplified version of the law.

You can read this really cool article on Fitts Law and it’s importance on our life in this article at interaction design foundation.

If you have time, listen to my WordCamp session on human-computer interaction where I have talked about Fitts Law from 25 minutes mark in this video.

The text sizes are larger, the elements are more widely spaced, and very little fits on the screen at Interaction Design Foundation

Fitt's Law
IDF explaining Fitt’s Law

Put simply, Fitts’ Law states: “…the time to acquire a target is a function of the distance to and size of the target”. As the distance increases, movement takes longer and as the size decreases selection again takes longer. Whilst Paul Fitts established his law of movement before the advent of graphical user interfaces, the law is no less robust when applied to navigation through the virtual world.

Interaction Design Foundation

The Stories banner is, thankfully, less obnoxiously huge than it was on the old layout. That’s a matter of sheer necessity, unfortunately; it has to be smaller in order to fit even half of a post underneath it on the new scale of things. I was unable to find a single pair of posts on my timeline that would fit on one page under the new layout—and at least half of them were at least two pages tall, all by themselves.

What’s really ugly

  • Huge text! Even normal texts are huge
  • Wasted space! The left and right portion is completely wasted.
  • Only one post on the screen at a time. (Huge waste of space!)
  • The Messenger functionality is also downgraded, with only a single chat visible at any one time. If you click another contact or group on your contacts list, your current chat disappears, to be replaced with the new one.
  • The layout itself, basically!

Doing the same mistake like Microsoft: Taking users’ for granted

As I said in the earlier part of the article, Microsoft paid a price for taking users for granted. The same could happen to Microsoft.

Don’t get me wrong. I don’t hate Facebook. I actually admired them for some design changes in mobile a few months back. But you can’t replicate the same design and push it to your desktop users.

There are more Facebook users on mobile phone (79.2%) than on PC, 19.1% users use on both. Taking the fact guaranteed, Facebook might have similar expection/hypothesis that PC users are ready or even will be happy to use its mobile interface paradigm on desktop. My instinct only can tell that this could be another Microsoft case where they failed on both end.

P.S. Thanks to Dr. Tabin Hasan, a Human Computer Interaction Scholar and my HCI mentor, for helping me to use some portions of his thoughts in this article.

Categories
Design Thinking

The Science Behind The New Facebook App Settings UI

Facebook recently rolled out a new User Interface for accessing the settings from mobile. The new user interface is quite a bit different than the previous user interface.

But why did Facebook roll out such a drastic change? If you analyze the new settings cards you’ll find actually find a few HCI principles coming together.

  1. The new cards now contains an icon on top and bold headings. This increases the Visibility and creates Affordance through the card UI.
  2. The second principle the new UI follows is Fitt’s Law. It’s now much easier to tap on these large buttons using our thumb or index finger. Here’s a YouTube link describing Fitt’s Law https://youtu.be/M-9FbUJk6tI

If you don’t know about the basic principles of Human Computer Interaction, watch my session at Pop-up Livestream, hosted by Matt Mullenweg. https://livestream.w.org [The second topic].

This is HCI, in action. Enjoy HCI.