9 Differences Between iOS and Android UI Design
Apple’s iOS and Google’s Android are the two leading operating systems for mobile apps. While app developers have complete autonomy over their product’s aesthetics, native guidelines and design differences exist for each platform.
This article looks at iOS and Android app design differences, which can impact a product’s functionality and aesthetics. Applying these principles to your designs creates a holistic platform experience. Products that seamlessly integrate with the native operating system look professional while creating familiarity and minimizing learning curves.
Table of contents
Use UXPin’s built-in design libraries for iOS and Material Design to prototype and test for both platforms. Create fully interactive prototypes that accurately replicate iOS and Android user experiences. Sign up for a free trial to discover UXPin’s advanced prototyping features.
Platform-Specific UI Design Guidelines
iOS and Android each follow different interface design and app development rules and guidelines:
- Android = Material Design (Maintained by Google)
- iOS = Human Interface Guidelines (HIG) (Maintained by Apple)
Why do Android and iOS Have Guidelines?
Rather than dictating your product’s aesthetics, these guidelines instruct app developers on using components and adapting UIs to meet platform requirements and constraints.
Platform guidelines aim to create a seamless user experience between the device and third-party applications. Without these controls, every app will be wildly different, forcing users to learn a new interface for each product.
As we know from basic user experience design principles and design psychology, making users think increases cognitive load, causing frustration and ultimately leading them to abandon a product–and maybe switch from Android to iOS or vice-versa.
Android – Material Design
Android devices follow Google’s Material Design guidelines and principles. What’s unique about Material Design over HIG is that it’s an open-source, themeable library that companies use to build a wide range of digital products, including iOS apps–not only for Android devices.
Google released Material Design 3 in 2022, which included a fresh aesthetic and new features, including design tokens to “streamline the work of building, maintaining, and scaling products with a design system.”
iOS – Human Interface Guidelines (HIG)
Apple’s Human Interface Guidelines (HIG) contain guidance and instructions for designing and developing products for Apple’s products.
Apple’s iOS design resources provide designers with design files and templates for Apple products, including iPads, iPhones, Apple Watches, MacOS, etc.
What is the Difference Between Android and iOS UI Design?
1. Screen sizes
One of the benefits of designing for iOS is that Apple controls every device and screen size. Designers can apply designs to various Apple templates and predict how their products look and feel.
On the other hand, Android is the Wild West regarding devices and screen sizes. There are so many viewports it’s impossible to test products on everyone within allowable timeframes and budgets.
2. Unit of measurement and target size
iOS and Android use different units of measurement and target sizing:
- iOS = pt (points) – 1 pixel = 0.75pt
- Android = dp (density-independent pixels/dips) – 1 pixel = 1dp
Tap target sizes also differ between platforms:
- iOS = 44 x 44pt or 59 x 59px
- Android = 48 x 48dp or 48 x 48px
3. Navigation
Navigation is one of the most significant differences between the iOS and Android user experience. For one, the always-visible bottom navigation on Android devices doesn’t exist on iOS.
Android’s bottom navigation allows users to:
- View all open apps
- Return to the home screen
- And go back to the previous screen
On iOS, there is no return to home or back button, but users can view all open apps by swiping up from the bottom left.
The top navigation bar (top app bar on Android) is similar for both platforms, with a back button to the left, a title center, and other action buttons to the right.
iOS will often use text buttons for the top navigation bar’s right actions when there is only one, like “Edit,” whereas Android always uses icons.
4. Floating Action Button (FAB)
The Floating Action Button (FAB) is unique to Android devices and rarely featured in iOS applications. The FAB is a screen’s primary call to action. For example, Twitter uses the FAB to create a new Tweet, while Gmail uses it for composing a new email.
iOS’s primary CTA always lives on the far right but moves between the top navigation bar and bottom tab bar, depending on the screen’s layout.
5. System Fonts
iOS and Android use different san serif system fonts; however, the style and weight are very similar:
- iOS: San Francisco
- Android: Roboto
iOS also provides the New York typeface as a serif option.
Developers don’t have to use these system fonts, but many do to imitate the platform’s user experience and optimize performance (fewer files and requests).
Aside from system fonts, HIG and Material Design each have detailed guidelines on typography styles, sizing, weights, and usage/best practices.
6. iOS flat design vs. Material Design elevation
Another key difference between HIG and Material Design is elevation. HIG guidelines recommend a flat design, while Material Design uses shadows.
A great example of this difference is Airbnb’s FAB to open the map. At first glance, these UIs look identical, but you’ll notice the Android version uses a shadow for the FAB, whereas the iOS doesn’t.
7. Date pickers
Android uses a standard calendar interface for date pickers, while iOS uses three scrolling wheels for day, month, and year. There are exceptions to these rules. For example, iOS often reverts to a calendar for date ranges, and Android uses scrolling wheels for some time selectors.
8. Dialogs and Alerts
Alerts and Dialogs are modals that interrupt tasks with critical information, usually with two CTAs to confirm or cancel an action. For example, confirming that the user is sure, they want to delete an item.
HIG calls these modals Alerts, while Material Design refers to them as Dialogs. Each platform has specific guidelines and anatomy that designers must follow.
Material Design uses snackbars to provide low-priority messages that don’t require action, usually informing users of system feedback, like confirming something has been saved to a user’s favorites.
9. Tabs
Tabs allow users to switch views on a screen. Traditionally, Material Design used Tabs, but Google has changed to a Segmented Button in Material Design 3, which now looks more like HIG’s Tab Views component.
Segmented Buttons support three functions:
- Selecting options
- Switching views
- Sorting elements
HIG’s Tab View is for switching views only. The platform uses Segmented Controls for option selection.
Advanced Mobile Application Design With UXPin
UXPin’s code-based design tool enables designers to take interactive prototyping beyond what’s possible with traditional image-based tools.
With built-in libraries for iOS and Android UI design, UX designers can build fully functioning prototypes to test the user experience for both platforms–in the browser with Adaptive Versions or via UXPin Mirror on mobile devices.
UXPin’s built-in iOS and Material Design libraries include font styles, icons, assets, and components so designers can drag and drop to build native UIs fast!
Designers can customize these native components and save them to a Design System to share with other team members–for example, a custom iOS Alert and Material Design Dialog for testing an app UI on both platforms.
UXPin makes cross-platform prototyping easy with pre-made screens for iOS, Android, and the Web. Three grid styles enable design teams to structure canvases to meet platform-specific layouts and guidelines.
Fully interactive mobile prototypes
Designers can build fully interactive, immersive prototypes using four key UXPin features:
UXPin States allows designers to create multiple states for a single component to mimic code-like interactivity. Each state can have different properties and interactions that respond to user engagement and system changes.
For example, a button can have a default, hover, active and disabled state that changes according to mouse or tap interactions. Designers can also use States to build complex components like accordions, dropdown menus, carousels, and more.
With UXPin’s Interactions, designers can add motion to create fully animated prototypes that respond to user engagement. UXPin offers a wide range of mobile-specific triggers, including tap, swipe, press & hold, focus, and more, to enable accurate native testing.
Variables enable designers to capture user inputs and use that data elsewhere in the application to create dynamic, personalized prototype experiences–like personalizing a greeting or instructing the user to confirm the details they’ve entered before checkout.
UXPin’s Expressions take prototyping to the next level with Javascript-like functions that increase prototyping scope and complexity. Designers can validate forms, structure dates, format text from user inputs, check password criteria (symbols, letters, numbers), and more!
Enhance your iOS and Android app design with the world’s most advanced design tool. Build prototypes that accurately replicate the final product experience for improved testing and meaningful, actionable results. Sign up for a free trial to build your first interactive prototype with UXPin today.
