Readability, Yet Another iOS App on Android

Readability is one of the big name iOS apps. They recently released their Android client. Unfortunately, it is not good news. While the app is technically very well made they've done the same mistake we've seen before. It is an iOS app with iOS UI paradigms running on Android.

Readability is a bit different from some of the disasters we've seen before though. This app is clearly a result of very skilled engineering team that has managed to build something very responsive and technically nearly flawless. Unfortunately, neither the technical or design team have had good understanding of the target platform. It saddens me to see that this much skilled work has ended up getting wasted.

Initial user reception hasn't been very good either. In this article I want to take a look at few of the components they've used and explore alternatives they could have used to make their app feel Android and improve their market rating.

Top Bar
The app uses a strange and unfamiliar top bar. It has similar function as an action bar would have but the implementation feels foreign on Android. The left part of the top bar is a drop down that allow user to filter the reading list. On the right side there's three dots that will reveal more functions but not the Android way. Tapping the three dots triggers a sliding animation that reveals search, edit, add and settings. A "back" appears on the left side that can be used to move back to the previous bar state.

Solution: They should have used the Android action bar pattern. The action bar provides all the functionality in a familiar way. The drop down filter can be used the same way and actions can be either on the action bar or in the overflow menu where users will find them. 

Contextual Actions

User can perform actions per list item but the way these contextual actions are made visible will not familiar to Android users. Firstly, there are two separate action states. Three contextual actions are exposed by swiping a single list item. This interaction is something that is widely used on iOS but never used on Android.

A second edit more is started by selecting "edit" from the top bar. This changes the UI slightly and allow user to select multiple items and move or delete them.

Solution: Again, Android action bar provide all this in a familiar way in form of the action mode. The action mode even supports difference between bulk actions (performed on multiple items) and single row actions. Enabling the action mode should be initialized either by long press on an row item or better yet having a check box on each row that users can click.


Settings
The app implements fully custom settings screen. They have gone in length to make it look like iOS settings screen. The app even directly violates Android design guide by using right-pointing carets on the settings list.

Solution: They should have used Android property view to make settings screen look and feel consistent with all other Android apps.


On-Screen Back Button
The app tutorial screen features the notorious on-screen back button. And it even is styled like an iOS button.

Solution: This is an easy one. Remove the back button. It simply is not needed!



Notification Flood
This isn't iOS vs. Android related but it is a user experience problem that can be easily fixed. The app notifies user with status bar notifications way too often.

Solution: There's no need to notify user when the app is doing a refresh in background. Only notify user when there's a long lasting job (like downloading items). Also, make sure that all notifications either allow user to terminate the long running task or lead to a screen where users can do that.


Menu on Reading Screen
On reading screen tapping the Android menu button doesn't do anything. To bring up the menu options  user must tap the screen on non-link and non-image area. This is very different from what Android users will expect.

Solution: Make the Android menu button bring up the menu. It could be worth considering using action bar on this screen too to use on screen menu instead of the button to comply with the latest recommendations. They could consider using automatically hiding the action bar to allow use of full screen for reading.


Sharing

Sharing in the app is implemented wrong. There's no other word for it. The app is not using Android intents but instead implements sharing manually through Facebook and Twitter. Also, note that they use the iOS share menu item instead of the Android one.

Solution: Use intents! Use Android sharing icon! There's no reason to force users to login to twitter in this app too as they probably already have a twitter app they're using and are logged in.


Conclusion, TL;DR
Unlike, the disaster of IKEA app I wrote about before seeing this app makes me sad, not angry. The dev team have spent a lot time building something that is not needed. I can just imagine how much time was wasted for Facebook and Twitter integration as it all could have literally been two lines of code. Same thing with the top bar and context menu functions. The implementation is technically flawless but useless. Correct functionality would have been there ready and tested. The team could have taken the ready functionality and been done months ago and even gotten much better ratings. They could have spend the time building something awesome instead.

I wish best of luck to the Reabability team and as they've already demonstrates great skill I hope they'll take the time to make it right on Android. If they do I have no doubt in my mind that it will be a success.



[Update] I got this back from Chris Dary (CTO of Readability) in Twitter. I have no doubt that the next version will be much better!