Cross-platform App Design: Why do some apps look different on iOS and Android?
Last year, I started working on the Android version of our company’s app, MailTime. I thought it should be easy, because our iOS app was already well-designed. After reading through some Material Design guidelines, I made adjustments to the iOS design and handed the specs to our engineers.
However, recently I changed my personal cell phone from an iPhone 6 to a Pixel. While I was getting used to my new Pixel phone, discovering more and more interactions with the Android system, I started to notice details that I wasn’t able to find out while I was an iOS designer. Being an Android user gives me new perspective about designing for Android. It’s time for me to reconsider cross-platform app design.
How to achieve the same look and feel on both platforms? How to deal with the differences between Material Design and the style of iOS? Why do apps look slightly different on iOS and Android, and why is that?
To answer these questions, I started by taking a closer look at the apps that I use the most often. If I want to learn more about cross-platform app design, why not learn from the best, right?
In this post, I will present some of my findings when I compared Gmail, Facebook, Messenger, Instagram, and Yelp side by side on iPhone 6 and Pixel. I took the screenshots last week and made them the same size in Illustrator for better comparison. In real life, the screen of Pixel is just a little larger than an iPhone 6.
Gmail
Note: For the comparison of Gmail, I set “Display size” to large in Settings. Under default display size, the email list in Gmail looks even more packed.
At first glance, these two pages look quite the same. However, here are some details that stand out to me:
- Even though the fonts have similar sizes, the space between lines is narrower on Android, making the interface look a bit crowded; also because of the differences in typeface and font weight, the time stamp looks heavier on Android.
- The Android version displays the “important” tag in front of the subject line. However, the style of the yellow arrow looks inconsistent with the “star” icon, because it has a much thinner gray outline.
- The star icon is different on two apps. On Android, the outline is more crisp and darker.
- Gmail did a good job differentiating read and unread emails. The sender and subject line of unread emails are very bold and dark, while the read ones appear much lighter in font weight and color. This makes it very easy to catch unread emails when the user’s scrolling through the list.
I opened up a reservation email on both apps and the same email looked somewhat different, except for the body part. The email body is in HTML and thus they should look the same.
- The iOS Gmail recognizes that this email is a reservation and has a link to the website, “view reservation”, grouped together with the subject line. Gmail on Android also recognizes that this email contains an event and asks me if I’d like to open Calendar app in a card component. The card is also grouped with the subject line, as the thin gray divider is at the bottom of the card, if you look very closely. I understand the different approach because Pixel has all sorts of Google apps pre-installed. What confuses me is that the card seems to have no padding on the right.
- It is also interesting that where the iOS version shows the date, “Mar 14”, the Android version has a shortcut button for reply. Perhaps the Android version wants to make it easier for people to quickly reply emails.
- You may wonder what options are hidden in the menu. Surprisingly, the iOS menu has 3 options but the Android version has 5, including “Print” and “Block ‘Reserve’”. Why is it that iOS users and Android users are offered different options? I haven’t figured that out.
The home of Facebook looks very similar, too, except for the following:
- The first thing that I notice: the menu is moved to the top on Android. It is most likely because of the unique Android on-screen buttons at the bottom. A bottom menu panel could make the bottom part of the screen crowded and increase the chance of mis-touch.
- The icons on Android’s menu bar have lighter color than those on iOS, while the placeholder text, “What’s on your mind?”, is darker on Android.
- Scrolling through Facebook’s News Feed, I notice that the Android version adds an extra input field for comments compared with iOS.
- On iOS, when I tap the “Like” button, it will turn blue and I’ll be added to the list of people who liked or reacted to the post; However, the Android version handles it differently. When I tap “Like”, the “Comment” button will expand into an input field, pushing the “Like” button and “Share” button to the side. It seems that the Android version of Facebook really wants people to comment!
Messenger
The home of Messenger looks very much alike. The Android version keeps the bottom navigation. Some minor differences can be found in typeface, spacing and font colors.
- The major difference is the use of Floating Action Button (FAB). On iOS, at the top there are 3 elements: “personal profile”, search bar, and a button for starting a chat. On Android, the search bar and personal profile are kept at the top, while a FAB at the bottom is for starting a chat. I think it is a smart decision. There are many Android devices and they have very different screen sizes and density. Limiting the top to have only 2 elements works for smaller devices, otherwise the iOS design could be too crowded on smaller screens. Also, as Android devices vary in screen sizes, keeping a FAB at the bottom for the most desired action is smart; it is (almost) always within the thumb’s reach regardless of screen size.
- There’s one more thing that I notice, the shadow under my friend’s story appears in the iOS version only. I guess it is because shadow is a visual cue in Material Design and has its own meaning. Thus shadow is carefully used while designing for Android.
Except for the header/toolbar, a major difference on this page is the menu bar.
- I think it is because of the concern for mis-touch, the menu bar is moved above the input field.
- The icons appear solid and darker on Android. I guess it is to balance with the overall heavy and colorful style of the Android version.
Another app from Facebook and it does a good job here!
- Because Instagram already has a navigation at the top, it will make no sense to move the bottom navigation up to the top.
- Icons become solid and darker, for the same reason with Messenger, I guess.
This page looks quite the same, too.
- Some text is hidden because of the extra on-screen buttons on Android, but you can probably still tell that the text looks denser and heavier on Android.
- There is a “refresh” button in the upper right corner on iOS, while the Android version doesn’t have one. I wouldn’t have noticed it if I didn’t put the two screens side by side. Also, I didn’t realize that the icon was a “refresh” button until I tapped it. This seems weird to me because both apps support pull-down-to-refresh or swipe-to-refresh. Why add an extra button on iOS then?
When I was using Instagram on Pixel, this page surprised (or shocked?) me the most, because it looked so different!
- To start with, the Android version seems to have double headers. It is because on Android, the options to share the post to followers or in direct message are designed as two tabs under the toolbar. The text “FOLLOWERS” and “DIRECT” stand out very much, especially “FOLLOWERS” because of the sky blue color and the tab indicator. However, the call-to-action button on this page should be “Share”. iOS has a better design, as the “Share” button is the largest blue element on the page.
- The list of external sites is designed differently on Android as well. On iOS, each item takes up a full-width line with a toggle button/switch. The Android version uses a two-column table and leaves out the switch; instead, the icon and text will turn sky blue to indicate a selected state. I guess it is again because of the variation in Android screen sizes. The table is shorter and easier to appear above the fold on smaller screens.
- In my opinion, the text on the tab (FOLLOWERS, DIRECT) and section header (SHARE) could be smaller or lighter on Android, as the rest of the text is already dark and thick on this page.
Yelp
Contrary to other apps, the Android version of Yelp looks less crowded and cleaner than its iOS counterpart.
- The bottom navigation is different on Android. The “add” button is taken away and the last button becomes “Bookmarks”, instead of “More”. I kind of like this approach. I use Yelp on a daily basis. However, I mostly just look up restaurant information or browse through photos and comments. I rarely upload a photo or write a review. It is possible that a majority of Yelpers do the same. In my case, leaving out the “add” button does not affect me at all; moving the “Bookmarks” button to the main navigation meets my need. It is actually one of the features that I use the most.
- The Android Yelp tucks everything in its side navigation menu. The most desired actions, “Add Review”, “Add a Photo or Video”, and “Check In”, are in bright blue to stand out. These actions can also be grouped together as FAB. I’m still wondering why that is not the case. The design on iOS is different but has its own advantage. The “add” button is more exposed; once tapped, some suggestion cards will prompt people to write a review. (I was actually tempted to write a review for Kemuri.)
I like the consistency of this page.
- Some minor changes: The Android version uses ft. when the distance is shorter than 1 mile; the dollar sign is green on Android; also, on Android, an arrow indicating direction is added next to the distance.
- Because the Android version has an icon for side navigation, the filter button is moved inside the search box. The “Map” button becomes an icon as well. I assume it is to save space in the toolbar.
To tuck everything in a side navigation has its disadvantage. The list could get so long that one has to scroll through to find an option. Also when items are not above the fold, they could be hard to discover.
While I was scrolling through Yelp’s side menu, I was surprised by this cute animation about a falling dinosaur. It is fun to play with and fun to watch; it certainly makes scrolling less boring.
Lessons Learned
- I agree with Ruthia He’s post about keeping parity when designing for Android. Occasionally there are trade-offs that cause the Android design to look different from iOS. From my observation, it is ok because it is not very likely that one person will be using both iOS and Android devices at the same time. As long as the experience is smooth and consistent, small details won’t create much friction.
- From Yelp’s example, I realize that where there is trade-off, there is chance. Use the opportunity to create fun experience for people. Hide a UI Easter egg and it’ll turn out to be a nice surprise.
- Personally, I prefer a lighter, more elegant interface, which is more seen on iOS. I often make comments about the Android interface being dense, dark or crowded. I don’t mean to imply that iOS design is better than Android design, or that iOS is a better platform. In fact, the best design should be one that respects the different user habits of each platform meet people’s needs. iOS has some unique interactions; so does Android. It is important to take these into consideration when designing cross-platform.
- When designing for Android, the designer should think about how the interface appears on different screen sizes, especially if the app is used across all types of devices. This also explains why Android apps may look different — there are so many screen sizes to consider!
- Last but not least, use an Android device if you are going to design for the platform. Or at least get some insights from Android users or developers.
Here are the articles that inspired me about cross-platform design:
Note: I took the screenshots on March 23 and 24 with the latest version of apps back then. It is possible that the updated versions have a different design from my screenshots.