47
I was recently researching the use of Material Design in iOS apps and came across this UpLabs article which makes an interesting point:
Various elements both visual and underline mechanics could certainly be incorporated into iOS apps.
However, it is important to stay true to the operating systems nature. Forcing a user to adapt or take on new sets of ...
40
Yes. Just yes.
Though I do UX work, I am speaking as a user on this one. As a user, I very much want you to help me easily follow a row of data from end to end. I want to easily be able to see what lines up and what goes with what.
It is too easy for me to look at a column on one side of a row, then to look at what I think is the opposite side of the same ...
39
I've used Material Design quite a bit and have reasoned the following drawbacks:
1. Animations are cute but can be cognitively distracting
Material Design's extensive use of animated transitions really helps bring the interface to life and give it a vibrant personality, but animations can ultimately be counterproductive because the human brain is very ...
30
Material Design is based around materials in the world of print design. Two of these concepts that get to the your point is the (1) the surface you are interacting with and (2) paper.
In material design, your environment is a 3D space. The z-axis extends from the surface of the screen towards the user and there is no definition of a negative z-axis.
This ...
29
It's tempting to say that because we're not used to it, it must not be a good experience. I think we mean that change is necessarily a good experience... it's not comfortable, but the end result may actually be better than what we had before.
We are used to toolbars, but how often do we get lost in menus or confused by a row of buttons? The single floating ...
25
Just to add as to why the number 87% is used as the starting point.
It has been answered why they didn't want you to use true black and instead lowering the opacity to create shades of gray. So natuarally they would choose these values out of their "Gray" color palette.
EDIT: I see there's no references for why not to use true black, here's a UX.SE answer ...
24
This might be what you're looking for: http://www.materialpalette.com/
You initially pick two colors, and it gives you a palette of colors.
20
Why are the textboxes without boxes?
It is an interesting principal of material design and choice.
The reason Google went without the box was because it's analogical to writing on ruled paper. Material is all about having one constant "material" for your page so boxes would be constituted a different element and a different material.
Another reason is the ...
20
How you choose to mark fields as required is not a part of material design.
You've already noticed that some applications choose to use the validation error "This field is required" after the fact while others choose to do it another way.
Regardless of how you choose to indicate required fields be sure to give some sort of
immediate feedback to the user ...
20
Given your requirement:
Each status has it's own associated colour and would ideally be displayed in the list
Then we're not discussing if there should be a color or not, question is how to harmoniously display that color in a way compatible with Google Material Design?
Coloring the entire item is problematic:
It's not aesthetically pleasant.
It's ...
19
The good: Fitt's Law:
The bad:
The biggest flaw in Google's Material design resides in feedback when you press a button.
In the physical world a pressed button recedes into the background; in Google's Lollipop the opposite happens, when you press a button, it floats, which is contrary to what the user is accostumed to.
17
I'm not sure when this section was added, but currently, the specs do have a short section about required fields:
To indicate that a field is required, display an asterisk (*) next to the field. At the bottom of the form, include a note explaining that an asterisk indicates a required field.
17
No
As per MD Card guidelines:
Cards may contain a photo, text, and a link about a single subject.
They may display content containing elements of varying size, such as
photos with captions of variable length.
A card collection is a layout of cards on the same plane.
Also:
A card collection is coplanar, or a layout of cards on the same plane.
...
16
Just use the style is recommended on Material design | Components– Selection controls | Switch
16
I don't think it's a problem. There are many applications for iOS that use Material Design. Think of all the Google applications (Youtube, GMail, etc) iOS users use on a daily basis.
You might want to consider using Material Design as a source of inspiration. Make use of their behaviours or specific elements, but also use your own research and branding.
I'...
15
New in iOS 11 you can find the Floating Action Button within the Notes App. If Apple uses them, you could definitely use them too.
14
Material Design is not "Android design", it's Google's all encompassing design "template" for both mobile and web apps. Many Google web products use Material Design like Angular (https://angular.io/) or, you know, Material Design site itself (https://material.io/guidelines/). They even have a library made specially for the web called Material Design Lite ...
13
Contour Bias
Contour Bias
Contour bias is a tendency to favor contoured objects overs sharp angled or pointed objects. When we look at the natural world around us we see many contours and curves such as the surrounding environment around us, including our own appearances.
It's a natural process!
Material design uses a lot of rectangles with sharp ...
13
Don't compromise your UX for the sake of following material design. Material design is meant to compliment your UX, not dictate it. So don't follow it to the word. 1st decide on what's the best user experience and then decide on which and how much of googles material design guidelines you are going to use.
13
In my opinion, if the buttons are one over the other then try to adapt the shorter to have the wider's width. In your example it would be the green option, but giving less padding to the "Subscribe" button.
If the buttons are horizontal there is no need to give them the same width.
12
Here's how...
See this dropdown effect for an example of how the Material Design physics can work for a popover. A similar schematic is:
The opacity fade, triangular callout indicator, and growth origin (top or center) are all valid options.
Here's why
Material Design guidelines don't specify popovers, but the specification of material properties provide ...
12
As per the Material Design Guidelines,
Flat buttons are text-only buttons.
They may be used in dialogs, toolbars, or inline.
They do not lift but fill with color on press.
Further more
Flat buttons are printed on Material. They do not lift but fill with
color on press.
Use flat buttons in the following locations:
On toolbars In ...
12
There are two principles that are hugely important to remember here:
1. The quick adaptation principle
People adapt very quickly even to the most obscure conventions.
We were all used to be used to underlined blue links, but why underlined and why blue? Why not red with a subscript icon? It is completely arbitrary. Yet everyone got used to it only to ...
12
TL;DR: I consider the Floating Action Button (FAB) to be the most polarizing element of Material Design, and generally wouldn't recommend a floating action button for use in an iOS application.
The principle is still sound: provide a strong call-to-action element (CTA) to guide your users. Apple tends to favor the top-right interaction, but I consider the ...
12
Short answer: Use your second option, where each field has a neutral white color as the color is not classifing elements in the list.
Color should be used to give distinction with other elements from its context or to differentiate elements.
Think of the way links have color and not the surrounding text. For example (image source):
In the image above, an ...
12
If you like to keep the table clean, show only the edit icon on the hovered cell:
You can specify which cells are editable by showing the icon or not.
Keep text selectable:
And add a click handler on the edit icon itself:
I would recommend not using inline editing, since column widths can be small and not easy to edit. Use a pop-up/-over or modal or ...
12
The burger menu should be displayed on all of your top level destinations - the same screens that are listed in your navigation drawer.
When the user navigates to a deeper level, from one of these top level destinations, the burger menu will be replaced by either a back or close icon.
The back icon is typically used for view only screens, whereas the close ...
11
Oh, I'm sorry to give you this standard answer on UX.SE, but really it depends.
It depends on whether or not you're closing the page or moving back from the page. It depends on whether or not you're closing the product, because you don't need/want it or moving away from it.
Personally, a closing icon is related to delete and destroy, and that's not what ...
11
I think your observations are correct! Do check some standard interaction patterns of select-box and text-field
Based on your current layout, I will suggest you choose one of these:
OR
11
The material design guidelines have a section called Errors.
For your use case, it recommends:
If two or more fields have incompatible inputs:
In the text field, indicate a fix is needed. Add an error message below.
Display a message at the top of the form, or screen, summarizing the fixes needed and any additional explanation
This is what it looks like ...
Only top voted, non community-wiki answers of a minimum length are eligible