Mobile app design: Elemental difference between iOS and Android
Mobile app design is currently becoming more recognizable with the rise of smartphone users worldwide. In this digital era, smartphones are already becoming a daily need for everyone. Nobody wants to be left behind, and thus they have stuck to their gadget screens because smartphone apps can ease users to reach what they need. From daily activities like schedules, calls, shopping, etc. These apps’ design is also important to emerge the interaction between the users and apps themselves. As two main operating systems that are already known worldwide, iOs and Android. You need to know about the elemental difference between both operating systems.
These two big mobile domain trendsetters are successfully developed their own style of designing their apps and interfaces. Both platforms have different kinds of markets regarding the demographic factors behind them. Their users and fans already shaped what we can see through their products nowadays. They have their own uniqueness between each other to break it here in this little scratch of notes. By understanding their design differences, we hope those upcoming ideas can be implemented on both platforms.
Design Materials
As we can roughly see on both platforms, the material used in iOs and Android app design is much different from one to the other. Thereby their icons, search bars, banners, backdrops, and drawers already have their own style. It is reflected in the user behavior who is is is directly interacting with their appearance.
- Icons
Icons are much easier to be spotted on because they had different shapes and forms. For Android, icons are usually more thick and bold. It represents the solidity of the meaning behind the shape. While on iOS, icons are more relatively thinner and mainly in a simplified line style. The line style represents the simple design as the iOS main theme is to deliver a minimalist and elegant operating system. For iOS icons size start from 120x120 px for home icons and 1024x1024 px for Appstore icons. It needs to be 144x144 px to meet the high definition standard for a home screen app on Android. For the Google Playstore, it needs to be in 514x514 px so it will fit in.
- Fonts
As we can see on both iOs and android has their own fonts and typestyle. For iOS, they used San Francisco as their default. Android is likely to use Roboto on their default mode. They may look similar to each other, but Roboto had a taller height than San Francisco. The readability for both fonts is easier for small screens like smartphones. The styles used in iOS are simpler, with 17pt San Francisco font for the base text and 34pt Bold for titling and header when Android uses Roboto 14pt for base text and 16pt for titling and header. - Buttons
Buttons primarily become the main attraction for users to do interactions with the interface. By clicking the button, they may execute an order for the app to do actions. Both iOS and Android have different styles of button design. With their minimalist concept, iOS used a simple button with the title inside without any shadows. Android recently becomes more playful with its button design by adding shadow and allowing the uppercase letter.
- Backdrops
Backdrops are consist of two or more page layers. The back layers placed behind the front layer is used to complete more context for the front layer. The title is usually placed on the back layer and the subtitle on the front layer. Both the front and back layer can be active at the same time. With the composition of the front layer placed a little bit lower than the back layer. We can see more actions and information provided when the back layer is revealed. Both iOS and Android are still adapting to implement the backdrop design on their interface. This backdrop’s simplicity and functionality are still being developed until it met the one that suited the user behavior. - Banners
Banners are actually used for additional information or suggestions within the pages. They aren’t native to both iOS or Android design. But it is likely to be implemented to persuade users to do another option of interaction. It can be placed below the top bar so the users can notice it.
Interface guidelines
- Screen size
The main difference between both platforms is their screen size. IOS had 2436x1125 for their iPhone X and above screens. At the same time, android had 2960x1440 for their high definition or latest products. - Pages behavior
The pages on both platforms deliver different behavior to their users. When we scroll through the screen, there will be a pattern and movement that can be seen. The bars on the top and bottom of the screen will be faded or hide while scrolling on iOS screens. It will ease the iOS users to have a more clear look at the content and minimize distraction. Android has more flexibility in its page behavior. This platform has evolved from having a rigid design to becoming more friendly and simple to its users. They may follow the iOS behavior of having faded bars or keep it placed on their position before. - Tabs
The tabs design may look very different from iOS to Android. They actually deliver different kinds of styles for their own users. As iOS designing their tabs with more buttoned like form with tap-only to switch from one to another. But keeping their main theme design of simplicity by only use two-tone color. In comparison, android delivers a more flattened design on their tabs by merely swiping to the right or left to move from one to another. They usually use gradient colors to differ in each tab. These different kinds of tab designs are flexible depends on the user’s behavior and experience. - Drawers
Drawers are native to both iOS and Android design. The most common drawers style that can be found is slide drawers. By sliding the drawer, we can reveal more content beneath it. Both platforms commonly use the side slide drawer style. Slide the drawer slightly to the right, and voila! There will be stacked options revealed vertically. For the latest iOS 14 version, you can also find the app drawer, which contains many apps categorized based on their names and functions. It’s called the app library. Basically, Android already had this function many years ago. But iOS recently added it into their features. - Search bar
Both iOS and Android also have similarities in their search bar design. It is usually placed at the top-middle of the page, with left alignment on both platforms. IOS has a little bit rounded search bar with a cancel button inside. To access it, users could expand it by tapping from the search icon on the top-right, and it will be revealed into an individual bar. The search bar on Android also has the same position and navigation as iOS, but with a more boxy shape and without a cancellation button. Users need to tap the screen outside the bar to close the search bar.
- Call to Action buttons.
CTA is more simplified in iOS. A minimalist icon is usually placed at the page’s top-right, so the users are easier to find out. Android has a more stand-out CTA design with a floating full icon on the bottom-right of the page. - Menu and dialogs
As the design we provide must deliver options for users to adapt and reach what they really need. We have to remind you that the menu design is crucial enough to have more attention. The dialogs also hold importance to trigger users to do interactions as both platforms have a different kind of menu and dialogs style. For iOS, it looks like the dialog menu has more simplicity with fitted placement on the bottom page with non-scrollable context options. With a faded black background and a cancel button on their option. In comparison, Android has an expanding option dialog with scrollable context and information. It had no cancel button; instead, by tapping in the background for exiting the dialog menu. - Action menus
The action menu is more likely giving another option provided for the users. In the iOS platform, it can be tapped on any context or option on the screen. Long pressure on an app or tab around the screen. IOS users may recognize it as 3D touch. While on almost all Android, it usually can be found if we tapped at three vertical dots on the top-right corner. It will expand into another option dialogs. Both of these action menu styles deliver a different kind of behavior to their users. - Navigation bar
The navigation bar on iOS is located on the top page. For example, the back button navigation is placed on the top-left page. It was iconic and recognizable by iOS users. In comparison, Android is placed their navigation bar on the bottom. There are three main Android bottom bar navigation, Back, home screen, and current apps.
- Titling
The last thing that can differ from iOS and Android design is their titling styles. IOS placed their titling at the bottom of the current tab. It is precisely in the middle of it. Making a proportional view of the iOS design. Android has its pattern design to place the titling left aligned on the current bar. Both of them also had different naming on their title and subtitle.
Both of the designs provided by iOS and Android may differ, but they actually being influenced by their users. The design they have provided may change along the times. As the market is is is is still hoping to gain more updates from them, it needs so many developments. There are still chances widely open for designers and developers to improve and adapt to Toto's design to be meaningful and pleased.
Looking for the right partner for your digital transformation? Let’s talk or visit Glovory.com now!
Contributor: Abdul Hamid
