Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Approaches For Multiplatform UI Design Adaptation: A Case Study

There is no winner in the battle between iOS and Android, and we all know that. If a product succeeds on one platform, it will undoubtedly be ported to the other. Sometimes app developers don’t even bother waiting, and release apps for both platforms simultaneously. For designers this means only one thing — they will have to adapt an application’s UI and UX to another platform while ensuring a consistent design language across the product.

There are three different scenarios for UI multiplatform adaptation: retaining brand consistency; aligning with the conventions specific to the platform; and seeking a balance between the two. We decided to analyze these three approaches by looking at the most popular apps out there so that you get some insight into what method might work best for you.

The Brand-Oriented Approach Link

Sticking to the brand and ignoring “parents’ rules” is the fastest, easiest and most cost-efficient approach, but only in relation to UI design, not software engineering. Custom UI is rather complex in implementation, so development effort would cost you more if compared to the price of building standard components.

Furthermore, choosing brand as a priority in UI design can be a pretty dangerous approach to take. I call such apps “teenagers” because they don’t feel at home, don’t follow the rules, and can be pretty annoying sometimes. They think they’re different, but really they’re the same as everybody else at their age. There are exceptions though.

VSCO Cam Link

Visual Supply Co.’s first VSCO Cam app for iOS came out in 2012. A year later, the popular photo editing product was ported to Android. The Android version of the app copied the iOS version’s interface almost entirely. Interestingly enough, neither version of the VSCO Cam app correlates with the standards specific to the platform it was designed for.

VSCO Cam iOS and Android1
VSCO Cam iOS (left) and Android. (View large version2)

Dropping platform guidelines in favor of brand identity is well justified in this case. The VSCO Cam’s founders deem creativity as massively important3, which explains their vision of the product they’re building. They developed an app to be part of the brand and the brand to be part of the artistic community, which is why the creative integrity of the brand is more important for VSCO Cam.

VSCO Cam4
VSCO Cam. (View large version5)

Instagram Link

Like the VSCO Cam app, Instagram was launched in the App Store way before it became available for Android. The iPhone app, which strongly corresponded to iOS guidelines experienced huge success; in this case, the typical UI for Apple devotees became Instagram’s distinctive feature. This explains why Instagram’s creators didn’t spend a lot of time creating a unique UI for Android. Even though the app’s overall aesthetics don’t conform to what Android users have come to expect, Instagram garnered over 1 million downloads6 from Google Play on day one.

Instagram iOS and Android7
Instagram iOS (left) and Android. (View large version8)

The current iOS and Android versions of Instagram do look like twins, but there are still a few elements that set them apart. For example, the search bar looks native to both platforms. The camera interface in the latest Android version is also a bit different from the iOS version. What’s more, Instagram’s logo is located in the center of the navigation bar on the iPhone app, but was moved to the left of the tool bar in the Android version.

Instagram search interface iOS and Android9
Instagram search interface iOS (left) and Android. (View large version10)

The Instagram app for Android fails to comply with the platform design standards, but it still feels convenient to users.

Instagram video interface on iOS (left) and Android11
Instagram video interface on iOS (left) and Android. (View large version12)

Wire Link

Co-founded and backed by Skype’s creators, Wire is another messaging app. It doesn’t differ much from its counterparts, except in one thing — it has a strikingly beautiful user interface which never fails to leave an impression, especially on the hipsters who use it. Wire’s designers used non-standard gesture-driven solutions, the main purpose of which is to hide as many things from the user’s eye as possible.

We are building an elegant and useful tool to communicate across all modalities — text, voice, video and media. Media is at the core of the Wire experience, so we have chosen to reduce chrome and remove any unnecessary clutter in favor of the content. We also put a lot of effort into typography and readability.

—Priidu Zilmer, Wire’s head of design

It takes quite a bit of guess work for a user trying to navigate through the app for the first time. But on the other hand, Wire uses lots of micro-interactions which make user experience more fun and engaging. A simplified contact search, nice color palette, the option to choose a background image, and color all contribute to the uniqueness of Wire in a world where online communication is ruled by Telegram, WhatsApp, Viber, and a bunch of other typical-looking messaging apps.

Wire iOS and Android13
Wire iOS (left) and Android. (View large version14)

We invest a lot in design, and we could not do it three radically different ways (for Android, iOS, desktop/web), especially as the platform conventions themselves are often moving targets. Getting too close to them means you can suddenly look out of sync — much like when iOS 7 and Android L shipped.

At the same time, we know the risk of not following familiar platform conventions. Therefore, we are constantly working to find the right balance by iterating and adjusting so that our design can be simple enough to translate well across the platforms.

—Priidu Zilmer, Wire’s head of design

The iOS and Android interfaces of the Wire app are absolutely identical, including UX design and icons. Wire apps lack any reference to the original guidelines (except for the size of the clickable elements). This app is another example of the user interface design being given more weight than platform requirements.

According to Zilmer, the Wire’s design team did not feel that elevating how users connect to and share with the people in their lives could be done staying purely within the conventions.

Wire15
Wire iOS (left) and Android. (View large version16)

VSCO Cam, Instagram, and Wire chose to focus on brand in the interface design. But does this mean that a smaller mobile startup that follows in their footsteps can become just as successful? There are a few situations where I believe following a brand-oriented approach can be a winning strategy.

When Should I Follow The Brand-Oriented Approach? Link

The same user accesses your product from multiple channels (desktop, iPad, iPhone, Android) Link

Quite often, brands that employ multiple channels to interact with customers follow a brand-oriented approach. However, this is only reasonable if the same user accesses a product from different platforms and device types (iPad, Android phone, web). For example, the same user of iBroadcast, a music service, accesses it from iOS and Android devices, and even desktop. The app’s versions look similar everywhere because the highest priority for iBroadcast is creating a smooth transition from one platform to another one so that a user doesn’t feel any difference.

Our service has people bouncing between the website, the iOS app, and the Android app. We want to make the transition as consistent as possible so it is easy for our users.

—Rod Collen, co-founder of iBroadcast

The iBroadcast app for iOS and Android17
The iBroadcast app for iOS (left) and Android. (View large version18)

In case your app falls under this description even if it’s a multiplatform product, you might want to think twice before taking a brand-oriented approach. For instance, Facebook (which we’ll consider a bit later) follows a mixed approach to multiplatform UI design adaptation. The thing is that Facebook’s users tend to interact with the social network using one or the other platform (iOS or Android), not both of them.

Custom UI components provide intuitive user interactions, and are eye-catching at the same time Link

One research study19 suggests four components of intuitive interaction: gut feeling, verbalizability, effortlessness, and magical experience. The combination of these components allows designers to create seamless user experiences regardless of whether they follow a platform’s guidelines or not. After all, some custom components can provide a superior presentational or interactive experience than platform standards.

It’s also worth noting that the differences between platforms can be the reason why an app might feel convenient to use on one platform, but inconvenient on another.

The creators of HowAboutWe, a dating app, argue20 that the only way to truly ensure style and layout consistency across various Android OS versions, manufacturers, screen sizes and densities is to use custom UI solutions. Native UI components do have some limitations, but you can always innovate to improve user experience with your product.

For example, an Android budget managing app, Receipt21, has quite unusual drop-down animations that ignore the platform’s guidelines but manage to engage users.

I wasn’t happy with how the guidelines suggested implementing certain features and thought I could come up with better solutions.

Generally, I’ve only ignored the guidelines when I thought there was a clear advantage to doing things my way, such as providing better feedback to the user, removing unnecessary steps, or preventing workflow interruptions. Replacing modal popups or unnecessary screens with inline elements are a big part of this.

—Bogdan Mihaiciuc, founder of Receipt

Unless unique and beautiful UI solutions in an app complicate user experience, they make a great first impression on users and draw them into a product. One of the reasons why users feel attracted to My Day countdown app is its uniquely designed interface, identical on both platforms.

Excellent UI design in Citymapper22 makes the app stand out across all platforms, including web.

For us it was always about the balance. Feeling familiar in the behaviour of our UI but also making a clear and unique statement about who we are as a brand.

I think the value of a unique design language is often underestimated… You mean Citymapper? Yes “The green one.” That in itself is hugely valuable.

Sometimes designers can be too precious about the pixel-perfection and “correctness” of their designs. Life’s chaotic, and so is building a product. So why hide that fact? We’re in this together — the people who build a product, and the people who use it.

— Gilbert Wedam, lead design at Citymapper

When adapting UI to another platform, you should put yourself in the user’s shoes regardless of the approach you use. The ability to create frictionless user experience while keeping brand consistency is one of the virtues of a great designer.

The Platform-Oriented Approach Link

Contrary to the brand-oriented approach, following platform-specific standards requires significantly more time and money (if we speak about UI design exclusively). When you port design, many UX and UI elements need to be recreated from scratch to align with the conventions of the target platform.

In this case, the focus shifts from brand identity to familiar user experience, since users are accustomed to the platform conventions. They have an intuitive grasp of the design rules around their platform, which you can use to your advantage — which is exactly what Telegram and WhatsApp did very well.

Telegram Link

Telegram is a popular messaging app co-founded by Pavel Durov, the man behind the biggest Russian social network, Vkontakte. Telegram has a minimalist design style and supports a secure encryption protocol for private messaging which gives the app a great competitive advantage.

Telegram launched on both iOS and Android at the same time, and chose to focus on functionality rather than looks. Therefore, its designers decided to stick to a platform-oriented approach.

The iOS and Android versions of one and the same product are as different as typical iOS and Android apps can be. The iOS version fully follows Apple guidelines, and looks exactly like an app designed for iOS 7/8: on the right of the navigation bar there is an icon for typing a new message and on the left there is a button for editing; at the bottom of the screen there is a tab bar with sections, and on the top you can find the name of the current section.

Telegram for iOS and Android23
Telegram for iOS (left) and Android. (View large version24)

The Android version of Telegram complies with Google’s Material Design guidelines. It has a hamburger menu for navigating through the app’s sections, a simple search button at the upper right, and a floating button — the heart and soul of material design.

Telegram25
Telegram contacts list in iOS (left) and Android. (View large version26)

The apps use platform-standard controls and UX interaction elements. I bet Telegram’s designers were guided by the most general principles of usability when creating the app.

Telegram 227
Telegram settings interface in iOS (left) and Android. (View large version28)

WhatsApp Link

We’re going to stick to the theme of messaging apps for a while. Another candidate we’ll look at is the so-called evangelist of messaging — WhatsApp, now Facebook’s property. The iOS app was released back in 2009, followed shortly after by versions for BlackBerry and Symbian. The WhatsApp app for Android hit the market only in 2012. It looked exactly like an app Android users would recognize and love.

Since WhatsApp is available on almost every platform, it’s natural that it sticks to the platform-oriented method. The iOS and Android versions of WhatsApp look completely different from each other. Its designers did a great job on the multiplatform adaptation. They changed everything from the UX to the message look to the icons to the location of elements and menu items.

WhatsApp for iOS and Android29
WhatsApp for iOS (left) and Android. (View large version30)

At present the iPhone app version corresponds to iOS 8 standards. The version for Android? You guessed it …received a material design visual refresh in the latest update.

Komoot Link

Komoot is the go-to app for hikers and bikers that belongs to a startup from Germany. The first app’s version came to iOS in 2010 and a year after31 it was followed by the Android version. Both old versions of the Komoot app have nothing in common with the current products of the startup.

komoot for iOS and Android32
Komoot for iOS (left) and Android. (View large version33)

The iOS and Android apps compile through guidelines and best practices for designing apps for their respective platforms. The apps contain a lot of travel content including topographic maps, turn-by-turn navigation, recommendations on cool places, and much more. All this functionality has to be easily accessible for a user.

We decided to stick to each platform’s rules since native user interface is more predictable and is therefore easier for a user. More than that, Apple and Google give preference to the apps that follow their requirements for UI design. This can be really important for promotion on Apple’s App Store and Google Play.

—Dmytro Prudnikov, UI and UX designer at Komoot

Komoot has been repeatedly featured in Apple’s App Store. It was named one of Google Play’s Best Apps of 2014, and is currently one of the top apps in Google Play in Germany.

Now we’re through with these exemplary apps, let’s discuss when sticking to a platform’s rules can be the most reasonable method.

When Should I Follow The Platform-Oriented Approach? Link

A highly competitive market environment prompts you to make a fast launch and rapidly grow a user base Link

Even though you need to spend time redesigning an app’s concept entirely, a platform-oriented approach allows your software engineers to implement your idea much quicker. Once an app has been launched, users who download it will find interaction patterns familiar. More than that, you don’t need to wait for inspiration to design something special. All you should do is follow the guidelines.

A super-smart branding move on Google’s part leaves us with a single choice: if you port an app from iOS to Android, it’s almost a must to profess material design as your religion. But this hot trend has also been attracting glances from iPhone users. As a result, we can see some iOS apps featuring material design style UI34. I only mention this to emphasize the importance for an app to align with design trends, even if that means occasionally disregarding a platform’s specifics. By the way, here is a great piece from InVision35 on how to avoid looking like Google but still take its material design principles into account.

Your app has complex functionality and user interface Link

Any mobile app has to be as simple to use as possible, even if it has a load of functions. Following a platform-oriented approach makes a lot of sense for apps with rich functionality and a lot of content. To illustrate, Accent Kit, an app we developed for the UK’s leading accent and dialect coaches, contains a wide variety of features, from audio playback to recording to text and images all aimed at helping actors learn accents. When Yalantis36 had to port the app to Android, we didn’t consider any other method, but the one that’s oriented to the platform. Otherwise, users would’ve had a hard time trying to figure out all the useful features the app provides.

The Accent Kit app for Android and iOS37
The Accent Kit app for Android (left) and iOS. (View large version38)

Sticking to platform conventions and providing users with experiences native to their platforms allows us to meet their expectations.

Where some apps succeed, others may not. A platform-oriented approach isn’t always so awesome for companies that want to retain the strength of their own brand. After all, it’s the brand that makes you a living, so try not to make your app just another “teacher’s pet” who follows all the rules but doesn’t receive much love from its classmates.

The Mixed Approach Link

With a little ingenuity we can achieve sufficient correspondence to platform specifics while remaining true to a brand’s values. This mixed approach to multiplatform design adaptation is a balanced combination of the two approaches mentioned above, and it’s also the most complicated one.

In this case, you need to take into account two types of users: those familiar with your product, and those who have never used it before. The former adhere to a brand, while the latter are accustomed to the particularities of their platform. Designers who choose the mixed method are diplomats whose job is to represent the interests of the brand, as well as promote friendly relations with users. They need to figure out what UI elements make a product stand out, and also find platform-specific solutions which won’t hurt the brand.

Let’s see how SoundCloud, Facebook, Airbnb and Viber have handled this challenge.

SoundCloud Link

A well-known audio streaming app, SoundCloud came out on both markets at the same time. Even though SoundCloud’s designers adopted the design for each platform specifically, they made a significant effort to maintain the brand’s integrity.

On mobile, we aim to strike a good balance between users’ familiarity with their iOS and Android devices, and the patterns that are specific to our product and reflect our brand. For example, skipping along a track on our signature waveform player (which we call scrubbing) operates differently to any other comparable services.

—Sylvain Grande, VP product, creators & monetization at SoundCloud

Among the platform-specific features, there is iOS’s standard tab bar at the bottom of the screen (with some design modifications), and a search bar at the top. The Android version has a typical tool bar at the top of the screen, a hamburger menu on the left, and a search icon which expands the search bar. Both the iOS and Android versions of the app use platform-specific interactions.

SoundCloud for iOS and Android39
SoundCloud for iOS (left) and Android. (View large version40)
SoundCloud41
SoundCloud play screens on iOS (left) and Android. (View large version42)

Facebook Link

Facebook’s mobile incarnation started with HTML5, but it was a big mistake, as the company’s founder Mark Zuckerberg admitted43. Eventually, Facebook decided to work on improving the native mobile experience on iOS, Android and other platforms.

On the one hand, Facebook’s brand has a huge impact. On the other, it’s a multiplatform network with an enormous number of users. That’s why the mixed approach which harmoniously combines brand identity and platform was the most appropriate for its situation.

The iOS and Android versions of Facebook’s app look similar, but also feel quite native to users of both platforms. Facebook follows Apple and Google design guidelines for the sake of their users. Since content is the key feature of the Facebook app, its creators chose a minimalistic design style to leave more room for the app’s content.

Facebook for iOS and Android44
Facebook for iOS (left) and Android. (View large version45)

The iOS version uses a typical iOS navigation bar at the bottom of the screen and a standard search bar. In the Android version switching between sections is done with the help of a tab bar, which is located at the top just like the majority of Android apps.

Airbnb Link

One of the fastest growing startups46, Airbnb managed to gain a strong position on the market, largely because of its simplicity and fantastic customer experience.

Airbnb’s designers chose the mixed approach when transporting their service to mobile. The brand itself is unique and attracts the attention of people all over the world. However, it’s the content that makes this app work. Therefore, Airbnb’s creators made their product convenient for the users of both platforms.

We want our apps to feel familiar for all our users, which means taking on conventions they are accustomed to. But we also want to make sure they experience one Airbnb.

Coherence between platforms — mobile, web, email, etc. — is important to the confidence and trust we build, and therefore our decisions can’t solely be driven by the norms of various platforms. The thread of continuity unifying the experience is brand.

—Katie Dill, head of experience design at Airbnb

At first sight, the main difference between Airbnb’s iOS and Android apps is the location of the navigation bar: bottom in the iOS version and top in the Android.

Airbnb for iOS and Android47
Airbnb for iOS (left) and Android. (View large version48)

If not for this small but crucial particularity, I would’ve considered Airbnb among the apps which use the brand-oriented design approach. However, if we look closer, the difference between the iOS and Android apps becomes more apparent.

Airbnb search screens49
Airbnb search screens on iOS (left) and Android. (View large version50)

Given the simplicity of Airbnb’s functionality, a fuller correlation with the platform specifics would have complicated the app.

Airbnb 251
Airbnb navigation on iOS (left) and Android. (View large version52)

Viber Link

We almost forgot one more incredibly popular messaging app! I believe Viber is the best representative of the mixed design approach.

Unlike WhatsApp and Telegram, Viber’s designers perfectly complied with the brand identity while following platform requirements to the app’s UI. The mixed approach allowed them to make the app both recognizable on any platform, and convenient for any user. In other words, users won’t mix up Viber with any other messenger, neither they will have any difficulty trying to figure out how to perform a given action.

Viber for iOS and Android53
Viber for iOS (left) and Android. (View large version54)

Compliance with the brand identity is achieved by using custom colors and icons identical on both platforms. To make the iOS and Android apps easy to use, the navigation between the apps’ screens is platform-specific.

Viber55
Viber contacts lists in iOS (left) and Android. (View large version56)

Despite strong adherence to the brand, Viber perfectly meets user expectations in the interface and interactions, and pays a lot of attention to the functionality.

When Should I Follow The Mixed Approach? Link

When you’re incrementally developing and refining your product’s design based on feedback and evaluation Link

The mixed approach implies continuous work on user experience which is one basis of iterative design methodology. This means you should analyze metrics to understand how a user is interacting with your product, roll out regular updates and improvements, analyze the metrics again, and maintain growth rates. Iterative design represents a form of research carried out within a cyclic process of prototyping, testing, analyzing and refining each successive version of a product.

The mixed approach is a singular case where you let the experience speak for the brand. I believe it’s the best path to the ideal multiplatform adaptation. It allows you to stay true to the platform, brand and user. Besides, using this approach lets a designer alter the balance either in favor of the brand or the platform guidelines, and as a result deliver a great product.

The only disadvantage of the mixed method is that it’s close to impossible for small startup companies that can’t afford investing that much time and money into enhancing their app’s design. Moreover, making the right guess in the first version of an app without testing UI features on users is a matter of luck, I’d say.

Which Approach Wins? Link

Even though the mixed method seems to be the way to go, I’d say none of the approaches mentioned in this article is perfect.

Sometimes choosing brand identity over the platform standards leads to specific user experience problems, no matter how beautiful your app is. After all, users decide how a menu should slide in, where to swipe to access a certain function, and how to go back to the profile page.

The apps that use platform-oriented approaches risk acquiring a look that’s too standardized and doesn’t work well for the brand. But on the other hand, you’re most likely to succeed using the platform-oriented approach, especially if your app is full of features, and targets a large user audience.

The apps I used to illustrate the mixed approach are great examples of successful multiplatform adaptation. Such cases are pretty rare. However, it doesn’t mean you shouldn’t try to achieve the same results.

When we design apps, we should always remember that we do it for real people to use on real devices in the real world. In fact, it’s not a brand, or a platform, or even your creativity that’s important. The only thing that matters is users. They don’t care about approaches you applied in your multiplatform UI design adaptation. Whether we like it or not, all that users are interested in is their overall experience with a company — and when it’s positive, a company succeeds.

We’d love to hear your opinion about UI multiplatform design adaptation and which approach you think is the best. If there are any other apps that you feel are good examples in each of these three approaches, please share them in the comments.

(da, ml, og)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/wp-content/uploads/2015/07/01-vsco-1-opt.jpg
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2015/07/01-vsco-1-opt.jpg
  3. 3 http://consciousmagazine.co/visual-supply-co-2/
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2015/07/02-vsco-2-opt.jpg
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2015/07/02-vsco-2-opt.jpg
  6. 6 http://www.cbsnews.com/news/instagram-for-android-gets-1-million-downloads-in-first-day/
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2015/07/03-insta-1-opt.jpg
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2015/07/03-insta-1-opt.jpg
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2015/07/05-insta-3-opt.jpg
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2015/07/05-insta-3-opt.jpg
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2015/07/04-insta-2-opt.jpg
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2015/07/04-insta-2-opt.jpg
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2015/07/06-wire-1-opt.jpg
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2015/07/06-wire-1-opt.jpg
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2015/07/07-wire-2-opt.jpg
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2015/07/07-wire-2-opt.jpg
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2015/07/08-ibroadcast-opt.jpg
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2015/07/08-ibroadcast-opt.jpg
  19. 19 http://iwc.oxfordjournals.org/content/27/3/210
  20. 20 http://www.fastcolabs.com/3002577/open-company/7-key-questions-ask-when-taking-your-app-ios-android
  21. 21 https://play.google.com/store/apps/details?id=com.BogdanMihaiciuc.receipt
  22. 22 https://citymapper.com/berlin/superrouter
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2015/07/09-tg-1-opt.jpg
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2015/07/09-tg-1-opt.jpg
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2015/07/10-tg-2-opt.jpg
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2015/07/10-tg-2-opt.jpg
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2015/07/11-tg-3-opt.jpg
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2015/07/11-tg-3-opt.jpg
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2015/07/12-whatsapp-1-opt.jpg
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2015/07/12-whatsapp-1-opt.jpg
  31. 31 http://blog.komoot.de/komoot-goes-android/371
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2015/07/13-komoot-opt.jpg
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2015/07/13-komoot-opt.jpg
  34. 34 http://materialdesignblog.com/how-do-android-apps-compare-with-ios-apps-in-material-design/
  35. 35 http://blog.invisionapp.com/designing-in-the-material-style-without-just-copying-google/
  36. 36 http://yalantis.com
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2015/07/14-accent-kit-opt.jpg
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2015/07/14-accent-kit-opt.jpg
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2015/07/15-sc-1-opt.jpg
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2015/07/15-sc-1-opt.jpg
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2015/07/15-sc-2-opt.jpg
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2015/07/15-sc-2-opt.jpg
  43. 43 http://mashable.com/2012/09/11/html5-biggest-mistake/
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2015/07/16-fb-1-opt.jpg
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2015/07/16-fb-1-opt.jpg
  46. 46 http://yalantis.com/blog/the_technology_stack_behind_airbnb/
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2015/07/17-airbnb-1-opt.jpg
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2015/07/17-airbnb-1-opt.jpg
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2015/07/18-airbnb-2-opt.jpg
  50. 50 https://www.smashingmagazine.com/wp-content/uploads/2015/07/18-airbnb-2-opt.jpg
  51. 51 https://www.smashingmagazine.com/wp-content/uploads/2015/07/19-airbnb-3-opt.jpg
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2015/07/19-airbnb-3-opt.jpg
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2015/07/20-viber-1-opt.jpg
  54. 54 https://www.smashingmagazine.com/wp-content/uploads/2015/07/20-viber-1-opt.jpg
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2015/07/21-viber-2-opt.jpg
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2015/07/21-viber-2-opt.jpg
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Sergii Ganushchak is a mobile UX/UI designer. He loves his family, his job, and his bike. You can follow Sergii on Dribbble where he posts his latest works, and on Twitter.

Kate Abrosimova is a technology journalist, blogger, and content marketer. She writes articles on mobile technology, iOS and Android app development, and startups. Her articles can be seen on Yalantis blog. Follow Kate on Twitter.

Kate and Sergey both work at Yalantis, an app development company.

  1. 1

    Thanks for the article. Very insightful and helpful.

    5
  2. 2

    Very interesting article!

    1
  3. 3

    It wasn’t until the passage on Whatsapp that I really knew what on earth you were talking about or getting at. It’s got nothing to do with brand – it’s design guidance for a device, or platform. For a very long time, and it does still happen on occasion today, you couldn’t get your app into the Apple Appstore if it didn’t conform to certain design conventions that were within their designer/developer guidelines. That has long since changed, I think one of the first to get through was Path, totally trashing their guidelines for UI concepts.

    Google Materials however, is a totally different proposition. That is from a team at Google providing you with suggestions of how to develop things for Google applications – not android applications, not your application on an Android device, or a Google phone. In keeping with their pseudo transparency and because it is a beautiful piece of documentation artistry it was shared – and somehow, it has been taken as that this is instruction of how you should make apps for Android and that isn’t really what it is there for, it is a guided framework same as something like Twitter Bootstrap which can be adopted by other people.

    So, the two things you’re making your comparisons on I don’t think entirely fit with the argument, but I do understand what you’re digging at which is – should you confine yourself to guidelines or do your own thing and the answer is quite simple – they are guides, not rules or instructions to build and design.

    -4
    • 4

      Sergii Ganushchak

      September 2, 2015 8:01 pm

      Thanks for your comment.
      Even if we consider that Apple, unlike Google, doesn’t have ready-to-use frameworks for UI design, they provide a lot of ready-to-use components for development as well. Moreover, there is a lot of third-party assets and UI Kits, that help designers to create a “iOS-style” UI really fast.
      So basically here we’re talking about the time and money costs and help designers to decide which way to choose for UI adaptation: to create your own design, based on your brand guidelines, and save money on design work, or to use platform frameworks, guides and default UI kits to save money on development.

      0
      • 5

        Martijn van Buuren

        September 18, 2015 12:49 am

        I would like to point out that a major reason to use device ‘standard’ UI elements would be to improve usability. If UI elements looks like the device standard, users need to spend less effort on learning how to use your app, since they are already familiar with these UI elements.

        2
  4. 6

    Love the article! Thanks for sharing this time-consuming research!

    One minor grammatical error I noticed at the end of the article:

    “…approaches mentioned in this article is perfect.”

    I think you mean “are perfect” since the noun in that sentence — the word “approaches” — is plural.

    -2
    • 7

      ut "Sergii Ganushchak

      September 2, 2015 7:35 pm

      Thanks for noticing that, but there is no mistake. It says: “none of approaches is perfect”, so in this case noun in this sentence is “none” and it’s singular.

      4
  5. 8

    Are the Kamoot example screens from older versions of their apps? I ask because they don’t seem to match what’s written along side them. Both iPhone and Android screens have nearly identical layouts. Only minor differences in the widget styles…so they dno’t exemplify that they stuck to each platform’s rules.

    Interestingly, there are some odd differences that *don’t* make any sense. For example, the label “SUGGESTED SMART TOURS” in iOS, is “TRY ONE OF THESE TOURS” in Android. And iOS lists elevation gain/loss first, then distance. Whereas Android has distance first. I’m guessing it’s just an oversight and not intentional, but overall it just seems like a bad example.

    1
  6. 9

    Hey, nice article. it is good see how the app pattern changes.

    But from the User centered design approach, the OS s should guide the app interaction. They cannot solve UI and UX requirement for every need. Hence i wont and wouldn’t recommend anyone to bank on it.

    0
    • 10

      Sergii Ganushchak

      September 4, 2015 12:09 pm

      Hey, thanks for your comment!

      As for OS guides and interactions, of course designers should first of all think about user’s needs and app logic, but I wouldn’t recommend to completely abandon OS guidelines from the point of UI/UX and interactions, because this is what makes app predictable and understandable for users.

      1
  7. 11

    Damir Dizdarevic

    September 5, 2015 1:26 pm

    Very good article,
    many examples and insightful statements by the designers

    2
  8. 12

    Thomas Jaworski

    September 7, 2015 10:41 am

    Thanks for the Article! It’s a pity that Microsoft’s Windows Phone doesn’t even appear in the Introduction, at least explaining why this article is focusing on the big two. I know that while there is no winner between iPhone and Android, the looser between the three is surely the Windows Phone, but it still has it’s right to exist and has some UI/UX concepts which might make it even more challanging to adapt from existing Apps (e.g. “Live Tiles”). Personally, I own a Windows Phone, and the only thing I’m not satisfied with is the lack of Apps, caused by this kind of ignorance.

    Also, it would be interesting to see how it affects the decision on the concept when having three platforms, not only two.

    2
    • 13

      Sergii Ganushchak

      September 7, 2015 1:42 pm

      Thank you for your comment! To be honest, here at Yalantis we haven’t had a single project targeting Windows Phone over the past couple of years. Maybe the reason is that Windows Phone currently has only about 2-3% of the mobile OS’ market share (even less than Symbian or Java ME phones). It doesn’t seem like Microsoft is going to solve this problem. Moreover, they don’t provide clear and comprehensive guidelines for building UI for the WinPhone (at least, not as clear and comprehensive as Apple HIG or Google Material Guidelines). I don’t think that the reason why Windows Phone fails to increase its market share is that there are very few applications for this platform. I’d rather say it’s the other way round. There are so few apps for WP because it fails to increase its market share. That’s why it makes sense for startups and middle-size businesses to give up on WP and lose 3% (and decreasing) of potential audience. Otherwise, they would have to spend a lot of money and time implementing an app for this platform. Honestly, I’d rather spend additional resources on improving versions for iOS or Android (or both).

      0
      • 14

        Thomas Jaworski

        September 7, 2015 4:35 pm

        Agree. As mentioned, it would have been fairer to at least include one or two lines from your answer to my comment in the original article, just to show awareness of the existence of a 3rd player :) Yeah its a vicious cycle. They need more customers to gain more market share, but customers jump off because they’re missing even most important apps (e.g. “Snapchat” etc.), so why should they buy a Windows Phone.

        Btw. the resources from Microsoft are not so bad. I’m a developer and I found sources at https://dev.windows.com/en-us/design quite comprehensive.

        1
        • 15

          Sergii Ganushchak

          September 7, 2015 6:09 pm

          Yes, from the one hand this is a vicious cycle. But from the other hand, neither Apple nor Google didn’t start at the empty market niche and they didn’t have hundreds of millions of users right after they had started. In first version of iOS you even wasn’t able to have third-party apps :) But, despite this, they had gained over 40% of the market for each for about 7 years.

          Talking about MS, yes, they have comprehensive guidelines, but in my opinion they’re more concentrated on Desktop/Tablet UI, therefore they’re giving weak support for mobile-only UI designers. Especially for those who are not experienced that much to understand whole MS’s philosophy of universal UI. At the same time, I believe that Google’s and Apple’s guidelines are more clear and much more mobile-oriented.

          Finally, back to the topic of the article, I believe that described approaches will work quite well for Windows Phone adaptation as well, but with two remarks: firstly, there are far fewer third party ready-to-use templates and UI Kits for WP as compared with iOS or Android, and secondly, there’re particular default UI patterns in Windows Phone that are absolutely different as compared with iOS and Android analogues.

          1
  9. 16

    Maurice Griffin

    September 7, 2015 8:48 pm

    I think a key quote for a business person making decisions is “development effort would cost you more if compared to the price of building standard components.”

    As anyone who has worked on a mobile or web app can tell you, development nearly always takes up much more time, money, and effort than design. I say this not to dismiss the talents and efforts of designers, but it’s nearly always true.

    One method I recommend to quickly develop a cross-platform app, especially an early or “minimum viable product” stage app, is to look at hybrid app frameworks like Ionic. (Based on Cordova, aka PhoneGap, which can be used on its own) If you or your team can make sites/apps for the web, you can make a hybrid app, without needing to know Swift/Java/Objective-C. Ionic is a framework utilizing AngularJS and PhoneGap, and the same 3 methodologies laid out here apply with frameworks like it as well.

    Ionic comes with platform-specfic styles built in, and if you deploy to multiple platforms it can automatically adjust the layout accordingly. Similar to fully native development, the farther you get away from standard platform-specfic styles and components, the more time it will take to build. Since you are using a shared codebase for all the platforms, it does however lend itself well towards the “Mixed Approach” however.

    If it works for your situation, and you want to see fast results, I recommend using Ionic early on, when the basic functionality and structure is known, but before the designs are final. Following the default approaches and not adding too much style, you will be able to very quickly create some “Platform-specfic” prototypes for each platform. Using those to inform the designers can save everyone a good deal of time, as you get to see roughly what the platforms offer “out of the box” and decide what should be altered for certain platforms or all platforms.

    2
  10. 17

    I agree with Thomas Jaworski, mention of MS would have being good and made the research complete.

    I have to mention that I too use Windows phone, and while using my husbands iPhone I feel challenged.

    Android is a cheap copy of IOS, a confused child may be.

    But as an user experience professional I feel that I have greater responsibility to provide the required without falling in the trap of OS UIs.

    Adhering to the OS UI makes design dev friendly not necessarily predictable or user friendly.

    0
  11. 18

    They were talking about how iPhone is better then android in how you can do different stuff on the iPhone that you can’t do with android. In they said how the integram is better in it has a vsco cam on the iPhone

    2
  12. 19

    Very informative article.

    1

↑ Back to top