Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

This is the first part of the form, please bear with the Swedish language, I think you get the main idea anyways


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.

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.

Alot of comments have resulted in a move of the asterisks to the right.

share|improve this question
    
The underlining makes me think I can mouse over the labels for more info in a tool-tip or something of the sort. It doesn't make me think that they are required necessarily. The revised approach you posted isn't exactly how I'd approach it, but it is definitely stronger. –  DesignerGuy Mar 9 '12 at 7:51
1  
Thanks for your comment. I have revised the form again after a lot of comments, people in general seems to want the asterisk on the left hand side of the label. I think it is time for an update! –  dotmartin Mar 9 '12 at 8:11
    
If those fields are optional, why not just put them on setting page and inform user to fill in additional information later? So by default only required input fields are shown to the user. –  Ivan Chau Nov 29 '13 at 2:54
add comment

9 Answers 9

up vote 18 down vote accepted

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.

enter image description here

Another approach

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

share|improve this answer
2  
+1 for the suggestion to only mark the optional fields, not the required ones. That's the approach I like to use and it's far more friendly to the user. Nobody likes filling in forms, so why do people insist on telling them "you are required to do this" rather than the much more friendly "if you want you can fill in these too, it's up to you". –  JonW Mar 6 '12 at 9:22
    
I do realize that this is kind of unconventional, and as mentioned by @JonW below, the <abbr> tag already uses the the dotted underline. As I mentioned I have tried a couple of different techniques described above but none of them worked for me since it just made the whole thing unreadable. Maybe I should just suck it up and go with the asterisk since it is a form of defacto standard, as you have mentioned. I'll look into the mark as optional too, however I have kind of a hard time seeing how this would be readable in my case. As always I'm impressed by the effort people put into this! –  dotmartin Mar 6 '12 at 9:28
    
@MFrank2012 Why do you always put punctuation on the wrong side of the space? Eg. You write "your decision .The" instead of "your decision. The". Just curious :-) –  Rahul Mar 6 '12 at 9:33
    
@Rahul probably for teh same reason that I am incapable of writing the word 'the' correctly. –  JonW Mar 6 '12 at 10:11
    
I have changed it to an asterisk in a highlighted color we use on other elements on the site, but I have put the whole thing to the left of the label. It came out quite good I think, is it a bad thing to bend the convention that the asterisk is most often going on the right hand side of the label for the sake of readability? (see new screenshot in question) –  dotmartin Mar 6 '12 at 10:16
show 2 more comments

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.

share|improve this answer
1  
+1 for mentioning the abbr-tag. It might not fit in here, but it is definitely a useful tag that deserves more attention than it has been given! –  dotmartin Mar 6 '12 at 9:35
    
@dotmartin You're right; it's useful only if it's used correctly. This situation probably isn't correct for the tag usage (it's not actually signifying an abbreviation for starters!) My response isn't really recommending it for this purpose but highlighting what the dotted-underline represents. –  JonW Mar 6 '12 at 9:56
    
This is what I was here to mention! –  Nic Mar 6 '12 at 13:43
add comment

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".

share|improve this answer
    
Nice addition to the discussion! This is definitely something to think about when designing a webapp such as the one I am working on. Thanks @AndrewLeach! –  dotmartin Mar 6 '12 at 14:22
add comment

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.

share|improve this answer
add comment

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".

share|improve this answer
    
It might just be me, but I loathe the word 'mandatory' in this usage. Nobody says mandatory in conversation, it's a pure coding term that should remain as a coding term, not displayed on websites. (Yes, I realise you're not advocating saying it on the website, I just feel the need to rant when I see that word in this context!) –  JonW Mar 6 '12 at 12:09
    
Swedish, but thanks for noticing.. :) Regarding the comment from @JonW In my explanation of the form I use a phrase that could roughly be translated to Fields marked with an asterisk(*) must be filled out before you can register your account. –  dotmartin Mar 6 '12 at 12:23
    
@dotmartin Actually that's a good point. Perhaps the word Mandatory (or it's Swedish equivalent) is actually used in general usage. Apologies for being so English-centric there! (slapped wrist). –  JonW Mar 6 '12 at 12:29
    
@JonW, I would not say that the word mandatory (or obligatorisk in Swedish) is commonly used on a conversation basis. That's why I made the choice to re-write it and use other words, make it a little bit friendlier if you will. No slap on wrist needed. I like a good discussion, hey that's why I am here! –  dotmartin Mar 6 '12 at 12:35
2  
@dotmartin - the language is important, because it might be that Swedish (sorry - the tags looked dutch, but hte heading is definately more swedish) speakers are used to seeing words underlined in dashes and so can cope. The cultural context is critical, which is why the principles are so important. So, make it conversational, make it friendly, and make it clear. What that actually means in a particular context may be very different from what it means in another context. –  Schroedingers Cat Mar 6 '12 at 13:31
show 1 more comment

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:

enter image description here

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:

enter image description here

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:

enter image description here

An example from ebay:

enter image description here

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

share|improve this answer
add comment

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).

share|improve this answer
add comment

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! ;)

share|improve this answer
add comment

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 ).

share|improve this answer
    
Thanks for your reply @jelumalai! I have considered marking out the optional fields. However the screenshots does not show the whole thing, and there are quite a lot of fields that are optional. –  dotmartin Mar 7 '12 at 8:23
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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