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
4
votes
2answers
2k views

Best way to switch views inside widget?

I am building a web application, and I am currently using Floating Action Buttons in the bottom right hand corner of certain predefined widgets to toggle between a main view and a settings view as ...
4
votes
2answers
191 views

Language login screen

I have a small application that I'm making for both Android and iOS. On the first screen users see, they have to fill in a code. This code gets checked with the server, and the server also returns the ...
4
votes
5answers
12k views

Material design: List item with two actions

in my Android app, I have a simple list which should provide add, edit and delete functionality. I have designed the layout like this: The edit/create dialog looks like this: What is the material ...
4
votes
2answers
1k 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 ...
4
votes
1answer
1k views

Best practice for linear or non-linear stepper in multistep forms

I am hammering out the guidelines for use of Material design's steppers in a system. The admin using this system can configure a form to some extent. The admin can not decide in which step of a multi ...
4
votes
2answers
2k views

Material Design for enterprise apps [closed]

I'm about to start a redesign project for an enterprise web application that's used in call centres, and we're planning to use Material Design for the project. If you have done (or are currently ...
4
votes
2answers
279 views

How to distinguish between a tab widget and a table using Material Design?

An example... Huh? How can there be stats for Republicans voting for the two Democrats? I see this in most all flat icon design. It takes me a few seconds of comparing the different elements to ...
4
votes
4answers
375 views

Is it always necessary that an expandable list should have an indication to show that that it is expandable?

Recently I've been designing a mockup for an android app (material designed) where I use a list to show number of entries. And the list is expandable. Is it always necessary to indicate to the end ...
4
votes
2answers
2k views

Material design ajax error messages

The material design specifications define the placement and look of error messages related to invalid input on forms as shown below. I don't see a specification for error messages that may occur ...
4
votes
2answers
740 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 ...
4
votes
1answer
180 views

'Open with' icon, is this symbol actually used for it? [closed]

Picking good icons is often a hard task and as much as possible I try to follow 'official' iconography. In the app I am currently working this is primarily the Material Design philosophy and when I ...
3
votes
6answers
420 views

Fade right side of the text of a material design like input

I'm trying to improve my UI so the user understands that there is more text than what he sees on the screen. I had a couple of ideas: Fade right side of the input Place 3 dots if the text is longer ...
3
votes
3answers
515 views

How to make cards distinguishable without using colour

Given a card based material design styled interface presenting cards representing people in a system, what visual techniques can be used to distinguish different states those cards may be in? We need ...
3
votes
1answer
674 views

What is an anti-pattern?

"Using checkboxes (or custom analogs) to initiate selection is an explicit anti-pattern for mobile." What does Google mean by anti-pattern? Source: http://www.google.com/design/spec/patterns/...
3
votes
1answer
157 views

Can material design give a unique identity to my application?

Can material design be personalized in a way that gives identity to the app? what I know about MDC (Material Design Components, an acronym I've just known!) is that it provides us with a bunch of ...
3
votes
3answers
3k views

Android Material Design: Should text field and button have same size?

I'm making a login view using material design guidelines, which makes me confused whether the text field should be and the login button must have the same size?
3
votes
1answer
472 views

Reducing Button Clutter and improving UX

This question follows on from some of my previous questions on this forum: header-footer-icon-usability capabilities-detrimental-to-usability With the help of the answers and suggestions I got here ...
3
votes
3answers
446 views

Global functionality placement on Material Design

(Disclaimer - I'm not a UX/UI specialist, but rather a fullstack dev that also need to cover for the UX aspect of an application framework. So apologies in advance for any faux pas.) Preamble We are ...
3
votes
4answers
1k views

Toolbar with tabs and edit button

I need help/opinion with following case. I have a typical Material Design screen with tabs like this: I would like to provide edit button that would open edit screen for the current tab. Would it ...
3
votes
3answers
913 views

The title in the app bar

What do you think about placing text labels (description) from a tab menu into an app bar? Does this comply with Google material design? And is it helpful from UX point of view?
3
votes
1answer
2k views

Should I use Material Design inside of an Android game?

I certainly know that I should apply Material Design for "standard" Android apps, but what about games? I think that anything that is not Material Design, looks bad and somewhat outdated. On the other ...
3
votes
3answers
433 views

Can I use tabs to organize content, if the content is halfway down the screen?

I'm designing an android app, using material design, where people can listen to and comment on audiobooks. When a user finishes a chapter, he or she unlocks the comments for that chapter. These ...
3
votes
1answer
2k views

What is stepper? Is it wizard?

I have a doubt what is stepper? There is confusion in term i.e being used or explained in iOS and Google Material design. Which is the right meaning of stepper? Is iOS or material design right or ...
3
votes
1answer
224 views

Status bar color of BBC confused with battery low

This morning I was reading this Then I thought for seconds my phone battery is down. But it was not the case. Well it is different from the red of battery saver. Many cannot figure it out. Is it ...
3
votes
1answer
732 views

Material design: drawing attention to a floating action button

I've a design which I need to create a first time user experiance on creating an application. The Floating Action Button needs to get highlighted on the very first time a user gets logged into the ...
3
votes
4answers
6k views

Are Nested Tabs in desktop view good to use?

As shown in the picture, I have a use case of using Nested Tabs. Is this a good experience for the user. But material design says not to use Nested Tabs. If so, is this applicable only for mobile? If ...
3
votes
4answers
258 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 ...
3
votes
1answer
1k views

Right-pointing carets in Android

I'm an android dev, trying to follow the awesome Android Design Guidelines. In one of them the doc tells me: Don't use right-pointing carets on line items A common pattern on other platforms is the ...
3
votes
3answers
4k views

Alternatives to Sub Tabs / 2 sets of tabs (Android)

I'm trying to follow Material Design as best as possible, and I think on one page of the guidelines it says not to use nested tabs. But I'm finding it pretty difficult to find an alternative. In my ...
3
votes
2answers
4k views

What are specifications for pagination dots for Android 5?

I have been searching about this and looking into the documentation, but failed. Is it forgotten by Google? Or it's hidden somewhere I didn't notice? Example:
3
votes
1answer
764 views

Material Design CSS specifications [closed]

Are there Google- or other reference CSS3 style sheets available for Material Design? Google's Material Design guidelines are written using Android layout units. The only Google-sanctioned CSS-based ...
3
votes
1answer
4k views

Should the header be the same color as the footer in Material Design?

Strictly speaking of Material Design, Google states that you should use hue shade 500 for large areas of color. I would guess the header is considered large area? Should the header and footer be the ...
3
votes
2answers
99 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 ...
3
votes
1answer
607 views

Is it wrong to automatically switch between Grid and List view

At the moment, I have a Material based app where I automatically change between List view and Grid view depending on device's viewport size, should I do that? I already read here that they are ...
3
votes
4answers
647 views

Do Jog Dials make for good UX?

This question follows on from my previous question. In one of my comments there I had mentioned that I was going to use a round slider instead of the linear one I had been using. Whilst this worked ...
3
votes
1answer
2k views

Is it mandatory create new Android apps in Material Design only?

Is there any difference between Google guidelines for Android app design and Google guidelines for Material Design? I think my app will not work best with Material Design. I know that Material Design ...
3
votes
2answers
212 views

Android App - How to indicate existence of unsynchronized data

I have an Android application where the users can create different kinds of content in different screens of the app. All content is synced to the server in a background thread. Normally this happens ...
3
votes
2answers
490 views

Why isn't it common to swipe between top-level views when we use a bottom navigation?

It’s a common pattern on Android that if you have a tabs, you can swipe between top-level views. Google introduced the bottom navigation a while ago, which we already know from iOS. How come it isn’t ...
3
votes
3answers
768 views

Improving the sensitivity of range sliders

The context here is a hybrid Android (v 4.4.x+) app. I have started with the code for the rather well written and documented noUISlider which I have modified to make it look more like a "Material" ...
3
votes
2answers
1k views

Android Material Design paradigm for hierarchical data

I need to display some hierarchical data in a side menu of an Android app. Sort of a tree, with nodes that can be dragged and dropped around. The entire tree has to be expanded from the start. I ...
3
votes
2answers
645 views

When I should hide a toolbar in an Android App?

I'm designing an app navigation flow. It has a login screen from which we can go to a "Forgot password" screen. Once we logged in we go to the "Main screen" there I've a toolbar with a gear item that ...
3
votes
1answer
328 views

How to make user aware of the secondary (right) navigation drawer?

I have a second navigation drawer on the right. But I have no special indication for it so the user doesn't get to be aware of its existence. I don't want to open it every time the user opens the ...
3
votes
1answer
2k views

Is it better to save changes onblur of an edited field or to provide the user with save and discard changes buttons?

In my application, I am providing a ticket form that the users can go back and edit. I had designed it so that they can change one to many fields without real-time saving by providing a save and ...
3
votes
2answers
1k views

Should a Floating Action Button (FAB) trigger an action sheet?

I'm designing an application and would like to use the floating button in a post behavior scenario in these steps: Floating button cta List of trigger ctas appear (file, photo, etc) User taps file ...
3
votes
2answers
678 views

How does one go about implementing a “guest view” for a navigation drawer in Material Design?

Could not find this in Google's guidelines. If one were to develop an app that allows guests to browse (say a simple RSS Feed), would you use the same navigation drawer as if the user were logged in (...
3
votes
2answers
945 views

Material design - how the action moded toolbar should look like

I was wondering, is there any official guideline from material design, on how a action moded toolbar should look like? For instance, should there be a highlighted line at the bottom of toolbar? Or, ...
3
votes
1answer
155 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 ...
3
votes
2answers
941 views

stepper wizard, optional step, skip and next button?

A complex form, split into 5 steps using the material design stepper, step 4 is optional. should this screen have a 'SKIP' button and a 'NEXT' button, or just a 'NEXT' button?
3
votes
1answer
72 views

Correct pattern to select while able to search

Situation: We have a list of items, which can be multi-selected. However, we can also have a search field which allows us to filter the list. Problem: Let's say I have a huge list of items. I ...
3
votes
2answers
209 views

How to declutter my row item / make it more functionally appealing?

I'm working on an Android app and, up until this point, have mostly focused on functionality. But now that most of the functions are implemented, I want to clean everything up and make it presentable. ...

1 2
3
4 5
8