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)

Filter by
Sorted by
Tagged with
0
votes
1answer
41 views

Should all grid contents be divisible by 8 or an even number?

When designing a grid system it is advisable to use an 8pt grid. This is stated by Material Design and many others. Does this mean that columns and gutters all must be divisible by 8 or a smaller even ...
0
votes
1answer
27 views

Use of primary callout? [closed]

When would you use the class primary for a callout component? About Callouts - "Callouts appear when a user interacts with an element of the page, for example highlighting an error that occurred ...
0
votes
1answer
55 views

Where is the most conventional/best place to add actions for items inside datatable?

Like actions I would say "delete", "edit", "details" and many more maybe. How display that on a desktop application. Some possibilites that I already used could be : Add to the top before the header ...
1
vote
1answer
41 views

How can we change Call to actions on a card without making user learning process harder and longer?

We are designing a new dashboard for our platform which user request on some service and our providers submit offers for user requests. when a request submitted by a user, He should wait until service ...
0
votes
1answer
81 views

Why not snackbar icons in Material?

I was reading through the Material Design guidelines and noticed this restriction on the snackbar usage: "Don’t place icons in snackbars." Why not? What would be the rationale for that?
1
vote
1answer
79 views

How to display a skeleton component for a list component

I am using the skeleton component as part of Material UI's API: https://material-ui.com/components/skeleton/ It makes sense that you should make the skeleton look like the component that will be ...
0
votes
1answer
87 views

bottom sheet dialog or complete screen for new task

I am developing something similar to a task app. For new task screens there are two approaches to go with Bottom sheet dialog like in Google Tasks, Todoist Complete screen with items laid out ...
0
votes
1answer
76 views

Normal Dialog or Bottom Sheet dialog for confirmation

I am about to pick dialog type for confirmation (yes, no) when deleting an item. I have two options to choose from: Bottom sheet dialog Normal dialog What is the best for this scenario and why? ...
0
votes
1answer
137 views

Is there a Material 'Chips' UI component in the IOS HIG?

If so, is there a resource somewhere I can grab it or some documentation on it? Basically just want to have a list of tags that a user can delete. If the HIG has something i'd prefer to use that.
0
votes
0answers
83 views

White action bar or dark actionbar

I see many apps today uses shades of white extensively in their design. Even action bar color is shade of white which was used to be dark color earlier in android. This seems to be a trend. As I ...
0
votes
2answers
175 views

How is the material design Snackbar accessible if someone is using a screen reader?

I have an accessibility question about the snackbar pattern used in Material Design. Snackbars - Material Design The behaviour of a snackbar is to appear for a temporary period of time then ...
0
votes
2answers
75 views

How to indicate selectability in an information-focused list

My first question, let me know if I should edit! I'm working on a list-map hybrid, where each item on the list can be selected, to show up on the map (like Yelp). The list needs to give a fair ...
0
votes
2answers
116 views

Point of opening bottom sheet when overflow menu was clicked?

I was wondering what's the point of opening modal bottom sheet when overflow menu is clicked? Look at this : Modal bottom sheet behavior Because user have to reach the top of the screen to click the ...
0
votes
2answers
121 views

How to display text with label in Material UI? [closed]

In a single page I would like to display Text Fields for user input and texts, which are static, but have labels. I tried to use the same text fields but with disabled attributes: However, I am not ...
1
vote
2answers
70 views

Button placement in the footer of card layout?

Should the button be placed on the bottom left corner or bottom right corner in the card layout? I was referring to Google's material design I found out that action buttons are placed on the bottom ...
0
votes
1answer
146 views

what should happen to a prominent app bar with long and two-lined title, when scrolling

In material design, if the title is long we should put it in a prominent Appbar like this: The title should not be truncated or shrunk. so when the content scrolls up, should I transform the ...
1
vote
2answers
293 views

Example Lateral, Forward & Reverse Navigation in Desktop Applications

I'm researching Material Design in how it's related to layer based navigation. Navigational directions Based on your app’s information architecture, a user can move in one of three navigational ...
1
vote
1answer
159 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 ...
0
votes
5answers
158 views

How long should animation delay be for a user interaction?

Simple question from a dev... I'm a non UX expert. When does a action, such as press a button or hover over a icon, how long should I delay the animation to show the interaction? I looked on Google ...
3
votes
2answers
218 views

stepper wizard, optional step, skip and next button?

A complex form, split into 5 steps using the material design stepper, step 4 is optional. should this screen have a 'SKIP' button and a 'NEXT' button, or just a 'NEXT' button?
0
votes
1answer
113 views

Material Design vs Trust

I am at the cross roads whether to use material design or not for startup website. I want to give the visitors feeling of that It protect your privacy (ie: does not sell ads based on user data), ...
-1
votes
1answer
60 views

Missing pickers in specification? [closed]

I am trying to find a specification for date/time pickers in Material Design. Has date/time pickers been removed from the Material Design specification? I can't seem to find it, multiple ...
0
votes
1answer
87 views

when using material design guidelines do you use exact heights for sections? [closed]

My question is if everything is suppose to be in 4px or 8px increments does that mean even the height of sections or containers? For instance if you wanted to have a section that filled the viewport ...
0
votes
1answer
154 views

WCAG 2.1 contrast issue for Google/Angular Material Design

I'm relatively new to accessibility compliance, but my research has found a confusing anomaly: The Angular Material buttons, links, etc are apparently WCAG compliant, yet do not seem to have the ...
0
votes
2answers
132 views

Which icons have matching width / height ? Material Design icons are uneven [closed]

If you look at the containing vector of Material Design Icons, this is what makes the icons match in size. However the vectors of the content inside are not all the same sizes and follow no standard, ...
0
votes
2answers
63 views

Fit Large Text in a Quizz Layout

I'm trying to make a Quizz section for my app in android the problem is that it may have large Texts in it and i want to make it easy to read and to answer i came out with this design but i think ...
0
votes
0answers
27 views

Material Design - Should BottomSheetDialogFragment contain text field input?

Should the BottomSheetDialogFragment contain any text-input fields directly or should that be reserved for centered modals?
0
votes
1answer
100 views

Material Design outlined textfields filled with auto fill chrome style

We're using outlined textfields from Material Design. On some occasions, chrome(or any other browser I guess) can auto fill the data because the users has saved them. Chrome gives a hint to the user ...
0
votes
1answer
141 views

Material Design: Should you use “Selection Controls” and “Text Fields” simultaneously

I know there are always exceptions to a design system. But as a general rule, should you avoid mixing Selection Control and Text Field components? I tend to think Selection Controls belong more in ...
0
votes
0answers
74 views

Do tabs belong in a Material Design dialog?

I'm building a MD styled desktop application that essentially acts as a dashboard (w/ a data table) for a list of remote devices. Within the data table, I have a button for each item that presents a ...
0
votes
0answers
98 views

How to indicate actions on an expandable list?

TL;DR I need an expandable/collapsable list where each item indicates that some actions are available and each category may be expanded/collapsed allow more actions on that category Material ...
0
votes
3answers
172 views

Is it bad to have hamburger menu with back naviation button for inner pages

We are using hamburger menu on all page even page are inner pages. I want to know if this is bad user experience to show back navigation button with hamburger menu in web? below is an example
1
vote
3answers
268 views

Material: Hamburger Menu and Navigation

We're currently thinking about our hamburger menu and the navigation in our app. Here's an example using the Drive app: This is the Drive app when opening it from the launcher. This is the menu, now ...
0
votes
0answers
71 views

is using a FAB for multiple user actions and screens good practice?

I'm working on a gaming product where users can perform a wide variety of actions from rating, writing a review, adding to lists, log the game in their 'backlog' etc.. Each of those can lead to ...
1
vote
1answer
535 views

Material Guidelines for Alerts

Aside from Bootstrap's alerts page I am unable to find any material guidelines for alerts that we can use in the development of a notification bar. Are there any good guidelines out there based on ...
0
votes
2answers
399 views

Material Design - label to the left of underline input field?

We use the Material Design underline text fields with floating labels in our application (see right on the picture). This works well on mobile, but for long forms on a desktop a label to the left of ...
-1
votes
1answer
356 views

Material dialog with multiple actions

I am working on a material design dialog to create a new abence request. In this dialog all required information can be entered. After that the user can either directly request the absence or just ...
1
vote
1answer
68 views

What is the technical name for the “Tap to translate” button from GoogleTranslate app?

When copying some text on Android, Google Translate displays a floating button on the side of the screen (top / right) that can be tapped to translate or just dragged up and down to not be obstructive....
1
vote
2answers
396 views

Can a floating action button be used for a filter functionality?

According to Google's Material Design Guidelines, would it be considered appropriate to have a filter functionality triggered by a floating action button? The guidelines suggest only to use a ...
3
votes
1answer
137 views

Can material design give a unique identity to my application?

Can material design be personalized in a way that gives identity to the app? what I know about MDC (Material Design Components, an acronym I've just known!) is that it provides us with a bunch of ...
0
votes
1answer
81 views

Toolbar at the bottom of texts/numbers busy screen

I have my app as the screen below. I need to place a toolbar with 2 buttons: one large button displaying the currently active list/deck of drugs (below it's written 'Pediatric Drugs' where he can ...
3
votes
1answer
62 views

Correct pattern to select while able to search

Situation: We have a list of items, which can be multi-selected. However, we can also have a search field which allows us to filter the list. Problem: Let's say I have a huge list of items. I ...
0
votes
2answers
69 views

How to show triple-state, double-action column via Material icons?

I have this boolean field that can be null too. So I have three states: null, true, false. Based on it, I have two actions: make true, make false Is there a good UI/UX way to combine all of them in ...
2
votes
3answers
1k views

Android Material Design: Should text field and button have same size?

I'm making a login view using material design guidelines, which makes me confused whether the text field should be and the login button must have the same size?
-1
votes
2answers
72 views

Too many cards in one list possible? [closed]

I want to setup an app with some cards. I want also to filter this cards. Do you think there is a limit of cards if I have the possibility to reach all cards fast via a e.g. timeline? So do you think ...
3
votes
1answer
234 views

Is it wrong to automatically switch between Grid and List view

At the moment, I have a Material based app where I automatically change between List view and Grid view depending on device's viewport size, should I do that? I already read here that they are ...
0
votes
1answer
75 views

Design for row of list of absences

I have to create a list of absences, for a mobile application in android, each row has the following data: Absence number (Example: N°1, N°2, N°3 ...) Date (Example: June 28, March 17, October 9 ...) ...
0
votes
4answers
248 views

Handling Dropdown conditional Dropdowns

I'm working on a material design web-app designed for a mobile/touch environment. Obviously I have tight space constrains and would like to know what is the best-practice for conditionally providing ...
1
vote
1answer
257 views

Can I implement search box in a prominent app bar, trying to follow Material Design?

I am designing an app with a custom app bar, which in the main screen is a prominent one, meaning it's wider than the usual one. I already have some custom features there, for example city filter. I ...
3
votes
1answer
2k views

Hamburger menu or back button on Android?

Should I display hamburger menu icon (in the place of the navigation icon on the top App bar) on every screen that comes directly from the navigation drawer on Android or should it be the back button? ...