16

Blue colored texts are known to be links everywhere and users know they can click on them. How about Google Material Flat Buttons? In material design, colored text with enough padding is known as a button! Do people recognize colored texts as something they can click on?


Edit according to the new Material Guidelines' update: It says if you're using the flat buttons in languages without capitalization, it's necessary to have enough padding to make the button distinguishable from the text, yet the question stands, is it enough to make it distinguishable too? Specially in languages without capitalization?

  • 3
    No. Lack of affodances is a distracting flaw in the idea. I never know what may be touched or easily overlook something; is a terse label to be read as a statement or a command? – JDługosz Aug 7 '16 at 20:17
  • 2
    "In material design, colored text with enough padding is known as a button!" That's an over-simplification. Did you read that somewhere? – Christian Strempfer Aug 20 '16 at 21:12
  • 1
    @ChristianStrempfer This is what it is. Do you have any other explanations?! – Jack-in-the-box Aug 21 '16 at 6:14
  • 1
    @ChristianStrempfer you can see here that google says the same... specially in languages without capitalization. – Jack-in-the-box Aug 21 '16 at 7:31
12

As per the Material Design Guidelines,

Flat buttons are text-only buttons. They may be used in dialogs, toolbars, or inline. They do not lift but fill with color on press.

Further more

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

Use flat buttons in the following locations:

On toolbars In dialogs, to unify the button action with the dialog content Inline, with padding, so the user can easily find them.

The idea is to not confuse the user with too many card-like structures and an inception of raised cards.

Here's an example: enter image description here

Although in the above image, I believe the color for the Flat buttons is probably one thing that doesn't make them distinguishable.

  • 1
    It dosn't has to be card-like with shadow; a background color would do the job ( like rgba(0, 0, 0, 0.03) ) – MJafar Mash Aug 9 '16 at 7:36
  • 1
    In this case the caption of the button titles lets us know that those are actionable items. – Harijs Deksnis Aug 11 '16 at 15:17
  • 1
    Also on the same spec page: "Don’t use flat buttons in UIs where they would be difficult to see.". So you should either user the highlight color for flat button or use a raised button. – Christian Strempfer Aug 20 '16 at 21:09
  • I was reading an article on google help pages and it reminded me of this answer, support.google.com/a/answer/2538798, the page contents doesn't matter, just check Was this article helpful? section at the bottom of the page. – MJafar Mash Oct 14 '16 at 10:57
12

There are two principles that are hugely important to remember here:

1. The quick adaptation principle

People adapt very quickly even to the most obscure conventions.

We were all used to be used to underlined blue links, but why underlined and why blue? Why not red with a subscript icon? It is completely arbitrary. Yet everyone got used to it only to later get used to blue links without underline and even links that are not blue.

The world of microwaves is full of usability issues, yet people get used to these and few fail to recall how to operate each model after struggling once, twice, or trice.

2. The inference complexity principle

Human inference is more complex than the heuristics used to analyse usability.

If you have observed users following a cognitive or an expert analysis, you probably acknowledge the (sometimes huge) gulf between expert analysis and actual human behaviour.

Users will sometimes have no issues where expert analysis suggest severe ones1.

The brain is the most advance inference machine out there. We know that it makes some gross errors in some areas (statistics, for instance) and is full of biases, but all these actually enable quick and accurate inferences where it really matters (essentially, anything related to survival).

When it comes to questions like this, people will recognise things for what they are based on a complex decision network that accounts for (amongst other things):

  • The caption of buttons (actions are good)
  • Their position (do they look like main text or something else?)
  • Their style (do they look like main text or something else?)
  • The context of usage.

1Molich, R., McGinn, J.J. and Bevan, N., 2013, April. You say disaster, i say no problem: unusable problem rating scales. In CHI'13 Extended Abstracts on Human Factors in Computing Systems (pp. 301-306). ACM.

Try it yourself

I challenge you to enable grey-scale mode on your mobile or computer. You'll probably be amazed how after a few days rare are the instances where the lack-of-colour makes it to your consciousness (maps will be one exception, so will surprisingly rare but really terrible accessibility issues).

The predict-confirm vs the classical IPO model.

As years go by, and in light of various theories and experiments, cognitive models attribute more weight to the predict-confirm model and less to the classical IPO model.

The classical IPO (input-processing-output) model asserts that input stimuli is processed to generate output (recognition something is a button, in our case).

The predict-confirm model asserts that much of cognition involves first a prediction (based on past experience, long or short), that is then confirmed using incoming stimuli. In effect, the predict-confirm model is based on a mechanism known to be of momentous importance to learning and adaptive systems - feedback.

A good example for this is that you know what's coming:

If it ain't broken...

Once proficient, we read in exactly the same way (neither whole words nor whole sentences) - our brain predicts what's coming and then left with the easier task of confirming the prediction rather than spending cognitive fuel on understating everything as if no context exists.

The point being made here is that it is easy to spot potential usability issues based on heuristics, but these may be no issues at all when actual human behaviour is observed. Partly, this is due to picking on a specific micro detail (which may well involve issues) rather than considering the macro picture (the whole context and human's superb inference ability in cases such as discussed here).


Perhaps the best entry point reference on this topic is: Clark, A., 2013. Whatever next? Predictive brains, situated agents, and the future of cognitive science. Behavioral and Brain Sciences, 36(03), pp.181-204.

Conclusion

So the answer to your question would be: With some exceptions - yes, people will recognise it. This is due to two main factors:

  • It's a growing convention, so people simply get used to it.
  • Human inference is more refined and contextual than the micro-analysis we conduct sometimes.
  • 3
    What is the purpose of improving UX if people just quickly adapt? Honest question though. – John Isaiah Carmona Aug 8 '16 at 3:13
  • 2
    @JohnIsaiahCarmona, because quick adaption is just a small part of usability/UX. Consider efficiency, consider user errors, consider emotional response, consider an application with many competitors whose target audience is mainly new users where the business can't really afford gradual learning. – Izhaki Aug 8 '16 at 9:13
  • 2
    @Izhaki This is the case, I'm designing an application for an ecommerce website which has a lot of competitors and we don't have enough time to make the customers think and understand which is the right way! And of course if we don't present it well, customers won't convert! It's not the case where people are doomed to use our application so we shan't be worry about the ux and just sit aside for the customers to learn. – Jack-in-the-box Aug 9 '16 at 7:24
  • 3
    Would you happen to have a reference to the first principle you mentioned? – player87 Aug 11 '16 at 0:02
  • 2
    How often have you tapped something expecting it to be a button/link? Do you sometimes find yourself tapping several places to see what is a button and what isn't? Have you ever discovered a feature you didn't know was there because you didn't know some text was tap-able? A positive answer to any of these indicates that Material Design has some serious usability problems. – DocSalvager Aug 13 '16 at 4:00

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.