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
6
votes
2answers
16k 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 ?
6
votes
2answers
1k views

Old Material Guidelines Website [closed]

The new material guidlines website is weird. It has like generic rules but applied to weird system like "crane system" or "shine system". It doesn't show the generic rules applied as base. By show I ...
6
votes
4answers
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... ...
6
votes
4answers
7k views

Does Android app need back button?

Do I always have to put "back" button in the top left corner of the app? Following the quote: Sometimes the back button is on the left, sometimes it’s not. They may be physical buttons, ...
6
votes
3answers
16k views

Material Dialog header with background color

I'm currently working on visual design for web application which use Angular 2/ Material design. In there, I have a doubt regarding a MD dialog header design, does it need to be with background colour ...
6
votes
2answers
19k views

Material Design - Persistent search, with navigation drawer

Is this within the guidelines or do you at least think it's an acceptable practice? I'd like to use a persistent search bar, but my app necessitates a navigation drawer. I feel like it might be a ...
6
votes
1answer
7k 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. ...
6
votes
1answer
2k 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 ...
6
votes
2answers
667 views

Redacting and combining ID cards (college ID, passport, license, 4 H club)

I need a UI that will encourage privacy, and allow a user to selectively disclose information on a need-to-know basis, in real life and online. This can be ANY information, from a catalog of sorts ...
6
votes
2answers
2k 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 ...
6
votes
2answers
119 views

Processing widget in material

I am currently designing an android mobile application and trying to stick to the google material design guidelines as much as possible. But the guidelines seem to be not that clear when it comes to ...
6
votes
1answer
1k views

Android tab tap to top

I was wondering whether it is a habit of scrolling to the top of the list when a tab was tapped. I looked into the Android design guidelines and I couldn't find any information about this. However ...
6
votes
0answers
3k views

Does material design form fields provide good UX? [closed]

We recently changed our website design to use Google's Material Design. Quite a good number of long time clients had problems with the new forms layout. Problems identified by us; Presented with a ...
5
votes
3answers
1k views

Two icons for one input field

I have the following puzzle. There is the main icon for the field and icons for specific item in drop-down menu. I depict them in this way: Are there any examples of such ui? What could you advise me ...
5
votes
3answers
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 ...
5
votes
1answer
3k 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? ...
5
votes
5answers
3k views

How to indicate a default button in Material Design

I'm creating a Windows desktop application with Material Design (using Material Design in XAML Toolkit), and I'm wondering how to indicate that a specific button is the default button (i.e. will be ...
5
votes
3answers
12k views

Correct “Select all” pattern

I'm developing a material design based desktop app where I encountered some UX problem and can't decide how to implement "Select all" capability. Situation: I have the right side panel with ...
5
votes
3answers
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 ...
5
votes
3answers
3k views

Why is pagination not covered by Material Design specs?

Why is pagination (outside the data table context) not covered by Material Design specs? Is this Google's way of telling us that "traditional" pagination is a bad idea, and maybe, infinite scroll is ...
5
votes
3answers
7k 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 ...
5
votes
2answers
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 ...
5
votes
2answers
629 views

Comparing/merging two records using Material Design

Problem: We are working on a medical scheduling application. A common problem are duplicated patient records, stemming from legacy data or from careless inputting under pressure, without consulting ...
5
votes
2answers
2k views

What is the best position for Settings in bottom navigation view activity?

According to Material Design guidelines, there are two main places for Settings in an Android application: Navigation Drawer (if present) Upper right corner of the toolbar Now my problem is that I ...
5
votes
2answers
2k views

Google material steppers indicate progress, is changing the headings of each step bad?

I have a complex process to step through and the nature of each step may change dependent upon the user's input into a preceding step. I am therefore tempted to change the titles of subsequent steps. ...
5
votes
2answers
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 ...
5
votes
3answers
800 views

Persistent bottom sheets in material design

I'm designing an application with a bottom navigation. In one of the views the user may click on a floating action button which opens a page containing a form to fill; and this form page I'm ...
5
votes
1answer
169 views

What to implement for fixed (or something like that) navigation without the header if I have 1 up to 3 links?

I have a following web app (important parts translated manually, it's in Russian originally): How can I decompose or remove the top bar navigation? The problem is in the following: Some of ...
4
votes
2answers
2k views

How to represent a switch “tabbed” state in Material Design?

Trying to determine a way to represent a "tabbed" state on a switch that looks like this: Under the hood, it is just a checkbox that the user can tab-over and press enter to check/uncheck the box. ...
4
votes
6answers
6k 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 ...
4
votes
2answers
819 views

What is the relationship between Material.io/icons/ and Materialdesignicons.com?

The first seems to be entirely owned by Google. The first only has about 900 icons, but the second seems to have about 2100. Only the second has social network icons like Twitter/Facebook. They are ...
4
votes
2answers
1k views

Material design - swipe to refresh

Following the Material design guidelines for swipe to refresh pattern, should the spinner come out from behind the header bar or is it fine if it appears from just below the header bar?
4
votes
7answers
2k views

Is a bottom sheet dialog “unfitting” for navigation?

Edit: I posted an answer below containing various attempts based on the ideas provided here. I am developing an application with a somewhat special main screen, from where the app is divided into two ...
4
votes
4answers
5k views

Help Identifying “Up Left Arrow” Android / Material Design Icon & Usage

Could someone please tell me the name of this "up left arrow" icon used in Google / Chrome mobile search bar list? (Icon highlighted in image) I looked around but couldn't find any info. Also, does ...
4
votes
2answers
816 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 ...
4
votes
4answers
387 views

How should a disabled-but-giving-feedback button look like?

Similarly to the author of this question, I was thinking about replacing a disabled button by one giving a feedback why the action is not allowed. That's not subject of my question as in my case, I'm ...
4
votes
2answers
623 views

material design: secondary toolbar elevation

the guidelines for toolbar say: Toolbars appear a step above the content they affect. It also says that the toolbar can share seam with the content (unless scrolled), in the waterfall variant. ...
4
votes
2answers
9k views

Yes/No button placement on confirmation dialog boxes

I have seen various takes on the yes/no button placement on dialog boxes or confirmation messages over the years. For a long time, it seemed like I was almost always witnessing the "Yes" option being ...
4
votes
2answers
11k 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 ...
4
votes
2answers
3k views

Alternatives to tabs when displaying list and map (appbar issues when scrolling in Material Design)

In an app I'm designing there is a list that must also be displayed as a map. In this thread people already discussed the issue of whether or not display that kind of content as tabs: Choosing ...
4
votes
2answers
173 views

Ideas for placing tab-specific actions

I've got the following tabbed interface Each tab is a scrollable list of items that can be marked as checked or not. You can click on the blue button on the top right to add a new item to the ...
4
votes
2answers
4k views

Input info tooltip in material design

Where do you accommodate the field explanation for the input element when following the material design input design. The problem I'm encountering is whether to show the tooltip icon only when the ...
4
votes
3answers
3k views

Form Field Shape & Usability/Conversion Rates - Boxes vs Material Design Lines

I was wondering if there has been any usability research on the shape of form fields. I'm mainly interested if using the line form field popularized in material design introduces any usability issues. ...
4
votes
1answer
2k views

Material design's colors: primary/accent vs green/red

We have a big enterprise app to manage a lot of business data. We were using bootstrap and now are changing the design according to Google's Material Design guidelines. The guidelines offer to use ...
4
votes
2answers
766 views

In Android material design, how can I make a label looks “clickable”?

Currently, I have the following legacy holo app. In navigation drawer, please note that on the right NEW icon. When user clicks on the icon, they can either add new Watchlist, or new Portfolio. So ...
4
votes
2answers
164 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 ...
4
votes
2answers
229 views

Material design guideline/concept issue?

On the page https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-behavior there are the following guidelines for drawer look&feel (here a snapshot with my comments/...
4
votes
1answer
339 views

Material Design website unfaithful to material design

Google's material design website has been designed by taking into account material design guidelines. However, on this page, when a link is clicked on the bottom navigation bar to move to the next or ...
4
votes
4answers
707 views

Material design or completely custom look? [closed]

I'm making an app and I'm not sure whether to follow Google's material design or stick to a completely custom look and feel. I can find pros and cons in each approach: Material design Custom Pros ...
4
votes
1answer
4k views

Are multiple FABs allowed in a single-page in android?

I've recently used floating-action-button (FAB) in each list-item (5 to 15 items vertically) because another list-view is to be inflated over that list-view and then only the FABs are visible for the ...

1
2
3 4 5
8