In the last 6 months we have seen a flood of apps that have gained reputation on iOS being brought over to Android. Unfortunately many of these apps have been design disasters. Almost all of these apps fall into the same trap: not learning the target platform before doing the design.
Android is not iOS. The platform works differently. We, as Android users and developers, do not complain about these apps because we don't want Android apps look like iOS apps we complain because they break the platform guidelines and consistency. Android users have learned to use their devices in certain way. Apps that follow the Android design guidelines are easy to use and learn for Android users. Apps that follow iOS guidelines are easy to use on iOS but on on Android.
When the first one of these apps came out, Readability, I wrote a detailed post about it. Although I got a very positive response from the Readability folks who began fixing the problems other app that followed made the same mistakes. I've gathered some of them here and pointing out some of the most common mistakes. This post is not meant to be hostile or finger pointing / laughing at these apps. I sincerely hope that others would learn from these mistakes and reach better results.
Turntable.fm, Instagram, Flipboard and 500px all implement sharing wrong.
.png)
.png)
.png)
.png)
Android has set of standard icons for common tasks like sharing. Android users know what to look for. Don't use iOS sharing icon in your app!
Turntable.fm and 500px both use iOS icons.
Android is not iOS. The platform works differently. We, as Android users and developers, do not complain about these apps because we don't want Android apps look like iOS apps we complain because they break the platform guidelines and consistency. Android users have learned to use their devices in certain way. Apps that follow the Android design guidelines are easy to use and learn for Android users. Apps that follow iOS guidelines are easy to use on iOS but on on Android.
When the first one of these apps came out, Readability, I wrote a detailed post about it. Although I got a very positive response from the Readability folks who began fixing the problems other app that followed made the same mistakes. I've gathered some of them here and pointing out some of the most common mistakes. This post is not meant to be hostile or finger pointing / laughing at these apps. I sincerely hope that others would learn from these mistakes and reach better results.
Common mistake: Sharing
Android intent system is great for sharing. I've written about it before here and here. Use intents to share!Turntable.fm, Instagram, Flipboard and 500px all implement sharing wrong.
.png)
.png)
.png)
.png)
Common mistake: iOS icons
Android has set of standard icons for common tasks like sharing. Android users know what to look for. Don't use iOS sharing icon in your app!Turntable.fm and 500px both use iOS icons.
Common mistake: Right caret in lists
Android Design guidelines clearly states that lists should not use right caret.
Turntable.fm and Instagram both break this guideline.
.png)
.png)
.png)
+Paul Burke started a Google+ page for Android UI Anti-Patterns where we plan to keep eye on emerging anti-patterns on Android. The page is not meant to be a place where apps are mocked and laughed at but a page to teach and learn from mistakes made by others. The page will also be only limited to apps that have a large team behind them. Individual developers should never be used as bad examples.
PS. Thanks to Paul Burke for sending me the Turntable.fm screenshots!
.png)
.png)
Common mistake: On-screen back button
Fortunately, this is less common nowadays but this is critical. Android apps should not have an on-screen back button. Instagram fails in this..png)
The list goes on, Android UI Anti-Patterns on G+
Unfortunately, these apps here are just few of the bad examples we have seen lately and this list isn't complete.+Paul Burke started a Google+ page for Android UI Anti-Patterns where we plan to keep eye on emerging anti-patterns on Android. The page is not meant to be a place where apps are mocked and laughed at but a page to teach and learn from mistakes made by others. The page will also be only limited to apps that have a large team behind them. Individual developers should never be used as bad examples.
PS. Thanks to Paul Burke for sending me the Turntable.fm screenshots!
Le sigh.
ReplyDeleteKeep in mind, that things like the right caret not being used in lists are simply "guide lines". Since when is a guide line a hardcore rule? It's one of the strange guide lines actually, as a right caret is a perfectly intuitive way to indicate that there is something "more".
ReplyDeleteTrue, but you should really follow guidelines unless you have a good reason to break them. I don't think any these apps have a good reason. To me a guideline is the default position that should be taken and exceptions should be carefully considered.
DeleteWhat comes to the right caret I don't really see any reason to use it. It doesn't add anything. A list item already indicates that there is more. there might be cases where it could add value but then the guideline can be broken.
But yes. Your main point is absolutely right. If an app doesn't follow guidelines it should not be judged to be bad automatically.
DeleteI'm currently building a ListView which has some items focusable/selectable, and others which are not. So far, I have been putting the right caret to indicate the user that he can click them. So, which is the right guideline in the case?
DeleteThat last point isn't entirely correct, as Android apps *do* have an on-screen back button; it's just called "up".
ReplyDeleteAll that Pure Android page says is to not use "labelled" back buttons. If Instagram had removed that little divider and spacing between < and Details, it would've essentially been an Android "up" button.
Up is supposed to be different from back. The mess that is up and back is a different thing but in this case the Instagram does not use it as up. It is only used as back for some screens.
DeleteIt is indeed a mess, but if someone looks at ICS apps and sees the little "<", they're going to assume it's an on-screen back button, regardless of whether it technically goes "up".
DeleteIn the interests of this post and the solutions to fixing the mistakes you've provided for the other points, I thought maybe you could at least mention the "up", but there's no simple solution to the mess, I guess.
Yup, true.
DeleteI think that apps that use the up should use it consistently throughout the app and should also have an action bar though. The up button generally also has the app icon which Instagram doesn't have. I think that the Instagram's one is pretty far from any solution that would feel familiar to Android users.
This comment has been removed by the author.
ReplyDeleteHere for people like me looking for the official recommendation about usage of the right caret.
Deletehttp://developer.android.com/design/patterns/pure-android.html
I'm disagree in Instagram's sharing intent. It's the app mechanism to let the user to share the content along with the upload action. So it has to be the way they are using. While I agree to the Flipboard case.
ReplyDeleteThanks for sharing this info. This is important to know. As some apps are different & have different features. so there up features are different as well. Android is not iOS. The platform works differently.
ReplyDeleteSometimes it is not the developers, it is the clients. I just need to change my action bar icon to "back" button because the client needs it.
ReplyDeleteThank for sharing this information. Well i guess Instagram's one is pretty far from any solution that would feel familiar to Android users.
ReplyDeleteAndroid App Developers
The Up button is used to navigate within an app based on the hierarchical relationships between screens.
ReplyDeletehttp://developer.android.com/design/patterns/navigation.html#up-vs-back
Technically it is a back button withing an application for an average user whatever it's called.
About sharing to Twitter and Facebook - the thing is that standart Intent system doesn't allow developers to insert such things as links or logos when they do sharing. So sharing to Twitter and Facebook doesn't conform to goals of "serious" apps which prefer to promote themselves via social media.
ReplyDeleteAs an enthusiast in Android and iOS UI/UX, I totally agree that a port from iOS to Android without getting to understand the Android Design guideline can be a very frustrating experience sometimes.
ReplyDeleteHowever, for Instagram, I don't think there is any problem with the sharing mechanism. Their designed flow for user isn't really suitable to use the intent system, and they wanted the user to share it to multiple accounts at once! Well, of course we can design a slightly different intent system that allows multiple sharing, but frankly I don't think Instagram doing anything bad with their Sharing feature. Sometimes breaking a rules/guideline is OK. :)
Your article is good to use as a reference for Android app designer, thanks!