Facebook App on Android. How Far Is It from UI Guidelines?

18 Jun 2015
What UI/UX recommendations are missed in Android version of Facebook application.You might have noticed some of them already. Find out >

What’s the first social media app you’ll find on any smartphone? I’d say the best odds are it’s Facebook. But like with so many other multiplatform apps, Android seems to come second to iOS. This can be traced through how many app elements are iOS-style and don’t feel exactly ‘right’ to someone who’s been developing apps for Android since its release in 2008.

Looking at Facebook app Version: 33.0.0.45.19 downloaded from Google Play, we’ve pinpointed these subtle (and not so subtle) elements that could use some rework. There’s no guarantee that Facebook aren’t fixing them for future releases as you read this (and that would be awesome). However, this is how things stand with Facebook Android Version 33.0.0.45.19

UI ISSUES

First things first, so we’ll start with UI. The design of the app is not integral. One can feel that some design elements remain from older app versions, as well as some vivid proof that whoever was porting from the iOS platform could have been more careful.

Of course, there are much worse cases of bad porting from iOS (like when developers post iPad screenshots for an app on Google Play). Still, Facebook could have gone an extra mile with elements like:

Menu and lists (Every menu/list page has different design):

*Notes: KitKat - means design of Android OS 4.4 named KitKat

 Action bar - Material design Lists - design of the KitKat Android version

Help Center implementation: Action bar - Material design 
Lists - design of the KitKat Android version

Tab bar design was ported from iOS platform without changes. App’s menu is implemented in Material design but lines still are taken from KitKat

1. Tab bar design was ported from iOS platform without changes
2. App’s menu is implemented in Material design but lines still are taken from KitKat

Image source: Google design guidelines for lists & tabs

 Definitely KitKat design with custom checkbox

Settings: Definitely "KitKat" design with custom checkbox

Yes it's iOS settings and yes, it's iOS 6 with action bar in Material design of Facebook app for Android

I was shocked. Yes it's iOS settings and yes, it's iOS 6 with action bar in Material design (and also navigation between pages implemented as on iOS platform)

Help Center of Facebook app for Android

Next, the Help Center: If it was implemented as design of iOS 7, then where are all the arrows? If following the design of Android KitKat, then I recommend paying attention to the lines (in both cases they are not correctly implemented) and color of the list with cells

Popups and Dialogs (View of the dialogs has different design):

1. “Cancel” should be color. Text of the button should be in UPPERCASE

This one is implemented in style of the KitKat Android version
Using dialog with checkboxes is unnecessary for this function and it could be replaced with a switch. 

Sidebar menu:

 positioned on the right side; color of the background falls out from the general palette. Facebook App

1. Sidebar menu: positioned on the right side; color of the background falls out from the general palette. Our recommendation is to use either the same approach as on the web version or stick to Material design.

UI remark: Photo gallery, About, Sign In screen, Code Generator, New Comment, Add Place

 Photo gallery, About, Signin screen

1. Action bar: Why doesn't it look the same as on the other pages?
2. Font in title differs.

Facebook app for Android. Code generator

1. Font is the same as in title on the “About” page.
2. Color of the background falls out from the general color palette.
3. Gap should be added here.
4. Icon is distorted.

Buttons: News Feed Preferences/Summary, Friend Requests

News Feed Preferences. Facebook App for Android

The same buttons are implemented using different styles.

The same situation is on registration form and account confirmation form (At first sight they look the same, but still do have differences).

Registration and account confirmation forms. Facebook app for Android

1. Buttons: on the first screen, the text is uppercase and, on the second lowercase.
2. The background colors differ.
3. Title text: on the first screen it’s regular and on the second one it’s bold.

​Photo’s details:

Photo’s details. Facebook app for Android

Image descriptions in the preview are superimposed, making reading more complicated (why not to move the description to the Action panel and add scrolling for longer descriptions, which is more intuitive for users?)

See also: 9 signs proving that your application UI is in line with iOS/Android guidelines.

UX ISSUES

Why not to complicate user chat functionality? Imagine that when you’d like to write a direct message to your friend, you have to download a separate Messenger app first. Isn’t that pretty annoying?

The same is for mobile data monitoring (which you’ll find in the goodies menu).

Messenger app. Facebook for Android

Have you seen many popover menus in Android apps lately? As an Android user, you would expect to see a popup dialog or drop-down menu instead. Of course, you may find some popovers in Android apps, but this is far from best practice and yells ‘My developers have been carelessly adopting me from iOS to Android’. The screens below are particularly verbose:

Popovers in Facebook app for Android

1. Popovers are not a common practice in UX of Android users.

Application doesn’t have tutorial that could help new User quickly get familiar with the app. For example, app navigation, how to post on timeline, add friends etc. This is especially useful if the app is very different.

Form to create a new post is at the top of the list, that makes user scroll back to the beginning of the list even when he/she is searching somewhere below. Good solution for Android users was proposed with the appearance of Material design and floating action button. See examples in guides.

Instead of after word

Why did we raise this subject?

Since Android UI is made in Material design, users get used to this appearance and navigation. And when a new application is created in the same design, but with certain deviations, it leads to confusing situations, when you need to waste your time investigating the the app which you thought you knew. Interface is not user friendly, and this leads to customer's discontent and bad reviews. Therefore, the guides are being created to avoid such issues and make the development and UI implementation easier.

In this article we only identified UI guidelines violations, but didn’t propose what should be done to make UI perfect. This is our task for future topic updates, so stay tuned!

More information regarding Android UI guidelines can be found in official Developer's Guide or in our previous article “A GUIDE TO APP UI PORTING”.

SEE ALSO: