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
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, ...
General_Twyckenham's user avatar
6 votes
5 answers
14k views

What is better for UX - hiding or disabling irrelevant buttons

This question follows on from my last question here. Is there a commonly accepted wisdom on how to deal with buttons that are not always relevant. The two possible routes and the issues I see with ...
DroidOS's user avatar
  • 485
2 votes
1 answer
770 views

Is it a bad practice to use similar floating action buttons with different functionalities in different pages

According to Material Design Guidelines, Google states that on any page the primary action of the page can be promoted in the floating action button. But what if on different pages, we use similar ...
Sarah Akhavan's user avatar
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 ...
Jake Lin's user avatar
  • 233
5 votes
3 answers
3k views

Is it a good idea to use a Floating Action Button for non-actions?

Google Material Design guidelines recommend to use Floating Action Buttons primarily for a promoted action. However, recently there seems to be a rather solid emerging trend to use these buttons for ...
Romano Bardichevsky's user avatar
4 votes
1 answer
2k views

Best practice for linear or non-linear stepper in multistep forms

I am hammering out the guidelines for use of Material design's steppers in a system. The admin using this system can configure a form to some extent. The admin can not decide in which step of a multi ...
cathrine alvin's user avatar
3 votes
1 answer
621 views

Reducing Button Clutter and improving UX

This question follows on from some of my previous questions on this forum: header-footer-icon-usability capabilities-detrimental-to-usability With the help of the answers and suggestions I got here ...
DroidOS's user avatar
  • 485
2 votes
1 answer
642 views

Material Design - bottom navigation with upper tabs?

Prototyping a new dialer app based on Material's framework and style guide. Side navigation is not an option. Instead, I would like to use bottom navigation for 4 main pages/features. Recent Calls ...
Adi Ben Zion's user avatar
1 vote
2 answers
805 views

Use of a Dialog box on Material Design

I'm designing a web app but can't reveal its name and its main function so let's see how this could be explained. In this app there's a type of user that have the power to Add and Remove Team Members ...
Cristobal Lemoine's user avatar
46 votes
5 answers
17k 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 ...
tohster's user avatar
  • 41k
37 votes
7 answers
22k 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 ...
Keavon's user avatar
  • 1,704
32 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 ...
Sayse's user avatar
  • 433
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-...
fhucho's user avatar
  • 580
16 votes
2 answers
13k 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 ...
Sebastian S's user avatar
14 votes
3 answers
27k 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 ...
Goren Berdichevsky's user avatar
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?
Ronen Teva's user avatar
10 votes
5 answers
29k 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 ...
Rhys's user avatar
  • 355
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 ...
tohster's user avatar
  • 41k
7 votes
2 answers
3k views

Filter/Sorting best practice in Material Design?

I'm designing a web application using the Material Design spec. I need to allow users to filter the cards that appear on a tab. From what I understand of Material Design there are quite a few ...
Meli's user avatar
  • 406
7 votes
2 answers
25k 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 ?
bhantol's user avatar
  • 173
6 votes
5 answers
2k views

Inputs, does removing borders except the bottom one have any benefit?

Until material design, form fields always have a border all around. For me, it's a cultural habit. Users use these borders to identify the field in the page. Google itself, on Gmail, Google Search... ...
jeremieca's user avatar
  • 163
6 votes
1 answer
10k views

Tasks State Colors with Icons

I am currently trying to implement a task system that can have 5 "states". I've been playing with icons to differentiate between each, but also speculated that colors would be beneficial to include. ...
SNYDERHAUS's user avatar
  • 1,189
5 votes
2 answers
2k views

Material Design: using cards for homogeneous content instead of list

The material design guidelines suggest to use lists for homogeneous content and cards for mostly heterogeneous content. It also suggests that if the content is more than 3 lines long then use cards ...
gaurav5430's user avatar
5 votes
2 answers
4k views

Material Design Steppers - Lists inside steps

I am a bit struggling regarding a multistep process to create an item where the user has to fill out different data inside a mobile android application. Basic Data (e.g. a Location, a Date) Select ...
JDC's user avatar
  • 205
5 votes
2 answers
658 views

Using Material Design on iOS

I have an Android app developed by using Material Design principles. Currently, I am planning to release it on iOS too. I read several blogs/SO posts, which state that Apple is strict about Flat ...
Mangesh Ghotage's user avatar
5 votes
2 answers
12k views

Data tables in mobile/Tablet - material design

I have gone through this new design specifications regarding representing data as row-column (table). Table of data Should be able to scroll vertical and horizontal Should be able to edit inline ...
Deniz's user avatar
  • 151
4 votes
2 answers
868 views

Fitting a Huge Real Life Insurance Form in a 7 Inch Tablet

I'm consulting a Life Insurance company who plan to go mobile with their procedures on signing up for an Insurance product. This will be mobile on a 7" Tablet device, say Nexus 7 with 1920×1200 pixel ...
Swapnil Borkar's user avatar
4 votes
6 answers
7k views

Were we mistaken about rounded corners being better UX?

I am learning HTML and CSS, discovering that browsers implemented rounded corners and shadows using CSS... just about the time that UI went to "flat / sharp corners" without shadows, etc. It seems sad ...
user avatar
3 votes
3 answers
4k 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?
ajprs28's user avatar
  • 41
3 votes
1 answer
175 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 ...
mshwf's user avatar
  • 135
3 votes
3 answers
1k views

Improving the sensitivity of range sliders

The context here is a hybrid Android (v 4.4.x+) app. I have started with the code for the rather well written and documented noUISlider which I have modified to make it look more like a "Material" ...
DroidOS's user avatar
  • 485
3 votes
2 answers
4k views

What are specifications for pagination dots for Android 5?

I have been searching about this and looking into the documentation, but failed. Is it forgotten by Google? Or it's hidden somewhere I didn't notice? Example:
user3332315's user avatar
2 votes
1 answer
74 views

"Offers" list - capabilities that might be deterimental to usability

Consider the "offers" list shown below. There are two display issues here on which I would like some feedback You will notice that the header text for the second list item spills over into a new ...
DroidOS's user avatar
  • 485
2 votes
1 answer
2k views

Material Design List with a lot of information

Can anyone point to a good example of a material design list where each list item has a bunch of information? I am struggling to put together a block of information that is appealing. My specific ...
brianmtully's user avatar
2 votes
3 answers
2k views

Expand truncated table cell content on hover

I'm working on a project using Google's Material Design and am running into an issue where we need to truncate table cell content. There is a spec for truncating table headers and showing the full ...
Chris's user avatar
  • 21
2 votes
2 answers
1k views

Mobile - Sorting Items on one tab

I am currently working on an android application and I try to follow the material design specification. Now I am in a situation where I have 2 tabs with different content. I need to present sorting ...
JDC's user avatar
  • 205
1 vote
2 answers
3k 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? ...
user158's user avatar
  • 707
0 votes
2 answers
1k 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 ...
user158's user avatar
  • 707
0 votes
1 answer
332 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 a dark color earlier. This seems to be a trend. As I read in this ...
user158's user avatar
  • 707