Material design and what can be learned from it

Material design and what can be learned from it

Back in July of this year, Google unveiled their new version of Android, called Lollipop, and a whole slew of user-centric improvements to their mobile and desktop design language. Hidden beneath the bright colors and subtle animations lies a treasure trove of UX best practices that should be considered not only in application design, but also web design.

The biggest change in Lollipop is Google’s introduction of Material Design. Before diving into what exactly Material Design is, it’s important to note what led up to its creation. In the early days of mobile application design, Apple brought skeuomorphism to light. With a Notes application that resembled a lined notepad and a Calendar app modeled after a leather-bound planner, Apple made real world objects the base for their user interface. Fast-forward to June 2013 and the introduction to iOS 7, and pixel perfect textures were swapped with bright, high-contrast gradients and an overall “flatter” look. While flat design and skeuomorphism are design trends that come and go, it’s important to note the benefits and downfalls of both aesthetics. This is where Google’s Material Design comes in.

Material design and what can be learned from it

Photo courtesy of Google APIs.

Where Physical and Digital Meet

At Google IO 2014, Vice President of Design Matias Duarte described Material Design as having “physical surfaces and edges because the human mind is wired at its most primitive level to instinctively understand objects and their relationships. Those seams and shadows provide meaning about what you can touch and how it will move”. While visually the OS appears flat, it behaves like a physical object, à la skeuomorphism. The familiarity of tactile on-screen elements helps a user understand interactions, while the bright and bold colors create a distinct hierarchy that highlights interactive items and immerses the user within the experience.

Material design and what can be learned from it

One aspect of UX that always rings true is that pulling from real-world or familiar interactions lessens the ever-present learning curve by creating affordances. Affordances are properties of an object that indicate its function. Buttons click, knobs twist and so on. It’s the reason why text encapsulated in a shape feels more like a button than text by itself. Add shadowing or a gradient to that button and you’ve made a 2-D object appear 3-D, increasing its likeness to physical buttons and the likelihood that a user will recognize it as a button. In Android Lollipop, because of the flat aesthetic, gradients are a no-go. To remedy this and play to the touch interaction on mobile, a “ripple” that emanates from the user’s touch-point on the button accompanies each button tap. This communicates impact and is a quick way to inform the user of their interaction.

Cause and Effect

Another addition was the introduction of animation to further emphasize the “cause and effect” of user interaction. Even Newton coined his third law on the basis that “for every action, there is an equal and opposite reaction”. While the tap of a button and the consequent loading of a new page works, it doesn’t speak to the process or origin of the result. Within Android Lollipop, lightboxed items seem to grow from the icon the user tapped to trigger the pop-up, removing possible confusion and reaffirming the user’s actions by creating a relationship with each input.

Material design and what can be learned from it

This principle is important throughout all interactive design. The user should always be cognizant of the actions they are making and their effect. Reaction without a clear cause can create confusion for the user as it removes their ability to discern which elements are interactive and how to replicate repeatable actions. This is as simple as having concurrent pages slide in from the right on a mobile application. Our mind creates a “stack” of pages, where every next page in a progression is layered on top of the last and tapping the back arrow causes a screen to slide away, revealing the previous page. This forms a chronological sequence, informing the user of where they are in the process without making each decision feel final and locked in.

Spotlight Key Functionality

Common UI across multiple apps is nothing new. It birthed the hamburger menu and the iOS tab bar, but within Android Lollipop, Google has implemented a floating action button or “Fab”. While this may seem like nothing more than a kitschy design buzzword, its inclusion in the interface creates continuity, a visual call-to-action and highlights key functionality. This floating circle button stores what Google calls “Promoted Actions”. Whether it’s adding a friend to your contacts or composing a Tweet, common repeated actions are always one tap away.

Material design and what can be learned from it

Within interface design, it’s important to highlight key functionality, especially if it lessens the tedious nature associated with repeated actions. Instead of having your user search through menus to create an email or playlist, make it as simple as a single touch to bring up the creation screen. It may not seem like much, but reducing an action that takes two or three taps to complete to one tap not only saves the user time, but reduces the opportunity for the user to ask, “How did I get here again?"

While these pieces of user interaction are fairly specific and more mobile-focused, it’s the emphasis on informing the user of each action and function that can be pulled from and used in web design as well. It’s easy to go with the current design trends, but it’s what we learn from these trends and their impact on user interaction that have the lasting impact to benefit every user.

Thank you Google for letting us borrow images.