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
0 answers
12 views

How to match/reconcile Material recommendations for the TextField with the actual practices of ERP forms - narrower and without top label?

From the one side there are Material recommendations/implementations for the TextField https://material.io/components/text-fields#anatomy (and https://m3.material.io/components/text-fields/overview is ...
  • 101
0 votes
1 answer
59 views

Why don't Wifi router UI's use confirmation password boxes?

Consider the scenario of trying to update the Wifi password for a router. Pulling up two sources I have access to, both OpenWRT and Google's Home/Wifi app only have a single input box for changing the ...
  • 103
9 votes
6 answers
3k views

Why is there no "closing sidebar button" in the mobile world

When I'm using a google product, I'm always wondering why there is no "closing sidebar button". For example in gmail I have to swipe the sidebar or click outside it's area to close it. More ...
16 votes
3 answers
3k views

Does Material Design 3 recommend an incorrect icon style?

I was looking at the Material Design 3 Icon design principles and they have an example that seems like bad UX to me. I'm sure I'm wrong but I'd like to know if (and how) the "Do" is better ...
  • 173
1 vote
0 answers
28 views

pull-to-refresh gesture giving a "everything is up to date" feedback

There's a related question here from June 2014. Notice that Material Design was presented to public also at June 2014. I've been looking the mainstream mobile apps behavior when the user makes a pull-...
0 votes
1 answer
81 views

Actions as icons on card

I'm looking for a way to properly display actions on my application's card without cluttering the interface too much, while still correctly emphasizing them. My application allows teachers of a school ...
0 votes
1 answer
68 views

Material Design Best Practice: Should a dialog "Accept" button only get enabled upon changes to a mutable inner state

As far as UX goes, particularly when working within the material design specifications for a Windows app, if an accept/cancel dialog is presented to the user that is intended to mutate some "...
  • 101
2 votes
2 answers
174 views

How to avoid the use of nested cards

I am developing a school web app and trying to follow material design guidelines. There's a functionality that allows teacher to create homework and in-class test models, wherein they can input a list ...
1 vote
2 answers
39 views

Signify that some input controls map to private information

I'm developing an app meant to be used by a school; user personas are teachers and students. Teachers can add exercises to the app database through an editor. Some of the fields of an exercise are ...
0 votes
0 answers
90 views

Navigation drawer, menu icon changed to Up arrow

I have found a desktop app with a dismissible navigation drawer and secondary levels of hierarchy that require using an up arrow for navigation. As you know he burger menu should be displayed on all ...
  • 41
1 vote
1 answer
201 views

Form with multiple rows of selectable options displayed on material UI cards, need help with adjusting the design

I have a form that has around 3 rows with selectable cards (only about 3 to 4 options each row). We do not have a UI/UX designer and I want to adjust the UI design but do not have a good idea about ...
3 votes
2 answers
98 views

How to show that a form has been dirtied (edited) using a Material design?

I have a vertical list of expansion panels. Each panel has a form under it. I would like to know the best style for showing that the form has been dirtied (edited) on the expansion panel title. The ...
  • 133
0 votes
2 answers
295 views

Which is the best approach for key value pair representation in mobile material ui

I am having limitted data for a page as given below Key Value First name John Last name Doe Phone +9099999999 City Chicago I want to represent the above data in an Android view. I tried to avoid ...
  • 101
0 votes
1 answer
275 views

Which option is better for read only mode?

I have an Angular application where I have used mat-form fields (Material components) to build the forms. Here I am having a requirement to implement a read only mode. I hope disabling all mat form ...
  • 23
1 vote
1 answer
144 views

What are the specs for a top bar in a web application (1440px) according to Material Design?

I'm new to UX design. As a fun project, I'm designing a calendar web application while referring to Material Design. I can't seem to find anything about the top bar specs for web apps on the Material ...
3 votes
4 answers
1k views

Make it clear that a card is clickable

I am currently working on a Mobile Application, mainly using Material Design, with some client-specific adaptation. On our project, we display a list of cards, each card having a varying number of ...
  • 33
0 votes
1 answer
120 views

Material Design | Dialoge from floating action button - how to do it? Is it even a good idea?

I'm designing a dark-mode-first desktop website for an online media organization. One of the key characteristics of the organiation is its community, and how open, friendly, inviting and communical it ...
0 votes
1 answer
85 views

Material Design | Cards - Rich Media - Above Primary Title VS. Below Primary Title for a Card Grid?

I'm designing a website under Material Design guidelines for an online media organization. I'm designing right now a card grid where each card will include a rich media component. The page the grid ...
1 vote
1 answer
776 views

Is stepper component obsolete from a UX perspective?

I am implementing a stepper with Material-UI something that seems to be a local navigation system (different steps show complete detail views, tables with related entities, other views for related ...
  • 21
1 vote
1 answer
88 views

Best layout/design for profile CRUD actions suggestions

I am currently working on a university project on an android app, that communicates with a device via Bluetooth and uploads profiles to it. So in the app I have a UI that provides different CRUD ...
3 votes
2 answers
112 views

Inconsistency with a UI framework that changes its visual design - when and how to move away from it in the Enterprise?

I design internal web tools for a company, and we use Vue and Vuetify on the front-end. I use a material design plugin with Sketch and have created our own beginnings of a design system/style guide ...
4 votes
4 answers
889 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 ...
  • 45
0 votes
0 answers
91 views

Designing android apps: Material design and apps with own character

I'm new to mobile app development. I came across material design and its guidelines even though I just scratched the surface. I basically am curious how strict the guidelines have to be followed to be ...
  • 1
2 votes
3 answers
242 views

Should snackbars cover buttons?

I'm designing an app that requires CTAs at the bottom of the screen for most of the flows. This, I have found, presents a challenge when trying to incorporate Material Design snackbars. For example, ...
  • 33
3 votes
3 answers
6k views

App Navigation: Bottom Navigation Bar vs Bottom App Bar?

Bottom navigation Bottom App Bar These are the two options when thinking about the bottom navigation for an Android App. What are the use cases for both? When should one be used over the other?
1 vote
2 answers
285 views

Using both bottom navigation and tabs for an android app [duplicate]

I was told it's a bad practice to have both bottom navigation and tabs in the same screen, but I'm not finding any information about why, and what can I use instead of tab bars in Material Design. The ...
  • 369
0 votes
1 answer
295 views

UX solutions for data tables and alignment on large screens

I see a lot of excellent advice here regarding how to build mobile-responsive data tables. However, when it comes to large viewports, I'm not finding much. In general, I'm lost about what could be the ...
0 votes
1 answer
611 views

Confusion on Material Design hover and focus states combination

Material Design guideline says this and it's really confusing me: Only one state layer is applied at a time. For example, if an element is first focused and then hovered, the hover state layer will ...
1 vote
1 answer
487 views

Is UI Chips for all single choice input a good idea?

I'm working on an iPhone/iPad app that uses a lot of forms and we are currently using several different components for input where the user have to do a single choice from a defined list of items. For ...
  • 21
0 votes
1 answer
143 views

Android App Design for a Data Table File Select

I am a new to designing for Android apps. I have been looking over material design components and trying to follow a few patterns. This is pertaining to a section of the mobile application which ...
  • 53
0 votes
2 answers
119 views

How would you define visual continuity in material design?

I was looking over material.io and it often mentions continuity within different topics. Though it doesn't give a single definition. How would you define visual continuity in a few lines?
  • 1
4 votes
2 answers
327 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 ...
1 vote
2 answers
107 views

Extended FAB would get in the way of a listview

Right now my Flutter app has two pages: the app's home (image 1) and the leaderboard (image 2). The home page has a BottomAppBar with two buttons plus an extended FAB docked to it (the one with mock ...
1 vote
2 answers
412 views

Android FAB with progress indicator

Is a good idea to put (infinite) progress indicator into a Floating Action Button (FAB)? I am dealing with a situation where there is a bottom navigation panel with inset FAB and there is no toolbar ...
  • 111
0 votes
1 answer
64 views

Where are these material buttons defined? [closed]

The following is said here in relation to Material Design buttons: 1. Text button (low emphasis) - Text buttons are typically used for less important actions. 2. Outlined Button (medium ...
1 vote
3 answers
370 views

Back to top button with other floating action button

I have a long page with a detail of an event. In the right corner of this page is present a floating action button to enter editing mode. Where I can place a back to top button?
  • 121
0 votes
1 answer
106 views

Bottom Navigation with only 2 destinations

According to the Material Design Guidelines the usage for Bottom Navigation recommends three to five destinations (https://material.io/components/bottom-navigation/#usage) Was just wondering what ...
  • 111
3 votes
1 answer
290 views

Mobile card carousel navigation

Background We are currently using a standard mobile pattern to showcase 3 cards where users can compare different plans. Problem The cards are very text heavy and contain alot of content below the ...
  • 41
2 votes
1 answer
83 views

Material design edge-to-edge chips field error display

The material design spec for text and chip fields says that errors should be displayed below the field In the case of edge-to-edge chips fields (like those at the top of the chips page: https://...
0 votes
1 answer
461 views

Card with horizontal scrollable content

I wonder if placing horizontal content inside a Card (like an image list in the Reply material spp) is breaking material design guidance?
  • 101
1 vote
3 answers
392 views

Material Design card with a lot of information

This is very much related to Material Design List with a lot of information The previous question and answer does not cover how to layout the information in a material card. Let's assume I have some ...
4 votes
4 answers
527 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
7 answers
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 ...
  • 6,746
1 vote
1 answer
64 views

Appbar Search Context

I have an PWA in development that is focused around the material design ideologies and style, although this question is likely still applicable to other design schemes as well. Essentially I have a ...
  • 13
0 votes
2 answers
714 views

Material Design for web: Buttons with labels or icon buttons?

I've been reading about the "text vs icon" debate for some while already. Most of the articles and questions here are dated back to 2010-2016, so I wonder if they still apply for material Design for ...
  • 103
1 vote
1 answer
191 views

508 compliance question

For those with knowledge on Material Design and 508 compliance - are there any issues with using an "outlined" text field vs the filled" text field? We're thinking of using the "...
0 votes
1 answer
133 views

A doubt whether Soft UI meets the accessibility criteria [closed]

I have made two prototype versions of a button type element one is a mixture of material design and soft UI and other is pure soft UI can you help me in deciding which one is better in terms of ...
1 vote
1 answer
1k 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
1 answer
625 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
1 answer
59 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 ...

1
2 3 4 5
8