A beginner’s introduction to the differences in iOS and Android design
Article by
Alexandra JushkovaAlexandra is a designer at Dynamo Digital Ventures, and has been working in many different industries; sports, health, beauty, finance and construction. She is fascinated by studying and observing people which helps her design the right solution for the user group. Her stronger skills is UX/UI. However, she has a good eye for graphical representation. By being around her developer colleagues she has started to be interested to learn and understand more about the code behind the interface design.
This article aims to clarify and show some of the differences in Android and iOS design guidelines. This is for beginners and could also be a perfect way to show clients the importance of knowing that Android and iOS platforms have different design standards and thus also different user behaviour. In some cases, having different design is incredible important for the target group, in other cases not so much. Always remember to base your decisions from the target group of your service and how they want to use the product.
As a consultant you have an opportunity to work on different projects with different requirements. Designing solutions for Android, iOS and web based platforms is a normal week for a Dynamo designer. Additionally, also having print projects and getting the opportunity to try design for IoT-services makes our range of work big.
This post is a beginner’s guide to focus on the designing for mobile platforms: Android and iOS. Being part of the Dynamo design team we are constantly asking for each other opinions, learning from each other, giving tips and hints in different design techniques.
During a typical “Swedish fika” at the office we had a discussion about how two find a great UX/UI design for solutions for both iOS and Android. From our experience in this field, we have noticed that iOS users are more confident about how to use an iOS device, in comparison to services designed for Android and vice versa. Further, the iOS users and Android users expect behaviours on the services based on their respective platform design.
We started to compare how specific types of information or content is represented on each platform and we saw both differences and similarities.
I took some time to study and compare iOS Human Interface guidelines and Google Material design guidelines.
The main hypotheses I explored were:
Is it important to follow exactly each platform guideline while designing a mobile solution on both platforms?
Is it OK to mix (iOS and Material design) guidelines while designing a mobile solution on both platforms?
I have summarised the differences between the main components of iOS and Android that are generally found in mobile apps.
1. Cards
A collection of multiple data, images, movies, text, but can also include buttons and comments.
According to the two guidelines:
Android
Shadow
Gutter
Round corners
iOS
No shadow
Full width
No round corners
Example LinkedIn feed on Android and iOS
2. App bar
App bar has the title for the current page and sometimes additional features. It is common to have a back button there too.
Android
Current page, title on left corner
Features-navigation on right corner (often: search, accounts, and less important features)
iOS
Current page, title is centered
Features-navigation: both left & right corners (often main action, settings, account)
Example Instagram app bar on Android and iOS
3. Tap Bar
A bar usually for navigating through the App.
Android
No strict standard
All navigation: Text and/or icons
Material suggest 3 solutions:
3-5 segments (can be more and scrollable)
Top or bottom navigation
Floating button
iOS
Bottom tap navigation
Max 5 segments
Text and icons
Example Twitter on Android and iOS
4. Icons
Android
Solid and thick
Inactive gray color
Has an active color
iOS
Thin and outline
Inactive gray color
Active black or color
Example Instagram navigation icons on Android and iOS
5. Simple menus & dialogs
These components are used for additional actions and information for the specific part of the service.
Android
Additional info or actions
Icons, images, list, clarifying text
Full screen dialogs
Scrolling possible
iOS
Actions for the related context
Black background behind dialog
Have “Cancel” button
No scrolling
Example LinkedIn on Android and iOS
6. Mix of styles
By comparing different apps on the both platforms, I saw that there many services that mix both iOS and Material design for both platforms.
Android
A Floating button for the main action of the screen, standard in Material design
iOS
Using a floating button from Material design for iOS app. However, by iOS guidelines it suggest to have main feature in the top-right corner.
Example LinkedIn message view on Android and iOS
Android & iOS
Segmented controller on the top - Material design suggestion
Main action as floating button - Material design suggestion
Navigation bar bottom- both platforms suggest
Icons thin and outlined - suggested by iOS design
Example AirBnB explore view on Android and iOS
Some of the components not included:
Segmented controllers
Buttons
Animations
Typography
Settings
Summary
We can see that some companies follow and apply the general design guidelines of each platform, because every platform user is used to specific interactions and expect to work in the current way. However, designers also do not strictly follow every guideline and allow themselves to combine and mix iOS and Android guidelines together to best suit the needs of their user.
Good to have in mind:
There will never be a perfect design language or template
Design is about picking the best solution for the purpose
Experiment and find what works for your product
Don’t forget to consider the people and devices that you’re designing for
If you got this far, it would be great to hear your own opinion and the way you work on designing for both platforms! Further, Dynamo is always looking for talented designers and developers. Check our website or contact anyone in our team. We are happy to introduce you to Dynamo Digital Ventures!
¡Salud!
Alexandra
UX & UI designer at Dynamo Digital Ventures
Resources:
iOS Human Interface Guidelines
Developing for Android vs. iOS: Navigation Patterns on Medium Corporation