Maxing Mendix Forms UX with Material UI
Merging Atlas and Material UI into a smooth and modern form experience.
If you have ever built a form with Mendix, then you will probably know that the user experience (UX) can be challenging to get just right. Over the years, I have met various product owners (POs) who faced issues with Atlas UI: one wanted the validation messages to include a red cross❌, the next wanted a green check on a valid field ✅, while yet another wanted animated field labels when a user entered a form.
In reality, they were probably all referring to a very well-known standard known as Material UI, and with some smart thinking, we can easily get the same result from Mendix and Atlas UI.
This article builds on top of the Expert Validations article, which explained how to build robust and maintainable enterprise-reusable attribute validation, and on top of the Tabbable Field-by-Field Nanoflow Validations article, which elaborated on getting the UX of forms right by making use of nano- and microflow validations using attribute state tracking; likewise, it’s possible to set conditional classes.
This third and final article will expand on attribute state tracking to give users that modern Material UI (MUI) user experience that is so well-known throughout the IT biz. It will also show how to use SCSS @mixin and @include to minimize your stylesheets. Finally, Jason Teunissen adds essential considerations about whether copying UX (e.g. from MUI) is smart or not, and how to make sure the UX matches the user target group of your app. The result, I hope, will be that your users won’t ever have to look like the one below again while filling out forms.
What is Material UI?
Material UI is a modern and snappy, open-source, React-based widget toolkit, based upon Material Design by Google. It has become well-known throughout the world, because it is used by companies such as Netflix, Amazon, and Spotify, among others; no wonder the POs mentioned earlier are referencing the system. It contains over 40 building blocks, including buttons, tables, input fields, alerts, and tooltips.
The MUI text field is the one I am going to recreate in a Mendix project; it has three types: Outlined, Standard, and Filled.
If you click around on this page, one of the beautiful features is that the labels will move as the user enters fields, also called floating labels. Moreover, an active field gets to have an outline that helps the user along in the journey. Finally, validation messages look sleek and clear, as can be observed here:
Using attribute state tracking + conditional styling
In order to be able to get that MUI experience in Mendix, conditional styling classes need to be added to the input fields. In this previous article, I explained attribute state tracking: it worked with three possible ValTracker states. However, in order to get the proper MUI experience, four states are needed to map to four CSS classes:
This means that in the VAL_User_NP flow, different expressions are needed as well.
The final model change is that the right conditional classes have to be set on the fields themselves. If this has gone a bit too quickly, or if you’d like to learn how to apply these classes, please read the previous article; it will not be repeated here for the sake of foregoing repetition.
Pseudoclasses
Let’s start styling. One of the big challenges here is that pseudoclasses: hover, for hovering outlines, and: active and: focus-within are needed in order to give a highlight when a field is used; since both the label and the input need styling, and since both are children of a .form-group, the above-mentioned classes for each state are required.
As you can see in the left-most outlined style when the cursor is inside the field, the label moves up, and it becomes blue. The border also becomes blue, and it gets a 2px width. However, this is only the case when a field is .untouched or .valid. When it is .empty-invalid, the label and border colors are red and the label is inside the field unless it has the: active or: focus-within pseudoclass, in which case the label floats to the top. When it is .filled-invalid, the label should always be at the top, but the colors should be red, and with the: active and: focus-within pseudoclasses, the border should be 2px instead of 1px. It is clear that there will be a few repeating bits of SCSS code. Luckily, there is a solution.
Using @mixin and @include
One of the ways in which it is possible to repeat bits of styling is by using mixins. A @mixin is a bit of code that can be included in any SCSS class. For example, if we want to create a code snippet that smoothly moves the label to the top, then we create a @mixin move-label-top that we can call each time we need it, using the key @include. For the sake of brevity, I am only showing an excerpt of the actual styling file, but what is clear, is that we can now focus on the differentiating aspect, in this case (background-) color, instead of having to find a specific line of code in a haystack.
@mixin move-label-top {
position: absolute;
top: 0%;
transform: translateY(-50%);
z-index: 99; //keep under 100, as Mx overlay modals have z-index 100.
background-color: $white;
font-size: smaller;
padding-left: 3px;
padding-right: 3px;
}
//styling for Outlined MUI style.
.mui .Outlined{
.form-group {
&.empty-invalid:active label,
&.empty-invalid:focus-within label {
@include move-label-top(); //first use
background-color: $white;
}
&.filled-invalid label {
@include move-label-top(); //second use
color: $error-color;
}
&.valid label {
@include move-label-top(); //third use
color: $color-grey-text;
}
}
}Finally, everything is in place, and now the proper MUI experience can be had right from within Mendix. The end result can be downloaded for template use, and it can be tested right here. If you inspect the code, you will find that the basic styling for a form group for all three MUI styles is available, which can be toggled by using the blue button on the right. To get started, just click on the MUI button. It will look something like this:
Why is it difficult to get validations and UX right?
In order to understand this a bit better, I asked UX Expert and Mendix MVP Jason Teunisen:
I believe that the difficulty in creating a good experience lies in what managers perceive as “a good experience”. Most of our day-to-day Mendix applications solve a niche business problem. This means that function comes before experience, generally leading to a very clean and basic interface.
Moreover, there is a misperception that a clean and basic interface brings an intuitive UX; every user who has ever experienced bad UX knows the value of good UX. Sometimes this becomes even more apparent when comparing your Mendix app with the those of companies that invest millions of dollars into UX research, such as Google, or Netflix. What works for these companies may not work for your Mendix app, especially if you are not building a business-to-client (B2C) application: every user target group has its own UX requirements.
A good example is the floating label in the MUI input fields, as has been investigated in this article by the NN Group: these work really well on mobile devices with limited screen size (meaning consumers), but less so on large forms on desktop screen sizes (e.g. office workers). Good UX is not how the app looks or feels: it is the ease with which users are able to achieve their goals.
Is attribute state tracking worth it?
Setting up these nanoflow, /attribute-state-tracked validations requires quite some extra effort to set up in Mendix. I asked Jason whether he thinks it is worth it or not:
I think this is one of the hardest decisions; managers often feel that UX is a subjective opinion, when it is actually a science. I think the core of the issue touches on what is known as the Appeal to accomplishment falacy: why would you spend resources on researching your users’ needs, when you can replicate million-dollar-B2C-custom-built-and-researched UX patterns?
These big businesses have invested these millions in order to understand their own users; your average Mendix application user may have similar needs, but they will likely also differ. Therefore, copying their UX may not directly lead to great UX in your app. Adding these MUI styles might be beneficial in certain projects, while in others it will mean extra work and maintenance that could be spent on solving other important issues. I would recommend having this discussion with the UX designer and product owner.
Which brings us to Mendix, everyone’s favourite low-code rapid development tool. Mendix is often compared to LEGO: just like LEGO, Mendix can sometimes be a bit square or rough around the edges, but this is the tradeoff for the speed of development it provides. I usually discuss these rough edges with the product owner, and offer the possibility of Usability Research. This is the best way to verify if the UX is good, horrible, or somewhere in the middle, as long as you do it right.
Regardless, I think the patterns outlined by Wouter in these three articles are extremely handy. They lead the way in how to make validations maintainable in Mendix, and at least give us developers the option to give that MUI-like experience in a maintainable fashion, and this I think is fantastic.
Concluding
In all, this article shows it is very much possible to deliver maintainable and snappy forms with an MUI look and feel, but in order to get there, attribute state tracking and conditional classes are necessary. Adding ValTracker attributes is an investment that may return a superior UX to some user groups, but maybe not to all. As a result, whenever you are building a B2B or B2C app, I feel that this validation pattern deserves to be discussed as a potential avenue with the product owner at least, and better yet, investigated with Usability Research: if it makes the users happy, then it may prove an invaluable asset, which is now possible to implement in any of your Mendix applications, and which can be maintained in a single enterprise validation module.
This article was the conclusion in the series about validations, and hopefully, you will have managed to bring your own validations to the next level. If you did, or if you have an idea or suggestion, please comment below and share your experiences.
#About: Wouter Penris
Wouter is a Mendix Expert, Mendix MVP, and Software Engineer at Ordina and has a background in education (English & Music) and in music (Jazz Vocals & piano); a multi-potentialite. Whereas a teacher he spent years perfecting the art of instructing his students as simply and understandably as possible, he now immensely enjoys using this same skill to build high-tech products with an intuitive and easily-understandable UX. He is a highly-creative problem solver and blends research, technology, and aesthetics into actual business value and advice.
#About: Jason Teunissen
Jason is a UX Expert, Mendix MVP, and CEO of Lowcode NZ Ltd.
Jason has an unquenchable thirst to create meaningful impact and evangelize UX within corporate landscapes. Helping create the ability for the modularization of design systems is just one of the noticeable impact he has had on the Mendix product. Jason has changed the playing field of UX within Mendix projects by organizing a unified voice of the UX community and changing how UX is perceived through his many videos and blogs, propelling UX knowledge and best practices within the Mendix ecosystem. This has earned him the exclusive title of Mendix UX MVP, globally.
Read more
From the Publisher -
If you enjoyed this article you can find more like it on our Medium page. For great videos and live sessions, you can go to MxLive or our community Youtube page.
For the makers looking to get started, you can sign up for a free account, and get instant access to learning with our Academy.
Interested in getting more involved with our community? Join us in our Slack community channel.
