image credit: google.com
The Material design guidelines have been available for over 6 months, this new design direction was made available with Android 5.0 Lollipop being released to stock android devices nearly 3 months ago. For many people however their devices are only now receiving Android’s latest update. The following is a look at how Google’s competitors have re-imagined their designs in recent years, what Material design proposes as a design language and how it translates into Google’s latest apps.
The Current trend in flat design
Over the last few years the big three tech companies of Apple, Google and Microsoft have moved towards a minimalist and flatter visual design and away from skeuomorphic design language that looked to replicate real world objects by using three-dimensional effects.
Windows 8 Metro UI
The first to commit to a flat visual design was Microsoft with their Metro UI, first seen in Windows Phone 7 and later in Windows 8. They were followed by Apple with iOS 7 which saw a significant shift away from the use of bevels, shadows, borders and textures to a flat design with the exception of the occasional translucent surface and colour gradients.
Jony Ive, The Senior Vice President of Design at Apple explains his reason for the drastic shift away from skeuomorphic design in iOS 7:
“We understood that people had already become comfortable with touching glass, they didn’t need physical buttons, they understood the benefits. So there was an incredible liberty in not having to reference the physical world so literally. We were trying to create an environment that was less specific.”
iOS 6 vs iOS 7 (image credit: ipanduan.com)
Criticism of Flat Design
Both companies seemed to split opinion with many applauding a more ‘pure’ and cleaner design language that created a consistent look and feel for the OS and their apps. Others complained about the lack of affordance and visual cues that helped indicate how to interact with elements and how they would behave.
The Nielsen Norman Group were critical of Windows 8’s new design in their user experience appraisal, highlighting how buttons are no longer well defined to differentiate them from the rest of the interface thus reducing usability.
‘There’s no pseudo-3D or lighting model to cast subtle shadows that indicate what’s clickable (because it looks raised above the rest) or where you can type (because it looks indented below the page surface).
Icons are flat, monochromatic, and coarsely simplified. This is no doubt a retort to Apple’s overly tangible, colorful, and extremely detailed “skeuomorphic” design style in iOS prior to iOS 7.’
Although they were less critical of iOS 7 they felt that Apple had repeated some of the mistakes Microsoft made when transitioning to a flatter design language. A significant factor in the negative reaction of users was how drastic the design changes were between OS updates, particularly for Apple. Google over the years has never had a particularly rich design and for some time has been described as ‘almost’ flat design, particularly with the introduction of Google Now’s card interface in 2012. Their design language takes the main concepts of flat design but retains some richer attributes such as subtle shadows to create a sense of depth to help differentiate elements and their functions. What Google has recognised is that flat design’s biggest limitation is it’s lack of affordance.
Material Design Guidelines
Material design guidelines (image credit: google.com)
What the material design guidelines do is provide consistent and logical rules of behaviour that reflect real world physics but set in a digital environment and some of the freedom that brings. Material design looks to create best practice rules for applying functional yet elegant depth and animations to create more intuitive interactions.
‘The material environment is a 3D space, which means all objects have x, y, and z dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the positive z-axis extending towards the viewer.’ Material design guidelines
One way in which Google does this is by emphasizing the use of a ‘z-axis’ to create a sense of depth in which elements can occupy different levels. In order to show that an element is occupying a higher level on the z-axis, shadows are used around its border, being cast on to the level below. What this creates is the illusion of an interactive layer/element that exists above a different, lower interactive layer/element.
‘Carefully choreographed motion design can effectively guide the user’s attention and focus through multiple steps of a process or procedure, avoid confusion when layouts change or elements are rearranged, and improve the overall beauty of the experience.’ Material design guidelines
Another focus of the guidelines is on how to create logical animations and transitions that inform the user where they are, where they are going to and how to get back. There is an emphasis for elements not to simply and suddenly load up but slide, fade and enlarge on the screen and be positioned in a way that the user can easily trace their steps and see how the new content relates to their interactions.
Material Design in use
We can look at how Google have incorporated material design into some of their apps and how it has affected user experience.
Navigating the Youtube app
Youtube – Within the Youtube app the use of depth, layers and transitions allows for more complex interactions particularly when a user is switching from viewing a video to search results. Previously a user would have two clear states of interaction, the first being search and selection of a video, the second being the video playing view. The new app allows for an intermediate state in which a video can be minimized in the bottom corner, still playing whilst the user can do further searches and scroll through videos.
Material design is employed to create transitions that inform the user that the video acts as its own layer. This layer can be minimized into a preview with other elements fading out to reveal the search results below. The use of shadows around the video preview helps to identify it as its own layer with further actions available to it, either swiping back up to full video view or swiping to the side to stop the video and close it down. Additional feedback is given to the user with the video fading audibly and visually as it is swiped away.
Navigating the Google Keep app
Google Keep – A current trend for some apps is to create navigational elements that shrink or hide upon scroll in order to create more space for the content below. Google Keep uses this technique to optimize space whilst retaining quick access to the main menu, with material design helping to indicate the different states of the menu. The menu sits at the top of the page (in its ‘resting’ state) above the core ‘post it notes’ content, where it remains as the user scrolls down. As soon as the user scrolls back up the page, the menu pops back down but as a layer that sits above the content (in it’s ‘non-resting’ state). It remains there until the user scrolls back up to the top where it settles in its default position or scrolls back down again. Shadows are used to differentiate between the menu’s ‘resting’ and ‘non-resting’ states.
Navigating the Google Play Music app
Google Play Music – The use of ‘layers’ can be seen in Google Play Music where the current song playing sits at the bottom of the screen. This can be dragged up for more information and greater controls of what is playing and then dragged back down to return to your navigation. Again it is the subtle use of shadows that hints to the user that there is an extra level of interaction for the current song element.
Conclusion
Material design is certainly a step forward for Google, creating a much bolder and functional design language across their platforms however it’s effectiveness could be limited by the core problems that have persisted since Android was introduced. The Android business model allows for leading phone manufacturers to apply skins to Google’s OS but more often than not it reduces the consistent look and behaviour of the OS and delays the update of non-stock Android phones to the latest version of the OS. Statistics showed that after 2 months of the release of Lollipop only 0.1% of Android devices were running it.
Another factor that is difficult for Google to overcome is the general preference for developers to create apps for iOS first (for various reasons) before adapting them into an Android app. Although Material design opens up opportunities to create more complex and intuitive interactions this would likely require a significant amount of time and effort which may lead to designers and developers opting to only make minor tweaks to their iOS version to suit the Android OS.
Google also understand the importance of having a presence on competitor platforms so a significant number of their apps appear on iOS still retaining the core functionality and interactive behaviour as their Android originals. Although they lack the Material design refinement and appear flatter in design the difference is minimal and not persuasive enough for users to want to switch to an Android device.
Despite these concerns, Google has shown with Material design that they can compete and even lead the way on a design level with Apple and Microsoft but we will have to wait and see if app developers embrace the Material design guidelines and if users will see enough of an advantage. Google’s major visual refresh has come well after Microsoft’s and Apple’s and although there were concerns from some users over how flat their designs are they have had time to become accustomed to them which may mean the extra affordance Material design gives is no longer such an important issue.