Why mobile UX customization is important for different platforms ? – Android vs iOS

Image of android-vs-iosWhen designing a mobile application or mobile website, UX people pay special focus on Android and iOS. It’s because, both platforms have combined market share around 94% and both have different appearance and personality. Both the platforms have their own design guidelines.

If a user has to switch from one platform to another, it takes time to unlearn and learn new platform. It’s a bit painful for the user to shift. Therefore, it’s important to customize mobile experience for each platform. Here, I am listing a few reasons to customize the UX for different platforms.

When designing for one platform forget others and focus on the target platform only.

Device Manufacturer brings hardware differences.

Mobile Bottom buttons

Android is highly fragmented in terms of device and manufacture, and manufacturers have access to modify the OS as per their own device specifications. However iOS is manufactured by Apple only, there are no significant hardware differences in iOS.

Most of the Android devices have three buttons at bottom i.e. home key, back button and option menu. On the contrary iOS has only one button home key. This differentiation creates significant usability variations.

Screen size and resolution

Android is more open and diversified than iOS. It’s easy to predict the screen size and resolution of iOS device, but for Android we need to keep in mind different screen size and resolution. To simplify, android guidelines suggest using set of four generalized sizes: small, normal, large and extra large.

Apple iOS Android
Screen size measured in Points(pt) Density Independent Pixels (DP)
Most common resolutions Tablet (iPad)

  • 768 x 1024 (1x)
  • 1536 x 2048 (2x)

Handheld (iPhone, iPod)

  • 320 x 480 (1x)
  • 640 x 960 (2x)

iPhone5 Retina (2x)

  • 640x1136px

iPhone6 Retina (2x)

  • 750x1334px

iPhone6+ Retina (3x)

  • 1242x2208px
LDPI (0.75x)

  • 200 x 320px

MDPI (1x)

  • 320 x 480px

HDPI (2x)

  • 480 x 800px

XHDPI (3x)

  • 640 x 960px

XXHDPI (4x)

  • 960 x 960px

XXXHDPI

  • 1280 x 1200px

Context Menu

Long press in Android will bring a context menu but not in iOS. Users using iOS expect additional functionality through swipes and taps.

Back Button

Android have two methods of back. “Up” button at upper left of the main action bar and system “Back” button at bottom left on the physical devices.

iOS back button is software controlled only. It is displayed on the upper left of the main navigation bar. However it is not used to navigate backwards across the device and not all the iOS apps has back button.

Apple made a gesture where user can swipe from left to right and go back in the same app.

Tabs placement – Action buttons

Tabs placement in mobile

iOS primary tab navigation doesn’t look like tabs. They are icon with placement at bottom of the window. As per iOS guidelines, not more than 5 tabs should be displayed at a time. If tabs are more then 5, “three dots” more icon should be displayed.

Android users expect action buttons (tabs) at the top which user can scroll left or right. Android focus on simplicity and do not use icons for tabs. Android uses text for tabs with border bottom on selected tab.

Android users expect tabs at top and iOS user expect tabs at bottom of the window

Option menu for actions

option-menu in MobileAndroid uses UI element spinner for the option menu, which is generally placed at top left of the action bar. iOS uses action sheet which is placed at bottom of the screen.

Search icon in textbox

iOS place search bar at top of the screen and search icon is placed in the center of the texbox. It moves left when user taps on it.

Similar to iOS, Android places the search bar at top of the screen. However the bar is hidden until user tap on the search icon.

Some UI differences

More button

more-button in mobileiOS use three horizontal dots with text written more below it and android use 3 vertical dots.

Dropdown – a list of predefined options

A component that displays list of of elements is called spinner in Android and iOS call it picker.

Page Navigation

more-button in mobileIn iOS current page is written in the center and previous page is written at left with back arrow. In Android only current page is written with back icon.

List View

list-view in mobileIn iOS arrow is placed at right and in Android no arrow is placed.

Branding

Android focus more on the branding and place the logo in almost all the pages but iOS mostly place logo in the home page only. But it’s not a defined standard.

Conclusion

Users of different platforms expect different widgets in a certain way. If an app does not behave in expected manners, user will feel alienated on experiencing sudden change in the feature. It’s safer to follow the conventions rather imposing conventions of different platforms. However in some particular circumstances, slight deviation from the standards may help users. In that situation it’s good to put users first.

Author: Gopal Juneja

A UI/UX enthusiast living in India Delhi having 12+ years of industry experience to use in beautiful design and handsome HTML coding.

Leave a Reply

Your email address will not be published.