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
2 votes
1 answer
150 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.3k
1 vote
1 answer
80 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
93 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,325
1 vote
2 answers
70 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
441 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
141 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
1 answer
90 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
0 answers
39 views

What should a toolbox look like?

I am making a dashboard application that allows you to execute and debug cronjobs. I give the users the ability to drag and drop elements in an UI. I need to create a toolbox that contains 15 action ...
Sayaman's user avatar
  • 157
0 votes
2 answers
92 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
1k 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
172 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
  • 171
0 votes
2 answers
217 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
  • 101
0 votes
1 answer
96 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
0 answers
49 views

Delicately combine Material 3 Text-fields and buttons

How do I get a "pure" Material 3 login screen to look good. What I don't think looks good is the height on the Text-fields and buttons are not the same, and the filled button have more ...
Raymond Holmboe's user avatar
0 votes
2 answers
314 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
73 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
60 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
224 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
192 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
433 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
50 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
342 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
119 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
822 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
261 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
255 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
120 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
147 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
126 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
0 votes
0 answers
96 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 ...
1789's user avatar
  • 101
2 votes
3 answers
376 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
13k 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
830 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
507 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
858 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
777 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
215 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
128 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
594 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
125 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
1 vote
2 answers
572 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
  • 111
0 votes
1 answer
68 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
662 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
212 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

1
2 3 4 5
8