Transform UX with Google Material Design

29th of April 2016 | Blog,Enterprise Software Development,Managed Services and Support

What is better UX?
Contrary to the popular assumption, user experience is not a field limited to software applications, web sites, and web applications. In addition, people mix up UX and UI, which stands User Experience and User Interface respectively.

Let me differentiate UX from UI with an experience I had recently. One of our generous team members bought all of us nice hot coffee from a popular coffee shop. The coffee was scorching hot and it came in a plastic-like paper cup with a lid. When I picked up my cup, I noticed a cylindrical enclosure around the cup. The diameter of the enclosure was larger than the bottom of the cup allowing a consumer to roll up the enclosure up to 80% of the cup’s height, stopping where a consumer holds the cup. It was perfectly designed to prevent a consumer from burning his/her hand when drinking the coffee. The enclosure had a nice design printed on it. Here the enclosure stands for User Experience and the design printed on the enclosure stands for User Interface. A better UX always wins, if you sell it for the right price.

Let’s leave the coffee cup on the table for a moment and focus on delivering better UX to our software consumers. Our software may contain fancy UIs and stylish features, but do they offer a better user experience to the real consumers?

Why do we need better UX for our software?

A “software” is just a collection of codes until it develops the ability to be used efficiently and effectively. To survive the fiercely competitive software market, a software needs to provide a better user experience to the users. Few years ago, software were not so interactive or user friendly. Simply, software those days didn’t deliver a good user experience.

How do others provide better UX for their software?

User experience is a very deep subject, and to become UX expert takes a lot of time, experience, and research. To enhance the user experience of a software, it is necessary to survey large user bases. As a pioneer company in the software industry, Google has one of the largest user bases. With petabytes of user data, Google conducts many user-centric research and tests in order to deliver software with delightful user experience. One of their core principles is to Focus on the user and all else will follow.

Google wanted to provide consistent user experience to its users across all other platforms and devices. In order to make design consistent, Google came up with a new design concept named Material Design.

What is Google’s material design?

Google started working on a new concept named Material Design (also known as Quantum Paper), which they announced in 2014. Material Design is a design language purely based on just Paper and ink. Unlike the real paper, what you see digitally can be reformed or resized intelligently. Material environment is always a 3D space, it has x, y and z axes.

Google Material Design is an outcome of extensive research and testing. Google somewhere mentioned the extent of effort they put to make the Gmail logo adhere to the rules of Material Design. They have created the icon using paper envelop and used different kind of lighting to get the actual shadow, which then they reflected on the Gmail logo.

These Polymer paper elements (Yes! that’s how they call the Material Design user interface elements) and ink are subjected to three principles in order to form the Material Design concept.

  1. Material is the metaphor. “The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.” – Google
  2. Bold, Graphic, and Intentional.“The foundation elements of print-based design—typography, grids, space, scale, colour, and use of imagery—guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus. Deliberate colour choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerses the user in the experience.” – Google
  3. Motion provides meaning.“Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.” – Google

How fast can we adopt Google’s material design?

I would say that, “it depends” on the following app categories:

  1. Apps that are already up and running
  2. Apps that you are about to build

Apps that are already up and running

If you application’s front end runs on a commonly used UI framework and the framework is used properly it will be quite easy to align you application with Google Material Design principles. If not, converting your app to Material Design will take time, depending on the scale of you application.

Success Story: “In our office we had a relatively very stable web application which was developed for several years. However, the look and feel of the UI was too old, dull and had many other issues. It was a Java application and the front end was built using Bootstrap and jQuery. Initially, the request was to do minor twists to enhance the user experience and eventually we decided to align the application look and feel to Google Material Design. The feasibility study on the app realized that the frontend framework was used quiet well and the code was structured properly and the existence of Material Design plugins for bootstrap. Since this app was on production, we created a separate branch and applied the new UI changes. In less than 2 weeks, we were able to convert all the pages to the new look and feel and within a month, we were able to close defects caused by the new plugin. For an app which was developed for several years, making drastic UI changes within such short period of time with no critical issues was a great achievement by the team.” – MRS Team

If you have aligned your application with a proper frontend framework, it will be relatively easy to convert your app to Material Design format with minimal effort.

Apps which you are about to build

If your app is still in this state, then you are in a good place as you have the freedom to implement a material based design/implement and use any frontend framework, which suits your requirements. There are few things to consider when you are at the beginning of the project:

  1. Adhere to Material Design concepts when designing.
  2. Icon usage (Font icons/SVG or raster images).
  3. Colour usage.

A wide range of Tools and Frameworks is available for Material Design app development. Tools and frameworks are more important for rapid development because, if properly used, it will reduce the time and effort by half.

Tools and frameworks

Google’s Material Design concept revolutionized the user interface field. Google aligned all their apps to Material Design, and the concepts eventually became widespread in the software world. Many tools and frameworks were developed to cater the need of switching old UIs to Material Design or to develop Material Design from scratch.

For design:

The best tool is the set of guideline developed by Google. Other than that, there are Material Design templates in HTML and PSD formats available in the following web locations:

For icons:

I recommend using Google font icons as much as possible (Links is given in the reference section). A wide range of icons available in this repository and new icons are added frequently. Look at the following locations for more icons:

Colour usage:

For colour usage, use the Google standards website. Other than that https://www.materialpalette.com is also a good tool.

Popular fronted frameworks:

This section lists several full-fledged frameworks available for Material Design. These frameworks house common frontend framework components such as a Grid, UI components, forms and a colour palette.

  1. Angular Material
  2. Materialize CSS
  3. Bootstrap/Bootstrap Material Design plugin
  4. Material UI

Author: 

Sineth Dilanka Amarasinghe

Related Posts

From insights to thought-leadership

View More

Infor GO — The Future of Infor Mobility

Mobility is fast becoming the future of ERP. There is a growing need for mobile apps that extends ERP functionality to its business users, allowing them to make informed business decisions on the go.

Bringing information closer to business users with Infor Ming.le

Infor Ming.le is an action-oriented social collaboration platform designed for business organizations. Simply put, Ming.le’s interface will remind you that of the popular social media platform Facebook, except Ming.le serves a unique purpose: bringing information from disparate systems closer to business users, helping them work smarter and faster.

Manage your business documents seamlessly with Infor Document Management (IDM)

Businesses often struggle to keep track and manage high volumes of physical and digital documents that are being created within an ERP system. Most businesses manage these documents manually, separately from the ERP process and business transaction. With this kind of a disjointed process, documents get saved in different systems and users have to switch between applications or spend time manually searching for documents.

Four Reasons Why Infor ION Can Make Your Enterprise Application Experience Better

Infor Intelligent Open Network (ION) is a powerful middleware that resides beneath and empowers Infor OS – a robust enterprise ecosystem that seamlessly connects Infor and third-party systems.

Ensure Successful M3/CloudSuite Go-Live with a Robust Testing Strategy

Whether it’s a multi-site rollout or a minor fix, testing your ERP ensures that it works as expected. An error-free ERP implementation adds to the user experiences across the supply chain, and helps increase stakeholder productivity. A buggy, slow ERP can hinder operational efficiency. A carefully-planned ERP testing strategy ensures that the ERP performs optimally from the go-live itself, without hatching unprecedented errors, which not only require costly rework but also affect the smooth functioning of the organization’s operations.

Make your work meaningful with the power of Infor OS and Infor Document Management (IDM)

Infor OS is a cloud operating platform that seamlessly connects services to provide a robust integration framework. The scalable technologies on top of which Infor OS is built are capable of bringing together disparate technologies and solutions, whether it’s an application developed by Infor, by a third-party or in-house by your organization.