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
1 answer
284 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
5 answers
622 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 ...
2 votes
2 answers
2k views

what is the small label marker element in material design called?

I am new to material design and UI. In the below image what is the highlighted part in red called ? Its called something but i don't know the exact name, Can anyone help me.
5 votes
2 answers
878 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 ...
2 votes
3 answers
256 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 ...
2 votes
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 ...
1 vote
1 answer
58 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 ...
0 votes
3 answers
750 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 ...
0 votes
1 answer
112 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 ...
2 votes
2 answers
156 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 ...
0 votes
2 answers
318 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 ...
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 ...
1 vote
1 answer
95 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 ...
2 votes
1 answer
167 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. ...
0 votes
1 answer
207 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 "...
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
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?
1 vote
1 answer
103 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 vote
3 answers
699 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?
3 votes
1 answer
619 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 ...
0 votes
1 answer
213 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
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 ...
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 ...
0 votes
2 answers
94 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 ...
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. ...
0 votes
4 answers
207 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....
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-...
0 votes
1 answer
102 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....
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 ...
0 votes
2 answers
358 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 vote
2 answers
833 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 ...
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
44k 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 ...
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. ...
0 votes
1 answer
76 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 ...
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 ...
0 votes
1 answer
285 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
2 answers
942 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 vote
1 answer
194 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 "...
2 votes
2 answers
470 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 ...
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 ...
6 votes
3 answers
22k 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 ...
1 vote
1 answer
364 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
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 ...
2 votes
2 answers
598 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 ...
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 ...
1 vote
1 answer
306 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
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 ...

1
2 3 4 5
8