What The Difference Between UX Design for iOS and Android
Sometimes, I have clients who want to create a mobile application. But they do not specify a platform. iOS applications could be different from Android applications. Especially, from the UI design perspective. We have different guidelines and design principles for both platforms.
In this post, I want to highlight those design principles. And talk about how can we create a design that will work for both platforms. And what mistakes can we have on the way of doing this kind of work.
iOS users are familiar with seeing a distinct "back" button on the upper left of the navigation bar. It appears when users proceed past the first level hierarchy of the app. And serves as a way to get back to the main or previous screen. Normally, it appears with the left edge shaped into an arrow pointing left.
Android doesn’t have a "back" button in the top area. Instead of this, it has the navigation bar in the bottom of a device. And "back" button serves as a global control to go back whenever you are located in the app or Android native apps.
Some sources tell us that we should not make "back" button different from what we have in guidelines. Since, by pushing our concept we forcing our users to relearn. But if we create a cross-platform app we need to think about what we are building from the UX point of view. We’ll explore several examples later in this article.
Avoid using bottom tab bars on Android. Instead of this, you can place it in the top area. It could be a text buttons, icons, or icons with text labels as a type of tabs. Depends on your target audience and complexity of a design solution.
Look at the scheme below with a bunch of screen sizes of Android compared to iOS mobile devices. It’s a mess on the left side, isn’t it?
But still, we can work with it. All what we need to do is to have a little bit more patience, clear head and ability for search a simple solutions.
Let’s make it simple.
As you can see we use several terms, such as Retina, Non-Retina, HDPI, XHDPI, etc. On Android, the key unit of measure is the density-independent pixel. The purpose of this is to make sure that design has a consistent physical size across a bunch of devices.
The definition for DPs on Android is simple: 1dp = 1px @ 1x in case when 1x Android device has 160dpi screen).
iOS has only 2 types of screens. The first type is “Non-Retina” and the second that we commonly use nowadays — “Retina”. It’s more simple for understanding. Since, retina displays have a density in 2 times bigger that non-retina. And if designers prepare graphics for iOS they just need to export two versions of it (@1x and @2x).
It’s better to design these graphics using vector software like Sketch or Illustrator. This approach makes the math a lot easier. And prevents us from a poor quality of graphics that we normally get from raster images.
Common Display Sizes For Both Platforms
Take a look at the table below with the screen sizes for the most common Android devices.
And the table with screen sizes for iOS devices.
Export Of Graphics
Make sure that you have graphics like icons or other static assets for the key densities.
Material design Or New Android Guidelines
Google announced Material Design on June 25, 2014. And nowadays we can see a lot of apps using this style. It has specific terms and restrictions, mostly in case of animations. It’s a good experience and Google has good ideas on design. Moreover, I think Material Design is great.
“Material design is about interactions with layers and components in a fluid, intuitive way. When it's implemented well its truly pleasant to use.”
However, I don’t think that we should take it as a common rule for design of our apps. Especially, in the case when we develop an app for both platforms iOS and Android.
Cross-platform Apps Design And Guidelines
I like flexible design that looks similar on both platforms. I’ll show you several examples of apps and how they look like on both platforms. But this is my point of view. I think that the best thing that we can do is to learn our target audience before we start work on a design. Since, we should know what kind of people will use and what devices they use in the majority.
Android users think a little bit different from iOS users. Because, both platforms have distinctive cultures in their apps and UX at all.
In the case when you provide a solution for different form factors and people collaborate with your app with different hardware — it’s another story. You need to work on a solid solution that looks similar for different devices as much as possible. You build your own user experience and use different platforms because of broadened target audience. Or you develop a solution for team players. It makes sense to focus on a solid cross-platform solution.
I think that Instagram did a great job for their app. Instagram looks almost identical for both platforms. And it makes sense because they build their own user experience.
More Examples Of Cross-platform Applications
Airbnb uses guides of both Android and iOS. They placed tab bar in the top area on Android version and in the bottom area on iOS version.
Kayak don’t use Tab bar in the bottom area for its app either. They use main navigation on the very first screen which is not good for UX.
Resuming all that said above, designers of mobile applications should know guidelines. Or, at least, the most common patterns and interactions. But the key factor is still a good research of a target audience. It’s good for design and it’s good for a business. Do not forget about devices requirements when you develop a cross-platform design. And be consistent.