Android vs. iOS: How to Create a Habitual UI

In this article, we share simple tips on how to create a habitual UI for both iOS & Android apps based on our experience. Let`s get started!

First of all, let's start with the definition. What does Habitual UI mean?

Habitual UI is the interface, designed based on the usual appearance, behaviour and UI structure of Android/iOS users. In other words it is the interface that needs no user instructions. Users has already got used to UI, while using iOS/Android platforms. Habitual UI is developed based on the basis of UI guidelines, reusing UI elements (ex. Location of navigation elements, controller's view, elements of lists and filters etc.) of default iOS/Android applications, such as Gmail/Mail, App/Play Store, Maps, Phone, Settings etc.

Advantages of this approach:

Faster and easier implementation
Cost effectiveness
Great as a first experience of UI/UX development

Here is a tutorial of how you can easily create a habitual UI for both iOS and Android platforms that will look
and feel as if it was a native app, like Mail, Calendar, Contacts, Music, etc.

Below are eight main & commonly used screens:

Navigation menu
Map
Form
List
Filter
Details
Profile
Action page (e.g. open/close the door)

	Android	iOS
1. Main Menu	Designed as a drawer menu (Sidebar) according to the guidelines of material design	Designed as a tab bar (at the bottom) according to the iOS guidelines

Map

	Android	iOS
1. Main Menu	Selected Pin is displayed on the map. But the actual Pin details are placed at the bottom	Pin and its details are displayed immediately after the click

Reference: Maps on the both platforms (Android, iOS)

Form

App Form

	Android	iOS
1. Button	Designed as a raised button according to the guidelines of material design	Designed as a plain text link which is more common for the iOS UI
2. Hidden menu	Designed as a menus component according to the guidelines of material design	Designed as a table row that opens the picker with a list of items. Also common for the iOS UI

Reference: Settings, Phone on the both platforms (Android, iOS)

List

List Of Items

	Android	iOS
1. Button (Persistent footer buttons)	Floating button according to the guidelines of material design	Button on the right side of the navigation bar (like in the native app Calendar)
2. Button (Buttons inline)	Flat button according to the guidelines of material design	Designed as a link with an arrow icon, like in the App Store product details

Reference: Calendar, App Store - iOS; Mail, Play Store - Android

Filter

List Of Items

	Android	iOS
1. Filter	Designed as a menus component according to the guidelines of material design	Designed as action sheets similar to the Apple Music app

Reference: Music - iOS; Play Store - Android

Details

details

	Android	iOS
1. Location	Designed as a clickable preview area with a map at the top of the page. More common for the Android platform	Designed as a button on the toolbar, which is more typical for the iOS platform
2. Main Action	Designed as a floating button according to the guidelines of material design	Designed as a button with a border (like in the App Store)
3. List Item	Designed as a list component two-line item with an icon status (according to the guidelines of material design)	Designed as a table row in a default style with an icon and a subtitle (like a row in the iOS general settings)

Reference: Maps, Calendar on the both platform (iOS and Android)

Profile

Profile Form

	Android	iOS
1. Input Field	Designed as a text field according to the guidelines of material design	Designed as a text field according to iOS Human Interface Guidelines (similar to the the general setting on the iOS platform)

Reference: iOS - General settings, Mail, Phone (Add/Edit contact); Android - Phone (Add/Edit the contact)

Primary Action

	Android	iOS
1. Main Action	Designed as a floating button including a progress indicator (circular with integration) that is more friendly for Android users	Designed as a slider, like a power off action that is more friendly/common for iOS users