Android vs. iOS: How to Create a Habitual UI

22 Jun 2016
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)

SEE ALSO: A GUIDE TO APP UI PORTING

Navigation Menu

Navigation Menu

  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

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)

SEE ALSO: Facebook App on Android. How Far Is It from UI Guidelines?

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

SEE ALSO: NewIn90. Design Story of the App That Will Inspire You

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

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

Reference: Music - iOS; Play Store - Android

Summary

Hope you have found this simple tutorial useful. Design great apps and share your experience with us in the comments section below.​ ​ Here is the list of useful resources to check for more ​ information​ :

SEE ALSO: