What is Material Design?
In this publication I will be analysing the development of Google’s new Material Design Guidelines, idealised by Nicholas Jitkoff and Jon Willey, and the ways it influence users while interacting with interfaces. I make the argument that these guidelines were set not only to create an identity throughout Google’s products, but also to provide users with digital interactions inspired on actual physical interactions.
Originally written for CIU 110 — Critical Thinking in Creative Media class, at SAE Institute, Brisbane, Australia.
Google Material Design Guidelines
Google Material Design Guidelines were idealised by Nicholas Jitkoff and Jon Willey, both Designers at Google. This new design guidelines aspires to unite Google’s increasing number of products’ line under a rich set of design styles, guidelines and principles, and also to create a new design language that would fit every single size of device, from the smallest watch on your wrist, to the largest TV on the wall and every screen size in between.
Mobile meant once less: slow internet connection, small screen size, less power. — Nicholas Jitkoff
When Jitkoff started to design for mobile devices, mobile meant less: less possibilities, slow internet connection, small screen size, less power. The mobile world was uncertain. But over time mobile become more and more powerful, devices were faster and more intuitive, and nowadays Mobile represents more than a half of Internet traffic daily, so the design approach to its users must get up to speed with all the new possibilities being created dayly.
But Material Design does not only spans a design language across all screen sizes and devices, it also creates order, order with meaning and purpose. It’s a clear expression of how Google thinks and position its brand. The colourful and bright solid color-palette, the strong, modern and easily read typography, the ease and frequent use of micro-interactions and animations, these combination of elements are capable to express Google’s values in a high-fidelity design guideline across its product’s interfaces. This big move made by the tech giant to create its own design language can be considered a threat to Apple’s monopoly on ease and sublime user experience.
Designing this new guidelines took almost 3 years of research of Google’s design team, leaded by Jitkoff and Willey. One of the main principles of Material Design is to establish a physical structure, explaining what can be touched and what can be moved on your screen. This structure is established by imitating real world physical interactions, with three-dimensional surface levels, shadows and elements.
The reasons why this new digital design guidelines imitate the real world are directly related to the way people interact with real life objects in their daily life. According to Norman in his book The Design of Everyday Things, people face two Gulfs when interacting with something: firstly the Gulf of Execution, when they try to understand how this specific thing works. Secondly, the Gulf of Evaluation, where users try to figure out what exactly happened during the action. The main role of user interface and experience designers is to help users bridging between these two gulfs, getting to their goal smoothly.
Every single action we take has seven main stages: 1. Goal, 2. Plan the action, 3. Specify action sequence, 4. Perform the sequence, 5. Perceive, 6. Interpret, 7. Compare the outcome — Norman
Norman also explains that every single action we take has seven main stages. We get started by forming a goal, then we plan our action, so we specify the action sequence, then we perform this sequence, after performing we perceive, then we interpret and finally we compare the outcome with the goal. These seven steps are part of our lives since we were born, on every single action performed so far, so it becomes mostly subconscious to everyone, but once we are learning something new or interacting with something for the first time, it turns conscious — but automatic — again.
That is the point about Material Design. Jitkoff and Willey took real life interactions into digital, taking print-based design elements such as space, color, typography and grids to immerse the user in the experience by applying different depths of shadows to these elements. One notorious example of Material design is an element they call card, obviously referring to real cards or paper sheets. By using this element they imitate interactions that users are already familiar with in real life, so their learning curve becomes faster. Imagine a bunch of cards organised on a table, the table itself is the first surface level, the basis. The cards are positioned on a second level, above the surface, and their shadow is visible even being faint. If you want to move one of these cards, you will have to pick it up, going up to a third level related to the surface with a more intense shadow. This is exactly what this new design language does with digital elements.
Material Design organises its different elements by applying various depths of shadows, basically meaning that these elements are floating and can be moved or support interaction, unless they are attached directly to the surface with no shadow, which means they are actually fixed elements and do not support any interaction. These shadows also create hierarchy between elements, the more intense the shadow, the higher the level of the object related to the surface, so the closer and meaningful it is to the user.
Usually the element positioned on the highest level of the screen is the “action button”, the reason why it is above all the other elements is to create hierarchy of information.
This button can actually control the content of the screen you are viewing, and by tapping it you might be allowed to add, edit or delete content that is currently positioned on a lower level related to the surface. Along with the depth of each element, animations also help to create hierarchy by ascending or descending depending on the way the user is navigating. If an user is viewing a screen with cards, if he taps on a card it will automatically expand to have its content shown. If the user tap the “go back” button, the card will easily shrink to the card actual size. These kind of micro-interactions and animations helps the user to understand where he is coming from and where he is going to, avoiding navigation breakouts throughout the app.
In sum, Google’s design team did not take the challenge of designing its own Design guidelines only to set a standard identity throughout its product’s interfaces, they meant to create an easy scalable design guideline to be used on every single size of screen and device, to be used by everyone. The Material Design project was much more than that. These guidelines represent the translation of real life interactions into the digital world, bringing these two worlds, physical and digital, together.
