Designing for mobile apps already seem daunting when you’ve got to figure out ideal touch area sizes, image sizes for multiple screen sizes, and which navigation pattern to use. If you’re developing (as well as creating designs) for both iOS and Android devices, you have double the questions and double the work. To ensure design consistency, one might take iOS designs and recreate the same design on the Android platform or vice versa. Which path does a developer/designer take? Luckily, there’s a case study that breaks it all down and makes it easier for us to come to a decision. Let's take a look the following case study: Approaches For Multiplatform UI Design Adaptation: A Case Study By Sergii Ganushchak & Kate Abrosimova

In the case study, Ganushchak & Abrosimova state that three different scenarios present themselves when developing UIs for multiple platforms:

  1. Do we maintain brand consistency?
  2. Do we follow platform conventions?
  3. Do we use a combination of the two above?

Let's look at some real world examples for each scenario.

Scenario 1: Maintaining branding consistency

Strictly following brand specific designs is the fastest approach, so why not go this route? This is the fastest approach only in the UI design sense - when actually implementing views or elements, it might cost time (and money) as the developer needs to create custom views that look exactly the same on all platforms. If a certain view is easy to create on one platform using libraries provided by the SDK, a custom view will need to be created on the other so both views are exactly the same.

On the other hand, if your app is available on multiple channels, maintaining a consistent design regardless of platform allows the user to interact with your app without skipping a beat or trying to figure out where that darned "Edit" button is.

Ganushchak and Abrosimova state the following regarding when to make the choice to create the same UI across all platforms:

[WHEN] THE SAME USER ACCESSES YOUR PRODUCT FROM MULTIPLE CHANNELS (DESKTOP, IPAD, IPHONE, ANDROID)

[WHEN] CUSTOM UI COMPONENTS PROVIDE INTUITIVE USER INTERACTIONS, AND ARE EYE-CATCHING AT THE SAME TIME

Instagram

You can see that has maintained virtually the exact same UI design across both platforms - when users switch between devices, they know exactly where to find what they are looking for and expect all elements to be in the same position. The iOS app debuted much earlier before the Android version and the typical iOS UI (bottom tab bar, anyone?) stuck through to the Android app. If you look closely, you'll see the slightest differences such as filled tab icons and differently orientated overflow menu icons.

example-insta-1

example-insta-2

VSCO

VSCO does not follow any sort of platform guidelines at all, whether it's Android guidelines or iOS guidelines. Creativity is at the forefront of their product offering and their app encourages the user to indulge in their own creativity.

example-vsco-1 example-vsco-2

 

Scenario 2: Following platform specific conventions

User experience reigns in this scenario. When going this route, you are assured that users know how to navigate and interact with your app as it follows platform design patterns and familiar app elements. Intuitive app design and experience are weighed more than adhering to the company's brand guidelines.

Ganushchak and Abrosimova provide the following advice on when to follow platform guidelines:

[WHEN] A HIGHLY COMPETITIVE MARKET ENVIRONMENT PROMPTS YOU TO MAKE A FAST LAUNCH AND RAPIDLY GROW A USER BASE

[WHEN] SOME OF THE DESIGN TRENDS ROLLED OUT BY APPLE OR GOOGLE PROVED SUCCESSFUL AMONG USERS

[WHEN] YOUR APP HAS COMPLEX FUNCTIONALITY AND USER INTERFACE

Following platform guidelines allow the developer to quickly develop the app using already existing elements that are tried, tested and accepted across the user base and allow you the developer focus on the complex features without getting sidetracked on how to make a view or interaction function a certain way.

WhatsApp

WhatsApp designed their app to follow strict platform conventions, from Android's Swipe Views using the ViewPager to iOS' blurred background effect for audio calls. The iOS app was released in 2009 and the Android app followed 3 years later debuting an app that one can truly call an Android app.

example-whatsapp-1

example-whatsapp-2

Scenario 3: Combination of platform conventions and branding conventions

Designers in this scenario create UI and UX that represents the brand while ensuring the app is intuitive to users regardless of the platform. Designers accomplish this by finding out which are the most important elements of the brand to convey and which important features of the app can be used to maintain user familiarity on that platform. New users who interact with the app will intuitively know how to navigate and interact with an app they have never used before if familiar platform elements are used. This helps increase adoption and engagement for your app.

Ganushchak and Abrosimova suggest this approach is used when you are developing and iterating your app based on user feedback and app analysis through metrics. Ensuring both user and brand satisfaction through a combination of platform specific conventions and brand guidelines goes a long way and promotes the best app experience.

WHEN YOU’RE INCREMENTALLY DEVELOPING AND REFINING YOUR PRODUCT’S DESIGN BASED ON FEEDBACK AND EVALUATION

Facebook

Facebook combined brand designs and platform specific conventions. Elements such as navigation and search elements are created using the platform's design patterns yet content layout and app interaction features are virtually the same.

example-fb-2

example-fb-1

Nudge Rewards

Here at Nudge, we try to adhere to both brand guidelines and platform specific conventions. Elements such as list sorting is the same on both platforms since this places it front and center to the user and emphasizes the feature. We follow platform specific patterns in the navigation pattern as well as field input interaction. Android's Ripple Effect is something we kept in the Android app too - this effect is applied to CardViews and Buttons. Keep an eye out in future releases for a modal Bottom Action Sheet in Android to mirror iOS' UIAlertController, it's the little things that delight the user.

 

example-nudge-1 example-nudge-2

 

 

The Bottom Line

Ultimately, it is the user that defines whether your app is successful or becomes a headache to use. User expectations can be very different from the design that has been drawn up. Whether you follow brand guidelines only, platform specific guidelines only, or use a combination of the two...

The only thing that matters is users. - (Ganushchak and Abrosimova)

At the very least ensure your app provides a positive experience for your end users.

Have you encountered this conundrum when designing apps? How do you make the decision regarding which route to take? We'd love to hear your thoughts.

* All app screenshots were taken from their respective app stores

mmendoza

Michelle works on the Android app at Nudge Rewards. She's entranced by beautiful UI design and enjoyable UX. When she's not coding or reading up on the latest technology, you can find her training her Malamute and teaching him to walk backwards.

Stay informed with updates on news, events, promotions and more from Nudge Rewards

Give it a try—it only takes a click to unsubscribe.

×