As consumers, we access and interact with several User Interfaces (UI) on a daily basis, even more so since the world went remote in 2020. For this reason it's more important than ever for users to encounter a great UI with a seamless user experience (UX), which is why I've outlined the top 10 things you should know about Material Design to create a successful user and customer experience (CX) below.
Before we discuss the significance of Material Design, let's first be crystal clear about what it is. The term Material Design was developed by Google back in 2014 as a design language that allows designers to enhance a person's web or mobile user experience using various effects and components (i.e. lighting, padding, transitions, etc.).
Now that we understand what Material Design is, let's count down the top 10 things you should know about it starting from 10.
10. What and who is Material Design?
Material Design is Google’s UX research. It’s a great starting point, but certainly doesn’t comprise of a complete design system. Material Design is heavily referenced with the client I’m currently working with, but it still leaves gaps. For instance, design patterns still need to be developed and widely used between designers.
9. Research vs. Implementation
Material Design guidelines aren’t always followed by Google’s products at the same time new guidelines are released.
For example, new researched showed that the underline only text fields (as opposed to a filled or contained box) caused confusion, and 35% less form completion. However, many of Google’s products still use the underline only text fields.
Research is ahead of implementation, so simply following a Google product for design practices doesn’t mean you’re following the latest research guidelines.
8. Colors
It’s suggested to devise primary, secondary, error, and background colors that fit your brand. However, especially if producing software, as opposed to a website, info, warning, success, and multiple values for grey are strongly needed
7. Icons
Material Design offers hundreds of open-source icons that can be downloaded in SVG or PNG, white or black. Material Design also offers succinct guidelines for creating icons that seamlessly integrate with Material Design’s icon set.
6. Typography
A clear hierarchy is necessary for an easy-to-understand system. Only one H1 should be used per page. And use the remaining H2-H6 in a clear hierarchy to subset your content.
5. Components
Material Design offers documentation on many components, such as drawers, buttons, icons, snackbars, and containers. Documentation includes when to use which component, with some excellent imagery to demonstrate do’s and don’ts for each component.
4. Implementation
If using React, Material-UI is Google’s implementation of Material Design. It’s a robust system of components, well organized, and repeats much of the research (not all) that the Material Design website provides. In addition, Material-UI offers the option to implement their components in JavaScript and TypeScript, and their TypeScript components use the latest React hooks.
Additional development resources are resources available to implement in other platforms, such as Android, iOS, the web, and Flutter.
3. Accessibility
Google REALLY cares about making their products accessible. Almost all of the listed components have guidelines for accessibility, and guidelines are given for both mobile and desktop applications.
2. Accessibility
If animations are done well, they can please and delight a user. Speed, complexity, and duration are very important. Animations should be short and useful. This is no longer the early 2000’s and users are not impressed by fancy Flash websites (but were they ever really?).
Long animations that the project manager thinks “look cool” are in fact boring and useless, and irritate the user. Unless the website or software is purely entertainment, the user is there on a mission, and long animations simply delay them from completing their task.
2. Accessibility
If animations are done well, they can please and delight a user. Speed, complexity, and duration are very important. Animations should be short and useful. This is no longer the early 2000’s and users are not impressed by fancy Flash websites (but were they ever really?).
1. Buttons
In my opinion, buttons are the most misused component. Buttons should have a hierarchy. A filled button is the primary button, and there should only be one primary button per screen. Secondary button is outlined, and the tertiary button is text button. In a modal, a primary button is never needed.
When there is a button pair, where one button is to confirm a user action, and a second button is to cancel a user action, the confirm button should be a primary or secondary button on the right side of the screen. The cancel button should be one level down from the confirm button (secondary or tertiary), and to the left of the confirm button. However, if developing for an android device, then the order is switched. If developing for mobile, or a small container size, and there isn’t enough room for buttons to be side-by-side, then the buttons can be stacked, with the cancel button below the confirm button.
Want to learn more about Material Design? Our team is made up of thought leaders, UX strategists, researchers, and front-end developers who deliver strategic insights, advice, ideas, and prototypes. We are exciting to help answer your questions, simply reach out to us here.