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: 220.127.116.11.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 18.104.22.168.19
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
Help Center implementation: Action bar - Material design
Lists - design of the KitKat Android version
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
Settings: Definitely "KitKat" design with custom checkbox
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)
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
Image source: Google design guidelines for dialogs.
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.
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.
Image source: Google design guidelines for navigation drawer.
UI remark: Photo gallery, About, Sign In screen, Code Generator, New Comment, Add Place
1. Action bar: Why doesn't it look the same as on the other pages?
2. Font in title differs.
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
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).
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.
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.
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).
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:
1. Popovers are not a common practice in UX of Android users.
Image source: iOS Human Interface Guidelines.
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”.
- 9 signs proving that your application UI is in line with iOS/Android guidelines
- NewIn90. Design Story of the App That Will Inspire You
- 3 Powerful Stories From Tech Team Behind Rockstar Startups