Discussion on Google Material Design

Kiki Zhang
Jul 27, 2017 · 6 min read

Introduction
The interaction technique I choose is material design. This concept was originally brought up by Google in 2014 (Wikipedia). What Google tried to do was make digital based on paper and ink. There are three principles of material design: material is the metaphor, bold, graphic, intentional, and motion provides meaning (Material design– Introduction). I would like to discuss more about the last principle, motion provides meaning.

Summary of the interaction technique (from blog by Carrie Cousins, An Introduction to Interactions with Material Design)
According to the blog ‘An Introduction to Interactions with Material Design’, the functions of this kind of micro-interaction are communicate a status or bit of feedback, see the result of an action, and help manipulate something (Carrie Cousins). Motion in material design refers to all action that takes place in a single environment. The aim of motion is: make motion meaningful and appropriate, serving to focus attention and maintain continuity; make feedback subtle yet clear; make transitions efficient yet coherent. The purpose for including motion in interaction is guiding focus between views, hints after user completes a gesture, hierarchical and spatial relationships between elements, distraction from background loading, and character, polish, delight (Motion– Material motion). I will discuss each in details.

Discussion
The interactive technique can be discussed in 4 different aspects of human perception, cognition, and (inter)action as introduced in the course: visual perception, attention, interaction and time requirements.

Visual perception/gestalt
Our perception is biased by experience (Johnson, J., 2014, Ch.1). We may expect things to happen in a certain way based on previous experience. That is said, if something we try to find looks different from usual, we might miss it even though in a 2D plain view.
What’s more, according to one of the gestalt principle, common fates indicate that objects that move together are considered related (Johnson, J., 2014, Ch.2). Applying this principle, motion in material design matches the motion of each element within an interface to make things looks related. Material is aware of its surroundings, including the user and other material around it (Motion– Material motion). The icon will not change by itself, but also affect the motion of other icons or content appropriately, together to form common fates. For example, if one of the three icons is pressed, it will expand and the other two will shrink and disappear eventually. The related responsiveness enhances the harmony within an environment.
The introduction of motion states that “objects are presented to the user without breaking the continuity of experience even as they transform and reorganize” (Material design– Introduction). In material design, motion is coherent so that users know how they can go back and forth by pressing which button. The pattern is similar so that it will not cause confusion.

Attention
Attention is limited. Users always focus on their task, not tools. Our short-term memory is limited in capacity, so attention on tools may pull them away from the details of the task (Johnson, J., 2014, Ch.8). We follow the information scent towards our goal. That is said, people don’t actually think deeply into certain icons or navigation bar item. We see thinks in a more goal-orientated way when dealing with computers. Indeed, motion can provide distraction from what’s happening behind the scenes (Motion– Material motion). It fills up the blank time when the computer is fetching or loading certain content. In addition, the natural easing curve of motion is inspired by the existence of forces in real world. This brings realism to users instead of rigid transition.
On the other hand, another example that Google does to attract user’s attention is the vibrating animation of the phone icon. The vibrating phones and spreading ripples bring focus to the user yet make the distraction ease and comfortable.

Interaction
Interaction refers to the relation between user’s input and computer’s response. The behavior of the computer’s or any digital device’s user interface shows how it interacts with human. In terms of character and delight experience, motion in material design shows its strength. By adding animation in response to user’s input, the interaction between human and computer is enhanced. The fade in fade out transition also makes the interaction more fluent without disturbing the user too often compared to linear motion, like direct pop-up. What’s more, immediate feedback is important to users as well. If something is clicked or select does not have an indication from the interface, the user will get confused and even press the button repeatedly, which sometimes can crash the database.

Time requirement
Responsiveness is important in communication, not only with humans but also between human and computer. According to the textbook, the human brain has many time constants, which define the duration of perceptual and cognitive functions (Johnson, J., 2014, Ch.14). The textbook states that 0.1 second is the maximum duration for perceptual-motor feedback. So accordingly, the interactive system should provide feedback for click on button or link. Furthermore, animation frames should be within this interval. The material design guideline states that motion is quick and an interaction should not keep user waiting long.
One key point where material design made is animation. For time perspective, it fills the gap between missions and solves the time for users to feel waiting. The animation should be meaningful and tell users what to do and what to expect without thinking about the steps. Transitions triggered by input events should visually connect to that event. For example, if the user clicks on a circular icon, the ripple reaction occurs from the center first and then spread away. The action based on reality conveys better and yet users will not even notice it, therefore, will not cause distraction to them. After all, achieving responsiveness is important in interaction design.
Figure 1: ripple motion in material design

Impact on the design practice & conclusion
To reflect on my own deign practice, in lab Mar 24, we redesigned the toolbar in 2D drawing application for a large screen. The shape we chose is a circular button, surrounded by a semi-circular bar, with each tool icon appear on it (Figure 2). The navigation is made of clear edges and shadow below to distinguish from the content. The button can be dragged along the edges of the window and pressed to expand or collapse the toolbar according to needs. When a tool icon is pressed, another layer of semi-circular bar will appear outside the original one. To make the action more consistent and more reliable, I would apply the principle of material design — adding animation. The outer layer will expand sooner at the epicenter and form the complete shape gradually in a more fluent way. This reality-based motion refers to the ripples in the water. In the real world, the nearer area to the stone drops, the quicker it will respond. Therefore, users will know what will happen next with the help of motion.

Figure 2: design practice — toolbar in 2D drawing application

In another project of creating a personal website, I use the principle in material design in one way or others. In the main page, I design an illustrated introduction with a picture of me in the middle and three speech bubbles around (Figure 3). The idea is to let the user know me in a way of conversation. When users move the mouse over the speech bubble, a short sentence of my introduction will fade in and appear in the bubble. By applying the principle of meaningful animation, the fade in motion shows how a person would speak when they first open their mouth in real life. And when the mouse moves off the bubble, the message will fade out in a cohesive way.

Figure 3: personal website project

To conclude, the interaction technique, motion in material design, is effective in terms of visual perception, attention, interaction and time requirements. It reduces the time gap in between and brings delightful interaction experience to the users, using distraction in a good way to attract their attention. Personally, I would include this interaction technique in my future design practice.

References

Wikipedia. Retrieved April 11, 2017, from https://en.wikipedia.org/wiki/Material_Design
Google Inc. Material design– Introduction. Retrieved April 11, 2017, from https://material.io/guidelines/#introduction-principles
Carrie Cousins. An Introduction to Interactions with Material Design. Retrieved April 11, 2017, from https://www.uxpin.com/studio/blog/an-introduction-to-interactions-with-material-design/
Google Inc. Motion– Material motion. Retrieved April 11, 2017, from https://material.io/guidelines/motion/material-motion.html#
Johnson, J. (2014). Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Guidelines (2nd ed.). Amsterdam: Morgan Kaufmann /Elsevier.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade