Dashed underline on required fields

Question

I am working on a massive user registration form for a web application for my company. We have been discussing different ways of alerting the user that a field is required for registration. As of right now I have suggested to use a dashed bottom border on the labels of the required fields.

I have tried to make the text bold or adding an asterisk (*) after the label, but I found that it just cluttered the whole thing down. I choose to make it dashed to differentiate it from links which are underlined on the site. It is important that the form remains solid and keeps its rigid look and the regularity of the different labels are crucial in doing so.

I have an explanatory text that tells the user that the dashed labels indicate a required field.

My question boils down to this: Is this okay from a user experience point of view? Are there any other recommended practices for solving this, given the above requirements for regularity and ease of reading?

---

Edit: A revised approach

I have placed the asterisks on the left hand side of the labels in order to make the whole thing more readable.

---

Edit: A revised version of the revision

After a lot of good comments on where to place the asterisks I finally decided to place it on the right hand side. It took some time getting it to look good and maintaining the right adjusted column.

Answer 1

Though I know you are not a fan of using the standard * as a way to highlight mandatory form fields ,I would strongly urge you reconsider your decision .The reason being that having the * (in front of the label or field) has become some what of a de-facto standard with regards to a form field being mandatory and coming up with a new design might just confuse people about whether its mandatory or not.

Another alternative is that you explicitly mention that a field is required but then since you said your form is already pretty large,you are just adding more repetitive text.

Lastly underlines are generally used for titles and links (Refer to this excellent question by Jon W) and having your label fields underline might cause some confusion about whether they are links and might result in people trying to click or hover over them

What's the best way to highlight a Required field on a web form before submission? - Some good thoughts here

This article on smashing magazine proposes an alternate option,to quote what it has to say :

You can position required field markers in one of two places:

• Next to labels, allowing users to scan the form quickly,
• Next to or inside input fields;

if the fields are the same width, users will be able to scan the form quickly.

When deciding on which fields to require, take into account the total number of fields in the form. If the form is complex and most of its fields are required, the user will likely see it as unnecessary clutter.

Another approach

Here is an article I found interesting - Always Mark Optional Form Fields Not Required Ones

Answer 2

Dotted Underlines are usually rendered using <abbr> which signifies an abbreviation with the full un-abbreviated text displaying as a tooltip.

Your route may work provided there is a tooltip available when hovering over the dotted-underline text, saying 'Required Field' or even better to give a full breakdown of that field information: "Please enter you address (Required)".

see W3 example for details of this tag.

If you are going to break from the norm then you need to provide the user with as many clues as possible to keep them in the picture.

Answer 3

There is an accessibility issue to consider. Screen-readers can read out "asterisk" or "star" but are more likely to have trouble with dotted-underlines. This may be one reason to use an image of a star with appropriate alt text to be read out, "You need to enter this information".

Answer 4

I would be very careful with this approach, the standard and established approach is using the *. Most users are familiar with this pattern and it requires no or minimal mental effort for them to comprehend it, any other non-conventional style on the contrary will force them to look for explanation (=unnecessary mental effort)

Conventions can be bended, but there must be a really good justification for bending them. In other words, unconventional approach should provide truly superior solution in order to be worth of breaking conventions.

Answer 5

The edited approach with asterisks is much better. I have no issue with doing things differently, as long as there is some benefit. I do have a problem with the underlines though, because they are visually very distracting. It does make it harder to read ( not that I can read Dutch [?] anyway ), because it is too closely associated with the text.

The advantage of the asterisks is that they are visually detatched, so it is easier to see "fields that are mandatory" and "this field title".

Answer 6

Every time you implement a new approach for your clients, you are probably confusing them and it requires more mental efforts to comprehend what you have implemented. Dashed lines can’t be well received by users who have disabilities. Asterisk is good for some specific circumstances though. When most of our form’s fields are mandatory then asterisk will clutter the form. Look at the picture below:

One of the reasons it seems cluttered is that asterisks have not lined up and it requires more time from user to scan whether it’s mandatory or not. We can enhance the form by putting asterisks on the right side of the form (for LTR languages). The output looks something like below:

IMHO it’s not good either, because they still clutter the form. In this specific situation that most of the form fields are required it’s better to mention the fields which are not required. The best approach for your situation would be like the following picture:

An example from ebay:

If most of the form fields are optional then it would be better to mention the required ones.

Answer 7

The dotted lines give me the impression that there is a tool tip with a description there.

I would go with a combination of an icon or symbol next to the label (e.g. [*] or [req] icons) together with a different background for the input controls (e.g. yellow instead of white).

Answer 8

Just a small visualization I built while going through your post:

Just imagine the effect

Create a backout effect on the entire webpage, leaving just the form as enabled.
Either change the background color of the form fields which are required, or
put a blinking effect behind, enough that it should not impact the ux wrongly.

And afterwards, do share your feedback! ;)

Answer 9

From your form fields, most of the fields are mandatory. So you can specify "All fields are mandatory" anywhere in the common place (may be @ top).

Then you can say "optional" for others.

NOTE: From your design, underline always looks like some help text will be shown while mouse hover it ( or ).