As a new UI designer, designing for mobile can be scary. With so many device variations and design specs to follow, it can be daunting to say the least! The two most popular platforms, iOS and Android, have particular UI patterns that must be adhered to. Stray too far from these patterns and you run the risk of confusing your users.
So how do you design an app for both Android and iOS? What are the key differences between the two platforms? How do you make an app that feels the same on each platform without deviating from known design patterns?
In this article I’m going to dig into these questions and share some of the key differences between iOS and Android. By the end, you’ll have a solid understanding of the differences and be more confident about designing for them.
What are the main differences between the two platforms?
Each platform comes with its own unique patterns and quirks. Understanding these differences is the key to designing for them. Here are the most common differences between the platforms:
Single device manufacturer vs. multiple
Since it’s release, iOS has only been available on iPhone / iPad. This was a smart (and predictable) move on Apple’s part, whose aim is to have complete control of their software and user experience. This is good because it leads to a cohesive user experience, but bad because it doesn’t allow other manufacturers to innovate on their platform.
Conversely, Android can be installed on any device. So, instead of just one device manufacturer, there are many: LG, Samsung and Google just to name a few. This is good because it gives manufacturers control over the OS (operating system) and allows them to craft their own user experience, but bad because Android devices don’t always have a cohesive user experience (more on this in a bit).
Physical back button vs no back button
Some android devices have a row of physical buttons on the phone itself, typically back, home and overview, while iOS only has a home and lock button.
This is just another thing that has to be kept in mind when designing your Android. What happens when a user hits the back button in your app? Check out the Android documentation on the subject to get a better handle on how the physical back button works vs digital one.
Conversely, when designing for iOS, you’ve got to put more thought into how the user gets back to their previous screen. A common pattern to use is a left pointing arrow in the top left of your app.
Different UI Patterns
The two platforms offer similar functionality, but it’s executed in different ways. Each has its own standard for things like lists, menus and headers. There are a couple things you can do as a designer to understand these patterns and make sure you’re using them properly.
- Make sure you’re familiar with iOS’ Human Interface Guidelines and Android Material’s Design Specs. These guides are the starting point for gaining a solid understanding of each platform’s unique design patterns.
- Pay attention when you use your favorite apps! Look for the different patterns being used. The best apps will stick to conventions but present them in their own unique style and personality.
Is one OS more popular than the other?
This is actually a tough question to answer. If you’re talking about devices in the hands of consumers, Android is way more popular than iOS. This is due to a lot of factors including device price, availability and having many device manufacturers. And some people just prefer Android to iOS! I know what my fellow Apple fans are thinking: “People actually prefer Android to iOS”? Yep, it’s true believe it or not!
Worldwide, Apple is at about 14% while Android is enjoying 82.8% of the market.
That being said, iOS is still hugely popular, especially in developed nations like the USA, Canada and the UK. So as a UI designer, it’s extremely important to be well versed in the individual quirks and design patterns of each platform.
Designing two versions of your app
One thing that really confuses new UI designers is understanding how you manage the design and execution of the two separate platforms. This can certainly be difficult, considering that apps should feel similar on each platform and offer the same functionality, without violating each platform’s native design patterns.
Firstly, there are tons of UI kits out there for each platform that will give you a great starting point. Sketch has iOS templates built right in (File >> New From Template >> iOS UI Design) and here’s a great one for Android.
Some elements should be the same size throughout your app like the status bar, common buttons, etc. You shouldn’t guess on these. Instead, consult the UI kits or the platform design specs.
For each interaction, make sure you consult the iOS Human Interface Guidelines or Android Material’s Design Specs to make sure you’re adhering to their common patterns. These design specs cover tons of UI elements and interactions such as switches, lists, cards, alerts, icons, buttons, etc.
You’ll need to have two separate design files for your app, but the user flows should be very similar (if not identical). Think of the user flow as the glue that keeps the two designs feeling cohesive.
When it comes time to code your app, you can use frameworks like PhoneGap which allow you to code a single version of your app, but compile it to either platform. For basic apps this can work well. But if you’re wanting a more native, polished experience, you’ll need to build a separate version of your app for each platform.
Conclusion
I hope you’ve enjoyed this introduction to designing to iOS vs Android. If you’d like to learn more about designing for the two platforms, take a look at the UI Design Course here at CareerFoundry. Our course goes in-depth on what it takes to design for mobile and gives you a well-rounded understanding of the concepts mentioned in this article.
And if you’d like to learn more, check out this article: How mobile design is different from designing for other platforms.