Android vs iOS: comparing UI design

The mobile app market is divided between two leading platforms that currently set the trends in mobile application design. They are, of course, Google’s Android and Apple, both consistently working on creating their own design style that defines all the aspects of how applications work and look.

One of the very first questions you face when developing a mobile app is the choice of the platform for which you are creating your app. It is not an easy or obvious choice and it depends greatly on many different aspects such as the branch of industry your business is in, your target users profile or the way your app works.

PLATFORM CHOICE: ANDROID VS IOS

iOS

iPhone users are proven to be more satisfied and engaged in using their devices. And this data translates into profits – most of the mobile platforms’ revenue is generated by Apple and its users spend even 5 times more time using apps. In addition, Apple users on average have a higher income and a higher education level than the users of other platforms.

iOS has also dominated the segment of business users thanks to the higher level of security provided and the prestige of the Apple brand.
 

ANDROID

The main advantage of Android is the huge target market this platform has, which is why Android is currently the most popular mobile platform with a market share of 85%. This trend also translates into more app downloads.

Google’s major pro is also the application verification stage – the process is much faster and simpler than in case of Apple.

WHAT ARE THE DIFFERENCES?

The design rules for Android devices are determined by Material Design, and for Apple – by Human Interface Guidelines. Both these design schemes have their origins in flat-design, but each has developed its own set of rules that determine the look and feel of the application.

iOS is based on 3 main principles – deference (content first), clarity, and depth. The content of the application is its most important part and it can be obtained by using the white space, fonts, and colors properly. To attract user’s attention, one can use the effects of transparency, blurring as well as gradients or shadows. And while moving around the application, the design should suggest a sense of depth and existence of layers that put up the application hierarchy.

Android’s Material Design is based on observations of the real world and studying paper as a layer that creates the structure of the whole system. With realistic shadows, light, motion, and layers divisions you can create an intuitive UI for the application. Especially, motion and color play an important role, drawing attention of a user and enlivening the static interface.

What’s important here is that Apple always wants to have a full control over the development of its products, intending to offer consistent experiences for all its users. It can be easily seen in the design, UX and performance of its products. On the other hand, Google created a platform that targets all available mobile devices on the market. That’s why the products of these two companies have several essential differences, which are described below.

HOME BUTTON

Although Android devices have 3 buttons – back, home, and overview – which enable users to do most things on the phone, iPhones have (or used to have) only one button – the home button. That’s why when designing for iOS systems, UI designers must ensure a proper navigation within the application, keeping in mind the need to provide a way to return to the previous screen.
 
home

Home button in iPhones is the only button allowing for global navigation and coming back to the main screen.

 
 
 
andek-bottom

Android system has 3 buttons which helps to navigate throughout the system.

 

NAVIGATION BAR

One of the standard elements for both platforms is the navigation bar, which contains a name of an application or a logo, and a status bar that displays system information such as a network, time, battery level, etc. On iOS, the bar is centered, while on Android, the content is shifted to the left.
 
2
 

METHODS OF NAVIGATION

The major difference between the two platforms is the way users navigate through the app. The basic element in Android UI is the Drawer menu, which is a drop-down list of elements, situated at one side of the screen. iOS uses the tab bar – its navigation is located in the bar at the bottom of the screen.

These solutions are currently available both on Apple and Android (‘bottom navigation’) and depend on how the application is used. However, the use of navigation in the lower bar is getting more and more common as it is more intuitive and easier to use. Such a solution is also presented in Android documentation from March 2016.
 

FLOATING ACTION BUTTON

One of the very distinct differences between the two systems is the FAB button, which is a highly recognizable component of Android. It is used to display the most commonly used options on the certain screen and, thanks to its location, can be used in different parts of the interface. The equivalent of the FAB button for iOS is just another ‘Call To Action’ button located in the upper right corner.
 
fab

Floating Action Button is one of the most distinctive elements of Android Material Design.

 

TYPOGRAPHY

Both systems recommend using their own system fonts – Roboto for Android and San Francisco for iOS. The basic sizes of the text are similar, but Material Design uses a larger difference in font sizes and their layout, while iOS builds the text hierarchy mainly by using bold type. Another characteristic of Android is also that in this platform more white space is used between texts.
 
1

The newest version of Instagram app seems exactly the same at first glance. However, certain app design details were designed in a very different way.

 

SHARED ELEMENTS

The extensive sets of guidelines in each platform have also many shared components, so designers and developers can create native solutions within a single project, ensuring that all users are satisfied. Let’s try to list the most popular ones:

BUTTONS

This is a basic component of the interface on both platforms. In iOS, they have a more flat-design look – there are no shadows and capital letters on the buttons. In Android the situation is opposite – the buttons get depth and capital letters are used.
 

DROP LISTS

They’re called Action Sheet in iOS and Bottom Sheet in Android. In case of Android, the layer with options has is fully filled with color and has a strong shadow, while in iOS the entire layer is a little transparent, without any shadow and with the cancel button clearly marked.
 

SEGMENT CONTROL/TABS

Segment Control (iOS) or Tabs (Android) is the switching of views located within a single screen. This is a very commonly used element – in iOS, they look like buttons, but in Android, their design has been reduced to the name itself.
 

ICONS

They are very widely used in both systems, and in both of them icons are based on the 8dp grid. Android uses filled icons, while iOS has a distinctive feature – its icons are created from a single line. Recent trends, however, show that these rules are often overlooked on both platforms.
 

GRID

Both systems use 8dp grid to build the screen structure, while the most common margins are 16dp.
 

CARDS

On both platforms, cards are commonly used interface elements used to present content, in a variety of formats (text, images), that often requires a specific action. Each platform displays them in a different way – Material Design uses a card structure, with sharply defined shadows and margins, while iOS uses a more flat look, with only a slight shadow.

SUMMARY

The choice between iOS and Android depends on the product we want to offer to our customers. As you can see, each of them has its own design language, which allows UI designers to create the same functionality for users of both platforms. It is hard to choose any of them because each has its advantages and in a specific group of users, it will be the best choice.

Mariusz Sojka
UX/UI Designer
An experienced UX/UI designer, who started his career over 15 years ago. At the moment I'm focused on designing mobile apps and RWD websites. I'm a true mountain biker that rides his bike almost every day and I'm addicted to nature.

you might also like

6 essential mobile app design tips

Great development is the basis of every app but what is the most visible and often decisive factor when it comes to your app success is visual layer. That’s why one of the most commonly asked question in the mobile market is how to create great app design. In this post we provide you with an answer in 6 easy tips.