It is interesting to see how the components used in their designs make small differences between them. Other times, these differences are made on purpose or because they are performing an A\/B Testing on some platform. The A\/B Test consists in developing and launching two versions of the same functionality and measuring which one works best. Let’s start the fight by analyzing LinkedIn, Instagram and Facebook!.<\/p>\n
<\/p>\n
Android vs iOS: LinkedIn UX\/UI<\/span><\/h2>\nMain feed:<\/b><\/span><\/h3>\n![\"android](\"https:\/\/mobivery.com\/wp-content\/uploads\/2022\/01\/linkedin1.png\" "\\"android")
<\/p>\n
\n- Tabbar native vs custom:<\/strong>
\nOn Android (left) is used a native tabbar, each tab has its icon + its label. The style guides of both platforms recommend that each icon should have its label to improve the user experience. This way it is easier and more intuitive to recognize the different sections. In iOS they have a custom tabbar, there is no labels on it. Maybe it looks cleaner and minimal but worse in user experience.<\/li>\n<\/ul>\n\n- Quick access to write a publication:<\/strong>
\nIn iOS (right) we clearly see how they have highlighted the functionality of Publish. In addition to finding this section in the tabbar (with the \u201c+\u201d icon), we have under the navigation bar the access to write, upload a video or photo. It disappears when scrolling so it does not occupy space while we navigate.<\/li>\n<\/ul>\nAndroid vs iOS: 1-1. Tie!. Android earns a point for using a native tabbar with a better user experience and iOS earns another point for the quick access to write a publication.<\/p>\n
<\/p>\n
Message filtering:<\/strong><\/h3>\n![\"ios](\"https:\/\/mobivery.com\/wp-content\/uploads\/2022\/01\/linkedin2.png\" "\\"ios")
<\/p>\n
\n- Segmented bar vs action sheet:<\/strong>
\nIn this case we can see how they have used different components. Android uses a segmented bar and iOS uses a slightly customized action sheet (rounded corners and shorter buttons).<\/li>\n<\/ul>\nAndroid vs iOS: 1-1. Tie! Each platform uses a different component, each one has advantages and disadvantages. In Android the user has to scroll horizontally in the segmented bar to see all the filters and in iOS user has to tap on the filters icon, choose one of them and if he\/she wants to return and see all the messages again he\/she has to click on the \u201cX\u201d to disable the filtering. Scroll vs 3 taps. What do you prefer?<\/p>\n
<\/p>\n
My network:<\/h3>\n
![\"android](\"https:\/\/mobivery.com\/wp-content\/uploads\/2022\/01\/linkedin2-copy.png\" "\\"android")
<\/p>\n
\n- Manage my network with a quick access (the most important content) vs cell that access to another screen with all the content:<\/strong>
\nIn Android we can see that they have taken the most important contents from the Manage my network section (Contacts, Near you and Add new contact) and have positioned it at the top of the screen, more visible. In iOS we see a cell where takes us to another screen with all the options. However, in iOS we also have a quick access of Add contact on a floating button.<\/li>\n<\/ul>\nAndroid vs iOS: 1-2. Android wins a point for a better user experience, because we have the relevant content just to a single tap. However, iOS gets two points for cleaning\/minimalism header and for placing the most relevant action (Add contact) in a quick access (floating button). The iOS screen looks cleaner because it has fewer elements.<\/p>\n
<\/p>\n
Publications detail:<\/strong><\/h3>\n![\"ux](\"https:\/\/mobivery.com\/wp-content\/uploads\/2022\/01\/linkedin2-copy-2.png\")
<\/p>\n
\n- Tabbar on push views:<\/strong>
\nIn iOS it is possible to keep the tabbar on the push screens. Developers can disable it but actually it is something that improves the user experience; having the tabbar we can access to the rest of the sections without going back to find the menu. In Android it is not possible to keep it natively.<\/li>\n<\/ul>\nAndroid vs iOS: 0-1. Point to iOS for better user experience!.<\/p>\n
TOTAL: 3-5. iOS wins the fight of LinkedIn UX\/UI with 3 more points!<\/strong><\/p>\n <\/p>\n
Android vs iOS: Instagram UX\/UI<\/span><\/h2>\nFeed principal:<\/b><\/span><\/h3>\n![\"android](\"https:\/\/mobivery.com\/wp-content\/uploads\/2022\/02\/logo-ies.jpg\" "\\"android")
<\/p>\n
\n- logo on the left vs logo centered:<\/strong>
\nNatively, Android has the title (or logo on the main screen) aligned to the left in the navigation bar. On the opposite, iOS has centered the title or logo except in large-bars (from iOS 11).<\/li>\n<\/ul>\nAndroid vs iOS: 1-1. Tie between platforms!. In my opinion, both solutions are correct. While in Android we see two groups of elements at both sides which gives it a balanced look, in iOS, the logo is in the middle with one and two buttons on its sides, which allow us separating the title from the actions.<\/p>\n
<\/p>\n
Settings menu:<\/strong><\/h3>\n<\/h3>\n
![\"ios](\"https:\/\/mobivery.com\/wp-content\/uploads\/2022\/01\/intagram3.png\" "\\"ios")
<\/p>\n
\n- Side menu vs bottom sheet:<\/strong>
\nOn Android we still find sometimes the side menu. iOS rarely uses it, in this case it displays the Settings menu with a customized bottom sheet.<\/li>\n<\/ul>\nAndroid vs iOS: 1-1. Both use correct solutions to display a menu by pressing a button. Like I am an iPhone user, I would give the point to iOS because I find the side menu kind of oldfashioned. I no longer see side menus in native applications from the iPhone and maybe that’s why comes that feeling. In Android we see less and less that kind of menu but it is a native component within the style guides. So in this case… tie again!.<\/p>\n
<\/p>\n
Publication options:<\/strong><\/h3>\n![\"ios](\"https:\/\/mobivery.com\/wp-content\/uploads\/2022\/01\/intagram4.png\" "\\"ios")
<\/p>\n
\n- Menu vs action sheet:<\/strong>
\nIn addition to having a different order of a publication’s options, Android uses a simple menu and iOS a native action sheet.<\/li>\n<\/ul>\nAndroid vs iOS: 0-1. Actually they are components that user has to perform the same number of taps but iOS wins the point for two slight improvements that the action sheet gives: we see more clearly the negative position of the Report action and we find more Intuitive the Cancel button (in Android we leave the menu by pressing outside the box).<\/p>\n
<\/p>\n
Search:<\/strong><\/h3>\n<\/h3>\n
![\"ux](\"https:\/\/mobivery.com\/wp-content\/uploads\/2022\/01\/intagram5-1.png\" "\\"ux")
<\/p>\n
\n- Search as push screen vs modal view:<\/strong>
\nThe search navigation is different on both platforms. On iOS, the native search bar has the Cancel button on the right (modal view). In addition, when we start writing, the clear \u201cx\u201d button appears to erase what we have entered. In Android we find it natively with a back button.<\/li>\n- Filters with icons vs labels:<\/strong>
\nA difference that we can see clearly, and it is only for an esthetic reasons is that in Android the filters are shown with icons and in iOS with labels. The icons used are quite descriptive, so user will surely not have problems to differentiate the sections.<\/li>\n<\/ul>\n <\/p>\n
Android vs iOS: 2-2. About the first observation, both platforms get a point because user does not notice any difference between modal view vs push view. User performs the same taps and has the same facilities to exit or delete the content entered. About the filtering, Android get a point for cleaning\/minimalism and iOS another one for UX (easier and more intuition in showing the sections). Tie again!<\/p>\n
TOTAL: 4-5. iOS wins the fight of Instagram UX\/UI with only 1 more point!<\/strong><\/p>\n <\/p>\n
Android vs iOS: Facebook UX\/UI<\/span><\/h2>\nFeed principal:<\/b><\/span><\/h3>\n![\"android](\"https:\/\/mobivery.com\/wp-content\/uploads\/2022\/02\/logo-uspeak.jpg\" "\\"android")
<\/p>\n
\n- Tabbar with 5 sections vs 6:<\/strong>
\nThe tab bar differs by default\u2014possibly due to A\/B testing. It can be customized (though somewhat hidden) via Settings > Settings and privacy > Configuration > Shortcuts bar. The menus aren\u2019t native: there\u2019s a line above Home, and icons lack labels. On Android, Notifications is second and the Market tab appears by default, while iOS shows Notifications near the end and Groups by default. Only iOS includes the Profile tab\u2014resulting in 5 tabs on Android and 6 on iOS. However, iOS recommends 2\u20135 tabs and Android 3\u20135, with both suggesting a \u201cMore\u201d tab to avoid exceeding five.<\/li>\n<\/ul>\nAndroid vs iOS: 2-0. This time Android wins by not skipping the recommendation to use a maximum of 5 tabs in the tabbar. I also find more interesting the order of the sections on Android, especially for finding the Notifications section in second place.<\/p>\n
<\/p>\n
Watch section\u00a0<\/strong><\/h3>\n![\"ios](\"https:\/\/mobivery.com\/wp-content\/uploads\/2022\/01\/facebook2.png\" "\\"ios")
<\/p>\n
\n- List of videos saved on a cell vs on a card:<\/strong>
\nAndroid opts for a cell while iOS shows it on a card. The content is exactly the same and the designs of both are consistent with their feed of videos.<\/li>\n<\/ul>\n <\/p>\n
Android vs iOS: 1-1. Both components are appropriate to its UI used, both show the same content and both encourage them to be clicked in the same way. Tie!.<\/p>\n
<\/p>\n
My profile menu:<\/strong><\/h3>\n![\"android](\"https:\/\/mobivery.com\/wp-content\/uploads\/2022\/01\/facebook3.png\" "\\"android")
<\/p>\n
\n- To be able to search content vs find it yourself:<\/strong>
\nIn iOS it is possible to get the search bar by taping the icon. Android does not have it.<\/li>\n<\/ul>\nAndroid vs iOS: 0-1. Point to iOS for offering a search bar in this section!<\/p>\n
<\/p>\n
Create publication in Android vs iOS<\/strong><\/h3>\n![\"ui](\"https:\/\/mobivery.com\/wp-content\/uploads\/2022\/01\/facebook5.png\" "\\"ui")
<\/p>\n
\n- Push view vs modal view:<\/strong>
\nAgain, we see how in Android we have a push screen and in iOS a modal.<\/li>\n- Multicolored vs monochrome icons:<\/strong>
\nAnother difference about UI that we find in Facebook between platforms are these icons, we see how in Android they use several colors per icon and in iOS it is monochrome.<\/li>\n<\/ul>\nAndroid vs iOS: 2-1. In iOS there is only one difference for the user’s eye between a modal and a push and it is the way in which this screen appears. The modal comes from below and the push normally from the right and does not affect about the user experience. On Android, actually the modals and pushes do not exist (talking about programming), developers launch the screens and show the back or close button as designer decides. In this case there is also no difference in user experience, so both earn a point. About the icons, in my opinion Android wins, they have a cooler look. Years ago the trend was a flat and simple design but nowadays designs are slightly more elaborate and more colorful and richer.<\/p>\n
TOTAL: 5-3. Android wins the fight of Facebook UX\/UI with 2 more points!<\/strong><\/p>\nLet’s count !:<\/p>\n
<\/p>\n
- \n
- Tabbar native vs custom:<\/strong>
\nOn Android (left) is used a native tabbar, each tab has its icon + its label. The style guides of both platforms recommend that each icon should have its label to improve the user experience. This way it is easier and more intuitive to recognize the different sections. In iOS they have a custom tabbar, there is no labels on it. Maybe it looks cleaner and minimal but worse in user experience.<\/li>\n<\/ul>\n- \n
- Quick access to write a publication:<\/strong>
\nIn iOS (right) we clearly see how they have highlighted the functionality of Publish. In addition to finding this section in the tabbar (with the \u201c+\u201d icon), we have under the navigation bar the access to write, upload a video or photo. It disappears when scrolling so it does not occupy space while we navigate.<\/li>\n<\/ul>\nAndroid vs iOS: 1-1. Tie!. Android earns a point for using a native tabbar with a better user experience and iOS earns another point for the quick access to write a publication.<\/p>\n
<\/p>\n
Message filtering:<\/strong><\/h3>\n
<\/p>\n- \n
- Segmented bar vs action sheet:<\/strong>
\nIn this case we can see how they have used different components. Android uses a segmented bar and iOS uses a slightly customized action sheet (rounded corners and shorter buttons).<\/li>\n<\/ul>\nAndroid vs iOS: 1-1. Tie! Each platform uses a different component, each one has advantages and disadvantages. In Android the user has to scroll horizontally in the segmented bar to see all the filters and in iOS user has to tap on the filters icon, choose one of them and if he\/she wants to return and see all the messages again he\/she has to click on the \u201cX\u201d to disable the filtering. Scroll vs 3 taps. What do you prefer?<\/p>\n
<\/p>\n
My network:<\/h3>\n
<\/p>\n- \n
- Manage my network with a quick access (the most important content) vs cell that access to another screen with all the content:<\/strong>
\nIn Android we can see that they have taken the most important contents from the Manage my network section (Contacts, Near you and Add new contact) and have positioned it at the top of the screen, more visible. In iOS we see a cell where takes us to another screen with all the options. However, in iOS we also have a quick access of Add contact on a floating button.<\/li>\n<\/ul>\nAndroid vs iOS: 1-2. Android wins a point for a better user experience, because we have the relevant content just to a single tap. However, iOS gets two points for cleaning\/minimalism header and for placing the most relevant action (Add contact) in a quick access (floating button). The iOS screen looks cleaner because it has fewer elements.<\/p>\n
<\/p>\n
Publications detail:<\/strong><\/h3>\n
<\/p>\n- \n
- Tabbar on push views:<\/strong>
\nIn iOS it is possible to keep the tabbar on the push screens. Developers can disable it but actually it is something that improves the user experience; having the tabbar we can access to the rest of the sections without going back to find the menu. In Android it is not possible to keep it natively.<\/li>\n<\/ul>\nAndroid vs iOS: 0-1. Point to iOS for better user experience!.<\/p>\n
TOTAL: 3-5. iOS wins the fight of LinkedIn UX\/UI with 3 more points!<\/strong><\/p>\n
<\/p>\n
Android vs iOS: Instagram UX\/UI<\/span><\/h2>\n
Feed principal:<\/b><\/span><\/h3>\n
<\/p>\n- \n
- logo on the left vs logo centered:<\/strong>
\nNatively, Android has the title (or logo on the main screen) aligned to the left in the navigation bar. On the opposite, iOS has centered the title or logo except in large-bars (from iOS 11).<\/li>\n<\/ul>\nAndroid vs iOS: 1-1. Tie between platforms!. In my opinion, both solutions are correct. While in Android we see two groups of elements at both sides which gives it a balanced look, in iOS, the logo is in the middle with one and two buttons on its sides, which allow us separating the title from the actions.<\/p>\n
<\/p>\n
Settings menu:<\/strong><\/h3>\n
<\/h3>\n
<\/p>\n- \n
- Side menu vs bottom sheet:<\/strong>
\nOn Android we still find sometimes the side menu. iOS rarely uses it, in this case it displays the Settings menu with a customized bottom sheet.<\/li>\n<\/ul>\nAndroid vs iOS: 1-1. Both use correct solutions to display a menu by pressing a button. Like I am an iPhone user, I would give the point to iOS because I find the side menu kind of oldfashioned. I no longer see side menus in native applications from the iPhone and maybe that’s why comes that feeling. In Android we see less and less that kind of menu but it is a native component within the style guides. So in this case… tie again!.<\/p>\n
<\/p>\n
Publication options:<\/strong><\/h3>\n
<\/p>\n- \n
- Menu vs action sheet:<\/strong>
\nIn addition to having a different order of a publication’s options, Android uses a simple menu and iOS a native action sheet.<\/li>\n<\/ul>\nAndroid vs iOS: 0-1. Actually they are components that user has to perform the same number of taps but iOS wins the point for two slight improvements that the action sheet gives: we see more clearly the negative position of the Report action and we find more Intuitive the Cancel button (in Android we leave the menu by pressing outside the box).<\/p>\n
<\/p>\n
Search:<\/strong><\/h3>\n
<\/h3>\n
<\/p>\n- \n
- Search as push screen vs modal view:<\/strong>
\nThe search navigation is different on both platforms. On iOS, the native search bar has the Cancel button on the right (modal view). In addition, when we start writing, the clear \u201cx\u201d button appears to erase what we have entered. In Android we find it natively with a back button.<\/li>\n- Filters with icons vs labels:<\/strong>
\nA difference that we can see clearly, and it is only for an esthetic reasons is that in Android the filters are shown with icons and in iOS with labels. The icons used are quite descriptive, so user will surely not have problems to differentiate the sections.<\/li>\n<\/ul>\n<\/p>\n
Android vs iOS: 2-2. About the first observation, both platforms get a point because user does not notice any difference between modal view vs push view. User performs the same taps and has the same facilities to exit or delete the content entered. About the filtering, Android get a point for cleaning\/minimalism and iOS another one for UX (easier and more intuition in showing the sections). Tie again!<\/p>\n
TOTAL: 4-5. iOS wins the fight of Instagram UX\/UI with only 1 more point!<\/strong><\/p>\n
<\/p>\n
Android vs iOS: Facebook UX\/UI<\/span><\/h2>\n
Feed principal:<\/b><\/span><\/h3>\n
<\/p>\n- \n
- Tabbar with 5 sections vs 6:<\/strong>
\nThe tab bar differs by default\u2014possibly due to A\/B testing. It can be customized (though somewhat hidden) via Settings > Settings and privacy > Configuration > Shortcuts bar. The menus aren\u2019t native: there\u2019s a line above Home, and icons lack labels. On Android, Notifications is second and the Market tab appears by default, while iOS shows Notifications near the end and Groups by default. Only iOS includes the Profile tab\u2014resulting in 5 tabs on Android and 6 on iOS. However, iOS recommends 2\u20135 tabs and Android 3\u20135, with both suggesting a \u201cMore\u201d tab to avoid exceeding five.<\/li>\n<\/ul>\nAndroid vs iOS: 2-0. This time Android wins by not skipping the recommendation to use a maximum of 5 tabs in the tabbar. I also find more interesting the order of the sections on Android, especially for finding the Notifications section in second place.<\/p>\n
<\/p>\n
Watch section\u00a0<\/strong><\/h3>\n
<\/p>\n- \n
- List of videos saved on a cell vs on a card:<\/strong>
\nAndroid opts for a cell while iOS shows it on a card. The content is exactly the same and the designs of both are consistent with their feed of videos.<\/li>\n<\/ul>\n<\/p>\n
Android vs iOS: 1-1. Both components are appropriate to its UI used, both show the same content and both encourage them to be clicked in the same way. Tie!.<\/p>\n
<\/p>\n
My profile menu:<\/strong><\/h3>\n
<\/p>\n- \n
- To be able to search content vs find it yourself:<\/strong>
\nIn iOS it is possible to get the search bar by taping the icon. Android does not have it.<\/li>\n<\/ul>\nAndroid vs iOS: 0-1. Point to iOS for offering a search bar in this section!<\/p>\n
<\/p>\n
Create publication in Android vs iOS<\/strong><\/h3>\n
<\/p>\n- \n
- Push view vs modal view:<\/strong>
\nAgain, we see how in Android we have a push screen and in iOS a modal.<\/li>\n- Multicolored vs monochrome icons:<\/strong>
\nAnother difference about UI that we find in Facebook between platforms are these icons, we see how in Android they use several colors per icon and in iOS it is monochrome.<\/li>\n<\/ul>\nAndroid vs iOS: 2-1. In iOS there is only one difference for the user’s eye between a modal and a push and it is the way in which this screen appears. The modal comes from below and the push normally from the right and does not affect about the user experience. On Android, actually the modals and pushes do not exist (talking about programming), developers launch the screens and show the back or close button as designer decides. In this case there is also no difference in user experience, so both earn a point. About the icons, in my opinion Android wins, they have a cooler look. Years ago the trend was a flat and simple design but nowadays designs are slightly more elaborate and more colorful and richer.<\/p>\n
TOTAL: 5-3. Android wins the fight of Facebook UX\/UI with 2 more points!<\/strong><\/p>\n
Let’s count !:<\/p>\n
- Multicolored vs monochrome icons:<\/strong>
- Push view vs modal view:<\/strong>
- To be able to search content vs find it yourself:<\/strong>
- List of videos saved on a cell vs on a card:<\/strong>
- Filters with icons vs labels:<\/strong>
- Search as push screen vs modal view:<\/strong>
- Menu vs action sheet:<\/strong>
- Side menu vs bottom sheet:<\/strong>
- logo on the left vs logo centered:<\/strong>
- Tabbar on push views:<\/strong>
- Manage my network with a quick access (the most important content) vs cell that access to another screen with all the content:<\/strong>
- Segmented bar vs action sheet:<\/strong>
- Quick access to write a publication:<\/strong>