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.

Within a form, is it enough to just display an icon next to the required field and void the instruction text saying "* required fields"? In addition to that, is there a specific style (shape, color) for the required field icons?

share|improve this question
    
The * is like a footnote marker and the legend is the footnote. When you don't have a legend users are possibly still trying to find it. –  Marco Jul 24 '13 at 11:28

6 Answers 6

up vote 8 down vote accepted

Required field markers, IMHO, are anti-patterns that have morphed into a user expectation and now not having them is actually a problem.

I've come to the conclusion in user testing I've seen. I've long been a proponent of a) never show optional fields if you can avoid it--only ask for what you need or b) if you must ask for an optional field, make it the exception, and instead of marking required fields, just mark the optional field.

Alas, in user testing, invariably, users kept mentioning that they didn't know which fields to fill out since the required identifier was missing.

So, as much as I hated to add them, we did.

Personally, I'd still suggest trying the former and only go with the latter if need be. In general:

  • only ask for information that you absolutely require
  • and then, note that 'all fields required' somewhere prior to the form.

If that fails testing, then consider sticking in the required field markers.

In additional to that, is there a specific style (shape, color) for the required field icons

Again, I'd call it more of an anti-pattern, but it appears that users tend to expect a red asterisk. (Behind the scenes you can then add a TITLE attribute or make it a tooltip to expose the 'required' text).

share|improve this answer
    
Just to fill in some background for my specific case, I have a service estimate request form that requires one or two important information (contact info), but it'll greatly increase the accuracy of the estimate if more detail is provided. Therefore I'd love to encourage the user to enter more information on top of the required field. –  Poyi Jul 22 '13 at 20:52
    
I like the idea of marking the optional fields instead of required field since the required field seems forced. What are your thoughts on the option field style by the way, in terms of color, shape or location? –  Poyi Jul 22 '13 at 20:55
2  
@Poyi in terms of style of the field, I don't know if I have a strong opinion. In general, I'd make it part of the field label: "Field Label (Optional):" –  DA01 Jul 22 '13 at 21:08
    
@Poyi Could still go with an asterisk, but in grey or blue etc. - at least avoid red, since that is associated with required fields by convention (imho). –  Alok Jul 23 '13 at 22:02
    
@Alok that's certainly an option--just be cognizant of color-blindness issues. –  DA01 Jul 23 '13 at 22:14

Required field label has some forcing accent also user can feel that they are treated as a little foolish person. The label sounds like "I said write it here! Don't you understand?". It is not very user-friendly.

So if you try to be more friendly to user, don't use such labels. Leaving only relevant and reasonable (small) amount of field will make form filling process both easy and understandable. Of course, implement gently error messages, which don't abuse users.

The other thing with instructional-styled forms. It could be some government sites, visa registration, etc. where

  • user is not expert (lack of understanding)
  • price of errors is rather high (time or money)

Though this doesn't mean the instructional style should be rude, just be a little more demanding (for user's sake).

share|improve this answer

Could you split the form into two sections? This would stop the user having to check required/not required for each field and they can concentrate on the content.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

You could go even further and have a submit option halfway through the form.

Something like:

mockup

download bmml source

share|improve this answer
    
+1, but it might be worth elaborating on the usability benefits of this approach. –  Brendon Jul 23 '13 at 10:53
    
It isn't suitable for long forms with some groups. –  Igor Gubaidulin Jul 23 '13 at 11:04
    
@Igor, for long forms if the groups are big enough you can sort the items per group by required/optional, however I agree for complex forms it's not suitable. –  bendataclear Jul 23 '13 at 11:11
    
I would recommend against separating the required and optional fields unless the user's workflow allows for it. For instance, if the user has completed all the required fields and then must go back to some earlier documentation to fill in an optional field; that's making the user work harder than if they had been able to enter the required and optional content together. There have been many times I wanted to separate required and optional fields, but the workflow made it problematical. –  wootcat Jul 23 '13 at 19:14

If you chose to go with an icon, you might get away with a tooltip that appears when the icon is hovered over. However, It needs to be obvious that the icon means "required" and that you can interact with it. Compared to the effort to show the icon along with the words "required field" may not be cost effective.

I would go with red - it's pretty much the de facto standard. A simple asterisk is common.

A few more thoughts: I would suggest any error messages appear next to the problematic field - if an email address is invalid, tell me that next to the email field. If you show that message at the top of the form, I have to go hunting for the erroneous field.

Also, try showing such error messages as soon as the field is skipped over (the field gets focus and loses it without a satisfactory input) or as soon as an error is made, like a zip code with too few digits. Letting users correct errors one at a time is less intimidating and jarring than a screen full of 18 error messages.

share|improve this answer

Some quotes from L. Wroblewski's Web Form Design: Filling in the Blanks:

  • Try to avoid optional input fields in forms.
  • If most of the inputs on a form are required, indicate the few that are optional.
  • If most of the inputs on a form are optional, indicate the few that are required.
  • When indicating what form fields are either required or optional, text is the most clear. However, the * symbol is relatively well understood to mean required.
  • If you do use * to indicate required fields, don’t forget a legend that explains what it indicates.
  • Associate required or optional indicators with input labels to give people an easy way to see which questions need to be answered.
share|improve this answer

I have found, the best way to do it is to do the opposite. Mark optional fields with a small (optional) note. You should have almost all required fields and almost 0 optional fields if the form is created properly.

share|improve this answer

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.