A Song of Glass and Paper: How OEMs’ Obsession with Blur and Glass Breaks the Transition Between Apps and System
As the adoption and spread of Material Design increases at a tremendous rate among users as well as developers, the adoption and spread of a contrasting visual language around glass increases at a similar rate among OEMs.
The uncomfortably sharp contrast between the reflective glass aesthetics and the flat paper ones causes a broken user experience, but what does it mean, how did it start, and what’s the solution? Let’s have a look
Breakdown of the Material Design Principles
Material is the Metaphor: The unifying theory of a rationalized space and a system of motion. The fundamental concepts of the paper and ink world such as light, surface and movement existing within the world, supplemented with visual cues grounded in reality. Paper and ink in the material world supersede the rules of physics in the real world without breaking them, and allow objects to move, interact and exist in space and relation to each other, forming the building blocks of the world.
Bold, Graphic, Intentional: Material Design sports the foundation elements of print design such as typography, grids, space, scale and color which manifest as edge-to-edge imagery, deliberate colors and intentional whitespace that create hierarchy, meaning and focus, immersing the user in the experience.
Motion Provides Meaning: Objects moving in the Material world respect the user as the primary mover, moving in accordance with user actions that initiate them. Motion is continuous and seamless with interpolation and direction likening to that of the real world, while remaining meaningful and appropriate to focus attention, maintain continuity and establish hierarchy and significance.
Custom Firmware and the Resounding Clash
Ever since the dawn of manufacturer skins on the platform, design teams at each camp have been taking stock Android’s appearance for a spin. In the days where Nexus devices sported the dated Droid and to some extent, the Holo design language, these skins were a refreshing take on a somewhat dull and directionless landscape. However, as of late, design has become a crucial factor in Google’s product development lifecycle and this paradigm shift reflected on Android as well. A focus on delightful experiences and pleasing aesthetics took front and center stage, and Material Design was born, with a focus on a paper-and-ink metaphor. On the other hand, manufacturer skins have been steadily devolving back to the area of skeuomorphism.
“The key is looking at Material Design as a playbook, not a rulebook”
As the living document that is the Material spec evolves and further embodies the material metaphor, the blurred lines between an app and the system become increasingly sharp. Compounded with the rapid adoption rate of Google’s visual language, the break in what should be a seamless transition becomes painstakingly obvious. Glass turns into paper, gradients turn into flat colors, and fancy serifs turn into minimal lines and the user’s attention is drawn to the areas of least importance. This clash breaks the intended harmony of Google’s design language and undermines the ecosystem ambitions of both Google and the OEM.
Finding a Balance
One might ask, what then, is the solution? Should OEMs scrap their own personal branding identities and go the generic route? Should they pick a color from the predefined palette, slap on some Roboto headers and call it a day? The answer is no. Finding a balance is paramount, that sweet spot where the system provides a seamless transition to an app, giving the impression that the ecosystem is one whole. Motorola has done a sublime job at this, allowing the best of Material Design to shine through while simultaneously augmenting it with their own identity through thoughtful and consistent additions.
Shunning Android’s Material elements is shunning the Android platform
One of the primary reasons cited by brands in their arguments against Material is their fear of looking like a Google product. However, that is gross misinformation, since the key to pulling it off is looking at the spec as a playbook, rather than a rulebook, something that Google themselves does. Yes, most of their products use cards and bright colors, but those are Android elements, not Google ones. Shunning them is shunning the platform which is counter-intuitive. Instead, manufacturers need to take a page from Motorola’s book and build atop the world that exists within our devices instead of attempting to replace it.
Expressing Brand Identity Amidst Paper and Ink
Perhaps the most simple set of guidelines to adhere to are that of iconography, yet they remain blatantly ignored by OEMs. A simple tweaking of sizes, abolishing of gradients and use of proper shadows can do wonders, and yet provide an open-ended canvas on which the product’s branding can be projected. The above image shows the S-Voice icon by Samsung, and what three basics steps can do to make it Material – tweak sizes, remove gradients and adjust shadows.
Many major brands employ custom, brand-oriented fonts to strengthen their brand identity, and type goes a long way towards doing just that. However, it should be used sparingly and concisely rather than just plastering it everywhere, such as Instagram does by keeping its type as the toolbar header and using Roboto for body font. Such a compromise proves beneficial for the user as well as the product, enhancing readability and comfort while maintaining the brand.
While Google does provide a comprehensive palette of colors to choose from, numerous designers often misinterpret the presence of the palette in the spec as a definitive swatch to choose from. However, the palette is present for the sole purpose of springboarding designers into the Google’s vision for bright and bold colors on Android, with proper selection of dark and accent variants.
Keeping in line with the spec is a fairly simple task for design, and development teams and can even improve development cycles through the use of comprehensive libraries such as the AppCompat and design support ones, simultaneously improving the end-user experience tenfold and providing a seamless transition between app and system. The task is simple, beneficial and extremely productive for all parties involved – all OEMs need to do is dispel any preconceived notions and jump on board.