Material Design experience incosistent when interfacing input forms

Question

The past 6 months I've been slowly studying Google's Material Design guidelines. I've been involved in a number of hybrid apps during this time and have loved the concepts behind MD, it inherently opens your eyes to key user experience issues and then immediately offers alternatives that merge the 'physical' and 'magical' so distinctly.

I have however struggled with a specific area of user experience during this time, consistently. I find that I struggle to be satisfied with the results when designing and implementing user forms (mainly registration and login), I love the material design inputs when used in certain use cases, but for registration (large forms) and login (tiny forms) I tend to end up with an incredibly empty interface.

I understand that mobile apps aren't usually exposed to a lot of registration/login forms as it tends to be a 'login with social media and keep it that way' situation, but as I understand, material design isn't a mobile application

TLDR does anyone have any tips for designing MD (material design) based registration/login forms? I've done the compulsory google search and have found nothing helpful apart from links to the google login form (which lets be honest isn't using the standard MD elements, is this the answer?)

Answer 1

This is a common problem, not only with Material Design but also with broader responsive design.

In responsive layouts one cannot depend on screen sizes and scaling can only take you so far, so layouts tend to involve a lot of open space to allow for sizing tolerance.

The good news is, Material Design recognizes this issue and incorporates a set of design approaches to help fill the space. MD uses bold colors, drop shadows, grid layouts, and high-contrast modals which can help fill, break, or repurposes space for framing.

Here are approaches I have used for MD login forms:

• Modal pop-up - Semi-transparent background screen provides high contrast with the login dialog, so the open space becomes a frame.

• Centered form - See for example the GMail login form. Drop shadows can help the form pop from the background to de-emphasize the surrounding space. You can also use a colored background (for the window, not the form)...MD has a broad set of saturated colors to use.

• Drawer/slide-in login form - Similar to modal. The drawer allows you to effectively shrink the window into a column of arbitrary narrowness, which makes the form stand out and eliminates the background space.

Some other approaches which I am not a fan of:

• Slide-down login from navbar - Here, a slim login bar slides down from the nav bar. I don't think this comports well with MD.

• Non-modal or off-centered login popup - Also not very MD friendly.

Answer 2

My answer is to try and treat login/registration forms as a different type of input form, because it has a specialized purpose and the guideline is really trying to provide general guidelines to form design so it won't necessarily have examples for all different types of forms. The important thing is to identify and document which form design guidelines you are using/applying, and which design guidelines you have created or are customizing based on your requirements for login/registration.

Explanation:

I think the important thing to understand about Google Material Design guidelines is that they are in the end they are guidelines for you to consider for creating a 'Google-like' user experience. The truth is that in the end it may have some of the same issues as Apple or Microsoft UX guidelines in being either too prescriptive or not prescriptive enough.

A primary purpose of the MD guideline is to provide designers with a system or approach to designing experiences that may not necessarily be consistent, but have a similar look and feel across different mediums. It is ambitious because there are different things between the physical and digital platforms that require different treatment, but the guideline draws out common elements of design that are in common.

Having said all of this, there are things that you need to be mindful of when applying the guidelines:

1. Looking for examples can be misleading because there is always legacy or transition phases with implementing new design guidelines, so I think the important thing is to be able to identify the guidelines and rules that you are using to implement your design solution. And that is what you'll get from some of the answers provided to the question.
2. Knowing when to 'break' the rules is important because you may find that the guidelines won't cover all the different interactions and behaviours for your particular application. It is also important to identify where your design stems or strays from the guidelines so that other people picking up the design work won't be confused about how the design guidelines have been applied.
3. Try to separate the design framework separate from the development framework, so that you can cope with changes to the way you design as well as cope with changes to the technology solution.