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)
39
questions
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, ...
6
votes
5
answers
16k
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 ...
- 485
2
votes
1
answer
928
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 ...
- 716
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
5
votes
3
answers
4k
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 ...
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 ...
3
votes
1
answer
654
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 ...
- 485
2
votes
1
answer
660
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
...
- 21
1
vote
2
answers
826
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 ...
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
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
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
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
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
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
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 ...
- 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 ...
- 41.3k
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
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
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 ...
- 426
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... ...
- 163
6
votes
1
answer
11k
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. ...
- 1,189
5
votes
2
answers
3k
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 ...
- 225
5
votes
2
answers
13k
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
...
- 151
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 ...
- 205
4
votes
6
answers
8k
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 ...
user67695
4
votes
2
answers
879
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 ...
- 6,405
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" ...
- 485
3
votes
1
answer
177
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 ...
- 135
3
votes
3
answers
5k
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?
- 41
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:
- 131
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 ...
- 21
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 ...
- 23
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 ...
- 485
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 ...
- 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?
...
- 717
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 ...
- 717
0
votes
1
answer
369
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 ...
- 717