Google Material Design in Online Education Technology

google material design

Google’s Material Design made a splash almost four years back and continued to wow us with its widespread applications, and elegant user experience features. Not quite sure what we are talking about here? Material Design is a coding language that debuted in 2014, now implemented across the gamut of Google’s products. It relies heavily on a three-dimensional layering effect, which gives its apps and operating system a heretofore-unknown level of simplicity and user-friendliness.

Naturally, the uses of and approaches to online education technology expand every year. With each turn of the sun, we see innovations in online teaching tools, offering digital educators and UX designers an ever-growing array of choices for bringing knowledge to the masses. Material Design is only a drop in the bucket of options to which educators have access.

So why, the question becomes, is Material Design such a must-know, and indeed, a must-use? Let us explore briefly about Google Material Design’s definition and history. We will also consider Material Design’s strengths and their role in online education, both present, and future.

Google: The Way of the Future (and Present)

If you are like most people (i.e., living in the 21st century rather than a backcountry, Swiss-Family-Robinson-style tree house), you use Google daily. Since its birth in 1996 as a search algorithm named BackRub, and its official Google branding in 1998, this Stanford-born program has become the world’s foremost search engine by a long shot.

Moreover, when we say “long shot,” we mean “long shot.” Google receives roughly 4.5 billion searches a day[1], with its closest competitor – Bing – getting less than 900 million. The numbers drop quickly for Baidu, Yahoo, and others.

That is not all. From Chrome to Adwords, Analytics to Maps, Google has steamrolled the competition in bringing highly user-friendly tools to the world – and all for free.

Material Design built the look and feel of those innovations with a robust and extremely flexible coding language that works amazingly well on teaching tools. The name stems from its real-world inspiration, building off the texturized, physical presence of fabrics, paper, and other tangible items.

Material Design is used in many of them, including Search, as well as other apps such as YouTube.

Movement Is Master

Material Design seeks to appear real, reinforcing this goal with ‘movement.’ It is difficult to explain in words exactly how this works, but demo sites such as this one[2] make clear the layering, directionality and dexterity it takes to work in the pursuit of the experience.

The thinking: When a user touches or swipes, their muscles and nerves should feel as though they are interacting with a real piece of material. (How well the language and templates pull this off is hotly debated, but the idea is sound and likely to improve in coming years.) As such, Material Design shines in mobile apps and on devices that interface with the user by touch. However, the bold, visual effects make an excellent use in web applications too.
You can download Material Design for use[3] in your projects, hosting them yourself or on Google’s content delivery network. From there, the customization options are seemingly endless, from a range of user-interface components to Gallery, which allows everyone on your team to track project iterations.

Add in a library of more than 900 icons, a complete list of device metrics to make sizing a breeze, and a full set of design guidelines, and you have yourself a language with which any developer would be delighted to work.

Strengths of Material Design

So what exactly does Material Design bring to the table? Good question.

Color

Color is a critical element in Material Design, helping delineate various components of any app or platform. The color palette[4] is enormous, giving you a massive range of hues to choose from, all pre-selected to play nicely with one another. With darker and lighter variations of your primary colors, you can create a visually streamlined experience for the user that helps them navigate your site or platform without having to think about it.

google material design color

Cards

Material Design follows in the footsteps of Google’s innovative “cards,” which made their appearance with Google Now in 2012, relying on discrete windows to convey information and distinguish apps. Cards were immediately popular because of their visually obvious and appealing three-dimensional effect, using the drop shadow effect – not itself a new design feature, but when paired with cards, a very user-friendly experience.

google material design dashboard

Layout

One of the most exciting facets of Material Design is the manner in which it makes the layering of distinct elements visible, using drop shadows to create the appearance of slight overlap. Whereas most design protocols to date have aligned windows to pixel-perfect, edge-to-edge standards, Google breaks the mold by using a hierarchical overlap: newer windows or menu options just slightly overlay the previously opened or selected ones. They appear to be in the foreground.

This signals to the brain, “Hey! This is what you are focusing on right now!” It is a new take on the lightbox, without the user having to give up the ability to see what else is going on in their environment.

material design

Intuitiveness

Because Material Design relies on that physical element – touch, movement – users typically find it to be very intuitive. Navigation is a breeze and transitions are seamless, moving the user from one moment to the next without causing confusion or breaks in attention. Where the user is at on the screen is obvious as well. Windows move in response to fingertips or hovering mice, showing the user where they are at any moment.

activity progress

Ease of Interaction

Material Design’s bold colors, striking contrasts, and physical layering effects make the user environment very clear. This clarity promotes interaction. When people can navigate seamlessly from app to app, window to window, menu to menu, they are likelier to move around more – taking greater advantage of the ancillary resources that typically accompany online educational experiences.

Why Does Material Design Work So Well in Online Education?

Material Design has been lauded for, above all else, creating a good user experience, one in which you can indeed get lost. The design element is critical for learners and learning management systems to promote interaction. Especially when engaging with difficult subjects, concentration is vital. Apparent transitions and distinct features make it easier to learn without becoming confused, distracted, interrupted or otherwise pulled out of the learning moment.

Glisser[5], an award-winning presentation software, integrated audience response system, and event analytics platform— explain why they use Material Design in their products: “The design of a software may enable the user get the most out of the product, but if misdesigned it can even become a barrier to using it [the product] properly.” It is also used in a wide variety of reading, news and hobby apps[6], all of which have their place in or around the classroom.

WizIQ has also successfully incorporated the Google Material Design in its online learning and delivery platform. A happy customer, Chang B.[7], says, “ I’m glad that I can build and sell interactive lessons to be consumed for online classes.”

Coming up

.

If that is not exciting enough, Material Design is slated to get a bit of an overhaul later this year [8]. While the design language had received frequent updates since its release nearly four years ago, word around town is that its newest revamp will bring some more significant changes. So stay tuned, and get ready to implement one of the best online teaching tools into your classroom today.




References
[1] https://www.seo.com/blog/23-search-engine-facts-and-stats-you-oughta-know
[2] https://theultralinx.com/2015/08/30-examples-of-googles-material-design/
[3] https://getmdl.io/started/index.html
[4] https://material.io/guidelines/style/color.html#color-color-palette
[5] https://www.glisser.com/
[6] https://www.computerworld.com/article/2909897/material-design-apps-android.html
[7] https://www.g2crowd.com/products/wiziq/reviews/wiziq-review-500579
[8] https://9to5google.com/2018/02/05/material-design-2-leak/

Share

Content Specialist at WizIQ. 'Live to write and write to live' is her motto. Passionate about life and living it up!

Comments

  1. This seems simple and very useful.

Leave a Reply

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

[name="xnQsjsdp"]
[name="xnQsjsdp"]
[name="zc_gad" ]
[name="zc_gad" ]
[name="xmIwtLD" ]
[name="xmIwtLD" ]
[name="actionType" ]
[name="actionType" ]
[name = "Email"]
[name = "Email"]
[+a-zA-Z0-9._-]
[+a-zA-Z0-9._-]
[a-zA-Z0-9.-]
[a-zA-Z0-9.-]
[a-zA-Z]
[a-zA-Z]
[Product Webinar]
[Product Webinar]
[Product Webinar]
[Product Webinar]