Questions tagged [material-design]
Material Design is a design language developed by Google. Based on the paper and ink metaphor, the framework is characterised by the use of 'cards', grid-based layouts, responsive animations, transitions and depth effects such as lighting and shadows. "Material is an adaptable system of guidelines, components, and tools that support the best practices of user interface design." (Material.io)
390
questions
46
votes
5
answers
18k
views
What are the disadvantages of Material Design?
I'm generally a fan of Google's Material Design UX framework. Its positive aspects have been well-covered by the press and Google's own design group and evangelists.
But, the disadvantages of the ...
- 41.3k
37
votes
7
answers
23k
views
Do material design's floating action buttons provide a bad UX?
Google's material design largely focuses on clean visuals and a good user experience, but there is one feature that I have questioned: floating action buttons.
This is a large button that appears in ...
- 1,714
35
votes
6
answers
11k
views
Is it acceptable to use Google Material Design in web applications?
We are considering using Material Design components in our website, but since this is an "Android design", wouldn't it turn away iOS users?
What is the best practice? Is it wide-spread to use these ...
- 453
33
votes
3
answers
9k
views
Why isn't primary text full opacity?
I've been reading the material design guidelines and it suggests:
For dark text on light backgrounds, apply the following opacity levels:
The most important text has an opacity of 87%.
I'm just ...
- 443
24
votes
7
answers
22k
views
Material Design - Card within a Card
I'm utilizing Material Design for our product and have an area that has cards displaying information.
Can a card be listed within a card?
Similar to the image below but with content, obviously.
- 1,189
24
votes
5
answers
5k
views
Material design - buttons raise, not depress
There is some discussion of this here but I haven't found a more comprehensive discussion of it.
With Material Design, objects that wish to convey being pressed appear to rise up towards the user, ...
22
votes
7
answers
20k
views
Fixed width for buttons or proportional with the text?
What is the best practice for a UI, to make all the similar buttons with a fixed-width, no matter how long is the text (with the condition to fit) or make the width proportional with the text and add ...
- 4,521
21
votes
1
answer
4k
views
Are there premixed Material Design color combinations I can use for prototyping?
I'm looking at this tool that allows to select material design colors and this document by Google that describes how to pick material design colors.
As far as I understand, I pick 3 primary colors ...
- 1,627
19
votes
4
answers
24k
views
Editable table in material design
we're designing a web application in material design and we have an editable table there - something like this:
Any suggestion on how to indicate the editable fields, if not all columns are editable? ...
- 707
18
votes
3
answers
13k
views
Back vs close icon in Material Design
Some Material Design apps use the "close" icon instead of the more common "back" icon in the toolbar, for example:
(From https://stackoverflow.com/questions/27125340/material-close-button-in-toolbar-...
- 580
18
votes
3
answers
18k
views
Best way to display a key-value list with material design?
For a "Material design" project, I need to display a key-value list with multiple items, something like that (example with an animal and 4 criteria):
Name: Cat
Category: Mammal
Color: Black
Size: ...
- 281
17
votes
6
answers
7k
views
In a static data table, should rows be highlighted on hover?
My team is building a Material Design table component. The Material Design guidelines on data tables state:
Row hover (Desktop)
Display a background in a table row if a user hovers over any ...
- 313
17
votes
4
answers
32k
views
Material Design required field
Has anyone seen in Material Design how to present a required field?
At the moment it seems the guideline is either to hide the submit button until required fields are populated or else throw an error ...
- 313
16
votes
3
answers
28k
views
Is it a strong anti-pattern to use a Floating Action Button in an iOS app?
Floating Action Buttons - invented by the Google Material Design Team - are rather popular on Android. Apple's closest equivalent are perhaps an action icon at top-right or the bottom Tool Bar pattern ...
16
votes
2
answers
2k
views
Are material flat buttons distinguishable?
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 ...
- 716
16
votes
3
answers
3k
views
Does Material Design 3 recommend an incorrect icon style?
I was looking at the Material Design 3 Icon design principles and they have an example that seems like bad UX to me. I'm sure I'm wrong but I'd like to know if (and how) the "Do" is better ...
- 173
16
votes
2
answers
14k
views
How to display a "Log in" error in Material Design?
Problem
I am trying to create a log in page that follows the material design guidelines, but I don't know how to handle when the user inputs the wrong email or password.
In the material design ...
- 163
15
votes
4
answers
5k
views
Arrowless tooltip: Usability?
I'm working on a project using Angular Material, a framework based on Google's Material Design Specifications. As such, it uses arrowless tooltips like this:
According to the guideline:
Tooltips ...
- 521
14
votes
2
answers
3k
views
How should a coloured dropdown be styled using Google Material?
I am working on a project which is using Google Material UI. I have a set of production statuses that need to be displayed - they are selectable from a list but I am not sure what that list should ...
- 1,062
14
votes
3
answers
36k
views
How to show read only label:Text in material design
Looking through material design components, specifically text input fields the guidelines are really clear for input fields.
However, its unclear how to lay out non input text fields.
Say I've got a ...
- 470
13
votes
5
answers
18k
views
Is having multiple rows of tabs against Material Design?
As seen in this mockup, I kind of need multiple rows of tabs.
One to click into categories, and another one to select your category.
Is this ok?
Also, side note—If Categories is selected, should I ...
- 231
13
votes
2
answers
14k
views
Choosing colors in material design
I am learning the ins and outs of material design. Note that I am a developer, and have only recently decided to be a little more serious about UX.
Google writes:
Limit your selection of colors by ...
- 277
12
votes
2
answers
7k
views
Why the textfield in Google Material Design without box
Why the text fields (as below) in Google Material Design are without boxes?
Here is a live demo of Material Design text fields. Polymer paper elements - paper-input
What are the benefits of this ...
- 233
12
votes
1
answer
15k
views
Material Design data table filtering
How would you implement filtering in MD data table? Sorting, paging and searching is obvious but I need more complex filtering.
Should I put the filters on the table title or create a separate ...
- 121
12
votes
1
answer
722
views
In Google Maps, why did Google use back arrow icon instead of "X" close for search results list when its clearly a layer on top of the main interface?
I've been getting into Material design lately, and I really liked one of the material concepts, and thats to think of the UI in X,Y,Z axis. But noticed a discrepancy with what might be extremely ...
- 121
11
votes
3
answers
2k
views
Is the Floating Action Button going away
I am contemplating whether to use the material design Floating Action Button vs. Menu with different Action options and I noticed that Google in Google sheets, for example, has removed the button in ...
- 111
11
votes
1
answer
6k
views
Submit button of form in material design
There is no description for submit buttons in material design. The most closest by meaning are floating action buttons. The buttons are located in top part of screen, but I don't see any sense in this ...
- 213
11
votes
5
answers
46k
views
Vertical and Horizontal three dots icon button usage
Despite the Material Design has great guideline documentation, I'm confused about vertical/horizontal dots icon for a Web App since for mobile, the vertical solution is a stablished pattern.
I found ...
- 121
10
votes
2
answers
9k
views
Material design solution for popovers
Material design has no popovers, and I wonder what should be used as a replacement?
For example, how would you advise Product Hunt to replace their popover when they switch to material design?
- 203
10
votes
2
answers
3k
views
Material Design guideline for Google Map's side pane?
Here is what happens when you click on an icon in an "old-style" Google map:
You get an InfoWindow, and clicking "more info" opens a new tab with a google search of the icon's ...
- 300
10
votes
5
answers
30k
views
Are there Material Design best practices for Filtering/Sorting in a Tab Layout?
What I’m trying to do
I’m trying to find out what the Material Design best practices are for adding independent filter and sort options to EACH tab in a tab layout.
What I have proposed
I’m proposing ...
- 355
10
votes
4
answers
4k
views
Where to place the Save button Material
I'm developing a simple user creation screen in Android using Material Design.
The portrait layout is completed, but I'm struggling finding a way to achieve a nice way to lay info out on the landscape ...
- 203
10
votes
2
answers
2k
views
Material Design - text colors don't maximize contrast
Description
The color palette for Material Design specifies hues as well as suitable colored (white/black) text to be used for each backing-hue. So for example in the Red palette there are 10 '...
- 201
9
votes
6
answers
4k
views
Why is there no "closing sidebar button" in the mobile world
When I'm using a google product, I'm always wondering why there is no "closing sidebar button". For example in gmail I have to swipe the sidebar or click outside it's area to close it.
More ...
- 191
9
votes
2
answers
8k
views
Tree navigation in material design
I am looking for examples or guidelines how to design tree navigation in material design. The style guide covers data tables and lists but trees are not mentioned. The only reference are nested ...
- 197
9
votes
2
answers
7k
views
What is replacement for Android's Floating Button in iOS?
I wanted to build functionality in Android using a floating button, as all the tabs are fixed.
What is the solution for replacing Floating Button in iOS?
- 1,731
9
votes
2
answers
5k
views
Stacked modal dialogs (with Material Design)
I'm designing a Material Design app where users can edit items via a lightbox-style modal dialog. This is a hard constraint, so avoiding the lightbox is not an option.
Within the dialog, there is an ...
- 41.3k
9
votes
1
answer
6k
views
Why is the Steppers Component of Material Design now 'archived'?
I noticed that the Steppers Component are now under 'Archived' instead of with the 'Active' guidelines. See https://material.io/archive/guidelines/components/steppers.html
(July 2019).
Does anybody ...
- 91
8
votes
2
answers
17k
views
Material Design - How to display an error on a larger screen
A bit similar to this question Material Design - How to display a log in error
Though it doesn't address how to do this on a larger screen (i.e. desktop browser) since snackbar at the bottom as an ...
- 181
8
votes
2
answers
4k
views
Font 'Roboto' mandatory in Google's material design?
Is using the font 'Roboto' mandatory in Google's material design – or can I use different fonts in a material design based website?
- 183
8
votes
6
answers
8k
views
How do you deal with long labels using material design text fields?
I need to convert a form to material design guidelines but I don't think MD has considered how to deal with long labels on narrow forms. As you can see in my example I have 3 pairs of dropdowns that ...
- 167
8
votes
3
answers
3k
views
Is there a reason for drawing Material Design flat buttons like plain text?
In the MD specifications are listed two types of buttons:
flat buttons
raised buttons
the flat buttons are usually with black text, making them look like simple not clickable text (for someone).
...
- 240
8
votes
3
answers
16k
views
What is the best practice for "delete" buttons in material design?
A lot of design systems/ style guides define red as the color for "delete"/ "erase"/ uninstall/ error buttons. In material design, I didn't find this specified.
So, what is the ...
- 4,521
7
votes
2
answers
26k
views
Why Material Design uses 64px height for navbar? [closed]
I looked at various implementations of Material Design and it seems that they all have height: 64px and I am wondering why ?
What is the calculation based on ? Why not 65px or 50px ?
- 173
7
votes
5
answers
6k
views
Material Design for Web apps?
I'm working on an admin portal (angular, jquery, bootstrap..) and I'm pretty comfortable with bootstrap and I think that the bootstrap designs are pretty cool. Now, my colleague insists on changing it ...
- 185
7
votes
2
answers
6k
views
Does Material Design have a guideline for styling a "select all" checkbox?
I have a list of checkboxes and would like to add a "select-all" toggle. I already have it working, including setting an indeterminate state when some of the items are selected. What I'd like to ...
- 303
7
votes
3
answers
1k
views
Cards with margins VS Edge to Edge container
Is there any logic behind when to use cards with margins in design VS edge to edge containers. I've gone through material design guidelines as well as iOS guidelines, which does not give any clear ...
- 145
7
votes
4
answers
8k
views
Does Android app need back button?
Do I always have to put "back" button in the top left corner of the app?
Following the quote:
Sometimes the back button is on the left, sometimes it’s not.
They may be physical buttons, ...
- 953
7
votes
1
answer
23k
views
Material design - icon size in navigation drawer
I was wondering, in material design, what should be the icon size for navigation drawer.
I had gone through https://www.google.com/design/spec/patterns/navigation-drawer.html# , but they didn't ...
- 1,761
7
votes
3
answers
5k
views
Why is pagination not covered by Material Design specs?
Why is pagination (outside the data table context) not covered by Material Design specs?
Is this Google's way of telling us that "traditional" pagination is a bad idea, and maybe, infinite scroll is ...
- 179