You can check the latest updated version of this article at lobotuerto's notes - A little critique of Google's Material Design and its associated websites.
I have a couple of opinions to state regarding the spec —which by the way I think is a great design specification— and its accompanying websites:
Guidelines on toggle functionality
I think regarding toggles, you should pick one way to get your point across to the user.
And be consistent about it, do not send mixed signals.
Here is a couple of examples that shows —in my view— incongruent behaviour:
Expansion panels
For expansion panels —or lists, the icon (arrow_drop_up/arrow_drop_down) doesn’t represent the state of the panel, but the intent of the user —what will happen if I press on it?
By the guidelines examples:
- When closed, you should show an arrow down, signaling the user that if they press on it it’ll expand.
- When opened, you should show an arrow up, signaling the user that pressing on it will close the expanded panel.
Here, the visual cue ( the arrow ) represents intent , not state.
Password redaction
On password redaction it’s the other way around:
By the guidelines examples:
- When the eye is open the password is shown. This is only showing the state of the thing in cuestion.
- When the eye is closed the password is “hidden”. Again, this is showing the state of the component, instead of intent.
Here, the visual cue ( the eye ) represents state , not intent.
Switch buttons
On the other hand, switches are great toggling controls because what they do is show state and intent towards whatever label they have associated.
So here, it’s really up to the developer to find great labels for a great UX.
Example:
<o--> Crushing it! (this is off, meaning we are not crushing it)
<--o> Crushing it! (this is on, meaning we are crushing it now)
(Pardon my ASCII art…)
It helps a great deal that the switch makes use of the spec and clearly signals the user when it’s on.
Intent vs state
Design languages or specifications should be coherent as a whole.
Some questions that arose from the observations above:
- Should icons show state or intent?
- Should stuff like this be clearly documented in the spec?
For the second question I think the answer should be yes.
As for the first one, Material Design should go one way or the other, not both, nor keep it undefined.
My resolution
In my view, taking in consideration the spec’s spirit, the way to go would be for icons to signal intent.
Another less subjective reason to go this way is that showing intent allows
for a series of actions to be chained using one changing icon —whether you should be doing this or not is debatable, the points is that you can— since you are always letting the user know what comes next if they click on it.
You can’t convey this information using icons to show state, since the next state can’t be known by looking at the icon alone, you can only know what the present state is.
Nonetheless, using non-actionable icons to present state is OK.
In the end what I mean is:
Keep the expansion panels the way they are now, and change how the password redaction icons work (just swap the icons out).
Switch buttons are good as they are.
I know this subject is a tough one. It’s been discussed for ages:
Jef Raskin was writing about this issue quite a few years ago inThe Humane Interface: New Directions for Designing Interactive Systems, an Addison-Wesley Professional publication from April 8th, 2000.
Alan Cooper also discusses this in his bookAbout Face: The Essentials of Interaction Designpublished by Wiley on September 2nd, 2014 (looks like the firs edition is from August 25th, 1995):
Flip-flop button controls are very efficient. They save space by controlling two mutually exclusive options with a single control. The problem with flip-flop controls is that they fail to fulfill the second duty of every control - to inform the user of their current state. If the button says ON when the state is off, it is unclear what the setting is. If it is OFF when the state is off, however, where is the ON button? Don’t use them. Not on buttons and no on menus!
There is a good amount of discussion about this subject here and here on StackExchange UX.
Websites
Now let’s talk about a couple of websites related to Material Design, and some annoyances —bad UX; AKA UX opportunity areas— I’ve found while using them.
Material Design guidelines
Pages on the Material Design guidelines should include anchors on section headers for easy linking. It’s so annoying that they don’t!
A good solution would be to have anchors show when hovering section headers, subheaders or titles.
Trying to be too Material Design at the cost of good UX —or convenience— is not good.
Case in point: I couldn’t link to the password redaction section, because there is no anchor for it!
Material Design icons
I find a little frustrating that icons that are basically the same as others, don’t show their aliases.
For example, these are the same icons but you have to find out for yourself:
-
color_lens,palette -
create,mode_edit -
block,do_not_disturb_alt - And more...
I get that it must be in the interest of semantics, but believe me, users —like me— end up using icons that look like what we need, not what they are named as. We use names to search for them.
If I need a fricking circle icon for displaying a user status be sure I’ll end up using a frickingfiber_manual_record icon!
I find really irritating that CTRL + F doesn’t work because icons are dynamically loaded into the page. So you have to use the website’s own search bar for that.
If FontAwesome is doing just fine showing all their 2,791 icons I think you’ll do just fine showing 900+.
Conclusion
I think my biggest criticism is that sometimes it looks like Material Design principles are applied at the expense of good UX, when it should be the other way around: UX should come in first, maybe at the expense of Material Design.
Ideally, Material Design should reach a point where this trade-off should never come to be.
2018/05/08 update
Google has just updated its Material Design spec, and some of the links and commentary I provided above don't apply anymore. Nonetheless, I'll leave them there for history's sake.
Check out the set of improvements and new guidelines they provide on their site: material.io/design.
Another good thing is that we have a usable Material Design icons site now!
Go, check it out: material.io/icons
Top comments (9)
I think the way the guidelines say
is indicative of the biggest problem with switches, which is that they're not obvious. I mean the contrast requirements in Material are good, but I see a lot of badly-implemented switches in the real world because designers were so heavily influenced by the early Apple ones which were really difficult to understand.
I generally think that if you need text to explain what state your icon is in then the icon is just decoration. A page full of switches does make for an attractive settings page, though.
This is all besides your point; I'm just emptying my brain here. Good post :)
Switches are confusing indeed.
What's the alternative? A select?
No, in my article I mention that Switches are hybrid intent-state buttons, and I consider them fine.
It's just that they lean (a bit more than usual) on the developer to provide a good UX: Think picking a good label to signal intent, state is shown applying the Material Design guidelines.
thanks Víctor!
Thanks for mentioning the password icon...that drives me mad.
I'd like to think that my little critique had an impact, because now we have a usable Material Design icons site! :D
Check it out: material.io/tools/icons/
Awesome insight, thanks for sharing! Never thought about switches that way. I've been a big fan of material design but also didn't give it too much thought until I became a developer.
+1 on this
For the material icon site, if you click one icon you can use Ctrl+f afterwards
The problem with that, is that you need to click on the icon you are supposedly looking for...