40

I'm generally a fan of Google's Material Design UX framework. Its positive aspects have been well-covered by the press and Google's own design group and evangelists.

But, the disadvantages of the system are much less documented, as a simple search shows. So the question is:

What are the disadvantages of Material Design?

I'm not looking for subjective opinions here (e.g. I don't like the color scheme), but rather for concrete drawbacks based on clear design logic or measurable observations.

  • For the record, Material is a UI framework with a few rudimentary UX opinions. You can essentially do what you want with an app's UX and still follow the Material guidelines quite closely. – plainclothes Dec 3 '15 at 6:06
36

I've used Material Design quite a bit and have reasoned the following drawbacks:

1. Animations are cute but can be cognitively distracting

Material Design's extensive use of animated transitions really helps bring the interface to life and give it a vibrant personality, but animations can ultimately be counterproductive because the human brain is very sensitive to visual stimulation and an animation causes cognitive interruptions which can interrupt a user's train of thought.

  • Google's principle of "Delightful Details", in particular, creates animations when they are often not necessary for function and can therefore become annoying when repeated, or distracting to thought.

  • For example, if a user is holding a complex workflow in his head, the following unnecessary animation halfway through the workflow may be enough to break the train of thought:

    animated button

2. It can be hard to discern interactive elements

Material design doesn't suffer as much as flat design here because buttons are often drop-shadowed or capitalized, making them easier to perceive. But Material Design still uses flat/flush elements so it can be difficult to understand them as clickable. Even the design specification itself has examples of flat clickable text which can be difficult to perceive unless the context is carefully designed. For example, here's a screenshot from the Material Design specification itself:

enter image description here

3. Performance overhead

Material Design makes extensive use of animations, which can carry quite a lot of overhead. For us tech geeks that's usually not a problem because we tend to carry fast phones/laptops, but that is not the case for the rest of the world. Drop shadow, color fill, transform/translate transitions are not dependably hardware-accelerated so the animations can be jerky and unpleasant for users who don't have good client equipment:

  • Notably, Facebook had to abandon a UI refresh a few years ago because they realized that not everyone has the same nice computing equipment as Facebook does in its Silicon Valley offices.

  • At worst, the use of taxing animation furthers the digital divide as it amplifies rather than equalizes the difference in client performance. https://en.wikipedia.org/wiki/Digital_divide

MD transitions

4. Overuse of images and colors can be distracting

Material Design still promotes use of vibrant colors and images in its spec. While this can make an interface lively, this style is prone to overuse and can be very distracting to users trying to get something done. For example, the following menu appears several times in the Material Design documents. It uses an unnecessarily high-contrast header background with multiple layers and off-grid lines which may be fun to look at once, but is functionally crappy because it makes the text hard to read and can get really annoying when the menu is opened multiple times:

material design cluttered menu

5. Affiliation with Google ecosystem

For better or worse, Material Design is a Google-promoted framework and Android is a prominent early adopter, so the framework will probably never be dissociated from a perceptual relationship with Google. That is something to consider for developers looking to create platform independent UX (e.g. an app which also must run on IOS).


One more thing...

My intent here is not to criticize the framework unnecessarily...on the contrary, I really like and continue to use Material Design. The intent here is to document drawbacks because pitfalls and antipatterns are important to understand in any design framework.

  • 2
    I have only used material design for one project and I relatively new to mobile app design. but I like the specification quite a bit. I see that most of you criticism is related to animations. The guidelines are very helpful and do not dictate specific animations. You can still do whatever you consider fit for the workflow and for the devices you are targeting, they just give you some guidelines to consider and none of them are bad. Some kind of standardization is needed in this world full of ugly and inconsistent mobile applications, so kuddos to google to be the first to do it. – Ovidiu Berdila Jul 25 '15 at 17:52
  • 1
    @Ooker is "playing devil's advocate" the expression you are looking for? – user56reinstatemonica8 Jul 26 '15 at 18:51
  • 1
    For instance, any cited research that material design is distracting my colorful? – DA01 Jul 27 '15 at 3:55
  • 1
    @DA01 please tell me you're joking. I specifically asked for solid design logic or measurable observations and not for research (since I knew I was going to answer my own question). Sure you cannot be thinking that overuse of color or animation is not distracting? In the same way that physics papers do not start by proving that gravity exists, I kind of assumed I would not have to show this to be true as a premise to the design logic here? – tohster Jul 27 '15 at 5:17
  • 2
    @tohster, like I said I don't disagree with the logic, but you did explicitly ask "I'm not looking for subjective opinions here (e.g. I don't like the color scheme". So while you and I both agree that the color scheme on material design can be distracting, I don't know that's anything but our opinion short of some research to back it up. (And, again, it's a fine opinion! I'll just leave it at that!) – DA01 Jul 27 '15 at 15:41
11

Contour Bias

Contour Bias

Contour bias is a tendency to favor contoured objects overs sharp angled or pointed objects. When we look at the natural world around us we see many contours and curves such as the surrounding environment around us, including our own appearances. It's a natural process!

Material design uses a lot of rectangles with sharp corners in its elements. This makes elements less visually appealing to users.

Card and button examples, notice the sharp rectangle used with lack of contour.

enter image description here

Why Rounded Corners are Easier on the Eyes

Processing edges involve more “neuronal image tools” in the brain 1. Thus, rectangles with rounded corners are easier process because they look closer to a circle than a regular rectangle.

Mixing rounded corners and square corners

How do rounded corners affect usability?

  • +1 Great point! I've struggled with finding the right border radius for my material designs also. – tohster Jul 26 '15 at 18:13
  • 4
    All of the cards and buttons in the screenshot you posted have rounded rectangles. Are you trying to show that these cards and buttons with rounded corners are good or not good? – Lie Ryan Jul 27 '15 at 0:52
  • @LieRyan is right: the cards and buttons aren't sharp-cornered like Windows Metro UI, they do have rounded corners (albeit small, 2 to 4px) – Vicky Chijwani May 30 '16 at 9:40
1

Generally speaking UX problems dont have a DIRECT connection to the type of design the developer went for and therefor they originate from a DEVELOPER not knowing how to effectively use its elements to make the application easy to understand.

I have a feeling you are asking what are generally the most common UX "sins" committed from developers utilizing the material design for their applications,and there are plenty of them listed above and they are easily spotted by simply using some not well designed apps using material design.

But dont blame it. There are many material design applications WITHOUT the most common flaws,and they are a pleasure to use,also for they eye.

1

The only problem I have with material design is that people can easily create confusing interfaces with it.

Let's take, for instance, the FAB (Floating Action Button). In terms of layout, graphic design, it's beautiful to use. But for pratical purposes? You don't always need a FAB in your screen, and surely you don't need more then one (I caught a layout with 5 FABs last week).

Material design is beatiful, but you still need a critical eye and test it a lot to implement it with effectiveness.

BTW, rounded corners aren't a Global solution - it all depends on context and what kind of semiotic message you want to send to the user.

  • To be fair, according to the Material Design guidelines, more than one FAB per view is strongly discouraged, and more than a couple is disallowed. – asher drummond Jan 28 '17 at 17:05
  • True! I think I was more inclined about people using it improperly then the solution itself. It can happen to any source, tho. – Bruno Torres Boeger Feb 9 '17 at 15:59
0

I guess this depends on how you use it, ie. this comment may pertain more to Google's realisation of it than their Material Design ideas in general.. nevertheless, I will mention it as Google is a driver behind MD.

One new thing that seems to be slowly driven in by Google is large rounded edges, even semicircular text fields (for example the URL address field in Google Chrome for Android in the recent update).

This realisation of Material Design gives less space for text compared to rectangular ones or rectangular ones with rounded edges, as the text has to start further into the field to avoid being obscured by the "corners" of the fields.

This is not a good choice for small mobile screens - it might make sense to emphasise that in the documentation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.