Alexandra 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.
A collection of multiple data, images, movies, text, but can also include buttons and comments.
According to the two guidelines:
Shadow
Gutter
Round corners
No shadow
Full width
No round corners
Example LinkedIn feed on Android and iOS
App bar has the title for the current page and sometimes additional features. It is common to have a back button there too.
Current page, title on left corner
Features-navigation on right corner (often: search, accounts, and less important features)
Current page, title is centered
Features-navigation: both left & right corners (often main action, settings, account)
Example Instagram app bar on Android and iOS
A bar usually for navigating through the App.
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
Bottom tap navigation
Max 5 segments
Text and icons
Example Twitter on Android and iOS
Solid and thick
Inactive gray color
Has an active color
Thin and outline
Inactive gray color
Active black or color
Example Instagram navigation icons on Android and iOS
These components are used for additional actions and information for the specific part of the service.
Additional info or actions
Icons, images, list, clarifying text
Full screen dialogs
Scrolling possible
Actions for the related context
Black background behind dialog
Have “Cancel” button
No scrolling
Example LinkedIn on Android and iOS
By comparing different apps on the both platforms, I saw that there many services that mix both iOS and Material design for both platforms.
A Floating button for the main action of the screen, standard in Material design
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
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
Segmented controllers
Buttons
Animations
Typography
Settings
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.
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
iOS Human Interface Guidelines
Developing for Android vs. iOS: Navigation Patterns on Medium Corporation