Blog post image

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

Article by

Alexandra Jushkova

Published in

Android, iOS, UX/UI

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

tedtalk1

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-3 4-1024x837

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-1 2

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 1 2-1024x824

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-3 4

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 floatingbutton-1024x805

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 1 2

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

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