
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
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)
SEE ALSO: Facebook App on Android. How Far Is It from UI Guidelines?
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
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
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
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
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 |
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 :
- Native apps Mail/Gmail, General Settings, Phone, App/Play Store, Map/Maps
- Open source UI guidelines:
SEE ALSO: