Material Design and the Technical Communicator

layering (2)Material Design, Google’s design language for Android applications, has permeated both native apps like Gmail and YouTube as well as third party Android apps. Since its introduction in June of 2014, technical communicators and UX designers have explored new ways to incorporate the principles of Material Design in their workflows and products.

Material Design relies on three key principles:

  1. Material as a metaphor

The interface provides visual cues grounded in surfaces and edges that resemble those found in reality. These cues convey how objects move and exist in the visual space and react in relation to each other. For example, cards have edges and shadows, much like cards in the real world, to indicate that they are distinct from each other.

  1. Bold, graphic, and intentional elements

The elements on the screen, such as the text, space, colors, and images, convey the hierarchy, meaning, and focus of each element and provide guidance to the user. For example, the opacity of the text in the app can convey how important its information is compared to the other text on the screen and focus the user’s attention.

  1. Motion to provide meaning

All action takes place in a single environment that uses motion to transform the design and layout of the screen for different functions. For example, a settings panel can slide out from the side of the screen to provide access to settings without the app switching to a new screen.

The good news is that these principles seek to make apps more intuitive and uniform, so technical communicators won’t have to spend a lot of time teaching users how to navigate apps. The bad news is that technical communicators need to spend a lot more time testing the nonverbal cues, such as the icons, textures, and images, and verbal cues, in their app.

In most cases, tooltips and taglines are enough to teach users how to use a simple app. However, the rise of touchscreen devices has eliminated traditional tooltips, and taglines aren’t always appropriate or aesthetically pleasing. In these cases, elements like screen overlays and cards can provide instructional content in a style that matches the Material Design aesthetic. For example, you may want to provide a short series of cards as a slideshow that describes what’s new when you release a substantial update. Or, you may want to provide a tooltip overlay to describe the most important elements on the screen when users start your app for the first time.

Material Design values flexibility, so users should be free to input information without encountering too many errors. However, when an error does occur, the app should handle the error in the following way:

  1. Communicate what occurred.
  2. Provide steps to resolve the error.
  3. Preserve information already input by the user.

With the exception of the third step, this form of error handling doesn’t differ too much from the error messages patterns_errors_userinput2guidelines proposed by Microsoft. In fact, most of the
recommendations for good technical writing, such as brevity and clarity, still apply in Material Design. The only difference is the delivery method. Instead of writing a static user guide, technical writers can now incorporate their information directly into the app. For example, in the figure to the right, the red text communicates why the information entered is incorrect and how to fix it without requiring the user to refer to a separate document or leave the screen.

Mobile devices are pushing technical writers into new and exciting roles. Understanding the principles of Material Design and the iOS Human Interface Guidelines will allow technical communicators to comfortably shift from providing background documentation to providing information at a glance.