Five Android and iOS UI Design Guidelines for React Native

Can the problem of multi-platform design ever be solved? If you have ever been in the situation where you are going to develop for iOS first, then for Android, you have surely experienced the frustration inherent in creating a cohesive design experience for both platforms.

If we consider a common scenario, this situation could be tackled following one of the following approaches :

• A fragmented approach - Both iOS and Android apps work according to their own paradigm, with differences in their respective UI/ UX experiences.  But, is this the most efficient way of designing for multiple platforms?
• A one-size fits all approach - You achieved the product-fit for your desired market on one platform. Then you decide to apply the same design to the other platform. The majority of brands (such as Instagram, Facebook etc.) used this approach in their early years before they built their respective user bases. But, is this really what your users want?
• A seamless, coherent approach- You make sure the design experience remain consistent with platform paradigms, i.e., what users are used to and what they expect when using an app on their favorite platform. Does this sound appealing?

For a developer who has built and achieved success with an app on a single platform, the question of how to tackle multi-platform design in oder to bring it to additional platforms is a never-ending maze. Plenty of options are available for developers to build apps using cross-platform frameworks such as Xamarin, Ionic and React Native.

However, the road to designing an app with these frameworks is by no means easy, due to fundamental differences in the UI guidelines of iOS and Android. Paradoxically,  the most-trending and powerful frameworks, such as React Native, provide such a vast set of UI choices that it gets even more complicated. Ready-made UI kits of React-Native such as Ant design, React Virgin, Shoutem etc. often makes it difficult for designers to work on a multi-platform approach. UI designers need to ensure a consistent design pattern throughout the app and provide a similar user experience across various platforms.

UI designers often find it hard to decide how to carry out a successful design experience across all platforms. For Instance, Android material design has incorporated a unique style that has been radically transforming the design and feel of Android apps over the last few years. Likewise, Apple has also changed the way iOS apps should look and feel according to their newer guidelines.

 Figure 1. For instance - iOS, Android and web (HTML) all have distinctly different styles for search inputs.

It often becomes hard for UI designers to implement a consistent UI design for an app across all platforms. This article will walk you through a simple way of drastically reducing the gap between design guidelines of iOS and Android apps using react native.  

Before we discuss the solution, let’s review the reasons why it is important for UI/UX designers to understand the platform-specific design guidelines for iOS and Android.

React Native - why understanding platform-specific guidelines matters

When it comes to developing platform-specific apps, ideally one would spend months designing separate apps for each platform. This is not always possible. For example, on several projects I worked on, my team and I had a very tight schedule even for the design phase (which often included rigorous user testing and validation). Developing two different versions wasn't something we could adjust for in our development cycle. This is when we decided to give a shot at React Native, which turned out to be the best bet we could make in that situation, thanks to its ability to produce two independent apps (iOS and Android) from a single codebase. Still, we found out that React Native does not free you from the burden of looking closely at the differences in UX standards across the platforms you are targeting.

Quite often, even while designing a single app, we need to ensure that any necessary UI tweaks are being defined thoroughly by the UI designers before handing the design to the developer teams. This applies to development with React Native as well, and fixing these things up in order to find quick ways to make the user experience native for each platform was something we learned the hard way.

A rule of thumb to remember when developing with cross-platform technologies such as React Native

Things change. As new technologies and devices are added to our development stack, the way we approach UX/ UI design also changes. Though there are some style guides –like Android material design and Apple’s iOS guidelines– that have been constantly updated to tell us about the latest changes in layout and styling, we can always make some exceptions to the way we approach tabs, navbars, colors etc. thereby creating non-standard user interfaces. The reason why following design guidelines is important is simple: users become familiar with the interaction patterns of each OS, and anything that contradicts the guidelines will create friction. Going ahead, we will be learning a quick and dirty way for designers to organize platform-specific designs for React Native.

A quick and dirty way to optimize platform-specific design styles for React Native

It is often said that Predictability is one of the fundamental principles of a good UX design. When you design your user experience the way your users expect it, they will easily get used to your app. Similarly to Desktop app users who can tell a UI is bad by a single mouse click, mobile users can feel whether something is good or not by tapping on an element and interacting with it. That’s why it's important to think and optimize your app design so mobile users feel at home. That said, let’s understand how to optimize for UX/ UI to get the best out of a React Native app.

1) Choose wisely between a multi-platform approach or a brand-oriented approach

The first decision to take is whether you go multi-platform or target a unique, brand-specific look and feel, which requires you knowing the differences between the two approaches.

Multiplatform design approach for React Native - In a multiplatform approach, the designer is bound by the guidelines for each platform. This approach is more useful if your application has a complex UI and your main goal is to attract users who are more likely to spend their time on their favorite platform, be it iOS or Android. Going by the above example of a search bar, an Android user is more likely to be comfortable with the look and feel of the standard search bar of an Android app. This contrasts with an iPhone user, who will not be comfortable with the standard Android search bar. So, in a multiplatform approach, you strive to give each user the kind of look and feel they are used to.

Let’s have a look at a more realistic example in order to have a clearer picture of what the multi-platform approach entails: Airbnb. As you can see in the image below, the versions of the Airbnb app for iOS and Android look entirely different and the reason for that is they follow design guidelines which are totally platform-specific.

Brand-oriented design approach for React Native - As the name implies, a brand-oriented design approach takes brands-specific factors into account in detriment to platform-specific ones.

When it comes to UI guidelines, this approach is usually preferred in two scenarios:

• The same user is expected to access the application on both platforms - If you know that the application you are building might be accessible by the same user on different platforms, then applying the brand-oriented approach makes sense for you, since it grants a common user experience for the user, whatever the platform they happen to use at any moment.
• The brand you are building has a strong visual content - There might be some scenarios where the brand you are building has strong visual content.

Instagram is a very common example of an app developed with React Native that follows the brand-oriented design approach. If you look closer to the app on an iPhone and an Android phone, you would find that there is little to no difference between the UIs of the apps.

Brand-oriented design is for sure the easiest way to design an app because the UI designer just needs to keep the same design experience across both iOS and Android. It comes with few downsides, though. An app that provides a UI feature that happens to be natively supported in iOS, for example, will require a custom implementation in Android. This makes it more complex from the development perspective than just going with two natively supported, albeit different, UI features.

Moreover, this approach will allow you to have consistency in design but not at the user experience level. For example, if your core product is designed according to the iOS guidelines and you port the same user experience to Android, then the Android users will not feel at ease using it and you might be losing on this audience from a market perspective.

Key takeaway - Sticking to the brand-oriented approach and ignoring the user-experience of a user might seem the easiest, fastest and more cost-effective approach. This is true only in terms of design, not software engineering. Developing complex UIs (or custom adopted UIs) is more difficult in implementation, so development effort will cost you more as compared to developing simple, platform-specific UIs.

A mobile app has to be as simple as it gets, even if it has a load of functionality. It makes a lot more sense to choose the multi-platform design approach if an app is rich in functionality and content. There are always some exceptions though, like Instagram -- which is built following a brand-oriented approach and is still wooing users with a lot of attention and love. But this is hardly the case for all products. Thus, it is better for a designer to be careful when making any decision which involves designing with the brand-oriented approach.

2) Carefully design your app’s navigation

App navigation is of considerable important for user experience. Apple UI design evangelist Mike Stern outlined the three purposes of Navigation:

• Where am I?
• Where else can I go?
• And what will I find when I get there?

As a UI designer, your first priority is to make your users navigate seamlessly throughout your app. It doesn’t matter whether your app has a compelling content or is easy to use; if your user is having a hard time moving through the app features, you are definitely going to lose them. Users should be able to explore your app intuitively and complete the actions without asking anyone for help. It’s better to keep the navigation simple, thereby keeping the user experience consistent across the app.

Both Android and iOS prefer different kinds of navigation that become easier to use for their respective users. For example, Android sports a built-in back button in the navbar. It also uses a sliding-out navigation drawer containing options for users to navigate the top levels of your app.  Android users are very used to this kind of navigation for selecting menu items. On the other hand, Apple guidelines favor a tab bar at the bottom of the screen for the same purpose of providing easy access to the top-level areas of the app.

Approaching multiplatform navigation with a React Native mindset

When designing any component for a React Native app, the key to success is to use platform-specific abstractions as much as possible. The general method starts with thinking how your user would interact with a React Native app. Then comes figuring out what features can be repetitively reused as per the business logic. The goal should be to reuse the platform-specific code as much as possible.

At first, this might seem to contradict the idea of using React Native to visually tailor an app for each platform. In reality, using React Native aims to reduce the amount of code that is required to build the app for multiple platforms, which should include as many reusable components as possible.

The developer and designers should determine the list of reusable components of a given feature (Navigation in this case) -- such as “back button”, “icons”, “list row”, “header” etc. – and find out how much those components deviate from the initial version of the app.

For instance, here is an example of F8 app:

As you can see in the image above, the iOS tab button uses a rounded button which is quite familiar to iOS users. On the other hand, the Android version of the same navigational component leverages an underlying style that matches with the platform. Needless to say, both components perform the exact same function.

So, visually there might be a difference, but the two components reuse the code as much as possible.

Approaching multi-platform navigation in complex UI

In complex UI, navigation requires a different approach, since the components share less logic and there is a difference in their visual appearance too.

For instance, the top-level navigation of the F8 app has a huge difference in terms of navigation and visual appearance on the two platforms.

As you can see, the iOS version leverages a fixed tab button at the bottom of the screen, whereas Android leverages slide-out drawer navigation. Moreover, there are significant differences in terms of styles, animations and even menu items.

React Native provides an RN navigation component to support complex use cases. Unfortunately, using it to manage two completely different navigation paradigms, as those shown above, is not necessarily a piece of cake for developers, since the component logic would be full of a large number of control statements making the code difficult to understand. As a rule of thumb, RN Navigation should not be used if you have the advantage of having a native developer (either on iOS or Android) by your side. This is even more so the case, the more complex your navigation logic is.

Instead of using RN navigation, it’d be wiser for designers to plan out two separate menus and have developers build them as custom UI components. One way to build custom UI components in React Native is by using React Native’s built-in platform-specific extensions. This way, the user experience would be similar to native, and users would at home.

Key takeaway - Designing an app’s navigation should be done carefully, especially when you have a similar audience on both platforms. React Native takes care of this by providing a ready-made navigation solution such as RN Navigation. This does not mean RN navigation will work for every use case. In such cases, it may be wiser to use navigation designs more common to their respective platforms, and build custom navigational components.

3) Use the icon packs for React Native

Icons can have a drastic impact on user experience. It should be noted that iOS and Android favor their own unique approach when it comes to styling icons, so best to keep these approaches in mind when designing the icon packs for React Native.

Generally, iOS Icons are more likely to sport narrow lines with a translucent backdrop coloring. Android icons are more likely to have a stronger temperament with milder edges.

Expo Vector Icons for React Native is a great place for finding icons following both iOS and Android guidelines.

Key takeaway – Designing icons respecting the design conventions of each platform is important as you develop an app in React Native. Whether you are hiring an icon designer or using free icon packs, there’s a distinct style characteristic fo iOS and Android. Stick with what the community prefers, or adhere to the design conventions specific to each platform.

4) Be mindful about the typography for both iOS and Android

Typography is something which should be treated like something more than just a design technique. In his book The Elements of Typographic Style, Canadian typographer Robert Bringhurst has described typography as the craft of endowing human language with a durable visual form. In general, both iOS and Android have their own set of preferred fonts that feel natural on the platform.   

The system font-family on iOS is Helvetica Neue. On Android it is Roboto. There is a noticeable difference between the styles of those typefaces, although their font-sizes are quite similar. A UI designer might want to work on both fonts separately and adhere to their respective typographic conventions.

Here are some few generalisations that might help:

• Android material design layouts use ample white spaces.
• On Android, text size should be specified in scalable pixels to allow type to be resized using accessibility features.
• There is less variation in font sizing when it comes to iOS. However, users are more likely to find some variation in font weights.

Key takeaway - David Kadavy, bestselling author of Design for Hackers, suggests working with one primary font (for both iOS and Android), if you want to save the time required when dealing with different fonts on the two platforms. While designing for multi-platform, it is recommended to use platform-specific fonts if the UI is complex. But, if a designer is dealing with the frustration of picking different fonts, it's better to work on a single font.

5) Choose the color palette that enforces brand consistency across products

Have you ever came across an app and been impressed with the way colors are used and complement each other? That impression is mostly the result of precise intention and is based on psychologically-proven effects. "Colors, like features, follow the changes of the emotions," the artist Pablo Picasso once opined. Therefore, it’s recommended to use a consistent color palette across your iOS and Android app to ensure consistency across both platforms.

Android material design prefers color palettes that are closer to CMYK model, rather than RGB. All basic colors of Android material design come in both lighter and darker shades. These shades of colors are often used in tab-bars, drawers, and other navigational elements.

On the contrary, iOS color palettes are simple and vibrant. Shades of colors such as gray, white or black are mostly used in common UI elements such as lists, bars, backgrounds, etc, while more vibrant colors are used for icons, links, or other components.

Key takeaway - To maintain a consistent UI design, it’s better to use platform-specific colors across your React Native apps. Although iOS and Android follow different color conventions, there’s little to no difference in how color impacts the look and feel of an app.

Summing up

In this article, we have argued how and in which case a UI designer should follow platform-specific guidelines when designing for multiple platforms. This can be quite a complex task, due to the variety of constraints and guidelines there are to consider. However, the simple guidelines we proposed above provide a neat and tidy way to design for multiple platforms that can help you build apps using cross-platform solutions such as React Native, without missing the key usability concerns.

About the Author

Rakshit Soral is tech consultant (Mobility & Operations) at Simform, a React Native  development Company where he helps Fintech startups, agencies, and SMBs adopt complete life-cycle management of apps, from inception to design and development. Bitten by the Startup Bug, Soral is extremely passionate about authentic, innovation-based startup ideas, including growth hacking and digital marketing. Follow him on twitter @RakshitSoral