1

I'm working on a form with about 30 input fields as part of a medical application. It allows the user to register patient data. 8 out of 30 fields are required, so our users are literally trying to find the required fields. These fields are indicated by an asterisk and are displayed scattered across the form. The form is logically grouped by categories (personal details, address, insurance, general practitioner, etc.)

Below I have 3 options. Unfortunately I cannot upload the whole form, but imagine the total form as having 6 of these blocks.

Option 1: Asterisk at end of input field

enter image description here

Option 2: Asterisk before the input field

enter image description here

Option 3: Asterisk before label

enter image description here

What is the best place for these asterisks to allow users to speed up their scan for required fields?

1

As close to the data entry as possible

The notification should be as close to where the users are actually entering data, as that makes it easiest to notice when it really matters. "Designers" may not like that because it is ugly. But it is functional and sometimes you need to have function over form.

Option 2: Asterisk before the input field

In theory, options 1 and 2 both put the notification next to the field. But option 1 puts it at the far end, and for a short field the user may never really focus (in the literal eyeball sense, not the "HTML field" sense) on the end of the field. Even if they do, they will see it sooner if it is at the beginning of the field.

Make it REALLY obvious

Three things you should consider to make things more obvious to the users:

  • Add a note at the top of the form like "* = Required field". Yes, * is the default for "required field", but not everyone knows that, especially casual users, and there is nothing inherently special about * and * has many meanings in other contexts (formatting in markdown, multiplication in most computer languages, footnote marker, etc.), so a reminder wouldn't hurt.

  • Mouseover of the * to show required. If you don't put a general reminder note at the top, mouseover text makes it clear to any curious user what the * means.

  • Colored border or background. I like colored backgrounds on input fields (e.g., very light yellow or blue) as it makes the fields stand out much better on many devices. If you use multiple colors (e.g., green = required, yellow = optional, red (after failed submission) = error) then that provides reinforcement. Explanation on-screen isn't really needed for this. The page might start with every required field light green and with an * to the left and every optional field light yellow. On failed submission, any errors (required fields that were empty or any field with invalid data) turns light red with an error message displayed as well.

1

Since your form is in RTL script (left-to-right), the best option would be to add the asterisk right after the label text.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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