Interactions in Material Design

Image source: What exactly is this so-called ‘Material Design 2,’ and what will it look like? | 9to5Google

Material Design, introduced by Google in 2014, had been my go-to place to reevaluate the design languages in my projects because of its use of metaphors from the physical world. The appearances and properties in the physical world, including how depths or layers are expressed through light and shadow to feedback that makes sense when interacting to physical objects, inspire rules of Material Design. In Material Design, graphics have to be intentional; motions have to guide users to focus on elements and reinforce how these elements will transform or reorganize as they are intended.

Navigational Gestures

Gestures help users to navigate between views, take actions, and manipulate content.

Navigational gestures are alternate ways for users to navigate through pages, which serve as supplements to navigational UI. The input can be tap, scroll and pan, drag, swipe, and pinch. In Material Design drag and pinch also can be a gesture to navigate between individual page elements, specifically to transit into detail pages from a list or collection view. In the example below, the left shows how a transition into the view helps to suggest how users may need to drag down to close the view.

Transition gives a trace of where elements come from and how to reach them (Source: Google Material Design — Interactions)

As if views and pages were physical objects, animations driven by gestures should communicate where the new information comes from and where to access previous information from. Having layers help to visualize these relationships in organized hierarchies. The transaction creates milliseconds of delay, but it communicates the organization more clearly.

In contrast to gestures, graphic UI guides users to a series of actions they can take especially for elemental users. Some of the navigational gestures are used for more advanced users to take these actions much faster, however, even for advanced users, the heavy use of different navigational gestures could overwhelm especially because the same gesture could function differently in other applications they use. Even within same application, it could create conflict and confusion to the users. The example below shows the risk of applying multiple gestures which may create conflict between 2 purposes. Horizontal swipes between tabs and collection views are a good example that show conflict.

Action Gestures

Because action gestures are not visually represented, they are used for shortcuts to most commonly used functions. Their inputs can be tap, long press, or swipe. The most interesting interaction is swiping to make an action, which can be seen in apps like email inbox. In Material Design, as shown in the below example, it’s suggested to show an iconic graphic after the first threshold of swipes and complete the task after the second threshold of swipes, which often includes removing the element from the list.

This swiping to make an action also could be used differently in various applications; As elements disappear from the list to the trash or to erase seem to be the most intuitive function for the interaction. In order to reduce friction, the transition has to be clear as to how users can undo the action. In Material Design, snackbar with “undo” option is often used. In cases like the one below, I always thought it will be useful to be easily accessible to the list of those items (bookmarked in this example). For example, you may be able to navigate to the list, if you swipe from the hard edge of the screen.

Swipe-to-make-action is quick and useful but it also causes confusions (Source: Google Material Design — Interactions)

Transform Gestures

Transform gestures can change an element’s size, position, and rotation with gestures. Input may be double tap, pinch, compound gestures, or pick up and move. The compound gestures are a combination of multiple gestures. The goal is to show how the motions feel natural and sticks to the motion of the user’s hand.

Compound gestures allow information hierarchy without moving away from holistic view (Source: Google Material Design — Interactions)

Google Map provides good references for smart gestures connecting a variety of information from a visually intense map. For example, having an information sheet that can slide from the bottom is a great supplement to the map. It is extremely smart and intuitive by changing the size of the view depending on where you are interacting.

Multiple gestures are used to zoom in on Google map depending on the environment. Pinch is the most commonly used gesture. Tap to swipe up and down is the supplemental gesture which becomes handy to zoom without needing two fingers. For mobile web plugins it requires users to use 2 fingers to move up and down so as not to conflict with the scrolling gesture of the browser.

Map requires users to handle multiple gestures (Source: Google Material Design — Interactions)
Browse info while on the way. All in Google Maps.

Selection and States

The Material Design guidelines shine most when layers of complex but rarely-used functions have to be orchestrated. Material Design stresses to have only essential graphic UIs at each state of action. This discipline is meant to navigate users away from confusion. For example, checkboxes should only appear when users initiate the selection, so users won’t get distracted by repetitive elements on the screen unless they need to select multiple items. Long press is heavily used to initiate selecting items, and dragging fingers around would allow selecting multiple items quickly. In the case of desktop, hover states uncover checkboxes next to items, and by selecting it would make checkboxes available for all other items. In this state, peripheral UI elements also change accordingly. For example, share and delete icons appear to make an action upon selected items.

To make these states clear, Material Design has guidelines to set different visual cues for different states. Hovered, Focused, Selected, Activated, Pressed, and Dragged states are indicated differently with opacity and hue changes. Color tools provided by Google help anyone to come up with color schemes applied for different functionalities.

Essentially, following the cohesive rule is the fundament to achieve clarity in digital products, and Material Design guideline assists that well. Especially, thanks to Material Design, certain expectations are set in many apps in Android.

Initiating selection changes other UI elements relatively (Source: Google Material Design — Interactions)
Checkmarks only appear as the mouse hovers over (Source: Google Material Design — Interactions)


Material Design / Interactions / Gestures | Google

Material design color tools | Google

This Secret Google Maps Gesture Is Totally Brilliant | Gizmodo

UX Case Study: Google Maps vs. Waze Mobile Apps | Usability Geek

Leave a comment

Your email address will not be published. Required fields are marked *