There are visual conventions in flat UIs to provide affordance. You don't have to rely on chrome or skumorphic design to do that.
For example: I've seen this small arrow icon used on flat UIs to indicate that a certain element is interactable.
One solution would be to overlay a similar flat ...
To your last scentence: I had something similar in mind by providing those icons with a button chrome. So it would be basically the old-fashioned icon tool bar. But as I already stated, that would violate Google Material Design guidelines that we use as a darft. We could ignore it but I believe that we will see more and more chromeless actionable icons emerge in the future, so I'm actually OK to stick with chromeless icons. I'm just not sure if I want to lose the possibility to display info with an icon (that wouldn't be actionable due its info nature).
I wouldn't use button chrome. That would violate the guidelines because it's skeumorphic. Instead I'd use something that wasn't a reference to a real world material.
I'm a little confused. That page doesn't use the word "chrome" anywhere, and does actually advocate using shadows to make buttons stand out in busy layouts. (see section "raised buttons"). Also, I understood your question to be about marking icons as actionable, not buttons. Was I wrong?
Well probably we have a different definition of "chrome". To me, "chrome" means anything beside text that emphasizes affordances. So the shadows are already "chrome" to me. By saying "adding chrome to icons" I mean "adding shadows like the buttons around the icons"... Hope that will clear it up a little bit :-)
ahh right, I understood "chrome" to mean adding skumorphic elements to emphasize affordances. So adding shadows to give the illusion of depth would count, but adding a flat icon wouldn't. I don't think there's anything in flat design or those guidelines which prevent you using chrome by your definition. Flat design isn't "anti-affordance" design, it's just "anti depth/skeumorphism" design.
Hehe, trying out this chat feature for the first time... So when if I understand you right, the shadows of the "raised buttons" aren't "chrome" to you per definition because it's still "flat"?
The shadows of the raised buttons are chrome. They're definitely skeumorphic, but the android guidelines you linked actually used them as a recommendation, so they're ok for you to use
but the little arrow icon I had in my answer isn't "chrome", since it's a flat-design technique, not a skeumorphic design technique
ok... well imo I belive that even "flat" means that you still are allowed to use shadows and beveled buttons, but with less chrome. Means not so extreme 3d effects and so on. I mean, there are a lot of people out there how don't get the win8 UI because of its extreme flatness. And for me it feels like Material Design is the first really useful implementation of the flat design concept.
I think you're probably right, but I know that there's a lot of debate about what does and doesn't constitute a "flat" UI, but I still think using allusions to depth (like drop-shadows to imply layering) aren't inherently a flat-design technique, even if it's sometimes ok to use them in flat design.
Frankly, so long as it works for your users and is coherent with your visual style, I don't mind what techniques you use. In this case, I'd use the drop-shadows to solve your problem, but would switch to using something else if it breaks the coherence of the design.
Well it's sure kinda academic to define shadows as flat or not... Probably we don't care about that in a few years because the socalled "flat" (with howmany chrome might be there) will be a common used practice everywhere :) Just had the idea of making a segmented control but with raised chrome from MD and put the icons (completely flat) inside... So I can keep the info icons (without any chrome)
That's going to be an odd visual metaphor. You're relying on the user knowing that these icons are interactive because of the layer below them, but those icons are not interactive because of the lack of another layer. I still think you'd do better to do something to the interactible icons themselves.
on the other hand, with sufficiently clever design, you should be able to make that approach work. There's no reason why it wouldn't be possible to make it clear, just that it's a bit more work.
Discussion between Alexej Froehlich a…
Discussion between Alexej Froehlich a…