5 Simple Things to Consider to Create Cohesive iOS and Android Experiences

A guide to help navigate increasing platform cohesiveness for your apps on both leading operating systems

If you have a product thats available as a web, iOS and Android app, its likely that all three of those products did not come about simultaneously.

Facebook first launched on web, then on iOS and finally Android. These days its expected for teams to launch on all three platforms somewhat close to each other looking like a coherent and comprehensive product offering.

But depending on the size of teams, in-house expertise, product-market fit validation, it might be the case that you launch on each of these platforms one by one.

I certainly have been part of such teams where the web product occupied the mindshare first, followed by iOS and lastly by Android.

There are three different ways this scenario could turn out:

1. Fragmented experience — the web, iOS and Android apps kind of do their own thing, defering to the most commonly used design and UX patterns familiar to each platform.
2. A blended experience — having achieved product market-fit on one platform, you take the core UX and design from the first platform and try to transpose it onto other platforms while deferring to the individual platform for most iconography, typography, and navigation paradigms.
3. A seamless, coherent experience — across platforms. You work hard at making sure all platforms breathe the same air of design and UX. As platforms evolve, they retain the core sense of your product and going from one platform to the other does not present a learning curve.

To achieve the goal of creating a seamless, coherent experience on the web, iOS and Android, here are 5 simple categories of decisions that you can consider early on:

1. Typography

Both iOS and Android platforms come with some preferred set of fonts that feel natural on the platform. With web fonts, web now allows various fonts for rendering the web site. To avoid “font anxiety” as David Kadavy calls it, he recommends selecting one primary font. Medium uses two primary fonts for its web, iOS and Android experience and reading articles on it feels natural, no matter where you are reading.

Typography should lend itself to a consistent experience optimizing for readability on web, iOS and Android platforms.

For our app, we had a lot of forms which had lot of fields. Originally, we had used all caps labels with bold font weight. But research showed that

Bold labels resulted in an almost sixty-percent increase in saccade time to move from the label to the input field.

In other words, making labels bold slows down the movement of the eye from the label to the field. Now, you may intentionally want this effect, or you may want to optimize for faster reading and goal completion. In our case, it made sense to remove the bold weight from form field labels.

Where OS supports it is recommended to use adaptive dynamic text which allows the user to alter the text sizing inside the app based on their device setting.

All GOV.UK domains chose to standardize on a brand new font face — the GDS Transport font.

2. Iconography

Having a consistent iconography across your web, iOS and Android apps, will reinforce the uniform user experience. However, there are situations where the icons will differ to show deference to the OS. Let’s examine the Medium iOS and Android app similarities and differences.

At a glance, both the iOS and Android Medium apps look pretty similar. However, look closer and you start seeing subtle design differences.

Similarities —

1. The bookmark icon is identical, however the Android version uses slightly thicker stroke.
2. Author photo is circular in both versions.

Differences-

1. Share icon defers to the respective system share icons.
2. Recommend icon while using the same “heart” icon, is displayed different and uses “Floating Action Button” on Android.
3. iOS version squeezes in additional metadata about the posts, which is absent on Android.
4. The author name shows affordance in the iOS version whereas its plain in the Android version. Its tappable in both versions.

3. Color Palette

Color palettes are usually tied to your brand and defines a lot of aspects of your app’s look and feel. Following a consistent color palette across your web, iOS and Android app will ensure continuity and consistency.

Thinking about colors for various situations and elements will help developers cultivate a consistent experience across the various apps. Think about success states, error states and even email messages which will inherit many of the same design elements as reflected in the apps.

4. App Navigation

Navigation is perhaps the main difference between the iOS and Android apps.

In the WWDC Session 211 (2014) “Designing Intuitive Interfaces”, Mike Stern, UX Evangelist at Apple, outlined “Navigation has three purposes”:

1. Where am I?

2. Where else can I go?

3. And what will I find when I get there?

Based on the above principles, the bottom Menu Tab Bar works well for iOS apps on iPhone and iPads. Android has a similar Top Menu Bar that works well in case there aren’t a lot of tabs. You will see Apps taking this approach on Android and iOS platforms.

The controversial hamburger icon and side panels are still in prevalence, however, their use is more judicious now than when it originally debuted on Android.

5. UI Elements

With Google publishing Material Design guidelines and Apple iterating on Human Interface Guidelines, it often may seem that deriving a consistent design language for a single product on both platform is an impossible task. However, one just needs to look at the leading apps to understand that with a healthy balance between the platform and individual app design languages, an experience can be derived which feels consistent yet at home in each platform.

In the example below, the AirBnB app exhibits differences in the UI elements between the iOS and the Android app, however, the screen design is identical.

The “More Filters” button has added emphasis on the Android version whereas it recedes on the iOS version. The favorite button gets slightly different treatment on both versions as well. However, you can notice that color palette is nearly identical and helps create that singular AirBnB look.

Conclusion

As we can see that paying conscious thought to design language for iOS and Android in conjunction with the web app, has an overall positive impact towards creating a unified user experience.

While a unified user experience is a good goal, most apps will benefits from incorporating subtle differences to promote a natural look for each individual platform.

If you liked this essay, please tap the recommend button below and leave a comment with your experience and tips on evolving a consistent experience across platforms.