21

They are both UX frameworks, but are very differently opinionated Material design is very opinionated about how UX elements behave and interact visually. It starts with general principles around visual elements (physics, light, space, momentum) and expands on those principles to provide concrete examples and requirements for specific elements (buttons, ...


12

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 to underlined blue links, but why underlined and why blue? Why not red with a subscript icon? It is completely arbitrary. Yet everyone got used to it only to ...


12

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 Flat buttons are printed on Material. They do not lift but fill with color on press. Use flat buttons in the following locations: On toolbars In ...


11

Don't compromise your UX for the sake of following material design. Material design is meant to compliment your UX, not dictate it. So don't follow it to the word. 1st decide on what's the best user experience and then decide on which and how much of googles material design guidelines you are going to use.


6

Well, I tried to get the answer from the design team (UENO. Created the interface, the renaming part is as it is since then), They simply can't answer it. I believe that renaming in a modal doesn't have any specific advantage over inline renaming (they must have a better word for that, which I don't know) renaming inside a modal provide clear context and ...


6

According to the recent updates of Google Material design, here's where material talks about tabs usage and it forbids using nested tabs: Although Google puts a lot of effort to make the best UX, the bottom line is that if tests give you better results with nested tabs, then use them. But you can also think about using alternatives like drop down menus or ...


6

I don't think Material is a framework, but I agree it depends on the definition of framework. If I use this: In computer programming, a software framework is an abstraction in which software providing generic functionality can be selectively changed by additional user-written code, thus providing application-specific software. A software framework ...


5

Bootstrap is mainly a responsive grid system, with some default UI look and feel decisions made for you (that you can easily over-ride). Materialize is mainly a set of UI elements and interactions (but also has a grid). And then there's about 2,000 other UI CSS frameworks out there as well. Rarely do you use these frameworks out of the box, so what is '...


5

You can draw more attention to creating a first application if you make more use of your empty states. Rather than leaving users on a screen saying they haven't done something yet, you should instead encourage them to do something. To do this, consider adding more enticing copy and connect your 'getting started' button to this copy. Here you see both a ...


4

The App bar has shadow as it is elevated and content passes below it. The Navigation drawer is at the same level as the content, but it doesn't scroll with it. On one hand, there is no content that will pass below the Navigation drawer so there is no need to elevate it. On the other hand the Navigation drawer is fixed in the screen like the App bar. So ...


4

Interesting. I'm also reading Google Material Design right now. Anyway, I think there is another discussion with the same issue you are wondering, and Evil Closet Monkey has a really good answer about this. Take a look at his answer to see if it has cleared your question.


3

Keep in mind that the guidelines that Google proposed for Material Design are just that: guidelines. They won't be able to help you in all situations, but they are good enough to give you a jump start. Is this ok? The Material Design guidelines has a few different recommendations for handling this situation. Right now you have two levels of navigation: ...


3

Let's go on a journey. 1) Mac : As a user I will select file, click on option of renaming the same, hit enter or click any where. The file will get the name 2) Windows : Same as Mac 3) Drop box : Same as Mac and Windows Now when it comes to google drive, I think having a modal to perform renaming action allows the following things : a) See their input ...


3

I believe it doesn't comply with it. The Title in the app bar is meant to be the parent of those tabs: Material design - Navigation patterns Material design - Tabs


3

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 ...


3

No. Floating Action Buttons or FAB represents the promary action of the screen, and therefore you'll have only one FAB since you can have only one Primary Action . From Floating action button Only one floating action button is recommended per screen to increase its prominence. It should represent only the most common action. However, you can use the ...


3

If the error (non-critical or otherwise) is related to the attempt to submit the pop-up form, and logically should be shown before the dialog is dismissed, then move the banner position to the pop-up itself. This will focus the error more closely to where it applies: In this example, there's a possible "conflict" between the RETRY and DISMISS buttons in the ...


2

I believe the Material guidelines were recently updated to include text field boxes, which aid in identifiability. See here: https://material.io/guidelines/components/text-fields.html#text-fields-text-field-boxes


2

The Material Design Guidelines say that you should use one button per screen for the most common action. What that action is, is up to you. Only one floating action button is recommended per screen to represent the most common action. Source: Buttons: Floating Action Button I don't see a problem with having different actions across pages as long as ...


2

I think the common way is this: Parent (title) - child (tab) - child(tab) - child(tab) What tab(child) is selected should be shown with different transparency of the selected tab text/icon, not the title. Your case is a bit misleading because it breaks this parent/child relation. Common solution would be to put your main sections into navigation ...


2

I think if there are a few steps in this process you should use a breadcrumb navigation, and increase the size of to make it more clickable. Also, you could definitely just use a side bar navigation as this is desktop and you have plenty of real estate there. No real need for a hamburger there.


1

My guess would be, it's what Material Design guidelines call "Chips", or something similar to that: https://material.io/guidelines/components/chips.html#chips-behavior


1

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: Material design - Lists: Controls Material design - Dialogs


1

This is not exactly a frequently used of title bar but yes, such a solution does comply with Material Design. Take for example the YouTube app in which the title changes according to which tab you are in. The general idea is that the title can change if what would be written there otherwise (in this case: Youtube) wouldn't be of importance to the user as ...


1

My understanding is that those icons are only used for demonstration purposes, the current production icon set is here : Material Icons From their changelog on their github repo they seem to just have added more over time instead of replacing them. But you could use that image as a blueprint to make a new one, or even submit it to the repo.


1

What's the question? Why google is using Modal instead of inline renaming of file.. but what's there to discuss? Everyone is just wildly guessing about it. I think there is no such reason as usability behind this, it's just the way they thought of making it. When you are on web, clicking the file and renaming it might be accidental and the change may sync ...


1

Yes, having multiple rows of tabs is not recommended on Material Design and this is not a good practice on any website / app. On Material Design Blog, the information is really clear and I think it can help if is posted here too. Formatting specifications: Present tabs as a single row. Wrap tab labels to a second line if needed, and then truncate....


1

i'd suggest to retain the same font-size when editing each field, for if you go with a smaller font-size , it may seem odd when the font-size resets when the user has completed editing. (unless you do some awesome looking transistions though) We used a similar approach when editing the title for our app , which was Delivery Recipient name form field. But ...


1

I would expect clicking the filter button to bring up filter options. On desktop, I'd probably expect a dropdown with filter options: (https://airtable.com/) YouTube does something similar as well:


1

I've got the same question. I'm going to open a dialog that displays chips the user can select/deselect to filter the results in the table. This appears to be consistent with what the current version of Material Design is suggesting as per this image:


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