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)
390
questions
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.
...
- 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 ...
- 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 ...
- 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?
- 31
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 ...
- 31
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?
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 ...
- 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 ...
- 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 ...
- 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 ...
- 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....
- 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 ...
- 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....
- 63
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 ...
- 101
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"...
- 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 ...
- 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 ...
- 191
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
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-...
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 ...
- 63
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 "...
- 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 ...
- 63
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 ...
- 63
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 ...
- 11
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 ...
- 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 ...
- 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 ...
- 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 ...
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 ...
- 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 ...
- 101
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 ...
- 101
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 ...
- 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 ...
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 ...
- 31
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 ...
- 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 ...
- 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, ...
- 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?
- 161
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 ...
- 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 ...
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 ...
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 ...
- 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 ...
- 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?
- 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 ...
- 153
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 ...
- 111
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 ...
- 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 ...
- 109
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?
- 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 ...
- 111