What mobile app porting is all about?
Being in app development since Android first release in 2008, we know you want to improve the market share of your app in the most easily managed and efficient manner. The most time-&-cost effective way to do this is to port the application, meaning to start the app development with iOS platform and then adopt the same features to Android platform or vice versa. Mobile application porting is also used to support OS upgrades or to support new devices, though that is a subject of another article.
Why bother about UI when simply porting the same app to another platform?
A common misstep taken by app owners & developers is simply copying the UI from the initial platform to the second. As a result of such incorrect porting approach, for example, an Android app will have a strange ‘apply’ feel to it. This leads to an unwelcome chain reaction:
- ‘Alien’ feel of the app - lower rating on the app store and as a result - less app users.
The driving motive for porting an app to the second platform is to reach a wider audience. But trying to bring down the cost of porting by saving on UI adaptation can have quite the opposite effect. Because of the ‘alien’ look&feel, app users can be confused by it and give it low ratings and bad reviews. Even if the initial app is successful, the second app’s bad reviews can overshadow that success.
- UI not being compliant with future OS updates, UI should be explicitly updated for devices with different display specs - higher app maintenance costs.
Saving on adapting UI brings some short-term savings, incomparable to how much you will pour down the drain trying to support future OS updates and new devices.
Remember, a quality UI:
- complies with respective platform (iOS / Android) guidelines
- is designed using grid-based layout
- is created with design fundamentals in mind
9 signs proving that your application UI is in line with iOS/Android guidelines
What you can do now is take your application (better both iOS & Android versions) and check whether it complies with the 9 key requirements of iOS/Android guidelines. Find them below:
What else?
Non-standard navigation
There’s no surer way to complicating things in any app project. If you choose to customise the platform’s natural elements in favour of something fresh and new that only your app can have, it will most definitely not comply with future OS versions.
Settings on iOS and Android
Android provides a standard way for configuring applications using PreferenceScreen. Also, Android provides a way for implementing custom Preference dialogs. See `How to use SharedPreferences for Application Configuration` for more details.
Sidebar menu
There are two versions of the Navigation Drawers (sidebar menu) on Android: the pre-Lollipop one, and the new Lollipop-style.
Date/time selectors
Although Android provides only a "digital" Time picker, there is a 3rd party analogue Time picker used in standard apps from Google.
Spinner on the top action bar
On iOS platform, elements like toolbar, action sheet and popover could be replaced by the action bar on Android.
The scheme below highlights the primary areas of the action bar that we will talk about further.
Placed at the view control area of action bar (toolbar in iOS). Allows to switch views that could be way of content filtering , change same content output form.
- In the pre-lollipop calendar, the application could switch between day view, week view or month view.
- In the pre-lollipop gmail, an app could change the selected email account or select the type of performed action like reply, reply to all, forward.
- In some news apps, a User may have a possibility to change the sorting order, select the content category
- in educational apps, language selector could be used
- Similar behaviour could be gained via usage of tabs, sidebar or using action buttons.
Actions performed with lists
Select several list items and try editing them. Android and iOS have different approaches to that.
Access to rarely used functionality
The application has an Action bar with Action overflow (4). Its purpose is to host the less frequently used action buttons. For example, Settings, Help, Contacts Us, FAQs or About.
Devices
Always take into account usage of the following primary devices on both platforms. The more devices are used, more scalable UI should be designed.
Arabic mirror UI support
This appears to work better on Android. You can have even a mirrored navigation drawer position and a gesture to open it. Also, application icons could be mirrored, which creates a possibility to have 100% mirrored UI. And that is highly appreciated by Arabic customers.
Media assets
High quality of media assets for the iOS and Android porting is quite important due to the various resolutions of the different devices. It affects how the resulting user interface will look like. Scaled and pixelated UI will disappoint many users with wider screen resolutions (try implementing pre-retina assets for retina displays!), so pay attention to the quality of the assets.
iOS Resources Grid
(Image inspired by http://ivomynttinen.com)
Android Resource Grid
(Image inspired by http://ivomynttinen.com)
Core platform style guides
iOS and Android have their own core style guides that are basic for the implementation in the design. A native user-friendly interface is only made possible if you follow these unique guidelines. For iOS, they are quite simple: for example, the minimum size of the touch area for the buttons is 44x44 px, and content view margins are 30 px. As simple as that, your user interface will be easy to navigate and the resulting application will fit in within the Apple ecosystem.
Application fonts
Fonts are quite important aspect of the application porting, and if the application is using a default font this is the case. Style guide for the fonts describes size and the weight of the typography in different sections of the screen. To achieve a smooth user interface, follow the font guide during porting.
Tips and tricks
9-patch png
For the optimization of the time for importing of the existing UI is quite useful to use all features that are provided by certain platform. For example Android applications widely used 9-patch images for controls that should be scaled properly for different resolutions.This tip will reasonably decrease time during implementation of the UI in real applications.
Summary
When porting your app to the second (third, and so on) platform, sleek performance is of course a force to be reckoned with, but proper UI adaptation should not be neglected. Remember that the first thing users experience when opening the app is its look&feel.
One more benefit of proper UI porting is (and we’ve seen it happen) that after doing UI porting and rethinking the second platform’s app design, you may end up with some cool design ideas and approaches that could also be applied to the original app.
And finally, if going through our checklist of UI porting tips, you still have certain doubts as to the quality of your app’s UI, we would recommend to have your UI properly assessed. Quality assurance of UI/design quality takes into account requirements for supported platforms and respective OS versions, product goals, product users, implemented navigation and level of intuitivity etc., relying on recommendations and best practices of porting design from one platform to another.
SEE ALSO: