11

I have a form in which there the user is required to enter either a postal code OR select a city in order to do a search. If they fail to enter either and submit the form, currently the form highlights both fields in red. Some members of my team think this is confusing to the user.

My suggestion was that as soon as the user selects one field, the other field's highlight disappears. The fields are next to each other on the form. Is this the best way to handle the error validation or is there a better way to avoid confusion for the users?

Either/or required fields

  • 7
    Off topic: why not just strip out spaces rather than explain to the user that they can't use spaces in the postcode? This is a trivial operation to perform. It is a pet peeve of mine (with phone numbers, too). – user31143 Dec 9 '15 at 15:16
  • 3
    @dan1111 I've always been told that in our organisation we're not allowed to change the user's data, but I'll check again because it also bugs me! Thanks. – Kate Lewis-Buckley Dec 9 '15 at 15:56
  • You could store both the original and a version with spaces stripped...not that big of a deal though. – user31143 Dec 9 '15 at 16:16
  • 1
    Just a thought chiming in: Helper text is a flawed design, because explaining specifically how to input data shouldn't be a thing. It should allow them to input it however they see fit, and the form should just accept it. – Majo0od Dec 10 '15 at 16:52
12

You could better communicate which information is essential by reorganizing the form.

I would move postcode and city to a single line, and put it near name, since these seem to be the crucial fields:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Also, I agree with BrunoH that a message explaining any validation errors helps.

  • Yep, this would make complete sense! Thanks for the suggestion. I will look to implement this in the next release for sure. – Kate Lewis-Buckley Dec 9 '15 at 15:34
  • 1
    A thought: Why do you need both, @KateLewis-Buckley when Postcode will get you the city? – Majo0od Dec 10 '15 at 16:55
10

Since the validation is for two fields they should be marked together. I prefer, when the UI says what's wrong. So I sugest to have a message below the validation like "Please fill in either a city or postal code". Something like this:

enter image description here

The highlight should only disappear, when the conditions are met.

  • Currently, the error messages show together at the top of the form in red and the fields just highlight below. Just the way our SDK work, but I agree that this makes more sense. I'll see if this can be implemented. Thanks for the input. – Kate Lewis-Buckley Dec 9 '15 at 15:36
  • I'm not sure I like this. Because now I'm not sure what errors will pop up and what mysterious combo I have to do next to get it right. Why not tell them straight up what to fill out? – Majo0od Dec 10 '15 at 16:54
6

I'll try to improve on the suggestions by illustrating the error scenario and suggesting a different form layout. enter image description here

  • The fieldset is appropriate when the fields are related. In this case the mandatory nature of the last name, city or postal code creates the relation. The first name comes first as it is logically tied to the last name field but stays out of the fieldset.
  • Do you have a user case where a clear button is needed? Or are you following a convention? The style of both buttons are exactly the same and they are placed too close to each other. The user might accidentally erase all the form and you are forcing him to read each one to make the right decision. Remember that the "ok" button varies position depending on operating system so you may see many user's on MacOs pushing the button on the right. I would post a link here but not enough rep so see Luke W's web form design book to read his research on this. If you absolutely have to have both of them set them farther apart and create more visual differentiation such as background color and font size.
  • Move the required fields information to the top of the form so it informs the user before he starts to fill the form. Think about moving the asterisk close to the label and not the field. There is no essential information in empty field forms so the asterisk may be missed when placed on the right of the field. Remember that before reading, the user scans the page for important information and an asterisk alone carries low visual weight.
  • You can have the postal code be treated with a mask in the input field without any instruction to the user. This does not change the user data but rather takes extra work away from the user and makes the form easier to fill. This also adheres to error prevention.
  • Make sure the user notices the change on the screen if the form throws an error in order to avoid change blindness. Be aware that the user's eye focus is not on the form fields when he pushes the submit button.
  • In order to align with the development team you could think of creating a form error framework. It is important to be consistent in the style of error messages throughout the system regarding message placement, message text font styles, field highlighting and all other aspects of visual communication of error messages. This is good for the user as it adheres to consistency and good for the development team as it allows for one solution to all form fields in the system.
  • The placement of the error message can be tricky and you may have to make concessions. Never put the error message inside the field because it erases the data input by the user. The message should be as close as possible to the field in question.
0

If you only have one piece of information, you could conceivably have only one field, called "City or postal code". In your business logic, if it matches ^[A-Z]\d[A-Z]\s?\d[A-Z]\d$ then search on postal code, and if it's not search on city. Optionally, make it better match postal code standards.

You definitely want to allow it to have spaces and lower case too. It's so easy to implement and will make your customers' life better. =)

0

If these were any two other fields my answer would be much different, but due to the correlation it makes it much easier.

1. Proper order

Zip Code should always be asked first, users will always opt to fill that out instead of their possible 16+ character city name (Yes, I'm talking about you Kleinfeltersville, PA!).

2. Stick with popular conventions

Most users will expect once the Zip Code has been entered the City field should automatically update to the proper city.

3. Or combine them to one field

It's not uncommon we see Zip Code/City combined to a single input, most search bars support this (I.e. Google Maps, RedFin, Zillow etc.) and it's very easy for the back-end to parse what the user decided to use.

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.