Does the design of the user interface (UI) of mobile applications depend on the type of their operating system? What is the difference between Android and iOS UI design? What points should the UI/UX designer pay attention to to design an attractive and user-friendly user interface for Apple and Android devices?
Apple’s iOS and Google’s Android operating systems are two famous mobile operating systems. The number of users of both these operating systems is very high and each of them has its fans.
Since each of these operating systems follows certain rules in the design of their user interface and visual elements, UI designers must also pay attention to these rules in the design process.
In this article, the differences in the design of the user interface (UI) in iOS and Android have been investigated, which strongly affects the efficiency and beauty of the product.
Table of Contents
Why should UI design be compatible with the operating system?
Before we examine the difference between UI design in Android and iOS, it is better to first answer the question is it necessary to adhere to the principles and rules of operating system design in the UI design of a product?
The truth is that the hand of the UI designer is completely open to design the product in any operating system. It means that the designer can apply any kind of creativity in his designs. But here is the important point: since each operating system has its design principles, in other words, its system design, the use of these principles in UI design will ultimately make that product compatible with the operating system and, as a result, create a harmonious experience for the user. to be Following these rules helps improve the user experience, and applications are seen as part of that operating system.
Android and iOS UI Design Guidelines
iOS and Android each follow different rules and guidelines for user interface design and app development. In other words, Android and iOS design principles are like building codes in a particular neighborhood. These rules tell designers and developers how to design programs and applications that conform to the overall look and feel of the operating system (neighborhood).
The purpose of these guidelines is to create a perfect user experience between the device and the applications. Without these guidelines, each app may have a completely different design, forcing users to learn a new user interface for each new product.
In addition, according to the basic principles of user experience design and design psychology, we know that forcing users to think too much is a destructive factor and may lead to dissatisfaction and eventually leaving the product.
Android: Material Design
Material Design is Google’s user interface design guidelines used in Android devices. These principles are an open-source library that companies can use to build various digital products. Google’s Material Design principles emphasize bold colors, shadow effects, and grid layout.
iOS: Human Interface Guidelines (HIG)
These guidelines are prepared and maintained by Apple. These guides include guidelines for designing and developing products for Apple devices.
These principles focus on using simple design elements such as minimal icons, simple typography, and a limited color palette.
Key differences in UI design in Android and iOS
1. The size of the pages
One of the features of designing for iOS is that Apple products are all of a certain screen size, and this helps the designer check his design on any Apple device with any screen size.
On the other hand, the variety of Android devices is very high and the screen size of each one is different from the other. Due to this wide variety, it is not possible to test the product on all these devices and this may become a challenge for designers.
2. Units of measurement
In designing the application for iOS and Android, different measurement units are used:
iOS uses a unit called (pt) or points. Each pixel is equal to 0.75 pt.
Android uses a unit called density-independent pixels or (dp). Each pixel is equal to 1 dp.
For example, the dimensions of the touch area (Tap Target Sizes) in Apple devices are 44 x 44 pt equivalent to 59 x 59 pixels, and in Android 48 x 48 dp is equivalent to 48 x 48 pixels.
3. navigation
One of the important differences between the user interface design of Android and iOS applications is in their navigation.
The navigation pattern in Android is hierarchical. In this template, users can access various features of the application through the drop-down menu (Navigation Drawer). This menu can be accessed by tapping on the hamburger icon (three parallel lines) in the upper left corner of the screen.
While the navigation pattern in iOS is tabbed. In this template, users can access various features of the application by tapping on the tabs at the bottom of the page.
The navigation bar at the top of the screen is similar in both operating systems and includes the following:
Back button on the left.
title page in the center,
Other operating buttons are on the right.
The only difference between Android and iOS in the navigation bar at the top of the screen is that the operational buttons in iOS are usually text, and in Android, icons are used to display these buttons.
Another difference between Android and iOS navigation is that in Android, the bottom navigation bar is always visible and gives users the following options:
- View all open applications.
- Return to the main page (Home),
- Return to the previous page.
In iOS, there are no dedicated buttons to return to the home screen or to return to the previous screen. Users can see all open applications by swiping from the bottom left.
4. typography
Typography (font type and style) is different in the user interface design of Android and iOS applications.
Android devices use the Roboto font, which is a simple font. This font is designed to be easily readable on different screens with different sizes and resolutions.
iOS devices use the San Francisco font, which is a simple font. This font is also designed for mobile devices and is easy to read on different screens with different sizes and resolutions. The height of the San Francisco font is slightly larger than other fonts, which makes it easier to read on small screens.
5. Date Picker
In iOS, three scroll wheels are usually used to select the date, and users can select the day, month, and year by moving these wheels. But in cases where you need to select a period, iOS uses a calendar interface.
In contrast, Android usually uses a standard calendar interface to select the date, where users can click on different days to select the desired date. However, in some cases, Android also uses scroll wheels to select the time.
6. Messages and warnings
Messages and warnings are a type of modal windows (modals) that are used to display important and necessary information and usually force the user to choose between two options (confirm or cancel).
A modal window is a type of window that, when opened, cannot access other parts of the application or website until the user interacts with them. These types of windows temporarily interrupt the user’s main flow to draw the user’s attention to important information or decisions.
For example, when a user wants to delete an item, they are asked to confirm whether they are sure.
In Apple’s Human Interface Guidelines (HIG) design system, these models are known as “Alerts”, while in Google’s Material Design system, they are called “Dialogs”. Each platform has specific guidelines and principles for designing and using these models that designers must follow.