A beginner’s introduction to the differences in iOS and Android design

 In Design, Featured

By Alexandra Jushkova

 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:

  1. Is it important to follow exactly each platform guideline while designing a mobile solution on both platforms?
  2. 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

ted talks android ios design cards app mobile

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)

instagram android ios design app bar mobile

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

twitter design android ios tap bar mobile app

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

Instagram icons design android ios mobile app

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

linkedin android ios design menus and dialogs mobile app

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.

linkedin ios android design floating button mobile app

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

AirBnB explore view design android ios mobile app

Example AirBnB explore view on Android and iOS

Some of the component 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 the 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

Material Design by Google

Developing for Android vs. iOS: Navigation Patterns on Medium Corporation

A Tale of Two Platforms: Designing for Both Android and iOS

Interaction Design patterns: iOS vs Android

Recommended Posts

Leave a Comment

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Start typing and press Enter to search