10

There is no description for submit buttons in material design. The most closest by meaning are floating action buttons. The buttons are located in top part of screen, but I don't see any sense in this solution for the form. Because user fill the form up -> down, left -> right, and logical place for the button is down right corner.

We made mobile app with material button and usual button in down right corner: material-design-buttonenter image description here

Don't look at other elements or icons, look only at position of orange button.

We compare them on A/B test, there was only button position changing and second version (with down-right corner button) had won. But this version is a little bit ugly and now bottom of screen is overweighted.

What should we do with this button?

8

The Material Design documents are very well written, but one of the surprising omissions is the lack of examples for forms. That said, your issue is easily answered:

Submit buttons are the same as other buttons in material design

The choice between flat, raised, and floating styles for a submit button depends on the context of the form.

  • For example, if the form is inside a dialog, then a flat button is appropriate since that is the conventional practice.

  • Floating buttons should not be overused in Material Design. They are appropriate there is one very clear and salient action to highlight on screen. Form submit buttons are almost always related to and dependent on other onscreen elements (the form fields), so the use of a floating button to submit a form breaks the material relationship between the button and other form elements.

As a result, raised or flat buttons are more appropriate for most forms. I use flat submit buttons in dialogs, and raised submit buttons for normal forms, which I think is the most common practice.

Here are some examples....the left 2 are material themes from Google's Android Documentation. The right is from a devpen material design tutorial.

enter image description here

  • Thanks for extensive response. There is a problem with flat submit buttons, we don't have space for it on small screens like iPhone 4S. cropme.ru/s/f/3/a/6a592dd3.png Also we can't use scroll, all elements should be in the first screen or our CTR will be decreased dramatically. – Timrael Mar 10 '15 at 6:07
  • 2
    @Timrael I think you do have space on your form. I would recommend taking a second look at your UX priorities. It's awkward to have the submit button inline with the last line of the form...it's clear that you are trying to fit the button in there. At the same time, you have a large header, you're using large fonts onscreen, and labels above the inputs. So actually there are a lot of options to free up space if you need to. HTH. – tohster Mar 10 '15 at 6:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.