User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I have a quick question. How to depict an icon which you could press for choosing other options (i.e. when you press it a dialog appears with set of icons - and after your choosing the dialog closes and the new icon appears instead of old one). Should I depict it with picker or maybe as button? Anyway it should be clear that you can push it and some options will appear. What Google material design advise us?
Thanks.
Basically what you need is a Material Design dropdown menu. That kind of menu shows the currently selected option with an arrow beside. Clicking on that lets you select one of the presets available and replaces the previous text and/or icon when minimised.
As you see in the picture, you can use text, an icon or even both. These kind of dropdowns are used for example in office suites for font or alignment settings. The image above shows what the elements involved should look like in various states.
Some of the dropdowns allow for custom values while also displaying a few useful presets and others just offer the presets without editable values. For the dropdowns with icons, only the icon is visible when the dropdown is minimised while the expanded view also shows a short title next to that.
Material Design dropdowns can be used in toolbars as well as small info windows, registration forms and more.
I wouldn't set the controller to edit the button in the button itself.
If the controller for the setting is in a settings panel (with other settings), it can trigger a dropdown or similar.
For example:
or also:
