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
44 views

Why does Material 3 contains no color for success, while there is one for error?

Why does Material 3 contains no color for success, while there is one for error? Seems a bit asymmetric? Wonder if this is intentional, as in: "success is a normal flow, no further color ...
Giorgi Sh.'s user avatar
1 vote
1 answer
71 views

What should be the order of applied filters chips?

I'm following material guidelines and I need to apply filters to a table. The table header has the filter icon on the right side After the filter is applied, should the position of the "applied ...
rahul_sann's user avatar
2 votes
1 answer
176 views

UI: Why not negative elevations?

Since Material Design came to the surface, we "learned" to design according to 3D planes based on the sheets metaphor. This replaced flat design, which in turn replaced skeuomorphic design. ...
Devin's user avatar
  • 37.9k
1 vote
1 answer
118 views

Persistent Rich Tooltips

Material Design has rich tooltips which can also be persistent. As it's explained here, these tooltips: remain active even when leaving the target region can contain links only disappear once you ...
fury's user avatar
  • 145
1 vote
1 answer
108 views

Is this "Only" checkbox option a default MUI component?

I saw this option when I was using Google Flights. It's pretty handy if there's a long list of options and you only want to select one. Does anyone know if this is a default MUI component? I can't ...
J Bo's user avatar
  • 1,394
1 vote
2 answers
78 views

Material Design and punctuation

Material design says to skip periods for messages in dialogs which are only one sentence. Yet in their dialog examples they use a period in that circumstance. So, which is it?
user79042's user avatar
3 votes
1 answer
694 views

Does iOS have an equivalent to Material Design's 'ripple' effect when touching a surface?

I'm working on an app using Flutter that is being rolled out on both Android and iOS. Some iOS users have expressed confusion at the 'ripple' effect that appears on a surface when it is tapped or ...
mosh.jinton's user avatar
0 votes
1 answer
278 views

Minimum touch target for apps

It is stated in human interface guidelines and material design that the touch target should be 44x44 & 48x48 respectively. Many top apps don't follow; isn't this an accessibility issue?
Suhas Paunikar's user avatar
0 votes
2 answers
143 views

What UI elements do you use to display information in real time?

If some string like "Now executing cronjob...", "REST call made", "Authorization successful", "Cronjob complete", etc. need to be shown every 1-2 second, what ...
Sayaman's user avatar
  • 157
0 votes
2 answers
96 views

Does it make sense to spam the snackbar for information already available elsewhere?

Does it make sense to spam the snackbar for information already available elsewhere? Let's say you have a console dishing out 10-30 lines per seconds and you want to put some of the information on a ...
Sayaman's user avatar
  • 157
0 votes
2 answers
2k views

Refresh list in Material 3

I have an Android app that displays a list or grid of cards, depending on the screen size, that is loaded from the backend. I migrated it to the Material 3 spec recently. The app currently does ...
fobo66's user avatar
  • 101
0 votes
4 answers
226 views

Cross or left arrow to return to the previous page?

I am developing a phone app with Material UI (using Flutter). To return to the previous route ("cancel" the current route), when should I use Icon.close (cross): ...and when Icon....
porton's user avatar
  • 211
1 vote
2 answers
384 views

Rationale behind the Material Design (M3) color system of interaction states

According to the documentation here, interaction states (hover, focus, pressed etc) are represented by overlaying an additional state layer on top of the container: The state layer is an overlay with ...
Xinchao's user avatar
  • 111
0 votes
1 answer
106 views

Visually distinguish cards in a list

I made an LMS webapp which, in the main page, shows a list of courses. The page looks like this: The goal of the app, from a graphical interface standpoint, is to keep an elegant material design look....
Samuele B.'s user avatar
0 votes
2 answers
377 views

Better UX for filters in a page

I'm here to hask you what is the best UX for filters in a page with a table. In this video you can see a page with a table and some data, a full-text searchbar and a button with text "Filtri"...
Dennis's user avatar
  • 263
0 votes
1 answer
77 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 ...
Drise's user avatar
  • 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 ...
johannchopin's user avatar
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 ...
FrontDeer's user avatar
  • 173
1 vote
1 answer
69 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-...
Miguel de Sousa's user avatar
0 votes
1 answer
311 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 ...
Samuele B.'s user avatar
0 votes
1 answer
215 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 "...
Smolakian's user avatar
  • 101
2 votes
2 answers
517 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 ...
Samuele B.'s user avatar
1 vote
2 answers
59 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 ...
Samuele B.'s user avatar
1 vote
1 answer
374 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 ...
S. Sakamoto's user avatar
3 votes
2 answers
122 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 ...
busbina's user avatar
  • 133
0 votes
2 answers
1k 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 ...
KIRAN K J's user avatar
  • 101
0 votes
1 answer
1k 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 ...
Nuwan's user avatar
  • 27
1 vote
1 answer
324 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 ...
Kahaan Maniar's user avatar
3 votes
4 answers
4k 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 ...
Okaa-Pi's user avatar
  • 33
0 votes
1 answer
311 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 ...
Gal Grünfeld's user avatar
0 votes
1 answer
139 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 ...
Gal Grünfeld's user avatar
2 votes
1 answer
2k 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 ...
Lala's user avatar
  • 31
1 vote
1 answer
153 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 ...
Oliver Tworkowski's user avatar
3 votes
2 answers
128 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 ...
user3009365's user avatar
4 votes
4 answers
1k 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 ...
tommy99's user avatar
  • 45
2 votes
3 answers
412 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, ...
Jung's user avatar
  • 33
6 votes
3 answers
15k 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?
All Іѕ Vаиітy's user avatar
1 vote
2 answers
983 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 ...
Mar's user avatar
  • 369
0 votes
1 answer
578 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 ...
struensee's user avatar
0 votes
1 answer
933 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 ...
MountainTiger1234's user avatar
1 vote
2 answers
901 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 ...
Blk Dnm's user avatar
  • 31
0 votes
1 answer
234 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 ...
Rex's user avatar
  • 53
0 votes
2 answers
131 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?
zcb's user avatar
  • 1
5 votes
2 answers
717 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
1 vote
2 answers
129 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 ...
Tommaso Thea's user avatar
2 votes
2 answers
615 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 ...
Francis's user avatar
  • 123
0 votes
1 answer
69 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 ...
David Callanan's user avatar
1 vote
3 answers
733 views

Back to top button with other floating action button [closed]

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?
Dennis's user avatar
  • 263
0 votes
1 answer
248 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 ...
Jankers's user avatar
  • 111
3 votes
1 answer
505 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 ...
dmcleod's user avatar
  • 51

1
2 3 4 5
8