8

In the MD specifications are listed two types of buttons:

  1. flat buttons
  2. raised buttons

the flat buttons are usually with black text, making them look like simple not clickable text (for someone).

Isn't it a bad design pattern? Shouldn't buttons always stand out from the simple text?

enter image description here

12
  • I agree with you that their concepts for buttons are a shambles, and IMO the whole "material design" thingy seems to be poorly ceonceived. As they say "The material environment is a 3D space, which means all objects have x, y, and z dimensions" hence, of course buttons should be, well, material physical objects.
    – Fattie
    Aug 28, 2015 at 15:58
  • I see your point but I can't really believe that Google has not thought about this when they written the guidelines, I'd like to understand if there is a reason, even if questionable.
    – Fez Vrasta
    Aug 28, 2015 at 16:12
  • Google is an advertising company (anyone who works in advertising, is: lame). If you work for google - you're in advertising. That's all it is, and all it will ever be. It's the "Ogilvy & Mather" or "TV Network" of today. As an extremely minor side issue -- purely for PR reasons -- they are working on a driverless car. Tremendously further down the line, Google is (by far) the world's biggest PR/political lobbying operation (promoting their own "values"). Tremendously further down the line, as a trivial side operation (a hobby), they make a kind of comic OS. Then,
    – Fattie
    Aug 28, 2015 at 16:22
  • as a tiny fraction of the company, they have many many product lines such as "google maps". (Some of these are very admirable technically; many are just utterly idiotic copies of existing businesses.) Way, way, way down the line from that, Google deliberately and explicitly hire vast numbers of people who do make-work projects (indeed, it is a spectacular place to work for that reason), such as write (risible, basically idiotic) "design documents", make mockups about Drones, etc etc etc etc etc. Way down from that they have a few (brilliant) scientists who do the "search" functions.
    – Fattie
    Aug 28, 2015 at 16:25
  • I would not even bother looking at anything an advertising company, especially "Google", says in some "document" snicker they churned out about design :O
    – Fattie
    Aug 28, 2015 at 16:26

3 Answers 3

6

It's a bad design pattern in the context of the example...where there's just text floating in space by itself. But in context, it maybe a perfectly valid design pattern. Controls have their own affordances (or lack thereof) but also gain (or lose) affordance based on the context they are placed in as well.

This is why it's a challenge to build pattern libraries sans the context of the actual pages said patterns will be used on.

4
  • 1
    very nicely put
    – Fattie
    Aug 28, 2015 at 16:28
  • So, can we say that the whole pattern library/atomic design thing is not that useful after all? @DA01
    – Adit Gupta
    Aug 28, 2015 at 16:45
  • I have used these buttons in a well delimited footer with just buttons inside, and one of my team mates said he couldn't understand they was buttons.
    – Fez Vrasta
    Aug 28, 2015 at 16:54
  • @AditGupta they're useful. But people just need to realize they are often sans a lot of context.
    – DA01
    Aug 28, 2015 at 17:17
1

They're very bad UX, and the main reason of opposition to Material Design as a whole. To answer your specific question and why they do it:

Raised buttons behave like a piece of material resting on another sheet—they lift and fill with color on press.

Flat buttons are printed on material. They do not lift but fill with color on press.

Button text should be all caps in languages that have capitalization. For languages that don’t have capitals, consider using colored text for flat buttons to make them stand out from normal text.

Basically, they're stuck on the paper concept, as if computers are paper. Furthermore, the raised buttons are even worse: they get more depth AFTER being pressed, which collides with almost any usability study to date.

All this being said, it's not correct that the links have to be black, your image is a monochrome example, but for colors on buttons, you need to relate to Material Design Color section. Furthermore, from the same page you took your image:

enter image description here enter image description here enter image description here

(and many more)

Finally, remember Material Design is a set of guidelines, not some kind of restrictive law. For example, I use Material Design A LOT, so we built a specific Material Design sets of scripts and style sheets. One of the things we do is to use raised buttons exactly opposed to Material Design recommendations. And we tracked and tested it and it works way better than what they recommend, no matter what Google says.

In short: there are reason for Google to do what they do. It doesn't mean you have to follow that

1
  • 1
    I agree with you @Devin. I use material design a lot and consider it the most comprehensive and thoughtful framework out there. But it isn't without flaws and the flat buttons are the prime example for me. I've also used a totally different approach for my flat material design buttons.
    – tohster
    Aug 30, 2015 at 0:17
0

In practice, these buttons generally do stand out—they're often presented in a contrasting color, all caps (as opposed to standard text), and they're located in a separate place from paragraph text. (You wouldn't use these buttons in the context of a paragraph.)

The theory behind the appearance of this kind of button comes from Gestalt psychology. Being all caps gives a semblance of a rectangle, as the bottoms and the tops of each letter align. Being styled differently and positioned separately from content indicates that it's a different kind of element. Color hints at interactivity.

This isn't the only kind of element using these principles. Links have been relying on these kinds of subtle hints for ages. And if you look at the Material Design text field, you'll see that it uses a line and a label (or hint text) to give the semblance of an empty box to be filled.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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