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
2
answers
155
views
How to indicate selectability in an information-focused list
My first question, let me know if I should edit!
I'm working on a list-map hybrid, where each item on the list can be selected, to show up on the map (like Yelp).
The list needs to give a fair ...
CommunityBot
- 1
0
votes
2
answers
220
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 ...
CommunityBot
- 1
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 ...
CommunityBot
- 1
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 ...
CommunityBot
- 1
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 ...
CommunityBot
- 1
0
votes
5
answers
601
views
Guidelines for Material Card in Android
If I were to follow elevated card(first one) like here, where should I place the expand more arrow? Also, is it okay to do the same card with image on the left?
Cards displayed are different brands ...
CommunityBot
- 1
5
votes
2
answers
858
views
Android TabStrip navigation alternative on iOS
I am in the process of porting my material design Android app into a native iOS app with Swift. The two apps are very similarly navigated, and share many design features (a mashup of iOS design and ...
CommunityBot
- 1
1
vote
3
answers
245
views
How to show pre-filtered list on a search results area
I am working an iOS app that manage employees requests,
I have a screen that shows requests, and a search field above it, I can search within my requests.
but, I can also send a push notification with ...
CommunityBot
- 1
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 ...
CommunityBot
- 1
0
votes
3
answers
725
views
Material Design the correct way to work with primary and secondary action in this case
Today I've got a question about the correct way to use material design in a "UX way" and in a particular case.
I'm working on a desktop interface with a sidebar on the left that control main focus ...
CommunityBot
- 1
2
votes
1
answer
152
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.
...
- 6,641
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 ...
CommunityBot
- 1
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 "...
CommunityBot
- 1
6
votes
5
answers
14k
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 ...
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?
- 11.4k
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 ...
- 37.3k
1
vote
3
answers
665
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?
CommunityBot
- 1
3
votes
1
answer
452
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 ...
- 37.3k
0
votes
1
answer
148
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?
- 3,245
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 ...
CommunityBot
- 1
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 ...
- 624
0
votes
2
answers
3k
views
Material Design does not distinguish between error and warnings. Why?
As per
Material Design - Errors pattern
there is only one color for displaying errors and warnings.
Their buttons have either Primary, Accent, Default or Warn color.
In this case Warn is Error. ...
- 2,776
0
votes
4
answers
176
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....
- 499
1
vote
1
answer
61
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-...
- 1,702
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....
- 14.2k
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 ...
- 129
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"...
- 1,246
1
vote
2
answers
780
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 ...
- 368
6
votes
5
answers
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... ...
14
votes
3
answers
27k
views
Is it a strong anti-pattern to use a Floating Action Button in an iOS app?
Floating Action Buttons - invented by the Google Material Design Team - are rather popular on Android. Apple's closest equivalent are perhaps an action icon at top-right or the bottom Tool Bar pattern ...
10
votes
5
answers
43k
views
Vertical and Horizontal three dots icon button usage
Despite the Material Design has great guideline documentation, I'm confused about vertical/horizontal dots icon for a Web App since for mobile, the vertical solution is a stablished pattern.
I found ...
- 2,776
6
votes
1
answer
10k
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. ...
- 1
0
votes
1
answer
74
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 ...
- 12.1k
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 ...
- 39
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 ...
- 26.7k
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 ...
- 18.3k
0
votes
2
answers
831
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 ...
- 1,178
1
vote
1
answer
193
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 "...
CommunityBot
- 1
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 ...
- 18.3k
16
votes
2
answers
13k
views
How to display a "Log in" error in Material Design?
Problem
I am trying to create a log in page that follows the material design guidelines, but I don't know how to handle when the user inputs the wrong email or password.
In the material design ...
- 132
6
votes
3
answers
21k
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 ...
- 161
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 ...
- 18.3k
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 ...
- 12.1k
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 ...
CommunityBot
- 1
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 ...
- 194
1
vote
1
answer
262
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 ...
- 37.3k
3
votes
2
answers
2k
views
Is it a bad practice to have a two line title in header?
I'm designing a banking application which is capable of money transfer and showing transactions of each account to the user.
Is it a bad practice to have a two line title in the header? The main title ...
- 11
19
votes
4
answers
22k
views
Editable table in material design
we're designing a web application in material design and we have an editable table there - something like this:
Any suggestion on how to indicate the editable fields, if not all columns are editable? ...
- 1