Blog

Posts tagged Design Thinking
Form Fields (Asterisk vs. Required)
UtQbD.png

My colleague recently shared an article on CSS-Tricks on Twitter that the red asterisks that are often associated with form elements to imply that they are required make users more fearful. And that it increases the risk of errors and reduces the form completion. For those who are not familiar, when you are filling out form fields there are usually labels on top of the field and for those fields that are required to fill out, they usually have a little red asterisk on the side to tell the users that they HAVE to fill it out.

https://twitter.com/css/status/1037327751705976833

and the link below is a supporting article on this argument. 

https://uxdesign.cc/form-field-required-vs-optional-9b4d7cdbf400

1_eHuk4BVjS9n_-9I8vbIVaA.jpg

I don't completely agree but I also do see the point that's being made here. As a user experience designer it is our duty to provide the users with the right tools and information so they can complete their task. In this case, it means we need to provide a label, placeholder text for examples, and hint text to support their process of filling out the information they need to complete.

The two approaches introduced in Medium article are both very interesting. The first is introducing field with the use of asterisk and the second one is suggesting to mark an optional field as "optional" and leave the required field as is with just its own label. Two downsides to the second approach are that after you submit a form and come back as the error it might throw off the user since it wasn't "labeled" as required, another downside is the indication of requirement.

Screen Shot 2018-09-05 at 10.18.15 AM.png

*Fearful to make an error means they aren’t provided with enough context to fill that field out. 

If a user is uncomfortable, feeling restricted that means they are scared of the outcome of the input field. They are scared that they will make an error because it does contain what the product wants a user to input. I personally have encountered the situation where when I create a password it keeps throwing me an error messaging, but I had no clue what I was doing wrong. Below is an example of password creation with proper hint messaging, as you hit individual criteria of password creation, it gives you a green light to tell you that you are doing something right.

The problem isn't the red shining asterisk, the problem is not explaining to the users how to fill out the field. If a field gets as complex as password creation users will need extensive hint and instruction.