Designing with iOS versus Google Material Design Guidelines

It has been a while I posted on this blog, and lot of things have happened since then. Google has revolutionized the user-experience design for Android apps with this new Material Design Guidelines. With its release last year, Apple is no longer the undisputed king of good design. But, I do not intend this post to focus on who wins the design challenge.

The new Material Design Guidelines is already a rave among the designers, not just the mobile app designers, but the entire digital experience design community. While some the designers and developers catering solely to apps for iOS devices can still choose to remain oblivious to this new development, the majority of us designing for the entire mobile app audience need to have a thorough understanding of both iOS Human Interface Guidelines and Google Material Design Guidelines. To build a consistent and delightful user experience for the native apps across both the platforms, its essential that we take into consideration the design language of both the platforms.

Let's have a look at how iOS Human Interface Guidelines differs or resonates with Google Material Design Guidelines.

Google Calendar (Android)

Design Philosophy

While both follow the Flat Design philosophy, with no textures, no exaggeration of 3D perspective and no highlights, the difference is the degree to which they following the flat design paradigm.

When Apple released the iOS7, the flat design was criticized for the lack of affordance in its flat buttons and controls. The new Google Material Design Guidelines took care of this by introducing a subtle shadow to the controls.

The add button in the Google Calendar app shows a shadow indicating an actionable control on a separate layer.

Design Metaphor
The key element that leads to an entirely different experience for iOS flat design versus Google Material Design is the design metaphor. While Apple is following the 'transparent glass' metaphor, Google Material Design Guidelines is based on the 'stack of paper' metaphor.

Stack of Paper (top) vs transparent glass (bottom)

Litely (iPhone)

The semi-transparent controls sliding over the image background in the Litely iPhone app is an perfect example of the transparent glass metaphor.

The numerous apps from Google make use of the stack of paper metaphor adopted by Google Material Design.


Design Principles

iOS Human Interface Guidelines recommend designs that elevate functionality. The Miranda app for iPhone is a perfect example of design that serves totally to the functionality and yet so simple. The control on right lets the user see the time in all the cities of their interest with just a glide of thumb. the additional controls for adding city is available only on pull down, leaving the screen clutter free otherwise.

Miranda (iPhone)

Simple Weather (Android)

The Google Material Design Guidelines on the other hand focus on the visual flair accomplished with bold and graphic visual treatment, grid based layout. The Simple Weather uses the bold graphics to its best. The colorful graphics convey the weather for the day.

Depth

iOS apps are noticeable for the depiction of depth through translucent layers and blurred images. The iOS Human Interface Guidelines recommend zero shadows. A beautiful example is the Yahoo Weather app for iPhone.

Yahoo Weather (iPhone)

On the other hand, z-index is the integral part of the Google Material Design Guidelines, and depiction of depth through shadow is the primary design component.

Navigation

The navigation models adopted by iOS versus Material Design Guidelines is a significant aspect of consideration for app designers  In iOS apps, the tabs are the primary top level navigation element, but Material Design apps can choose between, the navigation drawer or the scrolling tabs as the top level navigation.

B&H (Android)

Google Play Newsstand (Android)

The Google Play Newstand app displays the use of scrolling tabs as primary navigation element in a cool design, while the B&H app with all the options accessible from navigation drawer is another example.

Animation

Animation introduced by the Material Design Guidelines have taken a storm in the digital experience industry. Google Material Design Guidelines recommend animations in every micro-interaction, and magnetic reaction as feedback. The animation used in Morning Routine for every single piece of interaction is mind-blowing.

Morning Routine (Android)

Whereas, the iOS Human Interface Guidelines suggests use of subtle animations, and that too cautiously.Dimming and color change are are used primarily as feedback, such as the one used in phone dial screen . 

Color

And last, but not the least is the use of color. While Material Design Guidelines make use of bold, unexpected and vibrant colors, with solid color panels. and buttons in accent colors, the iOS Human Interface guidelines recommends color as subtle enhancements.

Simple Weather (Android)

Calendar (iPhone)

iOS Calendar app showcases the judicious use color to create a minimalist design. The key elements and controls highlighted with color on bare background. On the other hand, the Simple Weather app uses the bold and vibrant color panel to indicate a clear and sunny day.

Considering the above differences, you might be tempted to design completely different versions of a app for the different platforms. However, we need to provide a consistent user experience across the platforms. To sum up, if you are designing for both iOS and Google Material Design Guidelines, its a of balancing act. While the native apps need to provide a user-experience consistent with their platforms, the user should not be asked to re-learn the app when he switches platform.