42 votes
Accepted

In a static data table, should rows be highlighted on hover?

Yes. Just yes. Though I do UX work, I am speaking as a user on this one. As a user, I very much want you to help me easily follow a row of data from end to end. I want to easily be able to see what ...
Aaron's user avatar
  • 595
26 votes
Accepted

Why isn't primary text full opacity?

Just to add as to why the number 87% is used as the starting point. It has been answered why they didn't want you to use true black and instead lowering the opacity to create shades of gray. So ...
DasBeasto's user avatar
  • 15.3k
20 votes

How should a coloured dropdown be styled using Google Material?

Given your requirement: Each status has it's own associated colour and would ideally be displayed in the list Then we're not discussing if there should be a color or not, question is how to ...
Adriano Repetti's user avatar
19 votes

Why is there no "closing sidebar button" in the mobile world

Being a mobile app or web app, I think the question omits a couple of important bits of context: The new interface opens with an animation, a slide-in from the left The background of the application ...
Danielillo's user avatar
  • 18.6k
17 votes

Material Design required field

I'm not sure when this section was added, but currently, the specs do have a short section about required fields: To indicate that a field is required, display an asterisk (*) next to the field. At ...
Natix's user avatar
  • 271
17 votes

Material Design - Card within a Card

No As per MD Card guidelines: Cards may contain a photo, text, and a link about a single subject. They may display content containing elements of varying size, such as photos with captions of ...
Devin's user avatar
  • 37.9k
16 votes
Accepted

How to represent a switch "tabbed" state in Material Design?

Just use the style is recommended on Material design | Components– Selection controls | Switch
Madalina Taina's user avatar
16 votes

Is it a strong anti-pattern to use a Floating Action Button in an iOS app?

New in iOS 11 you can find the Floating Action Button within the Notes App. If Apple uses them, you could definitely use them too.
cornr's user avatar
  • 269
16 votes

Is it acceptable to use Google Material Design in web applications?

I don't think it's a problem. There are many applications for iOS that use Material Design. Think of all the Google applications (Youtube, GMail, etc) iOS users use on a daily basis. You might want ...
Nick Groeneveld's user avatar
14 votes

Is it acceptable to use Google Material Design in web applications?

Material Design is not "Android design", it's Google's all encompassing design "template" for both mobile and web apps. Many Google web products use Material Design like Angular (https://angular.io/) ...
Davor's user avatar
  • 240
13 votes
Accepted

Is it a strong anti-pattern to use a Floating Action Button in an iOS app?

Edit (2022): Material Design has been a strong voice in application design for many years now, and many iOS users will have seen the FAB pattern. FABs are not a core experience to iOS and can still ...
Benjamin S. Leveritt's user avatar
13 votes
Accepted

Fixed width for buttons or proportional with the text?

In my opinion, if the buttons are one over the other then try to adapt the shorter to have the wider's width. In your example it would be the green option, but giving less padding to the "Subscribe" ...
Alvaro's user avatar
  • 16.8k
12 votes

Are material flat buttons distinguishable?

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 ...
Swapnil Borkar's user avatar
12 votes

Are material flat buttons distinguishable?

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 ...
Izhaki's user avatar
  • 32.6k
12 votes
Accepted

How should a coloured dropdown be styled using Google Material?

Short answer: Use your second option, where each field has a neutral white color as the color is not classifing elements in the list. Color should be used to give distinction with other elements from ...
Alvaro's user avatar
  • 16.8k
12 votes
Accepted

Editable table in material design

If you like to keep the table clean, show only the edit icon on the hovered cell: You can specify which cells are editable by showing the icon or not. Keep text selectable: And add a click handler ...
jazZRo's user avatar
  • 11.7k
12 votes
Accepted

Hamburger menu or back button on Android?

The burger menu should be displayed on all of your top level destinations - the same screens that are listed in your navigation drawer. When the user navigates to a deeper level, from one of these ...
Marné's user avatar
  • 473
12 votes
Accepted

Does Material Design 3 recommend an incorrect icon style?

Material Design has generated a lot of controversy in its history, and each version has some "controversial" decisions (to say the least), although it gets better with each version. But you'...
Devin's user avatar
  • 37.9k
11 votes
Accepted

Which of these two form layouts is better (more "material")

I think your observations are correct! Do check some standard interaction patterns of select-box and text-field Based on your current layout, I will suggest you choose one of these: OR
Dipak's user avatar
  • 16.2k
11 votes

Material Design - How to display an error on a larger screen

The material design guidelines have a section called Errors. For your use case, it recommends: If two or more fields have incompatible inputs: In the text field, indicate a fix is needed. Add an ...
Tin Man's user avatar
  • 2,796
10 votes
Accepted

Material Design guideline for Google Map's side pane?

tl;dr: It's a sheet. The pattern is related to the persistent bottom sheet element on mobile. The MD guidelines actually reference the map example specifically when explaining this approach: On ...
plainclothes's user avatar
  • 21.3k
10 votes

Material Design data table filtering

If you need complex filter consider creating a separate section. Perhaps a "actions" section on top of the table where users can not just filter but perform other actions to interact or modify the ...
Matt Costa's user avatar
10 votes
Accepted

Material Design - Card within a Card

While others have noted that it is clearly a big Don't in the guidelines, it's worth noting that google uses nested cards in the Google App itself: I personally think a better alternative would be to ...
micimize's user avatar
  • 216
10 votes

Is it a strong anti-pattern to use a Floating Action Button in an iOS app?

If you compare GMAIL user interface itself on the Apple and Android mobiles, the UI is a bit different (user pics and checkboxes - on the left-hand side, etc.). For the IOS, the GMAIL takes a ...
Deekshit-CUA's user avatar
9 votes

Back vs close icon in Material Design

There are official guidelines on this—here. From the guidelines: The “X” used in a full-screen dialog differs from an up arrow, which indicates the view’s state is constantly being saved. For ...
Tin Man's user avatar
  • 2,796
9 votes

Best way to display a key-value list with material design?

If you wanted a strict key value list, the data table guidelines are the most fitting. To bring out one column over the other, feel free to bold it or make it a disctintly lighter gray (not light gray,...
Tin Man's user avatar
  • 2,796
9 votes
Accepted

Does Material Design have a guideline for styling a "select all" checkbox?

Try combining the section header title and master checkbox above the list. I'm not sure what the rest of your ui looks like, but oftentimes a selectable list has the 'select all' up along the table ...
Mike M's user avatar
  • 24.6k
8 votes

Tree navigation in material design

Consider panels that come out from underneath each other to reflect the hierarchy in dimensions. The top is some major classification that you can still trace back. As you go deeper into the hierarchy ...
Eric Stoltz's user avatar
  • 1,724
8 votes
Accepted

Choosing colors in material design

In fact it's quite simple, see answers below each of your questions: 1. Why three different shades of accents? This is because you will need different states for buttons, nav bars and any other ...
Devin's user avatar
  • 37.9k

Only top scored, non community-wiki answers of a minimum length are eligible